accessify-widget-react
v0.1.1
Published
Accessify React component wrapper
Downloads
174
Readme
accessify-widget-react
React component wrapper for Accessify-Widget -- a free, open-source accessibility widget.
Installation
npm install accessify-widget-reactUsage
React
import { AccessifyWidget } from 'accessify-widget-react';
function App() {
return (
<>
<h1>My Application</h1>
<AccessifyWidget
position="bottom-right"
theme="auto"
lang="en"
/>
</>
);
}Next.js (App Router) — empfohlen via next/script
Cross-Platform-Audit (R15-9): Die zuverlässigste Pattern für Next.js mit
SSR + StrictMode ist der direkte Script-Inject via Next's Script-Component
mit strategy="afterInteractive". Vermeidet jeden useEffect-Double-Mount-
Quirk und ist unter reactStrictMode: true getestet:
// app/layout.tsx
import Script from 'next/script';
const SITE_KEY = process.env.NEXT_PUBLIC_ACCESSIFY_SITE_KEY!;
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
{children}
<Script
id="accessify-loader"
src="https://cdn.jsdelivr.net/npm/accessify-widget@latest/dist/loader.min.js"
data-site-key={SITE_KEY}
data-position="bottom-right"
data-theme="auto"
strategy="afterInteractive"
/>
</body>
</html>
);
}Die React-Component-Variante funktioniert auch (siehe unten), ist aber nicht hydration-getestet:
'use client';
import { AccessifyWidget } from 'accessify-widget-react';
export default function A11yProvider() {
return (
<AccessifyWidget
position="bottom-right"
theme="auto"
siteKey={process.env.NEXT_PUBLIC_ACCESSIFY_SITE_KEY}
/>
);
}Dann in app/layout.tsx mit 'use client' einbinden.
Next.js (Pages Router)
// pages/_app.tsx
import { AccessifyWidget } from 'accessify-widget-react';
import type { AppProps } from 'next/app';
export default function App({ Component, pageProps }: AppProps) {
return (
<>
<Component {...pageProps} />
<AccessifyWidget position="bottom-right" theme="auto" />
</>
);
}Props
| Prop | Type | Default | Description |
|-----------------|------------------------------------------------------------|-----------------|--------------------------------------------|
| position | 'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left' | 'bottom-right' | Where the widget button appears |
| theme | 'auto' \| 'light' \| 'dark' | 'auto' | Color theme for the widget panel |
| lang | string | undefined | Language code (e.g., 'en', 'de') |
| openRouterKey | string | undefined | OpenRouter API key for AI-powered features |
| features | string[] | undefined | List of feature IDs to enable |
| zIndex | number | undefined | Custom z-index for the widget |
Framer
A Framer code component is included at src/FramerComponent.tsx. It exposes position, theme, language, and API key as Framer property controls for use in the Framer visual editor.
Host-DOM-Injections (R15-4)
Das Widget injectet einen Helper ins Host-DOM (außerhalb des Shadow-Root):
<a class="accessify-skip-link">— barrierefreie Skip-Navigation, damit Tastatur-User direkt zum Widget-Trigger springen können (siehedelegatesFocus- Hintergrund inpackages/core/src/index.ts:120). Visuell verborgen, nur bei Tab-Fokus sichtbar.
Wenn Ihre Seite bereits einen Skip-Link hat oder Ihre Site-CSS die Klasse
accessify-skip-link überschreibt, können Sie das per data-accessify-skip-link="false"
am Loader-Tag deaktivieren (coming soon — Issue tracked als R15-4).
License
MIT