@pigmilcom/a11y 1.0.6 → 1.0.7
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/README.md +1 -23
- package/dist/a11y.cdn.js +4 -4
- package/dist/index.css +347 -634
- package/dist/index.js +35 -35
- package/dist/index.min.css +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.mjs +1 -1
- package/dist/index.mjs +35 -35
- package/package.json +3 -6
- package/src/cdn.jsx +3 -4
package/dist/index.js
CHANGED
|
@@ -86,7 +86,7 @@ var TOGGLES = [
|
|
|
86
86
|
key: "highContrast",
|
|
87
87
|
label: "High Contrast",
|
|
88
88
|
desc: "Increase colour contrast for readability",
|
|
89
|
-
icon: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: "0 0 24 24", className: "
|
|
89
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: "0 0 24 24", className: "pgm-icon", fill: "none", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", children: [
|
|
90
90
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
|
|
91
91
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 2v20" }),
|
|
92
92
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 2a10 10 0 0 1 0 20", fill: "currentColor", stroke: "none" })
|
|
@@ -96,7 +96,7 @@ var TOGGLES = [
|
|
|
96
96
|
key: "invertColors",
|
|
97
97
|
label: "Invert Colors",
|
|
98
98
|
desc: "Invert all page colours",
|
|
99
|
-
icon: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: "0 0 24 24", className: "
|
|
99
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: "0 0 24 24", className: "pgm-icon", fill: "none", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", children: [
|
|
100
100
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 3v18M3 12h18" }),
|
|
101
101
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 3a9 9 0 0 1 0 18", fill: "currentColor", stroke: "none" })
|
|
102
102
|
] })
|
|
@@ -105,7 +105,7 @@ var TOGGLES = [
|
|
|
105
105
|
key: "grayscale",
|
|
106
106
|
label: "Grayscale",
|
|
107
107
|
desc: "Remove all colour from the page",
|
|
108
|
-
icon: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: "0 0 24 24", className: "
|
|
108
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: "0 0 24 24", className: "pgm-icon", fill: "none", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", children: [
|
|
109
109
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "9" }),
|
|
110
110
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "4", fill: "currentColor", stroke: "none" })
|
|
111
111
|
] })
|
|
@@ -114,13 +114,13 @@ var TOGGLES = [
|
|
|
114
114
|
key: "reduceMotion",
|
|
115
115
|
label: "Reduce Motion",
|
|
116
116
|
desc: "Stop animations and transitions",
|
|
117
|
-
icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", className: "
|
|
117
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", className: "pgm-icon", fill: "none", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M5 12h14M12 5l-7 7 7 7" }) })
|
|
118
118
|
},
|
|
119
119
|
{
|
|
120
120
|
key: "highlightLinks",
|
|
121
121
|
label: "Highlight Links",
|
|
122
122
|
desc: "Make all links visible at a glance",
|
|
123
|
-
icon: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: "0 0 24 24", className: "
|
|
123
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: "0 0 24 24", className: "pgm-icon", fill: "none", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", children: [
|
|
124
124
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" }),
|
|
125
125
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" })
|
|
126
126
|
] })
|
|
@@ -129,13 +129,13 @@ var TOGGLES = [
|
|
|
129
129
|
key: "textSpacing",
|
|
130
130
|
label: "Text Spacing",
|
|
131
131
|
desc: "Increase letter, word & line spacing",
|
|
132
|
-
icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", className: "
|
|
132
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", className: "pgm-icon", fill: "none", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M4 6h16M4 10h16M4 14h16M4 18h16" }) })
|
|
133
133
|
},
|
|
134
134
|
{
|
|
135
135
|
key: "adhd",
|
|
136
136
|
label: "ADHD Friendly",
|
|
137
137
|
desc: "Remove distractions, add focus ring",
|
|
138
|
-
icon: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: "0 0 24 24", className: "
|
|
138
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: "0 0 24 24", className: "pgm-icon", fill: "none", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", children: [
|
|
139
139
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 2L2 7l10 5 10-5-10-5z" }),
|
|
140
140
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M2 17l10 5 10-5" }),
|
|
141
141
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M2 12l10 5 10-5" })
|
|
@@ -145,7 +145,7 @@ var TOGGLES = [
|
|
|
145
145
|
key: "dyslexia",
|
|
146
146
|
label: "Dyslexia Font",
|
|
147
147
|
desc: "Switch to a high-readability typeface",
|
|
148
|
-
icon: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: "0 0 24 24", className: "
|
|
148
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: "0 0 24 24", className: "pgm-icon", fill: "none", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", children: [
|
|
149
149
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M4 7V4h16v3" }),
|
|
150
150
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M9 20h6" }),
|
|
151
151
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 4v16" })
|
|
@@ -197,13 +197,13 @@ function A11yWidget({ className }) {
|
|
|
197
197
|
"aria-expanded": open,
|
|
198
198
|
"aria-haspopup": "dialog",
|
|
199
199
|
onClick: () => setOpen((v) => !v),
|
|
200
|
-
className: `
|
|
200
|
+
className: `pgm-btn${className ? ` ${className}` : ""}`,
|
|
201
201
|
children: [
|
|
202
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: "0 0 24 24", className: "
|
|
202
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: "0 0 24 24", className: "pgm-icon-lg", fill: "none", stroke: "currentColor", strokeWidth: 1.8, "aria-hidden": "true", children: [
|
|
203
203
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "5", r: "1.5", fill: "currentColor", stroke: "none" }),
|
|
204
204
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M5 8.5h14M8 8.5l1 10 3-4 3 4 1-10", strokeLinecap: "round", strokeLinejoin: "round" })
|
|
205
205
|
] }),
|
|
206
|
-
isModified && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "
|
|
206
|
+
isModified && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "pgm-dot", "aria-hidden": "true" })
|
|
207
207
|
]
|
|
208
208
|
}
|
|
209
209
|
),
|
|
@@ -212,7 +212,7 @@ function A11yWidget({ className }) {
|
|
|
212
212
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
213
213
|
"div",
|
|
214
214
|
{
|
|
215
|
-
className: "
|
|
215
|
+
className: "pgm-backdrop",
|
|
216
216
|
onClick: () => setOpen(false),
|
|
217
217
|
"aria-hidden": "true"
|
|
218
218
|
}
|
|
@@ -223,12 +223,12 @@ function A11yWidget({ className }) {
|
|
|
223
223
|
role: "dialog",
|
|
224
224
|
"aria-modal": "true",
|
|
225
225
|
"aria-label": "Accessibility settings",
|
|
226
|
-
className: "
|
|
226
|
+
className: "pgm-dialog",
|
|
227
227
|
children: [
|
|
228
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "
|
|
228
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "pgm-header", children: [
|
|
229
229
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
|
|
230
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "
|
|
231
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "
|
|
230
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "pgm-header-title", children: "Accessibility" }),
|
|
231
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "pgm-header-subtitle", children: "WCAG 2.1 \xB7 Personalise your experience" })
|
|
232
232
|
] }),
|
|
233
233
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
234
234
|
"button",
|
|
@@ -236,29 +236,29 @@ function A11yWidget({ className }) {
|
|
|
236
236
|
type: "button",
|
|
237
237
|
"aria-label": "Close accessibility panel",
|
|
238
238
|
onClick: () => setOpen(false),
|
|
239
|
-
className: "
|
|
240
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", className: "
|
|
239
|
+
className: "pgm-close-btn",
|
|
240
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", className: "pgm-icon-sm", fill: "none", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M18 6 6 18M6 6l12 12", strokeLinecap: "round" }) })
|
|
241
241
|
}
|
|
242
242
|
)
|
|
243
243
|
] }),
|
|
244
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "
|
|
245
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "
|
|
246
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "
|
|
247
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "
|
|
244
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "pgm-size-section", children: [
|
|
245
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "pgm-size-header", children: [
|
|
246
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "pgm-size-label", children: "Text Size" }),
|
|
247
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "pgm-size-value", children: TEXT_LABELS[prefs.textSize] })
|
|
248
248
|
] }),
|
|
249
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "
|
|
249
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "pgm-size-btns", children: TEXT_LABELS.map((lbl, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
250
250
|
"button",
|
|
251
251
|
{
|
|
252
252
|
type: "button",
|
|
253
253
|
"aria-pressed": prefs.textSize === i,
|
|
254
254
|
onClick: () => update({ textSize: i }),
|
|
255
|
-
className: `
|
|
255
|
+
className: `pgm-size-btn ${prefs.textSize === i ? "pgm-size-btn--active" : "pgm-size-btn--inactive"}`,
|
|
256
256
|
children: lbl
|
|
257
257
|
},
|
|
258
258
|
lbl
|
|
259
259
|
)) })
|
|
260
260
|
] }),
|
|
261
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "
|
|
261
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "pgm-toggle-list", children: TOGGLES.map(({ key, label, desc, icon }) => {
|
|
262
262
|
const on = prefs[key];
|
|
263
263
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
264
264
|
"button",
|
|
@@ -267,22 +267,22 @@ function A11yWidget({ className }) {
|
|
|
267
267
|
role: "switch",
|
|
268
268
|
"aria-checked": on,
|
|
269
269
|
onClick: () => update({ [key]: !on }),
|
|
270
|
-
className: `
|
|
270
|
+
className: `pgm-toggle-btn${on ? " pgm-toggle-btn--on" : ""}`,
|
|
271
271
|
children: [
|
|
272
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `
|
|
273
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "
|
|
274
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `
|
|
275
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "
|
|
272
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `pgm-toggle-icon${on ? " pgm-toggle-icon--on" : ""}`, children: icon }),
|
|
273
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "pgm-toggle-text", children: [
|
|
274
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `pgm-toggle-label${on ? " pgm-toggle-label--on" : ""}`, children: label }),
|
|
275
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "pgm-toggle-desc", children: desc })
|
|
276
276
|
] }),
|
|
277
277
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
278
278
|
"span",
|
|
279
279
|
{
|
|
280
280
|
"aria-hidden": "true",
|
|
281
|
-
className: `
|
|
281
|
+
className: `pgm-pill${on ? " pgm-pill--on" : " pgm-pill--off"}`,
|
|
282
282
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
283
283
|
"span",
|
|
284
284
|
{
|
|
285
|
-
className: `
|
|
285
|
+
className: `pgm-pill-knob${on ? " pgm-pill-knob--on" : " pgm-pill-knob--off"}`
|
|
286
286
|
}
|
|
287
287
|
)
|
|
288
288
|
}
|
|
@@ -292,15 +292,15 @@ function A11yWidget({ className }) {
|
|
|
292
292
|
key
|
|
293
293
|
);
|
|
294
294
|
}) }),
|
|
295
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "
|
|
296
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "
|
|
295
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "pgm-footer", children: [
|
|
296
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "pgm-footer-note", children: "Changes apply instantly & persist" }),
|
|
297
297
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
298
298
|
"button",
|
|
299
299
|
{
|
|
300
300
|
type: "button",
|
|
301
301
|
onClick: reset,
|
|
302
302
|
disabled: !isModified,
|
|
303
|
-
className: "
|
|
303
|
+
className: "pgm-reset-btn",
|
|
304
304
|
children: "Reset all"
|
|
305
305
|
}
|
|
306
306
|
)
|
package/dist/index.min.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
.pgm-icon{width:1rem;height:1rem}.pgm-icon-lg{width:1.25rem;height:1.25rem}.pgm-icon-sm{width:0.875rem;height:0.875rem}.pgm-btn{position:relative;display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border:1px solid rgba(255,255,255,0.1);background:rgba(4,6,10,0.85);color:rgba(255,255,255,0.6);box-shadow:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -4px rgba(0,0,0,0.1);transition:border-color 200ms,color 200ms,background 200ms;cursor:pointer;border-radius:0.25rem;padding:0}.pgm-btn:hover{border-color:rgba(0,229,160,0.4);background:rgba(0,229,160,0.08);color:#00e5a0}.pgm-btn:focus-visible{outline:none;box-shadow:0 0 0 2px #00e5a0}.pgm-dot{position:absolute;top:0.375rem;right:0.375rem;width:0.375rem;height:0.375rem;border-radius:9999px;background:#00e5a0}.pgm-backdrop{position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px)}.pgm-dialog{position:fixed;left:50%;top:50%;z-index:9999;width:clamp(280px,90vw,360px);transform:translate(-50%,-50%);border:1px solid rgba(255,255,255,0.1);background:rgba(4,6,10,0.98);box-shadow:0 25px 50px -12px rgba(0,0,0,0.5)}@media (max-width:480px){.pgm-dialog{width:calc(100vw - 2rem)}}.pgm-header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,0.07);padding:0.75rem 1rem}.pgm-header-title{font-size:0.72rem;font-weight:600;letter-spacing:0.1em;color:#eef1f8;text-transform:uppercase;margin:0}.pgm-header-subtitle{margin-top:0.125rem;margin-bottom:0;font-size:0.52rem;letter-spacing:0.12em;color:rgba(255,255,255,0.35);text-transform:uppercase}.pgm-close-btn{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;color:rgba(255,255,255,0.3);transition:color 150ms;background:none;border:none;cursor:pointer;padding:0;flex-shrink:0}.pgm-close-btn:hover{color:rgba(255,255,255,0.8)}.pgm-close-btn:focus-visible{outline:none;box-shadow:0 0 0 2px #00e5a0}.pgm-size-section{border-bottom:1px solid rgba(255,255,255,0.07);padding:0.75rem 1rem}.pgm-size-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.5rem}.pgm-size-label{font-size:0.6rem;letter-spacing:0.16em;color:rgba(255,255,255,0.5);text-transform:uppercase}.pgm-size-value{font-size:0.56rem;letter-spacing:0.12em;color:#00e5a0;text-transform:uppercase}.pgm-size-btns{display:flex;gap:0.375rem}.pgm-size-btn{flex:1;border:1px solid;padding:0.375rem 0;text-align:center;font-size:0.58rem;text-transform:uppercase;letter-spacing:0.1em;transition:background 150ms,border-color 150ms,color 150ms;background:none;cursor:pointer}.pgm-size-btn:focus-visible{outline:none;box-shadow:0 0 0 2px #00e5a0}.pgm-size-btn--active{border-color:#00e5a0;background:rgba(0,229,160,0.1);color:#00e5a0}.pgm-size-btn--inactive{border-color:rgba(255,255,255,0.1);background:transparent;color:rgba(255,255,255,0.35)}.pgm-size-btn--inactive:hover{border-color:rgba(255,255,255,0.25);color:rgba(255,255,255,0.6)}.pgm-toggle-list{max-height:min(50vh,340px);overflow-y:auto}.pgm-toggle-btn{display:flex;width:100%;align-items:center;gap:0.75rem;padding:0.625rem 1rem;text-align:left;transition:background 150ms;background:none;border:none;cursor:pointer}.pgm-toggle-btn:hover{background:rgba(255,255,255,0.03)}.pgm-toggle-btn:focus-visible{outline:none;box-shadow:inset 0 0 0 2px #00e5a0}.pgm-toggle-btn--on{background:rgba(0,229,160,0.04)}.pgm-toggle-icon{flex-shrink:0;transition:color 150ms;color:rgba(255,255,255,0.3)}.pgm-toggle-icon--on{color:#00e5a0}.pgm-toggle-btn:hover .pgm-toggle-icon:not(.pgm-toggle-icon--on){color:rgba(255,255,255,0.5)}.pgm-toggle-text{min-width:0;flex:1}.pgm-toggle-label{display:block;font-size:0.68rem;font-weight:500;line-height:1;letter-spacing:0.04em;transition:color 150ms;color:rgba(255,255,255,0.55)}.pgm-toggle-label--on{color:#eef1f8}.pgm-toggle-desc{margin-top:0.125rem;display:block;font-size:0.52rem;line-height:1.375;letter-spacing:0.06em;color:rgba(255,255,255,0.25)}.pgm-pill{position:relative;height:1rem;width:1.75rem;flex-shrink:0;border-radius:9999px;border:1px solid;transition:background 200ms,border-color 200ms}.pgm-pill--on{border-color:#00e5a0;background:rgba(0,229,160,0.2)}.pgm-pill--off{border-color:rgba(255,255,255,0.15);background:transparent}.pgm-pill-knob{position:absolute;top:0.125rem;height:0.75rem;width:0.75rem;border-radius:9999px;transition:left 200ms,background 200ms}.pgm-pill-knob--on{left:0.875rem;background:#00e5a0}.pgm-pill-knob--off{left:0.125rem;background:rgba(255,255,255,0.25)}.pgm-footer{display:flex;align-items:center;justify-content:space-between;gap:0.75rem;border-top:1px solid rgba(255,255,255,0.07);padding:0.625rem 1rem}.pgm-footer-note{font-size:0.5rem;text-transform:uppercase;letter-spacing:0.1em;color:rgba(255,255,255,0.2)}.pgm-reset-btn{font-size:0.56rem;text-transform:uppercase;letter-spacing:0.12em;color:rgba(255,255,255,0.3);text-underline-offset:0.125rem;transition:color 150ms;background:none;border:none;cursor:pointer;padding:0}.pgm-reset-btn:hover{color:#ff6b6b}.pgm-reset-btn:disabled{cursor:not-allowed;opacity:0.3}.pgm-reset-btn:focus-visible{outline:none;box-shadow:0 0 0 2px #00e5a0}html.a11y-text-lg{font-size:118% !important}html.a11y-text-xl{font-size:145% !important}html.a11y-high-contrast body{--foreground:#ffffff;--background:#000000}html.a11y-invert img,html.a11y-invert video,html.a11y-invert canvas,html.a11y-invert svg:not([data-a11y-skip]){filter:invert(1) hue-rotate(180deg)}html.a11y-reduce-motion *,html.a11y-reduce-motion *::before,html.a11y-reduce-motion *::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}html.a11y-highlight-links a,html.a11y-highlight-links [role="link"]{text-decoration:underline !important;text-underline-offset:3px !important;outline:2px solid !important;outline-offset:2px !important}html.a11y-text-spacing *:not(input):not(textarea){letter-spacing:0.12em !important;word-spacing:0.18em !important;line-height:1.85 !important}html.a11y-adhd *,html.a11y-adhd *::before,html.a11y-adhd *::after{animation:none !important;transition:none !important}html.a11y-adhd:focus-visible{outline:3px solid #facc15 !important;outline-offset:3px !important;border-radius:2px !important}html.a11y-dyslexia,html.a11y-dyslexia *{font-family:'Arial','Verdana','Helvetica',sans-serif !important;word-spacing:0.22em !important;line-height:1.95 !important;letter-spacing:0.04em !important}
|
package/dist/index.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var p=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var W=Object.prototype.hasOwnProperty;var z=(t,a)=>{for(var s in a)p(t,s,{get:a[s],enumerable:!0})},B=(t,a,s,i)=>{if(a&&typeof a=="object"||typeof a=="function")for(let o of L(a))!W.call(t,o)&&o!==s&&p(t,o,{get:()=>a[o],enumerable:!(i=S(a,o))||i.enumerable});return t};var E=t=>B(p({},"__esModule",{value:!0}),t);var j={};z(j,{A11yWidget:()=>u,default:()=>u});module.exports=E(j);var n=require("react"),y=require("react-dom"),e=require("react/jsx-runtime"),k="pgm-a11y",c={textSize:0,highContrast:!1,invertColors:!1,grayscale:!1,reduceMotion:!1,highlightLinks:!1,textSpacing:!1,adhd:!1,dyslexia:!1};function b(t){let a=document.documentElement;a.classList.remove("a11y-text-lg","a11y-text-xl"),t.textSize===1&&a.classList.add("a11y-text-lg"),t.textSize===2&&a.classList.add("a11y-text-xl");let s={"a11y-high-contrast":t.highContrast,"a11y-invert":t.invertColors,"a11y-grayscale":t.grayscale,"a11y-reduce-motion":t.reduceMotion,"a11y-highlight-links":t.highlightLinks,"a11y-text-spacing":t.textSpacing,"a11y-adhd":t.adhd,"a11y-dyslexia":t.dyslexia};for(let[o,g]of Object.entries(s))a.classList.toggle(o,g);let i=[];t.invertColors&&i.push("invert(1) hue-rotate(180deg)"),t.highContrast&&i.push("contrast(1.6)"),t.grayscale&&i.push("grayscale(1)"),a.style.filter=i.join(" ")}function A(){try{let t=localStorage.getItem(k);return t?{...c,...JSON.parse(t)}:{...c}}catch{return{...c}}}function x(t){try{localStorage.setItem(k,JSON.stringify(t))}catch{}}var v=["Normal","Large","X-Large"],O=[{key:"highContrast",label:"High Contrast",desc:"Increase colour contrast for readability",icon:(0,e.jsxs)("svg",{viewBox:"0 0 24 24",className:"w-4 h-4",fill:"none",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",children:[(0,e.jsx)("circle",{cx:"12",cy:"12",r:"10"}),(0,e.jsx)("path",{d:"M12 2v20"}),(0,e.jsx)("path",{d:"M12 2a10 10 0 0 1 0 20",fill:"currentColor",stroke:"none"})]})},{key:"invertColors",label:"Invert Colors",desc:"Invert all page colours",icon:(0,e.jsxs)("svg",{viewBox:"0 0 24 24",className:"w-4 h-4",fill:"none",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",children:[(0,e.jsx)("path",{d:"M12 3v18M3 12h18"}),(0,e.jsx)("path",{d:"M12 3a9 9 0 0 1 0 18",fill:"currentColor",stroke:"none"})]})},{key:"grayscale",label:"Grayscale",desc:"Remove all colour from the page",icon:(0,e.jsxs)("svg",{viewBox:"0 0 24 24",className:"w-4 h-4",fill:"none",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",children:[(0,e.jsx)("circle",{cx:"12",cy:"12",r:"9"}),(0,e.jsx)("circle",{cx:"12",cy:"12",r:"4",fill:"currentColor",stroke:"none"})]})},{key:"reduceMotion",label:"Reduce Motion",desc:"Stop animations and transitions",icon:(0,e.jsx)("svg",{viewBox:"0 0 24 24",className:"w-4 h-4",fill:"none",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",children:(0,e.jsx)("path",{d:"M5 12h14M12 5l-7 7 7 7"})})},{key:"highlightLinks",label:"Highlight Links",desc:"Make all links visible at a glance",icon:(0,e.jsxs)("svg",{viewBox:"0 0 24 24",className:"w-4 h-4",fill:"none",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",children:[(0,e.jsx)("path",{d:"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"}),(0,e.jsx)("path",{d:"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"})]})},{key:"textSpacing",label:"Text Spacing",desc:"Increase letter, word & line spacing",icon:(0,e.jsx)("svg",{viewBox:"0 0 24 24",className:"w-4 h-4",fill:"none",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",children:(0,e.jsx)("path",{d:"M4 6h16M4 10h16M4 14h16M4 18h16"})})},{key:"adhd",label:"ADHD Friendly",desc:"Remove distractions, add focus ring",icon:(0,e.jsxs)("svg",{viewBox:"0 0 24 24",className:"w-4 h-4",fill:"none",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",children:[(0,e.jsx)("path",{d:"M12 2L2 7l10 5 10-5-10-5z"}),(0,e.jsx)("path",{d:"M2 17l10 5 10-5"}),(0,e.jsx)("path",{d:"M2 12l10 5 10-5"})]})},{key:"dyslexia",label:"Dyslexia Font",desc:"Switch to a high-readability typeface",icon:(0,e.jsxs)("svg",{viewBox:"0 0 24 24",className:"w-4 h-4",fill:"none",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",children:[(0,e.jsx)("path",{d:"M4 7V4h16v3"}),(0,e.jsx)("path",{d:"M9 20h6"}),(0,e.jsx)("path",{d:"M12 4v16"})]})}];function u({className:t}){let[a,s]=(0,n.useState)(!1),[i,o]=(0,n.useState)(c),[g,w]=(0,n.useState)(!1),N=(0,n.useRef)(null);(0,n.useEffect)(()=>{w(!0)},[]),(0,n.useEffect)(()=>{let r=A();o(r),b(r)},[]),(0,n.useEffect)(()=>{if(!a)return;let r=l=>{l.key==="Escape"&&s(!1)};return document.addEventListener("keydown",r),()=>document.removeEventListener("keydown",r)},[a]);let f=r=>{o(l=>{let h={...l,...r};return b(h),x(h),h})},C=()=>{o(c),b(c),x(c)},m=JSON.stringify(i)!==JSON.stringify(c);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)("button",{ref:N,type:"button","aria-label":"Accessibility options","aria-expanded":a,"aria-haspopup":"dialog",onClick:()=>s(r=>!r),className:`relative flex h-10 w-10 items-center justify-center border border-white/10 bg-[rgba(4,6,10,0.85)] text-white/60 shadow-lg transition-[border-color,color,background] duration-200 hover:border-[rgba(0,229,160,0.4)] hover:bg-[rgba(0,229,160,0.08)] hover:text-[#00e5a0] focus-visible:ring-2 focus-visible:ring-[#00e5a0] ${t??""}`,children:[(0,e.jsxs)("svg",{viewBox:"0 0 24 24",className:"h-5 w-5",fill:"none",stroke:"currentColor",strokeWidth:1.8,"aria-hidden":"true",children:[(0,e.jsx)("circle",{cx:"12",cy:"5",r:"1.5",fill:"currentColor",stroke:"none"}),(0,e.jsx)("path",{d:"M5 8.5h14M8 8.5l1 10 3-4 3 4 1-10",strokeLinecap:"round",strokeLinejoin:"round"})]}),m&&(0,e.jsx)("span",{className:"absolute top-1.5 right-1.5 h-1.5 w-1.5 rounded-full bg-[#00e5a0]","aria-hidden":"true"})]}),a&&g&&(0,y.createPortal)((0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("div",{className:"fixed inset-0 z-9998 bg-black/60 backdrop-blur-sm",onClick:()=>s(!1),"aria-hidden":"true"}),(0,e.jsxs)("div",{role:"dialog","aria-modal":"true","aria-label":"Accessibility settings",className:"fixed left-1/2 top-1/2 z-9999 w-[clamp(280px,90vw,360px)] -translate-x-1/2 -translate-y-1/2 border border-white/10 bg-[rgba(4,6,10,0.98)] shadow-2xl max-[480px]:w-[calc(100vw-2rem)]",children:[(0,e.jsxs)("div",{className:"flex items-center justify-between border-b border-white/[0.07] px-4 py-3",children:[(0,e.jsxs)("div",{children:[(0,e.jsx)("p",{className:"text-[0.72rem] font-semibold tracking-widest text-[#eef1f8] uppercase",children:"Accessibility"}),(0,e.jsx)("p",{className:"mt-0.5 text-[0.52rem] tracking-[0.12em] text-white/35 uppercase",children:"WCAG 2.1 \xB7 Personalise your experience"})]}),(0,e.jsx)("button",{type:"button","aria-label":"Close accessibility panel",onClick:()=>s(!1),className:"flex h-6 w-6 items-center justify-center text-white/30 transition-colors duration-150 hover:text-white/80 focus-visible:ring-2 focus-visible:ring-[#00e5a0]",children:(0,e.jsx)("svg",{viewBox:"0 0 24 24",className:"h-3.5 w-3.5",fill:"none",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",children:(0,e.jsx)("path",{d:"M18 6 6 18M6 6l12 12",strokeLinecap:"round"})})})]}),(0,e.jsxs)("div",{className:"border-b border-white/[0.07] px-4 py-3",children:[(0,e.jsxs)("div",{className:"mb-2 flex items-center justify-between",children:[(0,e.jsx)("span",{className:"text-[0.6rem] tracking-[0.16em] text-white/50 uppercase",children:"Text Size"}),(0,e.jsx)("span",{className:"text-[0.56rem] tracking-[0.12em] text-[#00e5a0] uppercase",children:v[i.textSize]})]}),(0,e.jsx)("div",{className:"flex gap-1.5",children:v.map((r,l)=>(0,e.jsx)("button",{type:"button","aria-pressed":i.textSize===l,onClick:()=>f({textSize:l}),className:`flex-1 border py-1.5 text-center text-[0.58rem] uppercase tracking-widest transition-[background,border-color,color] duration-150 focus-visible:ring-2 focus-visible:ring-[#00e5a0] ${i.textSize===l?"border-[#00e5a0] bg-[rgba(0,229,160,0.1)] text-[#00e5a0]":"border-white/10 bg-transparent text-white/35 hover:border-white/25 hover:text-white/60"}`,children:r},r))})]}),(0,e.jsx)("div",{className:"max-h-[min(50vh,340px)] overflow-y-auto",children:O.map(({key:r,label:l,desc:h,icon:M})=>{let d=i[r];return(0,e.jsxs)("button",{type:"button",role:"switch","aria-checked":d,onClick:()=>f({[r]:!d}),className:`group flex w-full items-center gap-3 px-4 py-2.5 text-left transition-[background] duration-150 hover:bg-white/3 focus-visible:ring-2 focus-visible:ring-[#00e5a0] ${d?"bg-[rgba(0,229,160,0.04)]":""}`,children:[(0,e.jsx)("span",{className:`shrink-0 transition-colors duration-150 ${d?"text-[#00e5a0]":"text-white/30 group-hover:text-white/50"}`,children:M}),(0,e.jsxs)("span",{className:"min-w-0 flex-1",children:[(0,e.jsx)("span",{className:`block text-[0.68rem] font-medium leading-none tracking-[0.04em] transition-colors duration-150 ${d?"text-[#eef1f8]":"text-white/55"}`,children:l}),(0,e.jsx)("span",{className:"mt-0.5 block text-[0.52rem] leading-snug tracking-[0.06em] text-white/25",children:h})]}),(0,e.jsx)("span",{"aria-hidden":"true",className:`relative h-4 w-7 shrink-0 rounded-full border transition-[background,border-color] duration-200 ${d?"border-[#00e5a0] bg-[rgba(0,229,160,0.2)]":"border-white/15 bg-transparent"}`,children:(0,e.jsx)("span",{className:`absolute top-0.5 h-3 w-3 rounded-full transition-[left,background] duration-200 ${d?"left-3.5 bg-[#00e5a0]":"left-0.5 bg-white/25"}`})})]},r)})}),(0,e.jsxs)("div",{className:"flex items-center justify-between gap-3 border-t border-white/[0.07] px-4 py-2.5",children:[(0,e.jsx)("span",{className:"text-[0.5rem] uppercase tracking-widest text-white/20",children:"Changes apply instantly & persist"}),(0,e.jsx)("button",{type:"button",onClick:C,disabled:!m,className:"text-[0.56rem] uppercase tracking-[0.12em] text-white/30 underline-offset-2 transition-colors duration-150 hover:text-[#ff6b6b] disabled:cursor-not-allowed disabled:opacity-30 focus-visible:ring-2 focus-visible:ring-[#00e5a0]",children:"Reset all"})]})]})]}),document.body)]})}0&&(module.exports={A11yWidget});
|
|
1
|
+
var h=Object.defineProperty;var L=Object.getOwnPropertyDescriptor;var z=Object.getOwnPropertyNames;var w=Object.prototype.hasOwnProperty;var W=(t,a)=>{for(var i in a)h(t,i,{get:a[i],enumerable:!0})},B=(t,a,i,o)=>{if(a&&typeof a=="object"||typeof a=="function")for(let n of z(a))!w.call(t,n)&&n!==i&&h(t,n,{get:()=>a[n],enumerable:!(o=L(a,n))||o.enumerable});return t};var E=t=>B(h({},"__esModule",{value:!0}),t);var $={};W($,{A11yWidget:()=>p,default:()=>p});module.exports=E($);var l=require("react"),b=require("react-dom"),e=require("react/jsx-runtime"),x="pgm-a11y",c={textSize:0,highContrast:!1,invertColors:!1,grayscale:!1,reduceMotion:!1,highlightLinks:!1,textSpacing:!1,adhd:!1,dyslexia:!1};function u(t){let a=document.documentElement;a.classList.remove("a11y-text-lg","a11y-text-xl"),t.textSize===1&&a.classList.add("a11y-text-lg"),t.textSize===2&&a.classList.add("a11y-text-xl");let i={"a11y-high-contrast":t.highContrast,"a11y-invert":t.invertColors,"a11y-grayscale":t.grayscale,"a11y-reduce-motion":t.reduceMotion,"a11y-highlight-links":t.highlightLinks,"a11y-text-spacing":t.textSpacing,"a11y-adhd":t.adhd,"a11y-dyslexia":t.dyslexia};for(let[n,m]of Object.entries(i))a.classList.toggle(n,m);let o=[];t.invertColors&&o.push("invert(1) hue-rotate(180deg)"),t.highContrast&&o.push("contrast(1.6)"),t.grayscale&&o.push("grayscale(1)"),a.style.filter=o.join(" ")}function A(){try{let t=localStorage.getItem(x);return t?{...c,...JSON.parse(t)}:{...c}}catch{return{...c}}}function f(t){try{localStorage.setItem(x,JSON.stringify(t))}catch{}}var k=["Normal","Large","X-Large"],O=[{key:"highContrast",label:"High Contrast",desc:"Increase colour contrast for readability",icon:(0,e.jsxs)("svg",{viewBox:"0 0 24 24",className:"pgm-icon",fill:"none",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",children:[(0,e.jsx)("circle",{cx:"12",cy:"12",r:"10"}),(0,e.jsx)("path",{d:"M12 2v20"}),(0,e.jsx)("path",{d:"M12 2a10 10 0 0 1 0 20",fill:"currentColor",stroke:"none"})]})},{key:"invertColors",label:"Invert Colors",desc:"Invert all page colours",icon:(0,e.jsxs)("svg",{viewBox:"0 0 24 24",className:"pgm-icon",fill:"none",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",children:[(0,e.jsx)("path",{d:"M12 3v18M3 12h18"}),(0,e.jsx)("path",{d:"M12 3a9 9 0 0 1 0 18",fill:"currentColor",stroke:"none"})]})},{key:"grayscale",label:"Grayscale",desc:"Remove all colour from the page",icon:(0,e.jsxs)("svg",{viewBox:"0 0 24 24",className:"pgm-icon",fill:"none",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",children:[(0,e.jsx)("circle",{cx:"12",cy:"12",r:"9"}),(0,e.jsx)("circle",{cx:"12",cy:"12",r:"4",fill:"currentColor",stroke:"none"})]})},{key:"reduceMotion",label:"Reduce Motion",desc:"Stop animations and transitions",icon:(0,e.jsx)("svg",{viewBox:"0 0 24 24",className:"pgm-icon",fill:"none",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",children:(0,e.jsx)("path",{d:"M5 12h14M12 5l-7 7 7 7"})})},{key:"highlightLinks",label:"Highlight Links",desc:"Make all links visible at a glance",icon:(0,e.jsxs)("svg",{viewBox:"0 0 24 24",className:"pgm-icon",fill:"none",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",children:[(0,e.jsx)("path",{d:"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"}),(0,e.jsx)("path",{d:"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"})]})},{key:"textSpacing",label:"Text Spacing",desc:"Increase letter, word & line spacing",icon:(0,e.jsx)("svg",{viewBox:"0 0 24 24",className:"pgm-icon",fill:"none",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",children:(0,e.jsx)("path",{d:"M4 6h16M4 10h16M4 14h16M4 18h16"})})},{key:"adhd",label:"ADHD Friendly",desc:"Remove distractions, add focus ring",icon:(0,e.jsxs)("svg",{viewBox:"0 0 24 24",className:"pgm-icon",fill:"none",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",children:[(0,e.jsx)("path",{d:"M12 2L2 7l10 5 10-5-10-5z"}),(0,e.jsx)("path",{d:"M2 17l10 5 10-5"}),(0,e.jsx)("path",{d:"M2 12l10 5 10-5"})]})},{key:"dyslexia",label:"Dyslexia Font",desc:"Switch to a high-readability typeface",icon:(0,e.jsxs)("svg",{viewBox:"0 0 24 24",className:"pgm-icon",fill:"none",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",children:[(0,e.jsx)("path",{d:"M4 7V4h16v3"}),(0,e.jsx)("path",{d:"M9 20h6"}),(0,e.jsx)("path",{d:"M12 4v16"})]})}];function p({className:t}){let[a,i]=(0,l.useState)(!1),[o,n]=(0,l.useState)(c),[m,N]=(0,l.useState)(!1),C=(0,l.useRef)(null);(0,l.useEffect)(()=>{N(!0)},[]),(0,l.useEffect)(()=>{let s=A();n(s),u(s)},[]),(0,l.useEffect)(()=>{if(!a)return;let s=r=>{r.key==="Escape"&&i(!1)};return document.addEventListener("keydown",s),()=>document.removeEventListener("keydown",s)},[a]);let v=s=>{n(r=>{let g={...r,...s};return u(g),f(g),g})},M=()=>{n(c),u(c),f(c)},y=JSON.stringify(o)!==JSON.stringify(c);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)("button",{ref:C,type:"button","aria-label":"Accessibility options","aria-expanded":a,"aria-haspopup":"dialog",onClick:()=>i(s=>!s),className:`pgm-btn${t?` ${t}`:""}`,children:[(0,e.jsxs)("svg",{viewBox:"0 0 24 24",className:"pgm-icon-lg",fill:"none",stroke:"currentColor",strokeWidth:1.8,"aria-hidden":"true",children:[(0,e.jsx)("circle",{cx:"12",cy:"5",r:"1.5",fill:"currentColor",stroke:"none"}),(0,e.jsx)("path",{d:"M5 8.5h14M8 8.5l1 10 3-4 3 4 1-10",strokeLinecap:"round",strokeLinejoin:"round"})]}),y&&(0,e.jsx)("span",{className:"pgm-dot","aria-hidden":"true"})]}),a&&m&&(0,b.createPortal)((0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("div",{className:"pgm-backdrop",onClick:()=>i(!1),"aria-hidden":"true"}),(0,e.jsxs)("div",{role:"dialog","aria-modal":"true","aria-label":"Accessibility settings",className:"pgm-dialog",children:[(0,e.jsxs)("div",{className:"pgm-header",children:[(0,e.jsxs)("div",{children:[(0,e.jsx)("p",{className:"pgm-header-title",children:"Accessibility"}),(0,e.jsx)("p",{className:"pgm-header-subtitle",children:"WCAG 2.1 \xB7 Personalise your experience"})]}),(0,e.jsx)("button",{type:"button","aria-label":"Close accessibility panel",onClick:()=>i(!1),className:"pgm-close-btn",children:(0,e.jsx)("svg",{viewBox:"0 0 24 24",className:"pgm-icon-sm",fill:"none",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",children:(0,e.jsx)("path",{d:"M18 6 6 18M6 6l12 12",strokeLinecap:"round"})})})]}),(0,e.jsxs)("div",{className:"pgm-size-section",children:[(0,e.jsxs)("div",{className:"pgm-size-header",children:[(0,e.jsx)("span",{className:"pgm-size-label",children:"Text Size"}),(0,e.jsx)("span",{className:"pgm-size-value",children:k[o.textSize]})]}),(0,e.jsx)("div",{className:"pgm-size-btns",children:k.map((s,r)=>(0,e.jsx)("button",{type:"button","aria-pressed":o.textSize===r,onClick:()=>v({textSize:r}),className:`pgm-size-btn ${o.textSize===r?"pgm-size-btn--active":"pgm-size-btn--inactive"}`,children:s},s))})]}),(0,e.jsx)("div",{className:"pgm-toggle-list",children:O.map(({key:s,label:r,desc:g,icon:S})=>{let d=o[s];return(0,e.jsxs)("button",{type:"button",role:"switch","aria-checked":d,onClick:()=>v({[s]:!d}),className:`pgm-toggle-btn${d?" pgm-toggle-btn--on":""}`,children:[(0,e.jsx)("span",{className:`pgm-toggle-icon${d?" pgm-toggle-icon--on":""}`,children:S}),(0,e.jsxs)("span",{className:"pgm-toggle-text",children:[(0,e.jsx)("span",{className:`pgm-toggle-label${d?" pgm-toggle-label--on":""}`,children:r}),(0,e.jsx)("span",{className:"pgm-toggle-desc",children:g})]}),(0,e.jsx)("span",{"aria-hidden":"true",className:`pgm-pill${d?" pgm-pill--on":" pgm-pill--off"}`,children:(0,e.jsx)("span",{className:`pgm-pill-knob${d?" pgm-pill-knob--on":" pgm-pill-knob--off"}`})})]},s)})}),(0,e.jsxs)("div",{className:"pgm-footer",children:[(0,e.jsx)("span",{className:"pgm-footer-note",children:"Changes apply instantly & persist"}),(0,e.jsx)("button",{type:"button",onClick:M,disabled:!y,className:"pgm-reset-btn",children:"Reset all"})]})]})]}),document.body)]})}0&&(module.exports={A11yWidget});
|
package/dist/index.min.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{useEffect as
|
|
1
|
+
import{useEffect as m,useRef as z,useState as h}from"react";import{createPortal as w}from"react-dom";import{Fragment as x,jsx as e,jsxs as a}from"react/jsx-runtime";var N="pgm-a11y",l={textSize:0,highContrast:!1,invertColors:!1,grayscale:!1,reduceMotion:!1,highlightLinks:!1,textSpacing:!1,adhd:!1,dyslexia:!1};function u(t){let o=document.documentElement;o.classList.remove("a11y-text-lg","a11y-text-xl"),t.textSize===1&&o.classList.add("a11y-text-lg"),t.textSize===2&&o.classList.add("a11y-text-xl");let c={"a11y-high-contrast":t.highContrast,"a11y-invert":t.invertColors,"a11y-grayscale":t.grayscale,"a11y-reduce-motion":t.reduceMotion,"a11y-highlight-links":t.highlightLinks,"a11y-text-spacing":t.textSpacing,"a11y-adhd":t.adhd,"a11y-dyslexia":t.dyslexia};for(let[d,p]of Object.entries(c))o.classList.toggle(d,p);let i=[];t.invertColors&&i.push("invert(1) hue-rotate(180deg)"),t.highContrast&&i.push("contrast(1.6)"),t.grayscale&&i.push("grayscale(1)"),o.style.filter=i.join(" ")}function W(){try{let t=localStorage.getItem(N);return t?{...l,...JSON.parse(t)}:{...l}}catch{return{...l}}}function k(t){try{localStorage.setItem(N,JSON.stringify(t))}catch{}}var b=["Normal","Large","X-Large"],B=[{key:"highContrast",label:"High Contrast",desc:"Increase colour contrast for readability",icon:a("svg",{viewBox:"0 0 24 24",className:"pgm-icon",fill:"none",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",children:[e("circle",{cx:"12",cy:"12",r:"10"}),e("path",{d:"M12 2v20"}),e("path",{d:"M12 2a10 10 0 0 1 0 20",fill:"currentColor",stroke:"none"})]})},{key:"invertColors",label:"Invert Colors",desc:"Invert all page colours",icon:a("svg",{viewBox:"0 0 24 24",className:"pgm-icon",fill:"none",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",children:[e("path",{d:"M12 3v18M3 12h18"}),e("path",{d:"M12 3a9 9 0 0 1 0 18",fill:"currentColor",stroke:"none"})]})},{key:"grayscale",label:"Grayscale",desc:"Remove all colour from the page",icon:a("svg",{viewBox:"0 0 24 24",className:"pgm-icon",fill:"none",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",children:[e("circle",{cx:"12",cy:"12",r:"9"}),e("circle",{cx:"12",cy:"12",r:"4",fill:"currentColor",stroke:"none"})]})},{key:"reduceMotion",label:"Reduce Motion",desc:"Stop animations and transitions",icon:e("svg",{viewBox:"0 0 24 24",className:"pgm-icon",fill:"none",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",children:e("path",{d:"M5 12h14M12 5l-7 7 7 7"})})},{key:"highlightLinks",label:"Highlight Links",desc:"Make all links visible at a glance",icon:a("svg",{viewBox:"0 0 24 24",className:"pgm-icon",fill:"none",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",children:[e("path",{d:"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"}),e("path",{d:"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"})]})},{key:"textSpacing",label:"Text Spacing",desc:"Increase letter, word & line spacing",icon:e("svg",{viewBox:"0 0 24 24",className:"pgm-icon",fill:"none",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",children:e("path",{d:"M4 6h16M4 10h16M4 14h16M4 18h16"})})},{key:"adhd",label:"ADHD Friendly",desc:"Remove distractions, add focus ring",icon:a("svg",{viewBox:"0 0 24 24",className:"pgm-icon",fill:"none",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",children:[e("path",{d:"M12 2L2 7l10 5 10-5-10-5z"}),e("path",{d:"M2 17l10 5 10-5"}),e("path",{d:"M2 12l10 5 10-5"})]})},{key:"dyslexia",label:"Dyslexia Font",desc:"Switch to a high-readability typeface",icon:a("svg",{viewBox:"0 0 24 24",className:"pgm-icon",fill:"none",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",children:[e("path",{d:"M4 7V4h16v3"}),e("path",{d:"M9 20h6"}),e("path",{d:"M12 4v16"})]})}];function v({className:t}){let[o,c]=h(!1),[i,d]=h(l),[p,C]=h(!1),M=z(null);m(()=>{C(!0)},[]),m(()=>{let s=W();d(s),u(s)},[]),m(()=>{if(!o)return;let s=n=>{n.key==="Escape"&&c(!1)};return document.addEventListener("keydown",s),()=>document.removeEventListener("keydown",s)},[o]);let y=s=>{d(n=>{let g={...n,...s};return u(g),k(g),g})},S=()=>{d(l),u(l),k(l)},f=JSON.stringify(i)!==JSON.stringify(l);return a(x,{children:[a("button",{ref:M,type:"button","aria-label":"Accessibility options","aria-expanded":o,"aria-haspopup":"dialog",onClick:()=>c(s=>!s),className:`pgm-btn${t?` ${t}`:""}`,children:[a("svg",{viewBox:"0 0 24 24",className:"pgm-icon-lg",fill:"none",stroke:"currentColor",strokeWidth:1.8,"aria-hidden":"true",children:[e("circle",{cx:"12",cy:"5",r:"1.5",fill:"currentColor",stroke:"none"}),e("path",{d:"M5 8.5h14M8 8.5l1 10 3-4 3 4 1-10",strokeLinecap:"round",strokeLinejoin:"round"})]}),f&&e("span",{className:"pgm-dot","aria-hidden":"true"})]}),o&&p&&w(a(x,{children:[e("div",{className:"pgm-backdrop",onClick:()=>c(!1),"aria-hidden":"true"}),a("div",{role:"dialog","aria-modal":"true","aria-label":"Accessibility settings",className:"pgm-dialog",children:[a("div",{className:"pgm-header",children:[a("div",{children:[e("p",{className:"pgm-header-title",children:"Accessibility"}),e("p",{className:"pgm-header-subtitle",children:"WCAG 2.1 \xB7 Personalise your experience"})]}),e("button",{type:"button","aria-label":"Close accessibility panel",onClick:()=>c(!1),className:"pgm-close-btn",children:e("svg",{viewBox:"0 0 24 24",className:"pgm-icon-sm",fill:"none",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",children:e("path",{d:"M18 6 6 18M6 6l12 12",strokeLinecap:"round"})})})]}),a("div",{className:"pgm-size-section",children:[a("div",{className:"pgm-size-header",children:[e("span",{className:"pgm-size-label",children:"Text Size"}),e("span",{className:"pgm-size-value",children:b[i.textSize]})]}),e("div",{className:"pgm-size-btns",children:b.map((s,n)=>e("button",{type:"button","aria-pressed":i.textSize===n,onClick:()=>y({textSize:n}),className:`pgm-size-btn ${i.textSize===n?"pgm-size-btn--active":"pgm-size-btn--inactive"}`,children:s},s))})]}),e("div",{className:"pgm-toggle-list",children:B.map(({key:s,label:n,desc:g,icon:L})=>{let r=i[s];return a("button",{type:"button",role:"switch","aria-checked":r,onClick:()=>y({[s]:!r}),className:`pgm-toggle-btn${r?" pgm-toggle-btn--on":""}`,children:[e("span",{className:`pgm-toggle-icon${r?" pgm-toggle-icon--on":""}`,children:L}),a("span",{className:"pgm-toggle-text",children:[e("span",{className:`pgm-toggle-label${r?" pgm-toggle-label--on":""}`,children:n}),e("span",{className:"pgm-toggle-desc",children:g})]}),e("span",{"aria-hidden":"true",className:`pgm-pill${r?" pgm-pill--on":" pgm-pill--off"}`,children:e("span",{className:`pgm-pill-knob${r?" pgm-pill-knob--on":" pgm-pill-knob--off"}`})})]},s)})}),a("div",{className:"pgm-footer",children:[e("span",{className:"pgm-footer-note",children:"Changes apply instantly & persist"}),e("button",{type:"button",onClick:S,disabled:!f,className:"pgm-reset-btn",children:"Reset all"})]})]})]}),document.body)]})}export{v as A11yWidget,v as default};
|