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,53 @@
+/**
+ * Accessibility preferences state. Each option maps to a data-attribute on
+ * <html> (e.g. data-a11y-contrast="high"); the PROJECT's CSS reacts to those
+ * attributes. The plugin sets the attributes and persists the choice — it does
+ * NOT ship styles, so it never fights the project's design.
+ */ export const A11Y_DEFAULT = {
+    bigCursor: false,
+    contrast: 'default',
+    grayscale: false,
+    lineHeight: 0,
+    readableFont: false,
+    reduceMotion: false,
+    textSize: 0,
+    underlineLinks: false
+};
+export const A11Y_COOKIE = 'a11y-prefs';
+export const A11Y_COOKIE_MAX_AGE = 60 * 60 * 24 * 365 // 1 year
+;
+/** Serialize for the cookie (compact). */ export function serializeA11y(state) {
+    return JSON.stringify(state);
+}
+/** Parse from the cookie; falls back to defaults on any bad value. */ export function parseA11y(raw) {
+    if (!raw) {
+        return A11Y_DEFAULT;
+    }
+    try {
+        const parsed = JSON.parse(raw);
+        return {
+            ...A11Y_DEFAULT,
+            ...parsed
+        };
+    } catch  {
+        return A11Y_DEFAULT;
+    }
+}
+/**
+ * Maps state → data-attributes to set on <html>. Returns { attr: value|null };
+ * null means remove the attribute (option is at default). The project's CSS
+ * targets these, e.g. `[data-a11y-contrast="high"] { … }`.
+ */ export function a11yAttributes(state) {
+    return {
+        'data-a11y-contrast': state.contrast !== 'default' ? state.contrast : null,
+        'data-a11y-cursor': state.bigCursor ? 'big' : null,
+        'data-a11y-font': state.readableFont ? 'readable' : null,
+        'data-a11y-grayscale': state.grayscale ? 'on' : null,
+        'data-a11y-line': state.lineHeight > 0 ? String(state.lineHeight) : null,
+        'data-a11y-motion': state.reduceMotion ? 'reduce' : null,
+        'data-a11y-text': state.textSize > 0 ? String(state.textSize) : null,
+        'data-a11y-underline': state.underlineLinks ? 'on' : null
+    };
+}
+
+//# sourceMappingURL=state.js.map