'use client' import { useState } from 'react' import type { A11yState } from './state.js' import { useAccessibility } from './AccessibilityProvider.js' export type A11yTexts = { bigCursor?: string close?: string contrast?: string contrastHigh?: string contrastInverted?: string grayscale?: string lineHeight?: string open?: string readableFont?: string reduceMotion?: string reset?: string textSize?: string title?: string underlineLinks?: string } const DEFAULT_TEXTS: Required = { bigCursor: 'Duży kursor', close: 'Zamknij', contrast: 'Kontrast', contrastHigh: 'Wysoki', contrastInverted: 'Odwrócony', grayscale: 'Skala szarości', lineHeight: 'Odstęp między liniami', open: 'Otwórz panel dostępności', readableFont: 'Czytelna czcionka', reduceMotion: 'Wyłącz animacje', reset: 'Resetuj', textSize: 'Rozmiar tekstu', title: 'Dostępność', underlineLinks: 'Podkreśl linki', } export type A11yClassNames = { active?: string button?: string closeButton?: string control?: string label?: string panel?: string resetButton?: string row?: string } /** * Accessibility toolbar: a floating button that opens a panel of options (text * size, line height, contrast, grayscale, underline links, readable font, reduce * motion, big cursor). Choices persist in a cookie and apply as data-attributes * on (the project's CSS styles them). * * Unstyled by default — pass classNames to match the project's design (like * CookieBanner). Wrap the app in first. * * */ export function AccessibilityWidget({ classNames, texts, }: { classNames?: A11yClassNames texts?: A11yTexts }) { const { reset, set, state } = useAccessibility() const [open, setOpen] = useState(false) const t = { ...DEFAULT_TEXTS, ...texts } const cn = classNames ?? {} const toggle = (key: K) => set(key, !state[key] as A11yState[K]) const isActive = (on: boolean) => (on ? (cn.active ?? '') : '') return ( <> {open && ( )} ) }