42 lines
1.3 KiB
TypeScript
42 lines
1.3 KiB
TypeScript
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;
|