Next.js

حط الـ component في الـ root layout بتاعك. الـ React entry متعلّم عليها «use client» من الأول.

في الصفحة دي

الـ packageopen-accessibility-widgetمحتاج React 18+

التسطيب

npm install open-accessibility-widget

الاستخدام

import { AccessibilityWidget } from "open-accessibility-widget/react";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <AccessibilityWidget position="right" statementUrl="/accessibility" />
      </body>
    </html>
  );
}

ملاحظات

بيشتغل جوه layout معمول كـ Server Component، من غير أي wrapper من عندك.
مفيش حاجة بتشتغل على السيرفر: الـ widget بيبدأ في المتصفح بعد الـ hydration.
مع CSP معتمدة على nonce، مرّر الـ nonce بتاع الـ request في nonce.
الموقع ده معمول بـ Next.js وبيستخدم الـ component في الـ root layout بتاعه.

الـ accessibility statement

مرّر statementUrl عشان تحط لينك للـ accessibility statement بتاعك في الـ footer بتاع اللوحة.

عدّل الصفحة دي على GitHub