53 lines
1.9 KiB
JavaScript
53 lines
1.9 KiB
JavaScript
/**
|
|
* 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
|