Added accessibility support
This commit is contained in:
+188
@@ -0,0 +1,188 @@
|
||||
'use client';
|
||||
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
||||
import { useState } from 'react';
|
||||
import { useAccessibility } from './AccessibilityProvider.js';
|
||||
const DEFAULT_TEXTS = {
|
||||
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'
|
||||
};
|
||||
/**
|
||||
* 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 function AccessibilityWidget({ classNames, texts }) {
|
||||
const { reset, set, state } = useAccessibility();
|
||||
const [open, setOpen] = useState(false);
|
||||
const t = {
|
||||
...DEFAULT_TEXTS,
|
||||
...texts
|
||||
};
|
||||
const cn = classNames ?? {};
|
||||
const toggle = (key)=>set(key, !state[key]);
|
||||
const isActive = (on)=>on ? cn.active ?? '' : '';
|
||||
return /*#__PURE__*/ _jsxs(_Fragment, {
|
||||
children: [
|
||||
/*#__PURE__*/ _jsx("button", {
|
||||
"aria-expanded": open,
|
||||
"aria-label": t.open,
|
||||
className: cn.button,
|
||||
onClick: ()=>setOpen((o)=>!o),
|
||||
type: "button",
|
||||
children: /*#__PURE__*/ _jsx("span", {
|
||||
"aria-hidden": "true",
|
||||
children: "♿"
|
||||
})
|
||||
}),
|
||||
open && /*#__PURE__*/ _jsxs("div", {
|
||||
"aria-label": t.title,
|
||||
className: cn.panel,
|
||||
role: "dialog",
|
||||
children: [
|
||||
/*#__PURE__*/ _jsxs("div", {
|
||||
className: cn.row,
|
||||
children: [
|
||||
/*#__PURE__*/ _jsx("span", {
|
||||
className: cn.label,
|
||||
children: t.textSize
|
||||
}),
|
||||
/*#__PURE__*/ _jsx("div", {
|
||||
className: cn.control,
|
||||
children: [
|
||||
0,
|
||||
1,
|
||||
2,
|
||||
3
|
||||
].map((n)=>/*#__PURE__*/ _jsxs("button", {
|
||||
className: isActive(state.textSize === n),
|
||||
onClick: ()=>set('textSize', n),
|
||||
type: "button",
|
||||
children: [
|
||||
"A",
|
||||
n > 0 ? '+'.repeat(n) : ''
|
||||
]
|
||||
}, n))
|
||||
})
|
||||
]
|
||||
}),
|
||||
/*#__PURE__*/ _jsxs("div", {
|
||||
className: cn.row,
|
||||
children: [
|
||||
/*#__PURE__*/ _jsx("span", {
|
||||
className: cn.label,
|
||||
children: t.lineHeight
|
||||
}),
|
||||
/*#__PURE__*/ _jsx("div", {
|
||||
className: cn.control,
|
||||
children: [
|
||||
0,
|
||||
1,
|
||||
2
|
||||
].map((n)=>/*#__PURE__*/ _jsx("button", {
|
||||
className: isActive(state.lineHeight === n),
|
||||
onClick: ()=>set('lineHeight', n),
|
||||
type: "button",
|
||||
children: n === 0 ? '—' : '≡'.repeat(n)
|
||||
}, n))
|
||||
})
|
||||
]
|
||||
}),
|
||||
/*#__PURE__*/ _jsxs("div", {
|
||||
className: cn.row,
|
||||
children: [
|
||||
/*#__PURE__*/ _jsx("span", {
|
||||
className: cn.label,
|
||||
children: t.contrast
|
||||
}),
|
||||
/*#__PURE__*/ _jsxs("div", {
|
||||
className: cn.control,
|
||||
children: [
|
||||
/*#__PURE__*/ _jsx("button", {
|
||||
className: isActive(state.contrast === 'high'),
|
||||
onClick: ()=>set('contrast', state.contrast === 'high' ? 'default' : 'high'),
|
||||
type: "button",
|
||||
children: t.contrastHigh
|
||||
}),
|
||||
/*#__PURE__*/ _jsx("button", {
|
||||
className: isActive(state.contrast === 'inverted'),
|
||||
onClick: ()=>set('contrast', state.contrast === 'inverted' ? 'default' : 'inverted'),
|
||||
type: "button",
|
||||
children: t.contrastInverted
|
||||
})
|
||||
]
|
||||
})
|
||||
]
|
||||
}),
|
||||
[
|
||||
[
|
||||
'grayscale',
|
||||
t.grayscale
|
||||
],
|
||||
[
|
||||
'underlineLinks',
|
||||
t.underlineLinks
|
||||
],
|
||||
[
|
||||
'readableFont',
|
||||
t.readableFont
|
||||
],
|
||||
[
|
||||
'reduceMotion',
|
||||
t.reduceMotion
|
||||
],
|
||||
[
|
||||
'bigCursor',
|
||||
t.bigCursor
|
||||
]
|
||||
].map(([key, label])=>/*#__PURE__*/ _jsxs("div", {
|
||||
className: cn.row,
|
||||
children: [
|
||||
/*#__PURE__*/ _jsx("span", {
|
||||
className: cn.label,
|
||||
children: label
|
||||
}),
|
||||
/*#__PURE__*/ _jsx("button", {
|
||||
"aria-pressed": Boolean(state[key]),
|
||||
className: `${cn.control ?? ''} ${isActive(Boolean(state[key]))}`,
|
||||
onClick: ()=>toggle(key),
|
||||
type: "button",
|
||||
children: state[key] ? 'ON' : 'OFF'
|
||||
})
|
||||
]
|
||||
}, key)),
|
||||
/*#__PURE__*/ _jsx("button", {
|
||||
className: cn.resetButton,
|
||||
onClick: reset,
|
||||
type: "button",
|
||||
children: t.reset
|
||||
}),
|
||||
/*#__PURE__*/ _jsx("button", {
|
||||
className: cn.closeButton,
|
||||
onClick: ()=>setOpen(false),
|
||||
type: "button",
|
||||
children: t.close
|
||||
})
|
||||
]
|
||||
})
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
//# sourceMappingURL=AccessibilityWidget.js.map
|
||||
Reference in New Issue
Block a user