@intside/accessibility 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +245 -0
- package/bin/cli.mjs +283 -0
- package/package.json +29 -0
- package/react/AccessibilityButton.tsx +51 -0
- package/react/AccessibilityFab.tsx +99 -0
- package/react/AccessibilityModal.tsx +328 -0
- package/react/engine.ts +319 -0
- package/react/icons.tsx +19 -0
- package/react/index.ts +32 -0
- package/react/package.json +17 -0
- package/vanilla/acsblt-accessibility-head.js +17 -0
- package/vanilla/acsblt-accessibility.css +159 -0
- package/vanilla/acsblt-accessibility.js +383 -0
- package/vanilla/wordpress-example.php +53 -0
package/react/engine.ts
ADDED
|
@@ -0,0 +1,319 @@
|
|
|
1
|
+
/* ================================================================
|
|
2
|
+
ACSBLT · Accessibilité — moteur (sans dépendance React)
|
|
3
|
+
Données, persistance localStorage, application des classes sur
|
|
4
|
+
<html>, CSS runtime injecté, icônes. Réutilisable tel quel.
|
|
5
|
+
================================================================ */
|
|
6
|
+
|
|
7
|
+
export type IconName =
|
|
8
|
+
| 'eye' | 'keyboard' | 'zoomIn' | 'type' | 'focus' | 'pause'
|
|
9
|
+
| 'palette' | 'comfort' | 'form' | 'check' | 'shieldChk'
|
|
10
|
+
| 'reset' | 'x' | 'announce';
|
|
11
|
+
|
|
12
|
+
export interface A11yStandard {
|
|
13
|
+
id: string;
|
|
14
|
+
icon: IconName;
|
|
15
|
+
label: string;
|
|
16
|
+
headline: string;
|
|
17
|
+
details: string[];
|
|
18
|
+
cta: string;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
export interface A11yProfile {
|
|
22
|
+
id: string;
|
|
23
|
+
icon: IconName;
|
|
24
|
+
label: string;
|
|
25
|
+
desc: string;
|
|
26
|
+
improves: string[];
|
|
27
|
+
cssClass: string;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
export interface A11ySettingItem {
|
|
31
|
+
id: string;
|
|
32
|
+
label: string;
|
|
33
|
+
type: 'toggle' | 'select';
|
|
34
|
+
default: boolean | string;
|
|
35
|
+
options?: string[];
|
|
36
|
+
cssVar?: string;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
export interface A11ySettingGroup {
|
|
40
|
+
label: string;
|
|
41
|
+
icon: IconName;
|
|
42
|
+
items: A11ySettingItem[];
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
export interface A11yState {
|
|
46
|
+
profiles: Record<string, boolean>;
|
|
47
|
+
settings: Record<string, string | boolean>;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
/* ---- Données ---- */
|
|
51
|
+
export const ACC_STANDARDS: A11yStandard[] = [
|
|
52
|
+
{
|
|
53
|
+
id: 'screen_reader',
|
|
54
|
+
icon: 'eye',
|
|
55
|
+
label: "Lecteur d'écran",
|
|
56
|
+
headline: 'Pris en charge par défaut',
|
|
57
|
+
details: [
|
|
58
|
+
'HTML sémantique et landmarks (header, nav, main, footer)',
|
|
59
|
+
'Attributs aria-label sur tous les éléments interactifs',
|
|
60
|
+
'Textes alternatifs sur toutes les images',
|
|
61
|
+
'Messages dynamiques annoncés via aria-live',
|
|
62
|
+
'Formulaires entièrement labellisés',
|
|
63
|
+
'Aucune information transmise par la couleur seule',
|
|
64
|
+
],
|
|
65
|
+
cta: 'Voir les détails',
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
id: 'keyboard',
|
|
69
|
+
icon: 'keyboard',
|
|
70
|
+
label: 'Navigation clavier',
|
|
71
|
+
headline: 'Pris en charge par défaut',
|
|
72
|
+
details: [
|
|
73
|
+
'Navigation complète au clavier (Tab, Shift+Tab, Entrée, Espace)',
|
|
74
|
+
'Focus visible à tout moment',
|
|
75
|
+
'Ordre de tabulation logique',
|
|
76
|
+
'Fermeture des modales avec Echap',
|
|
77
|
+
'Skip link vers le contenu principal',
|
|
78
|
+
'Aucun piège clavier',
|
|
79
|
+
],
|
|
80
|
+
cta: 'Voir les raccourcis',
|
|
81
|
+
},
|
|
82
|
+
];
|
|
83
|
+
|
|
84
|
+
export const ACC_PROFILES: A11yProfile[] = [
|
|
85
|
+
{
|
|
86
|
+
id: 'low_vision',
|
|
87
|
+
icon: 'zoomIn',
|
|
88
|
+
label: 'Vision réduite',
|
|
89
|
+
desc: 'Texte agrandi, contraste renforcé et zones cliquables plus visibles.',
|
|
90
|
+
improves: ['Taille du texte augmentée', 'Contraste renforcé', 'Focus renforcé', 'Liens soulignés', 'Boutons plus visibles'],
|
|
91
|
+
cssClass: 'a11y-low-vision',
|
|
92
|
+
},
|
|
93
|
+
{
|
|
94
|
+
id: 'dyslexia',
|
|
95
|
+
icon: 'type',
|
|
96
|
+
label: 'Dyslexie / lecture',
|
|
97
|
+
desc: 'Police lisible, espacement augmenté et largeur de texte limitée.',
|
|
98
|
+
improves: ['Police adaptée à la lecture', 'Espacement des lettres', 'Hauteur de ligne augmentée', 'Texte aligné à gauche', 'Paragraphes plus aérés'],
|
|
99
|
+
cssClass: 'a11y-dyslexia',
|
|
100
|
+
},
|
|
101
|
+
{
|
|
102
|
+
id: 'adhd',
|
|
103
|
+
icon: 'focus',
|
|
104
|
+
label: 'Concentration / TDAH',
|
|
105
|
+
desc: 'Réduction des distractions, animations pausées et mode lecture.',
|
|
106
|
+
improves: ['Animations réduites', 'Éléments décoratifs estompés', 'Mode lecture centré', 'Contenu principal mis en avant'],
|
|
107
|
+
cssClass: 'a11y-adhd',
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
id: 'motion',
|
|
111
|
+
icon: 'pause',
|
|
112
|
+
label: 'Sensibilité aux animations',
|
|
113
|
+
desc: 'Suppression des animations et transitions non essentielles.',
|
|
114
|
+
improves: ['Toutes les animations désactivées', 'Transitions supprimées', 'Respect strict de prefers-reduced-motion', 'Autoplay désactivé'],
|
|
115
|
+
cssClass: 'a11y-motion',
|
|
116
|
+
},
|
|
117
|
+
{
|
|
118
|
+
id: 'color',
|
|
119
|
+
icon: 'palette',
|
|
120
|
+
label: 'Daltonisme',
|
|
121
|
+
desc: 'États visuels renforcés par icônes et texte, jamais par couleur seule.',
|
|
122
|
+
improves: ['Liens toujours soulignés', 'États avec icônes + texte', 'Contraste renforcé', 'Aucune info transmise par couleur seule'],
|
|
123
|
+
cssClass: 'a11y-color',
|
|
124
|
+
},
|
|
125
|
+
{
|
|
126
|
+
id: 'senior',
|
|
127
|
+
icon: 'comfort',
|
|
128
|
+
label: 'Senior / confort visuel',
|
|
129
|
+
desc: 'Texte légèrement agrandi, espacement augmenté et formulaires plus lisibles.',
|
|
130
|
+
improves: ['Texte légèrement plus grand', 'Zones cliquables plus grandes', 'Contraste doux', 'Espacement augmenté', 'Formulaires plus aérés'],
|
|
131
|
+
cssClass: 'a11y-senior',
|
|
132
|
+
},
|
|
133
|
+
];
|
|
134
|
+
|
|
135
|
+
export const ACC_SETTINGS: Record<string, A11ySettingGroup> = {
|
|
136
|
+
text: {
|
|
137
|
+
label: 'Texte',
|
|
138
|
+
icon: 'type',
|
|
139
|
+
items: [
|
|
140
|
+
{ id: 'fontSize', label: 'Taille du texte', type: 'select', options: ['Normale', 'Grande', 'Très grande'], default: 'Normale', cssVar: '--a11y-font-scale' },
|
|
141
|
+
{ id: 'lineHeight', label: 'Interligne', type: 'toggle', default: false },
|
|
142
|
+
{ id: 'letterSpacing', label: 'Espacement des lettres', type: 'toggle', default: false },
|
|
143
|
+
{ id: 'readableFont', label: 'Police lisible', type: 'toggle', default: false },
|
|
144
|
+
{ id: 'leftAlign', label: 'Alignement à gauche', type: 'toggle', default: false },
|
|
145
|
+
{ id: 'maxWidth', label: 'Largeur maximale du contenu', type: 'toggle', default: false },
|
|
146
|
+
],
|
|
147
|
+
},
|
|
148
|
+
colors: {
|
|
149
|
+
label: 'Couleurs & contraste',
|
|
150
|
+
icon: 'palette',
|
|
151
|
+
items: [
|
|
152
|
+
{ id: 'highContrast', label: 'Contraste renforcé', type: 'toggle', default: false },
|
|
153
|
+
{ id: 'darkMode', label: 'Mode sombre', type: 'toggle', default: false },
|
|
154
|
+
{ id: 'grayscale', label: 'Niveaux de gris', type: 'toggle', default: false },
|
|
155
|
+
{ id: 'underlineLinks', label: 'Souligner les liens', type: 'toggle', default: false },
|
|
156
|
+
{ id: 'highlightButtons', label: 'Mettre en évidence les boutons', type: 'toggle', default: false },
|
|
157
|
+
],
|
|
158
|
+
},
|
|
159
|
+
motion: {
|
|
160
|
+
label: 'Mouvement',
|
|
161
|
+
icon: 'pause',
|
|
162
|
+
items: [
|
|
163
|
+
{ id: 'reduceMotion', label: 'Réduire les animations', type: 'toggle', default: false },
|
|
164
|
+
{ id: 'noTransitions', label: 'Désactiver les transitions', type: 'toggle', default: false },
|
|
165
|
+
],
|
|
166
|
+
},
|
|
167
|
+
navigation: {
|
|
168
|
+
label: 'Navigation',
|
|
169
|
+
icon: 'keyboard',
|
|
170
|
+
items: [
|
|
171
|
+
{ id: 'strongFocus', label: 'Focus renforcé', type: 'toggle', default: false },
|
|
172
|
+
{ id: 'bigTargets', label: 'Zones cliquables agrandies', type: 'toggle', default: false },
|
|
173
|
+
{ id: 'bigCursor', label: 'Curseur agrandi', type: 'toggle', default: false },
|
|
174
|
+
{ id: 'showShortcuts', label: 'Afficher les raccourcis clavier', type: 'toggle', default: false },
|
|
175
|
+
],
|
|
176
|
+
},
|
|
177
|
+
forms: {
|
|
178
|
+
label: 'Formulaires',
|
|
179
|
+
icon: 'form',
|
|
180
|
+
items: [
|
|
181
|
+
{ id: 'visibleErrors', label: "Messages d'erreur plus visibles", type: 'toggle', default: false },
|
|
182
|
+
{ id: 'fieldHints', label: 'Aides sous les champs', type: 'toggle', default: false },
|
|
183
|
+
{ id: 'errorSummary', label: 'Résumé des erreurs en haut', type: 'toggle', default: false },
|
|
184
|
+
],
|
|
185
|
+
},
|
|
186
|
+
};
|
|
187
|
+
|
|
188
|
+
export const STORAGE_KEY = 'acsblt_a11y_v1';
|
|
189
|
+
|
|
190
|
+
export function loadA11y(): A11yState {
|
|
191
|
+
if (typeof window === 'undefined') return { profiles: {}, settings: {} };
|
|
192
|
+
try {
|
|
193
|
+
const s = window.localStorage.getItem(STORAGE_KEY);
|
|
194
|
+
return s ? (JSON.parse(s) as A11yState) : { profiles: {}, settings: {} };
|
|
195
|
+
} catch {
|
|
196
|
+
return { profiles: {}, settings: {} };
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
export function saveA11y(state: A11yState): void {
|
|
201
|
+
if (typeof window === 'undefined') return;
|
|
202
|
+
try {
|
|
203
|
+
window.localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
|
|
204
|
+
} catch {
|
|
205
|
+
/* quota / private mode — ignore */
|
|
206
|
+
}
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
export function applyA11yClasses(state: A11yState): void {
|
|
210
|
+
if (typeof document === 'undefined') return;
|
|
211
|
+
const el = document.documentElement;
|
|
212
|
+
ACC_PROFILES.forEach((p) => el.classList.toggle(p.cssClass, !!state.profiles[p.id]));
|
|
213
|
+
const s = state.settings;
|
|
214
|
+
el.classList.toggle('a11y-high-contrast', !!s.highContrast);
|
|
215
|
+
el.classList.toggle('a11y-dark', !!s.darkMode);
|
|
216
|
+
el.classList.toggle('a11y-grayscale', !!s.grayscale);
|
|
217
|
+
el.classList.toggle('a11y-underline-links', !!s.underlineLinks);
|
|
218
|
+
el.classList.toggle('a11y-highlight-btns', !!s.highlightButtons);
|
|
219
|
+
el.classList.toggle('a11y-reduce-motion', !!s.reduceMotion);
|
|
220
|
+
el.classList.toggle('a11y-no-transitions', !!s.noTransitions);
|
|
221
|
+
el.classList.toggle('a11y-strong-focus', !!s.strongFocus);
|
|
222
|
+
el.classList.toggle('a11y-big-targets', !!s.bigTargets);
|
|
223
|
+
el.classList.toggle('a11y-big-cursor', !!s.bigCursor);
|
|
224
|
+
el.classList.toggle('a11y-visible-errors', !!s.visibleErrors);
|
|
225
|
+
el.classList.toggle('a11y-line-height', !!s.lineHeight);
|
|
226
|
+
el.classList.toggle('a11y-letter-spacing', !!s.letterSpacing);
|
|
227
|
+
el.classList.toggle('a11y-readable-font', !!s.readableFont);
|
|
228
|
+
el.classList.toggle('a11y-left-align', !!s.leftAlign);
|
|
229
|
+
el.classList.toggle('a11y-max-width', !!s.maxWidth);
|
|
230
|
+
const scale: Record<string, string> = { Normale: '1', Grande: '1.15', 'Très grande': '1.3' };
|
|
231
|
+
el.style.setProperty('--a11y-font-scale', scale[s.fontSize as string] || '1');
|
|
232
|
+
el.classList.toggle('a11y-font-scaled', !!s.fontSize && s.fontSize !== 'Normale');
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
/* Tokens visuels du modal (valeurs par défaut, surchargables par l'hôte). */
|
|
236
|
+
export const A11Y_TOKENS: Record<string, string> = {
|
|
237
|
+
'--accent': 'var(--a11y-accent, #006828)',
|
|
238
|
+
'--accent-soft': 'var(--a11y-accent-soft, rgba(0,104,40,.1))',
|
|
239
|
+
'--navy': 'var(--a11y-navy, #0a1930)',
|
|
240
|
+
'--bg-2': 'var(--a11y-bg-2, #ffffff)',
|
|
241
|
+
'--surface': 'var(--a11y-surface, #ffffff)',
|
|
242
|
+
'--surface-2': 'var(--a11y-surface-2, #f5f6f8)',
|
|
243
|
+
'--line': 'var(--a11y-line, #e3e6ea)',
|
|
244
|
+
'--line-strong': 'var(--a11y-line-strong, #c7ccd2)',
|
|
245
|
+
'--text': 'var(--a11y-text, #1a1f26)',
|
|
246
|
+
'--muted': 'var(--a11y-muted, #5a6470)',
|
|
247
|
+
'--muted-2': 'var(--a11y-muted-2, #8a939e)',
|
|
248
|
+
'--r-md': 'var(--a11y-radius-md, 12px)',
|
|
249
|
+
'--r-xl': 'var(--a11y-radius-xl, 20px)',
|
|
250
|
+
};
|
|
251
|
+
|
|
252
|
+
/* ---- CSS runtime injecté (effets des profils/réglages sur <html>) ---- */
|
|
253
|
+
export const A11Y_CSS = `
|
|
254
|
+
:root { --a11y-font-scale: 1; }
|
|
255
|
+
html.a11y-font-scaled { font-size: calc(1rem * var(--a11y-font-scale)) !important; }
|
|
256
|
+
html.a11y-low-vision { font-size: calc(1rem * var(--a11y-font-scale)) !important; }
|
|
257
|
+
html.a11y-low-vision a { text-decoration: underline !important; }
|
|
258
|
+
html.a11y-low-vision :focus-visible { outline: 4px solid var(--a11y-accent, #006828) !important; outline-offset: 3px !important; }
|
|
259
|
+
html.a11y-dyslexia, html.a11y-dyslexia * { font-family: 'OpenDyslexic','Comic Sans MS',Arial,sans-serif !important; letter-spacing:.05em !important; line-height:1.9 !important; text-align:left !important; }
|
|
260
|
+
html.a11y-adhd * { animation: none !important; transition: none !important; }
|
|
261
|
+
html.a11y-adhd [aria-hidden="true"] { opacity:.4; }
|
|
262
|
+
html.a11y-motion *, html.a11y-reduce-motion * { animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:0s !important; }
|
|
263
|
+
html.a11y-color a { text-decoration: underline !important; }
|
|
264
|
+
html.a11y-senior { font-size: calc(1.1rem * var(--a11y-font-scale)) !important; }
|
|
265
|
+
html.a11y-senior button, html.a11y-senior .btn { min-height:52px !important; padding:14px 22px !important; }
|
|
266
|
+
html.a11y-high-contrast { filter: contrast(1.5); }
|
|
267
|
+
html.a11y-dark { filter: invert(1) hue-rotate(180deg); }
|
|
268
|
+
html.a11y-dark img, html.a11y-dark video, html.a11y-dark svg, html.a11y-dark [style*="background-image"] { filter: invert(1) hue-rotate(180deg); }
|
|
269
|
+
html.a11y-grayscale { filter: grayscale(1); }
|
|
270
|
+
html.a11y-underline-links a { text-decoration: underline !important; }
|
|
271
|
+
html.a11y-highlight-btns button, html.a11y-highlight-btns .btn, html.a11y-highlight-btns [role="button"] { outline:3px solid var(--a11y-accent, #006828) !important; outline-offset:2px; }
|
|
272
|
+
html.a11y-no-transitions * { transition: none !important; }
|
|
273
|
+
html.a11y-strong-focus :focus-visible { outline:4px solid var(--a11y-accent, #006828) !important; outline-offset:4px !important; box-shadow:0 0 0 8px rgba(0,104,40,.18) !important; }
|
|
274
|
+
html.a11y-big-targets button, html.a11y-big-targets a, html.a11y-big-targets [role="button"], html.a11y-big-targets input, html.a11y-big-targets select { min-height:44px !important; }
|
|
275
|
+
html.a11y-big-cursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'%3E%3Cpath fill='%23006828' d='M4 0l16 12-7 1-4 8z'/%3E%3C/svg%3E") 0 0, auto !important; }
|
|
276
|
+
html.a11y-visible-errors [aria-invalid="true"], html.a11y-visible-errors .field-error { outline:2px solid #c00 !important; font-weight:700 !important; }
|
|
277
|
+
html.a11y-line-height * { line-height:2 !important; }
|
|
278
|
+
html.a11y-letter-spacing * { letter-spacing:.06em !important; }
|
|
279
|
+
html.a11y-readable-font * { font-family: Arial,'Helvetica Neue',sans-serif !important; }
|
|
280
|
+
html.a11y-left-align * { text-align:left !important; }
|
|
281
|
+
html.a11y-max-width main { max-width:72ch !important; margin-inline:auto !important; }
|
|
282
|
+
`;
|
|
283
|
+
|
|
284
|
+
const STYLE_ID = 'acsblt-a11y-css';
|
|
285
|
+
|
|
286
|
+
/** Injecte le CSS runtime une seule fois (idempotent, SSR-safe). */
|
|
287
|
+
export function ensureA11yStyles(): void {
|
|
288
|
+
if (typeof document === 'undefined') return;
|
|
289
|
+
if (document.getElementById(STYLE_ID)) return;
|
|
290
|
+
const st = document.createElement('style');
|
|
291
|
+
st.id = STYLE_ID;
|
|
292
|
+
st.textContent = A11Y_CSS;
|
|
293
|
+
document.head.appendChild(st);
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
/**
|
|
297
|
+
* Script à exécuter avant le premier paint (évite le flash de contenu non
|
|
298
|
+
* stylé). À placer via `next/script` strategy="beforeInteractive" ou dans un
|
|
299
|
+
* <script dangerouslySetInnerHTML>. Voir README.
|
|
300
|
+
*/
|
|
301
|
+
export const A11Y_INIT_SCRIPT = `(function(){try{var s=localStorage.getItem('${STORAGE_KEY}');if(!s)return;var st=JSON.parse(s),el=document.documentElement,p=st.profiles||{},g=st.settings||{};var P={low_vision:'a11y-low-vision',dyslexia:'a11y-dyslexia',adhd:'a11y-adhd',motion:'a11y-motion',color:'a11y-color',senior:'a11y-senior'};for(var k in P){if(p[k])el.classList.add(P[k]);}var M={highContrast:'a11y-high-contrast',darkMode:'a11y-dark',grayscale:'a11y-grayscale',underlineLinks:'a11y-underline-links',highlightButtons:'a11y-highlight-btns',reduceMotion:'a11y-reduce-motion',noTransitions:'a11y-no-transitions',strongFocus:'a11y-strong-focus',bigTargets:'a11y-big-targets',bigCursor:'a11y-big-cursor',visibleErrors:'a11y-visible-errors',lineHeight:'a11y-line-height',letterSpacing:'a11y-letter-spacing',readableFont:'a11y-readable-font',leftAlign:'a11y-left-align',maxWidth:'a11y-max-width'};for(var m in M){if(g[m])el.classList.add(M[m]);}var sc={Normale:'1',Grande:'1.15','Très grande':'1.3'};el.style.setProperty('--a11y-font-scale',sc[g.fontSize]||'1');if(g.fontSize&&g.fontSize!=='Normale')el.classList.add('a11y-font-scaled');}catch(e){}})();`;
|
|
302
|
+
|
|
303
|
+
/* ---- Icônes (chemins SVG, viewBox 0 0 24 24) ---- */
|
|
304
|
+
export const A11Y_ICONS: Record<IconName, string> = {
|
|
305
|
+
eye: '<path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z"/><circle cx="12" cy="12" r="3"/>',
|
|
306
|
+
keyboard: '<rect x="2" y="6" width="20" height="12" rx="2"/><path d="M6 10h.01M10 10h.01M14 10h.01M18 10h.01M6 14h12"/>',
|
|
307
|
+
zoomIn: '<circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3M11 8v6M8 11h6"/>',
|
|
308
|
+
type: '<polyline points="4 7 4 4 20 4 20 7"/><line x1="9" y1="20" x2="15" y2="20"/><line x1="12" y1="4" x2="12" y2="20"/>',
|
|
309
|
+
focus: '<circle cx="12" cy="12" r="3"/><path d="M3 7V5a2 2 0 0 1 2-2h2M17 3h2a2 2 0 0 1 2 2v2M21 17v2a2 2 0 0 1-2 2h-2M7 21H5a2 2 0 0 1-2-2v-2"/>',
|
|
310
|
+
pause: '<rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/>',
|
|
311
|
+
palette: '<circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3"/><path d="M12 3v3M12 18v3M3 12h3M18 12h3"/>',
|
|
312
|
+
comfort: '<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/>',
|
|
313
|
+
form: '<rect x="4" y="3" width="16" height="18" rx="2"/><path d="M8 8h8M8 12h8M8 16h5"/>',
|
|
314
|
+
check: '<path d="M20 6 9 17l-5-5"/>',
|
|
315
|
+
shieldChk: '<path d="M12 3 4 6v6c0 5 3.5 8 8 11 4.5-3 8-6 8-11V6z"/><path d="m9 12 2 2 4-4"/>',
|
|
316
|
+
reset: '<path d="M3 12a9 9 0 1 0 3-6.7L3 9M3 3v6h6"/>',
|
|
317
|
+
x: '<path d="M18 6 6 18M6 6l12 12"/>',
|
|
318
|
+
announce: '<path d="M3 11l19-9-9 19-2-8-8-2z"/>',
|
|
319
|
+
};
|
package/react/icons.tsx
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { A11Y_ICONS, type IconName } from './engine';
|
|
3
|
+
|
|
4
|
+
export function A11YIcon({ name, size = 18 }: { name: IconName; size?: number }) {
|
|
5
|
+
return (
|
|
6
|
+
<svg
|
|
7
|
+
viewBox="0 0 24 24"
|
|
8
|
+
fill="none"
|
|
9
|
+
stroke="currentColor"
|
|
10
|
+
strokeWidth={1.8}
|
|
11
|
+
strokeLinecap="round"
|
|
12
|
+
strokeLinejoin="round"
|
|
13
|
+
aria-hidden="true"
|
|
14
|
+
style={{ width: size, height: size, display: 'inline-block', verticalAlign: 'middle', flexShrink: 0 }}
|
|
15
|
+
>
|
|
16
|
+
<g dangerouslySetInnerHTML={{ __html: A11Y_ICONS[name] || '' }} />
|
|
17
|
+
</svg>
|
|
18
|
+
);
|
|
19
|
+
}
|
package/react/index.ts
ADDED
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
export { AccessibilityModal } from './AccessibilityModal';
|
|
2
|
+
export type { AccessibilityModalProps } from './AccessibilityModal';
|
|
3
|
+
export { AccessibilityButton } from './AccessibilityButton';
|
|
4
|
+
export type { AccessibilityButtonProps } from './AccessibilityButton';
|
|
5
|
+
export { AccessibilityFab } from './AccessibilityFab';
|
|
6
|
+
export type { AccessibilityFabProps, FabPosition } from './AccessibilityFab';
|
|
7
|
+
export { A11YIcon } from './icons';
|
|
8
|
+
export {
|
|
9
|
+
// moteur
|
|
10
|
+
loadA11y,
|
|
11
|
+
saveA11y,
|
|
12
|
+
applyA11yClasses,
|
|
13
|
+
ensureA11yStyles,
|
|
14
|
+
// données
|
|
15
|
+
ACC_STANDARDS,
|
|
16
|
+
ACC_PROFILES,
|
|
17
|
+
ACC_SETTINGS,
|
|
18
|
+
// constantes utiles
|
|
19
|
+
STORAGE_KEY,
|
|
20
|
+
A11Y_CSS,
|
|
21
|
+
A11Y_TOKENS,
|
|
22
|
+
A11Y_ICONS,
|
|
23
|
+
A11Y_INIT_SCRIPT,
|
|
24
|
+
} from './engine';
|
|
25
|
+
export type {
|
|
26
|
+
A11yState,
|
|
27
|
+
A11yStandard,
|
|
28
|
+
A11yProfile,
|
|
29
|
+
A11ySettingItem,
|
|
30
|
+
A11ySettingGroup,
|
|
31
|
+
IconName,
|
|
32
|
+
} from './engine';
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@intside/accessibility-react",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "Module d'accessibilité ACSBLT pour Next.js / React (modal profils + réglages, persistance localStorage).",
|
|
5
|
+
"private": true,
|
|
6
|
+
"type": "module",
|
|
7
|
+
"main": "index.ts",
|
|
8
|
+
"types": "index.ts",
|
|
9
|
+
"exports": {
|
|
10
|
+
".": "./index.ts"
|
|
11
|
+
},
|
|
12
|
+
"peerDependencies": {
|
|
13
|
+
"react": ">=18",
|
|
14
|
+
"react-dom": ">=18"
|
|
15
|
+
},
|
|
16
|
+
"sideEffects": false
|
|
17
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/* ACSBLT · Accessibilité — script pré-paint (à charger dans <head>, AVANT le rendu).
|
|
2
|
+
Applique les classes stockées sur <html> pour éviter tout flash visuel.
|
|
3
|
+
Léger, sans dépendance. Le script principal acsblt-accessibility.js gère le reste. */
|
|
4
|
+
(function () {
|
|
5
|
+
try {
|
|
6
|
+
var s = localStorage.getItem('acsblt_a11y_v1');
|
|
7
|
+
if (!s) return;
|
|
8
|
+
var st = JSON.parse(s), el = document.documentElement, p = st.profiles || {}, g = st.settings || {}, k;
|
|
9
|
+
var P = { low_vision: 'a11y-low-vision', dyslexia: 'a11y-dyslexia', adhd: 'a11y-adhd', motion: 'a11y-motion', color: 'a11y-color', senior: 'a11y-senior' };
|
|
10
|
+
for (k in P) { if (p[k]) el.classList.add(P[k]); }
|
|
11
|
+
var M = { highContrast: 'a11y-high-contrast', darkMode: 'a11y-dark', grayscale: 'a11y-grayscale', underlineLinks: 'a11y-underline-links', highlightButtons: 'a11y-highlight-btns', reduceMotion: 'a11y-reduce-motion', noTransitions: 'a11y-no-transitions', strongFocus: 'a11y-strong-focus', bigTargets: 'a11y-big-targets', bigCursor: 'a11y-big-cursor', visibleErrors: 'a11y-visible-errors', lineHeight: 'a11y-line-height', letterSpacing: 'a11y-letter-spacing', readableFont: 'a11y-readable-font', leftAlign: 'a11y-left-align', maxWidth: 'a11y-max-width' };
|
|
12
|
+
for (k in M) { if (g[k]) el.classList.add(M[k]); }
|
|
13
|
+
var sc = { Normale: '1', Grande: '1.15', 'Très grande': '1.3' };
|
|
14
|
+
el.style.setProperty('--a11y-font-scale', sc[g.fontSize] || '1');
|
|
15
|
+
if (g.fontSize && g.fontSize !== 'Normale') el.classList.add('a11y-font-scaled');
|
|
16
|
+
} catch (e) {}
|
|
17
|
+
})();
|
|
@@ -0,0 +1,159 @@
|
|
|
1
|
+
/* ================================================================
|
|
2
|
+
ACSBLT · Accessibilité — version autonome (WordPress / vanilla JS)
|
|
3
|
+
1) Effets runtime des profils & réglages (classes sur <html>)
|
|
4
|
+
2) Styles du widget (bouton + modal), préfixés .acsblta11y
|
|
5
|
+
Aucune dépendance. Surchargez via --a11y-accent sur :root.
|
|
6
|
+
================================================================ */
|
|
7
|
+
|
|
8
|
+
/* ---------- 1) Effets runtime ---------- */
|
|
9
|
+
:root { --a11y-font-scale: 1; }
|
|
10
|
+
html.a11y-font-scaled { font-size: calc(1rem * var(--a11y-font-scale)) !important; }
|
|
11
|
+
html.a11y-low-vision { font-size: calc(1rem * var(--a11y-font-scale)) !important; }
|
|
12
|
+
html.a11y-low-vision a { text-decoration: underline !important; }
|
|
13
|
+
html.a11y-low-vision :focus-visible { outline: 4px solid var(--a11y-accent, #006828) !important; outline-offset: 3px !important; }
|
|
14
|
+
html.a11y-dyslexia, html.a11y-dyslexia * { font-family: 'OpenDyslexic','Comic Sans MS',Arial,sans-serif !important; letter-spacing: .05em !important; line-height: 1.9 !important; text-align: left !important; }
|
|
15
|
+
html.a11y-adhd * { animation: none !important; transition: none !important; }
|
|
16
|
+
html.a11y-adhd [aria-hidden="true"] { opacity: .4; }
|
|
17
|
+
html.a11y-motion *, html.a11y-reduce-motion * { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; }
|
|
18
|
+
html.a11y-color a { text-decoration: underline !important; }
|
|
19
|
+
html.a11y-senior { font-size: calc(1.1rem * var(--a11y-font-scale)) !important; }
|
|
20
|
+
html.a11y-senior button, html.a11y-senior .btn { min-height: 52px !important; padding: 14px 22px !important; }
|
|
21
|
+
html.a11y-high-contrast { filter: contrast(1.5); }
|
|
22
|
+
html.a11y-dark { filter: invert(1) hue-rotate(180deg); }
|
|
23
|
+
html.a11y-dark img, html.a11y-dark video, html.a11y-dark svg, html.a11y-dark [style*="background-image"] { filter: invert(1) hue-rotate(180deg); }
|
|
24
|
+
html.a11y-grayscale { filter: grayscale(1); }
|
|
25
|
+
html.a11y-underline-links a { text-decoration: underline !important; }
|
|
26
|
+
html.a11y-highlight-btns button, html.a11y-highlight-btns .btn, html.a11y-highlight-btns [role="button"] { outline: 3px solid var(--a11y-accent, #006828) !important; outline-offset: 2px; }
|
|
27
|
+
html.a11y-no-transitions * { transition: none !important; }
|
|
28
|
+
html.a11y-strong-focus :focus-visible { outline: 4px solid var(--a11y-accent, #006828) !important; outline-offset: 4px !important; box-shadow: 0 0 0 8px rgba(0,104,40,.18) !important; }
|
|
29
|
+
html.a11y-big-targets button, html.a11y-big-targets a, html.a11y-big-targets [role="button"], html.a11y-big-targets input, html.a11y-big-targets select { min-height: 44px !important; }
|
|
30
|
+
html.a11y-big-cursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'%3E%3Cpath fill='%23006828' d='M4 0l16 12-7 1-4 8z'/%3E%3C/svg%3E") 0 0, auto !important; }
|
|
31
|
+
html.a11y-visible-errors [aria-invalid="true"], html.a11y-visible-errors .field-error, html.a11y-visible-errors .wpcf7-not-valid-tip { outline: 2px solid #c00 !important; font-weight: 700 !important; }
|
|
32
|
+
html.a11y-line-height * { line-height: 2 !important; }
|
|
33
|
+
html.a11y-letter-spacing * { letter-spacing: .06em !important; }
|
|
34
|
+
html.a11y-readable-font * { font-family: Arial,'Helvetica Neue',sans-serif !important; }
|
|
35
|
+
html.a11y-left-align * { text-align: left !important; }
|
|
36
|
+
html.a11y-max-width main, html.a11y-max-width .entry-content, html.a11y-max-width article { max-width: 72ch !important; margin-inline: auto !important; }
|
|
37
|
+
|
|
38
|
+
/* ---------- 2) Widget (tokens) ---------- */
|
|
39
|
+
.acsblta11y {
|
|
40
|
+
--accent: var(--a11y-accent, #006828);
|
|
41
|
+
--accent-soft: var(--a11y-accent-soft, rgba(0,104,40,.1));
|
|
42
|
+
--navy: var(--a11y-navy, #0a1930);
|
|
43
|
+
--bg-2: var(--a11y-bg-2, #ffffff);
|
|
44
|
+
--surface: var(--a11y-surface, #ffffff);
|
|
45
|
+
--surface-2: var(--a11y-surface-2, #f5f6f8);
|
|
46
|
+
--line: var(--a11y-line, #e3e6ea);
|
|
47
|
+
--line-strong: var(--a11y-line-strong, #c7ccd2);
|
|
48
|
+
--text: var(--a11y-text, #1a1f26);
|
|
49
|
+
--muted: var(--a11y-muted, #5a6470);
|
|
50
|
+
--muted-2: var(--a11y-muted-2, #8a939e);
|
|
51
|
+
--r-md: var(--a11y-radius-md, 12px);
|
|
52
|
+
--r-xl: var(--a11y-radius-xl, 20px);
|
|
53
|
+
box-sizing: border-box;
|
|
54
|
+
font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
|
|
55
|
+
}
|
|
56
|
+
.acsblta11y *, .acsblta11y *::before, .acsblta11y *::after { box-sizing: border-box; }
|
|
57
|
+
|
|
58
|
+
/* Bouton flottant par défaut */
|
|
59
|
+
.acsblta11y-fab {
|
|
60
|
+
position: fixed; z-index: 1099; bottom: 22px; right: 22px;
|
|
61
|
+
display: inline-flex; align-items: center; justify-content: center;
|
|
62
|
+
width: 48px; height: 48px; padding: 0; border: none; border-radius: 99px;
|
|
63
|
+
background: var(--accent); color: #fff;
|
|
64
|
+
cursor: pointer; box-shadow: 0 8px 24px -6px rgba(10,25,48,.45);
|
|
65
|
+
transition: transform .15s ease, box-shadow .15s ease;
|
|
66
|
+
}
|
|
67
|
+
.acsblta11y-fab:hover { transform: scale(1.05); }
|
|
68
|
+
.acsblta11y-fab svg { width: 32px; height: 32px; }
|
|
69
|
+
.acsblta11y-fab:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
|
|
70
|
+
.acsblta11y-fab.is-left { left: 22px; right: auto; }
|
|
71
|
+
|
|
72
|
+
/* Overlay */
|
|
73
|
+
.acsblta11y-overlay {
|
|
74
|
+
position: fixed; inset: 0; z-index: 1100; padding: 20px;
|
|
75
|
+
display: flex; align-items: center; justify-content: center;
|
|
76
|
+
background: rgba(10,25,48,.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
|
|
77
|
+
}
|
|
78
|
+
.acsblta11y-sr { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
|
|
79
|
+
|
|
80
|
+
/* Panel */
|
|
81
|
+
.acsblta11y-panel {
|
|
82
|
+
background: var(--bg-2); border-radius: var(--r-xl);
|
|
83
|
+
box-shadow: 0 40px 100px -30px rgba(10,25,48,.55);
|
|
84
|
+
width: min(680px, 100%); max-height: 90vh;
|
|
85
|
+
display: flex; flex-direction: column; border: 1px solid var(--line);
|
|
86
|
+
color: var(--text);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.acsblta11y-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px 16px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
|
|
90
|
+
.acsblta11y-head-l { display: flex; align-items: center; gap: 10px; }
|
|
91
|
+
.acsblta11y-badge-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex-shrink: 0; }
|
|
92
|
+
.acsblta11y-title { font-size: 18px; font-weight: 800; letter-spacing: -.01em; margin: 0; color: var(--text); }
|
|
93
|
+
.acsblta11y-count { font-size: 12px; font-weight: 700; color: var(--accent); background: var(--accent-soft); border-radius: 99px; padding: 2px 8px; margin-top: 3px; display: inline-block; }
|
|
94
|
+
.acsblta11y-head-r { display: flex; gap: 8px; }
|
|
95
|
+
.acsblta11y-reset { height: 36px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; display: flex; align-items: center; gap: 7px; padding: 0 12px; font-size: 13px; font-weight: 600; color: var(--muted); }
|
|
96
|
+
.acsblta11y-close { width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; display: grid; place-items: center; color: var(--muted); }
|
|
97
|
+
|
|
98
|
+
.acsblta11y-tabs { display: flex; border-bottom: 1px solid var(--line); flex-shrink: 0; }
|
|
99
|
+
.acsblta11y-tab { flex: 1; border: none; background: none; cursor: pointer; padding: 12px 20px; font-size: 14.5px; font-weight: 700; color: var(--muted); border-bottom: 2.5px solid transparent; margin-bottom: -1px; }
|
|
100
|
+
.acsblta11y-tab[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
|
|
101
|
+
|
|
102
|
+
.acsblta11y-body { overflow-y: auto; flex: 1; padding: 20px 24px; }
|
|
103
|
+
.acsblta11y-intro { font-size: 13.5px; color: var(--muted); margin: 0 0 18px; line-height: 1.6; }
|
|
104
|
+
.acsblta11y-kicker { font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--muted-2); margin-bottom: 10px; }
|
|
105
|
+
.acsblta11y-list { display: flex; flex-direction: column; gap: 10px; }
|
|
106
|
+
.acsblta11y-list + .acsblta11y-kicker { margin-top: 24px; }
|
|
107
|
+
|
|
108
|
+
/* Cards */
|
|
109
|
+
.acsblta11y-card { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
|
|
110
|
+
.acsblta11y-card.is-active { border-color: var(--accent); background: var(--accent-soft); }
|
|
111
|
+
.acsblta11y-card-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
|
|
112
|
+
.acsblta11y-card-ic { width: 40px; height: 40px; border-radius: 10px; background: var(--surface-2); color: var(--muted); display: grid; place-items: center; flex-shrink: 0; }
|
|
113
|
+
.acsblta11y-card.is-active .acsblta11y-card-ic { background: var(--accent); color: #fff; }
|
|
114
|
+
.acsblta11y-card-main { flex: 1; min-width: 0; }
|
|
115
|
+
.acsblta11y-card-label { font-weight: 700; font-size: 14.5px; color: var(--text); }
|
|
116
|
+
.acsblta11y-card-desc { font-size: 13px; color: var(--muted); margin-top: 2px; line-height: 1.4; }
|
|
117
|
+
.acsblta11y-std-headline { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12.5px; font-weight: 700; color: var(--accent); background: var(--accent-soft); border-radius: 99px; padding: 3px 10px; }
|
|
118
|
+
.acsblta11y-cta { background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 7px 12px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; flex-shrink: 0; }
|
|
119
|
+
.acsblta11y-detail { border-top: 1px solid var(--line); padding: 14px 18px; background: var(--surface-2); }
|
|
120
|
+
.acsblta11y-improve { border-top: 1px dashed var(--line); padding: 10px 16px; background: rgba(0,104,40,.04); }
|
|
121
|
+
.acsblta11y-improve-btn { background: none; border: none; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--accent); padding: 0; display: flex; align-items: center; gap: 6px; }
|
|
122
|
+
.acsblta11y-ul { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
|
|
123
|
+
.acsblta11y-ul li { display: flex; gap: 10px; font-size: 14px; color: var(--muted); align-items: flex-start; }
|
|
124
|
+
.acsblta11y-ul li svg { color: var(--accent); flex-shrink: 0; margin-top: 2px; }
|
|
125
|
+
|
|
126
|
+
/* Settings */
|
|
127
|
+
.acsblta11y-group { margin-bottom: 26px; }
|
|
128
|
+
.acsblta11y-group-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
|
|
129
|
+
.acsblta11y-group-head span { font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted-2); }
|
|
130
|
+
.acsblta11y-group-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 0 16px; }
|
|
131
|
+
.acsblta11y-srow { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
|
|
132
|
+
.acsblta11y-group-box .acsblta11y-srow:last-child { border-bottom: none; }
|
|
133
|
+
.acsblta11y-srow label { font-size: 14.5px; font-weight: 600; color: var(--text); cursor: pointer; }
|
|
134
|
+
.acsblta11y-select { border: 1px solid var(--line); border-radius: 8px; padding: 7px 12px; font-size: 13.5px; font-weight: 600; color: var(--text); background: var(--surface); cursor: pointer; outline: none; }
|
|
135
|
+
|
|
136
|
+
/* Toggle (switch) */
|
|
137
|
+
.acsblta11y-switch { width: 44px; height: 24px; border-radius: 12px; border: none; cursor: pointer; background: var(--line-strong); position: relative; flex-shrink: 0; transition: background .2s; padding: 0; }
|
|
138
|
+
.acsblta11y-switch[aria-checked="true"] { background: var(--accent); }
|
|
139
|
+
.acsblta11y-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .18s; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
|
|
140
|
+
.acsblta11y-switch[aria-checked="true"]::after { left: 23px; }
|
|
141
|
+
|
|
142
|
+
.acsblta11y-foot { border-top: 1px solid var(--line); padding: 14px 24px; flex-shrink: 0; background: var(--surface-2); border-radius: 0 0 var(--r-xl) var(--r-xl); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
|
|
143
|
+
.acsblta11y-foot span { font-size: 13px; color: var(--muted-2); display: flex; align-items: center; gap: 8px; }
|
|
144
|
+
.acsblta11y-foot a { font-size: 13px; font-weight: 700; color: var(--accent); display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
|
|
145
|
+
|
|
146
|
+
.acsblta11y-hidden { display: none !important; }
|
|
147
|
+
|
|
148
|
+
/* Libellés courts (affichés uniquement < 600px) */
|
|
149
|
+
.acsblta11y-lbl-short { display: none; }
|
|
150
|
+
|
|
151
|
+
/* Responsive : viewport étroit */
|
|
152
|
+
@media (max-width: 600px) {
|
|
153
|
+
/* "Voir les détails" / "Voir les raccourcis" -> "Voir" */
|
|
154
|
+
.acsblta11y-lbl-full { display: none; }
|
|
155
|
+
.acsblta11y-lbl-short { display: inline; }
|
|
156
|
+
/* Réinitialiser : on garde l'icône, on masque le libellé */
|
|
157
|
+
.acsblta11y-reset-lbl { display: none; }
|
|
158
|
+
.acsblta11y-reset { width: 36px; padding: 0; gap: 0; justify-content: center; }
|
|
159
|
+
}
|