Added accessibility support

2026-09-26 22:29:53 +02:00
parent fa2b607979
commit 827cd9bcbc
29 changed files with 1021 additions and 3 deletions
@@ -0,0 +1,41 @@
+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;
+};
+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 <html> (the project's CSS styles them).
+ *
+ * Unstyled by default — pass classNames to match the project's design (like
+ * CookieBanner). Wrap the app in <AccessibilityProvider> first.
+ *
+ *   <AccessibilityWidget classNames={{ button: 'a11y-btn', panel: 'a11y-panel' }} />
+ */
+export declare function AccessibilityWidget({ classNames, texts, }: {
+    classNames?: A11yClassNames;
+    texts?: A11yTexts;
+}): import("react/jsx-runtime").JSX.Element;