@pigmilcom/a11y 1.0.9 → 1.1.1
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.
Potentially problematic release.
This version of @pigmilcom/a11y might be problematic. Click here for more details.
- package/README.md +118 -18
- package/dist/a11y.cdn.js +29 -10
- package/dist/index.css +23 -4
- package/dist/index.js +115 -9
- 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 +113 -8
- package/package.json +3 -2
- package/src/cdn.jsx +2 -2
package/dist/index.css
CHANGED
|
@@ -69,9 +69,11 @@ accessibility class rules that get toggled on <html> by the widget.
|
|
|
69
69
|
z-index: 9999;
|
|
70
70
|
width: clamp(280px,90vw,360px);
|
|
71
71
|
transform: translate(-50%,-50%);
|
|
72
|
-
border: 1px solid rgba(255,255,255,0.
|
|
72
|
+
border: 1px solid rgba(255,255,255,0.12);
|
|
73
73
|
background: rgba(4,6,10,0.98);
|
|
74
|
-
box-shadow: 0 25px 50px -12px rgba(0,0,0,0.
|
|
74
|
+
box-shadow: 0 25px 50px -12px rgba(0,0,0,0.6);
|
|
75
|
+
border-radius: 0.625rem;
|
|
76
|
+
overflow: hidden;
|
|
75
77
|
}
|
|
76
78
|
@media (max-width: 480px) {
|
|
77
79
|
.pgm-dialog { width: calc(100vw - 2rem); }
|
|
@@ -185,6 +187,23 @@ accessibility class rules that get toggled on <html> by the widget.
|
|
|
185
187
|
.pgm-toggle-list {
|
|
186
188
|
max-height: min(50vh,340px);
|
|
187
189
|
overflow-y: auto;
|
|
190
|
+
/* Modern slim scrollbar — Firefox */
|
|
191
|
+
scrollbar-width: thin;
|
|
192
|
+
scrollbar-color: rgba(255,255,255,0.12) transparent;
|
|
193
|
+
}
|
|
194
|
+
/* Modern slim scrollbar — Webkit (Chrome / Safari / Edge) */
|
|
195
|
+
.pgm-toggle-list::-webkit-scrollbar {
|
|
196
|
+
width: 3px;
|
|
197
|
+
}
|
|
198
|
+
.pgm-toggle-list::-webkit-scrollbar-track {
|
|
199
|
+
background: transparent;
|
|
200
|
+
}
|
|
201
|
+
.pgm-toggle-list::-webkit-scrollbar-thumb {
|
|
202
|
+
background: rgba(255,255,255,0.14);
|
|
203
|
+
border-radius: 9999px;
|
|
204
|
+
}
|
|
205
|
+
.pgm-toggle-list::-webkit-scrollbar-thumb:hover {
|
|
206
|
+
background: rgba(255,255,255,0.28);
|
|
188
207
|
}
|
|
189
208
|
|
|
190
209
|
/* Toggle buttons */
|
|
@@ -227,7 +246,7 @@ accessibility class rules that get toggled on <html> by the widget.
|
|
|
227
246
|
line-height: 1;
|
|
228
247
|
letter-spacing: 0.04em;
|
|
229
248
|
transition: color 150ms;
|
|
230
|
-
color: rgba(255,255,255,0.
|
|
249
|
+
color: rgba(255,255,255,0.72);
|
|
231
250
|
}
|
|
232
251
|
.pgm-toggle-label--on { color: #eef1f8; }
|
|
233
252
|
.pgm-toggle-desc {
|
|
@@ -236,7 +255,7 @@ accessibility class rules that get toggled on <html> by the widget.
|
|
|
236
255
|
font-size: 0.52rem;
|
|
237
256
|
line-height: 1.375;
|
|
238
257
|
letter-spacing: 0.06em;
|
|
239
|
-
color: rgba(255,255,255,0.
|
|
258
|
+
color: rgba(255,255,255,0.38);
|
|
240
259
|
}
|
|
241
260
|
|
|
242
261
|
/* Pill toggle */
|
package/dist/index.js
CHANGED
|
@@ -20,14 +20,111 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
20
20
|
// src/index.js
|
|
21
21
|
var index_exports = {};
|
|
22
22
|
__export(index_exports, {
|
|
23
|
-
A11yWidget: () =>
|
|
24
|
-
|
|
23
|
+
A11yWidget: () => A11y,
|
|
24
|
+
a11y: () => A11y,
|
|
25
|
+
default: () => A11y
|
|
25
26
|
});
|
|
26
27
|
module.exports = __toCommonJS(index_exports);
|
|
27
28
|
|
|
28
29
|
// src/widget.jsx
|
|
29
30
|
var import_react = require("react");
|
|
30
31
|
var import_react_dom = require("react-dom");
|
|
32
|
+
|
|
33
|
+
// src/license.js
|
|
34
|
+
var _LRE = /^(localhost|127\.\d+\.\d+\.\d+|::1|\[::1\]|0\.0\.0\.0)$/i;
|
|
35
|
+
function _isLocalDev() {
|
|
36
|
+
try {
|
|
37
|
+
const { hostname: h, port: p } = location;
|
|
38
|
+
if (_LRE.test(h)) return true;
|
|
39
|
+
if (p && p !== "80" && p !== "443") return true;
|
|
40
|
+
return false;
|
|
41
|
+
} catch {
|
|
42
|
+
return true;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
function _sign(domain) {
|
|
46
|
+
const seed = domain + "\0" + (/* @__PURE__ */ new Date()).toISOString().slice(0, 10);
|
|
47
|
+
let h = 2166136261 >>> 0;
|
|
48
|
+
for (let i = 0; i < seed.length; i++) {
|
|
49
|
+
h = Math.imul(h ^ seed.charCodeAt(i), 16777619) >>> 0;
|
|
50
|
+
}
|
|
51
|
+
return h.toString(36);
|
|
52
|
+
}
|
|
53
|
+
var _U = [66, 94, 94, 90, 89, 16, 5, 5, 75, 90, 67, 4, 90, 67, 69, 71, 67, 70, 4, 73, 69, 71, 5, 75, 27, 27, 83, 5, 92, 75, 70, 67, 78, 75, 94, 79];
|
|
54
|
+
function _ep(domain) {
|
|
55
|
+
const base = String.fromCharCode(..._U.map((n) => n ^ 42));
|
|
56
|
+
return base + "?d=" + encodeURIComponent(domain) + "&t=" + Date.now() + "&s=" + _sign(domain);
|
|
57
|
+
}
|
|
58
|
+
function _result(status, plan) {
|
|
59
|
+
return Object.freeze({ status, plan: plan || "free" });
|
|
60
|
+
}
|
|
61
|
+
var _CK = "_pgm_lc";
|
|
62
|
+
var _TTL = 18e5;
|
|
63
|
+
function _readCache() {
|
|
64
|
+
try {
|
|
65
|
+
const raw = sessionStorage.getItem(_CK);
|
|
66
|
+
if (!raw) return null;
|
|
67
|
+
const p = JSON.parse(raw);
|
|
68
|
+
if (!p || typeof p.status !== "string") return null;
|
|
69
|
+
return Date.now() - (p._ts || 0) < _TTL ? p : null;
|
|
70
|
+
} catch {
|
|
71
|
+
return null;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
function _writeCache(r) {
|
|
75
|
+
try {
|
|
76
|
+
sessionStorage.setItem(_CK, JSON.stringify({ status: r.status, plan: r.plan, _ts: Date.now() }));
|
|
77
|
+
} catch {
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
var MOCK_MODE = true;
|
|
81
|
+
async function _callApi(domain) {
|
|
82
|
+
if (MOCK_MODE) {
|
|
83
|
+
return { ok: true, plan: "free", blocked: false };
|
|
84
|
+
}
|
|
85
|
+
const ctrl = new AbortController();
|
|
86
|
+
const timer = setTimeout(() => ctrl.abort(), 5e3);
|
|
87
|
+
try {
|
|
88
|
+
const res = await fetch(_ep(domain), {
|
|
89
|
+
method: "GET",
|
|
90
|
+
mode: "cors",
|
|
91
|
+
credentials: "omit",
|
|
92
|
+
signal: ctrl.signal
|
|
93
|
+
});
|
|
94
|
+
clearTimeout(timer);
|
|
95
|
+
if (!res.ok) return null;
|
|
96
|
+
const data = await res.json();
|
|
97
|
+
return data && typeof data.ok === "boolean" ? data : null;
|
|
98
|
+
} catch {
|
|
99
|
+
clearTimeout(timer);
|
|
100
|
+
return null;
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
async function validateLicense() {
|
|
104
|
+
const cached = _readCache();
|
|
105
|
+
if (cached) return _result(cached.status, cached.plan);
|
|
106
|
+
if (_isLocalDev()) {
|
|
107
|
+
const r2 = _result("dev", "free");
|
|
108
|
+
_writeCache(r2);
|
|
109
|
+
return r2;
|
|
110
|
+
}
|
|
111
|
+
const domain = typeof location !== "undefined" ? location.hostname.toLowerCase().replace(/^www\./, "") : "";
|
|
112
|
+
if (!domain) return _result("error", "free");
|
|
113
|
+
let r;
|
|
114
|
+
try {
|
|
115
|
+
const data = await _callApi(domain);
|
|
116
|
+
if (!data) r = _result("error", "free");
|
|
117
|
+
else if (!data.ok) r = _result("error", data.plan || "free");
|
|
118
|
+
else if (data.blocked) r = _result("blocked", data.plan || "free");
|
|
119
|
+
else r = _result("valid", data.plan || "free");
|
|
120
|
+
} catch {
|
|
121
|
+
r = _result("error", "free");
|
|
122
|
+
}
|
|
123
|
+
_writeCache(r);
|
|
124
|
+
return r;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
// src/widget.jsx
|
|
31
128
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
32
129
|
var STORAGE_KEY = "pgm-a11y";
|
|
33
130
|
var DEFAULTS = {
|
|
@@ -152,15 +249,19 @@ var TOGGLES = [
|
|
|
152
249
|
] })
|
|
153
250
|
}
|
|
154
251
|
];
|
|
155
|
-
function
|
|
252
|
+
function A11y({ className }) {
|
|
156
253
|
const [open, setOpen] = (0, import_react.useState)(false);
|
|
157
254
|
const [prefs, setPrefs] = (0, import_react.useState)(DEFAULTS);
|
|
158
255
|
const [mounted, setMounted] = (0, import_react.useState)(false);
|
|
159
256
|
const [notice, setNotice] = (0, import_react.useState)(false);
|
|
257
|
+
const [license, setLicense] = (0, import_react.useState)({ status: "checking", plan: "free" });
|
|
160
258
|
const triggerRef = (0, import_react.useRef)(null);
|
|
161
259
|
(0, import_react.useEffect)(() => {
|
|
162
260
|
setMounted(true);
|
|
163
261
|
}, []);
|
|
262
|
+
(0, import_react.useEffect)(() => {
|
|
263
|
+
validateLicense().then(setLicense);
|
|
264
|
+
}, []);
|
|
164
265
|
(0, import_react.useEffect)(() => {
|
|
165
266
|
const saved = load();
|
|
166
267
|
setPrefs(saved);
|
|
@@ -174,6 +275,10 @@ function A11yWidget({ className }) {
|
|
|
174
275
|
document.addEventListener("keydown", onKey);
|
|
175
276
|
return () => document.removeEventListener("keydown", onKey);
|
|
176
277
|
}, [open]);
|
|
278
|
+
if (license.status === "checking" || license.status === "error" || license.status === "blocked") {
|
|
279
|
+
return null;
|
|
280
|
+
}
|
|
281
|
+
const isPro = license.plan === "pro";
|
|
177
282
|
const update = (patch) => {
|
|
178
283
|
setPrefs((prev) => {
|
|
179
284
|
const next = { ...prev, ...patch };
|
|
@@ -198,7 +303,7 @@ function A11yWidget({ className }) {
|
|
|
198
303
|
"aria-expanded": open,
|
|
199
304
|
"aria-haspopup": "dialog",
|
|
200
305
|
onClick: () => setOpen((v) => !v),
|
|
201
|
-
className: `pgm-btn${className ? ` ${className}` : ""}`,
|
|
306
|
+
className: `pgm-btn a11y-widget-btn${className ? ` ${className}` : ""}`,
|
|
202
307
|
children: [
|
|
203
308
|
/* @__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: [
|
|
204
309
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "5", r: "1.5", fill: "currentColor", stroke: "none" }),
|
|
@@ -224,7 +329,7 @@ function A11yWidget({ className }) {
|
|
|
224
329
|
role: "dialog",
|
|
225
330
|
"aria-modal": "true",
|
|
226
331
|
"aria-label": "Accessibility settings",
|
|
227
|
-
className: "pgm-dialog",
|
|
332
|
+
className: "pgm-dialog a11y-widget-dialog",
|
|
228
333
|
children: [
|
|
229
334
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "pgm-header", children: [
|
|
230
335
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
|
|
@@ -268,7 +373,7 @@ function A11yWidget({ className }) {
|
|
|
268
373
|
role: "switch",
|
|
269
374
|
"aria-checked": on,
|
|
270
375
|
onClick: () => update({ [key]: !on }),
|
|
271
|
-
className: `pgm-toggle-btn${on ? " pgm-toggle-btn--on" : ""}`,
|
|
376
|
+
className: `pgm-toggle-btn a11y-widget-toggle-btn${on ? " pgm-toggle-btn--on" : ""}`,
|
|
272
377
|
children: [
|
|
273
378
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `pgm-toggle-icon${on ? " pgm-toggle-icon--on" : ""}`, children: icon }),
|
|
274
379
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "pgm-toggle-text", children: [
|
|
@@ -294,7 +399,7 @@ function A11yWidget({ className }) {
|
|
|
294
399
|
);
|
|
295
400
|
}) }),
|
|
296
401
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "pgm-footer", children: [
|
|
297
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
402
|
+
!isPro && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
298
403
|
"button",
|
|
299
404
|
{
|
|
300
405
|
type: "button",
|
|
@@ -327,7 +432,7 @@ function A11yWidget({ className }) {
|
|
|
327
432
|
}
|
|
328
433
|
)
|
|
329
434
|
] }),
|
|
330
|
-
notice && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { id: "pgm-notice", className: "pgm-notice", children: [
|
|
435
|
+
!isPro && notice && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { id: "pgm-notice", className: "pgm-notice", children: [
|
|
331
436
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "pgm-notice-text", children: [
|
|
332
437
|
"This accessibility widget is provided free of charge by",
|
|
333
438
|
" ",
|
|
@@ -368,5 +473,6 @@ function A11yWidget({ className }) {
|
|
|
368
473
|
}
|
|
369
474
|
// Annotate the CommonJS export names for ESM import in node:
|
|
370
475
|
0 && (module.exports = {
|
|
371
|
-
A11yWidget
|
|
476
|
+
A11yWidget,
|
|
477
|
+
a11y
|
|
372
478
|
});
|
package/dist/index.min.css
CHANGED
|
@@ -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
|
+
.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.12);background:rgba(4,6,10,0.98);box-shadow:0 25px 50px -12px rgba(0,0,0,0.6);border-radius:0.625rem;overflow:hidden}@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;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.12) transparent}.pgm-toggle-list::-webkit-scrollbar{width:3px}.pgm-toggle-list::-webkit-scrollbar-track{background:transparent}.pgm-toggle-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.14);border-radius:9999px}.pgm-toggle-list::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.28)}.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.72)}.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.38)}.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-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}.pgm-notice-btn{display:flex;align-items:center;gap:0.375rem;background:none;border:none;cursor:pointer;color:rgba(255,255,255,0.25);font-size:0.5rem;text-transform:uppercase;letter-spacing:0.1em;padding:0;transition:color 150ms}.pgm-notice-btn:hover{color:rgba(255,255,255,0.55)}.pgm-notice-btn:focus-visible{outline:none;box-shadow:0 0 0 2px #00e5a0;border-radius:2px}.pgm-notice-logo{width:0.875rem;height:0.875rem;border-radius:2px;flex-shrink:0}.pgm-notice-chevron{width:0.625rem;height:0.625rem;flex-shrink:0;transition:transform 200ms}.pgm-notice{border-top:1px solid rgba(255,255,255,0.07);padding:0.75rem 1rem 1rem;display:flex;flex-direction:column;gap:0.625rem}.pgm-notice-text{font-size:0.625rem;line-height:1.65;color:rgba(255,255,255,0.4);margin:0}.pgm-notice-link,.pgm-notice-gh{font-size:0.625rem;color:#00e5a0;text-decoration:none;transition:opacity 150ms}.pgm-notice-link:hover,.pgm-notice-gh:hover{opacity:0.75}.pgm-notice-gh{display:inline-flex;align-items:center;gap:0.3rem;font-size:0.56rem;text-transform:uppercase;letter-spacing:0.1em;font-weight:600}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 u=Object.defineProperty;var z=Object.getOwnPropertyDescriptor;var W=Object.getOwnPropertyNames;var A=Object.prototype.hasOwnProperty;var B=(t,a)=>{for(var i in a)u(t,i,{get:a[i],enumerable:!0})},E=(t,a,i,s)=>{if(a&&typeof a=="object"||typeof a=="function")for(let n of W(a))!A.call(t,n)&&n!==i&&u(t,n,{get:()=>a[n],enumerable:!(s=z(a,n))||s.enumerable});return t};var I=t=>E(u({},"__esModule",{value:!0}),t);var $={};B($,{A11yWidget:()=>p,default:()=>p});module.exports=I($);var l=require("react"),x=require("react-dom"),e=require("react/jsx-runtime"),N="pgm-a11y",c={textSize:0,highContrast:!1,invertColors:!1,grayscale:!1,reduceMotion:!1,highlightLinks:!1,textSpacing:!1,adhd:!1,dyslexia:!1};function v(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 s=[];t.invertColors&&s.push("invert(1) hue-rotate(180deg)"),t.highContrast&&s.push("contrast(1.6)"),t.grayscale&&s.push("grayscale(1)"),a.style.filter=s.join(" ")}function O(){try{let t=localStorage.getItem(N);return t?{...c,...JSON.parse(t)}:{...c}}catch{return{...c}}}function b(t){try{localStorage.setItem(N,JSON.stringify(t))}catch{}}var k=["Normal","Large","X-Large"],T=[{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),[s,n]=(0,l.useState)(c),[m,C]=(0,l.useState)(!1),[h,M]=(0,l.useState)(!1),S=(0,l.useRef)(null);(0,l.useEffect)(()=>{C(!0)},[]),(0,l.useEffect)(()=>{let o=O();n(o),v(o)},[]),(0,l.useEffect)(()=>{if(!a)return;let o=r=>{r.key==="Escape"&&i(!1)};return document.addEventListener("keydown",o),()=>document.removeEventListener("keydown",o)},[a]);let y=o=>{n(r=>{let g={...r,...o};return v(g),b(g),g})},w=()=>{n(c),v(c),b(c)},f=JSON.stringify(s)!==JSON.stringify(c);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)("button",{ref:S,type:"button","aria-label":"Accessibility options","aria-expanded":a,"aria-haspopup":"dialog",onClick:()=>i(o=>!o),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"})]}),f&&(0,e.jsx)("span",{className:"pgm-dot","aria-hidden":"true"})]}),a&&m&&(0,x.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[s.textSize]})]}),(0,e.jsx)("div",{className:"pgm-size-btns",children:k.map((o,r)=>(0,e.jsx)("button",{type:"button","aria-pressed":s.textSize===r,onClick:()=>y({textSize:r}),className:`pgm-size-btn ${s.textSize===r?"pgm-size-btn--active":"pgm-size-btn--inactive"}`,children:o},o))})]}),(0,e.jsx)("div",{className:"pgm-toggle-list",children:T.map(({key:o,label:r,desc:g,icon:L})=>{let d=s[o];return(0,e.jsxs)("button",{type:"button",role:"switch","aria-checked":d,onClick:()=>y({[o]:!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:L}),(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"}`})})]},o)})}),(0,e.jsxs)("div",{className:"pgm-footer",children:[(0,e.jsxs)("button",{type:"button","aria-expanded":h,"aria-controls":"pgm-notice",onClick:()=>M(o=>!o),className:"pgm-notice-btn",children:[(0,e.jsx)("img",{src:"https://cdn.pigmil.com/shared/icon.png",alt:"Pigmil",className:"pgm-notice-logo"}),(0,e.jsx)("span",{children:"About this widget"}),(0,e.jsx)("svg",{viewBox:"0 0 24 24",className:"pgm-notice-chevron",fill:"none",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",style:{transform:h?"rotate(180deg)":"rotate(0deg)"},children:(0,e.jsx)("path",{d:"M6 9l6 6 6-6",strokeLinecap:"round",strokeLinejoin:"round"})})]}),(0,e.jsx)("button",{type:"button",onClick:w,disabled:!f,className:"pgm-reset-btn",children:"Reset all"})]}),h&&(0,e.jsxs)("div",{id:"pgm-notice",className:"pgm-notice",children:[(0,e.jsxs)("p",{className:"pgm-notice-text",children:["This accessibility widget is provided free of charge by"," ",(0,e.jsx)("a",{href:"https://github.com/pigmilcom/a11y",target:"_blank",rel:"noopener noreferrer",className:"pgm-notice-link",children:"PIGMIL"})," ","as an open-source tool to help make the web more accessible. It stores your preferences locally in your browser and sends no data to any server."]}),(0,e.jsxs)("a",{href:"https://github.com/pigmilcom/a11y",target:"_blank",rel:"noopener noreferrer",className:"pgm-notice-gh",children:[(0,e.jsx)("svg",{viewBox:"0 0 24 24",className:"pgm-icon-sm",fill:"currentColor","aria-hidden":"true",children:(0,e.jsx)("path",{d:"M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844a9.59 9.59 0 0 1 2.504.337c1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.02 10.02 0 0 0 22 12.017C22 6.484 17.522 2 12 2z"})}),"View on GitHub"]})]})]})]}),document.body)]})}0&&(module.exports={A11yWidget});
|
|
1
|
+
var y=Object.defineProperty;var I=Object.getOwnPropertyDescriptor;var W=Object.getOwnPropertyNames;var D=Object.prototype.hasOwnProperty;var R=(t,a)=>{for(var n in a)y(t,n,{get:a[n],enumerable:!0})},$=(t,a,n,o)=>{if(a&&typeof a=="object"||typeof a=="function")for(let r of W(a))!D.call(t,r)&&r!==n&&y(t,r,{get:()=>a[r],enumerable:!(o=I(a,r))||o.enumerable});return t};var G=t=>$(y({},"__esModule",{value:!0}),t);var Q={};R(Q,{A11yWidget:()=>u,a11y:()=>u,default:()=>u});module.exports=G(Q);var i=require("react"),L=require("react-dom");var P=/^(localhost|127\.\d+\.\d+\.\d+|::1|\[::1\]|0\.0\.0\.0)$/i;function J(){try{let{hostname:t,port:a}=location;return!!(P.test(t)||a&&a!=="80"&&a!=="443")}catch{return!0}}function j(t){let a=t+"\0"+new Date().toISOString().slice(0,10),n=2166136261;for(let o=0;o<a.length;o++)n=Math.imul(n^a.charCodeAt(o),16777619)>>>0;return n.toString(36)}var H=[66,94,94,90,89,16,5,5,75,90,67,4,90,67,69,71,67,70,4,73,69,71,5,75,27,27,83,5,92,75,70,67,78,75,94,79];function K(t){return String.fromCharCode(...H.map(n=>n^42))+"?d="+encodeURIComponent(t)+"&t="+Date.now()+"&s="+j(t)}function c(t,a){return Object.freeze({status:t,plan:a||"free"})}var C="_pgm_lc",F=18e5;function U(){try{let t=sessionStorage.getItem(C);if(!t)return null;let a=JSON.parse(t);return!a||typeof a.status!="string"?null:Date.now()-(a._ts||0)<F?a:null}catch{return null}}function N(t){try{sessionStorage.setItem(C,JSON.stringify({status:t.status,plan:t.plan,_ts:Date.now()}))}catch{}}var V=!0;async function X(t){if(V)return{ok:!0,plan:"free",blocked:!1};let a=new AbortController,n=setTimeout(()=>a.abort(),5e3);try{let o=await fetch(K(t),{method:"GET",mode:"cors",credentials:"omit",signal:a.signal});if(clearTimeout(n),!o.ok)return null;let r=await o.json();return r&&typeof r.ok=="boolean"?r:null}catch{return clearTimeout(n),null}}async function w(){let t=U();if(t)return c(t.status,t.plan);if(J()){let o=c("dev","free");return N(o),o}let a=typeof location<"u"?location.hostname.toLowerCase().replace(/^www\./,""):"";if(!a)return c("error","free");let n;try{let o=await X(a);o?o.ok?o.blocked?n=c("blocked",o.plan||"free"):n=c("valid",o.plan||"free"):n=c("error",o.plan||"free"):n=c("error","free")}catch{n=c("error","free")}return N(n),n}var e=require("react/jsx-runtime"),_="pgm-a11y",d={textSize:0,highContrast:!1,invertColors:!1,grayscale:!1,reduceMotion:!1,highlightLinks:!1,textSpacing:!1,adhd:!1,dyslexia:!1};function v(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 n={"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[r,h]of Object.entries(n))a.classList.toggle(r,h);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 Y(){try{let t=localStorage.getItem(_);return t?{...d,...JSON.parse(t)}:{...d}}catch{return{...d}}}function M(t){try{localStorage.setItem(_,JSON.stringify(t))}catch{}}var S=["Normal","Large","X-Large"],q=[{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 u({className:t}){let[a,n]=(0,i.useState)(!1),[o,r]=(0,i.useState)(d),[h,z]=(0,i.useState)(!1),[f,A]=(0,i.useState)(!1),[m,E]=(0,i.useState)({status:"checking",plan:"free"}),O=(0,i.useRef)(null);if((0,i.useEffect)(()=>{z(!0)},[]),(0,i.useEffect)(()=>{w().then(E)},[]),(0,i.useEffect)(()=>{let s=Y();r(s),v(s)},[]),(0,i.useEffect)(()=>{if(!a)return;let s=l=>{l.key==="Escape"&&n(!1)};return document.addEventListener("keydown",s),()=>document.removeEventListener("keydown",s)},[a]),m.status==="checking"||m.status==="error"||m.status==="blocked")return null;let b=m.plan==="pro",k=s=>{r(l=>{let p={...l,...s};return v(p),M(p),p})},T=()=>{r(d),v(d),M(d)},x=JSON.stringify(o)!==JSON.stringify(d);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)("button",{ref:O,type:"button","aria-label":"Accessibility options","aria-expanded":a,"aria-haspopup":"dialog",onClick:()=>n(s=>!s),className:`pgm-btn a11y-widget-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"})]}),x&&(0,e.jsx)("span",{className:"pgm-dot","aria-hidden":"true"})]}),a&&h&&(0,L.createPortal)((0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("div",{className:"pgm-backdrop",onClick:()=>n(!1),"aria-hidden":"true"}),(0,e.jsxs)("div",{role:"dialog","aria-modal":"true","aria-label":"Accessibility settings",className:"pgm-dialog a11y-widget-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:()=>n(!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:S[o.textSize]})]}),(0,e.jsx)("div",{className:"pgm-size-btns",children:S.map((s,l)=>(0,e.jsx)("button",{type:"button","aria-pressed":o.textSize===l,onClick:()=>k({textSize:l}),className:`pgm-size-btn ${o.textSize===l?"pgm-size-btn--active":"pgm-size-btn--inactive"}`,children:s},s))})]}),(0,e.jsx)("div",{className:"pgm-toggle-list",children:q.map(({key:s,label:l,desc:p,icon:B})=>{let g=o[s];return(0,e.jsxs)("button",{type:"button",role:"switch","aria-checked":g,onClick:()=>k({[s]:!g}),className:`pgm-toggle-btn a11y-widget-toggle-btn${g?" pgm-toggle-btn--on":""}`,children:[(0,e.jsx)("span",{className:`pgm-toggle-icon${g?" pgm-toggle-icon--on":""}`,children:B}),(0,e.jsxs)("span",{className:"pgm-toggle-text",children:[(0,e.jsx)("span",{className:`pgm-toggle-label${g?" pgm-toggle-label--on":""}`,children:l}),(0,e.jsx)("span",{className:"pgm-toggle-desc",children:p})]}),(0,e.jsx)("span",{"aria-hidden":"true",className:`pgm-pill${g?" pgm-pill--on":" pgm-pill--off"}`,children:(0,e.jsx)("span",{className:`pgm-pill-knob${g?" pgm-pill-knob--on":" pgm-pill-knob--off"}`})})]},s)})}),(0,e.jsxs)("div",{className:"pgm-footer",children:[!b&&(0,e.jsxs)("button",{type:"button","aria-expanded":f,"aria-controls":"pgm-notice",onClick:()=>A(s=>!s),className:"pgm-notice-btn",children:[(0,e.jsx)("img",{src:"https://cdn.pigmil.com/shared/icon.png",alt:"Pigmil",className:"pgm-notice-logo"}),(0,e.jsx)("span",{children:"About this widget"}),(0,e.jsx)("svg",{viewBox:"0 0 24 24",className:"pgm-notice-chevron",fill:"none",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",style:{transform:f?"rotate(180deg)":"rotate(0deg)"},children:(0,e.jsx)("path",{d:"M6 9l6 6 6-6",strokeLinecap:"round",strokeLinejoin:"round"})})]}),(0,e.jsx)("button",{type:"button",onClick:T,disabled:!x,className:"pgm-reset-btn",children:"Reset all"})]}),!b&&f&&(0,e.jsxs)("div",{id:"pgm-notice",className:"pgm-notice",children:[(0,e.jsxs)("p",{className:"pgm-notice-text",children:["This accessibility widget is provided free of charge by"," ",(0,e.jsx)("a",{href:"https://github.com/pigmilcom/a11y",target:"_blank",rel:"noopener noreferrer",className:"pgm-notice-link",children:"PIGMIL"})," ","as an open-source tool to help make the web more accessible. It stores your preferences locally in your browser and sends no data to any server."]}),(0,e.jsxs)("a",{href:"https://github.com/pigmilcom/a11y",target:"_blank",rel:"noopener noreferrer",className:"pgm-notice-gh",children:[(0,e.jsx)("svg",{viewBox:"0 0 24 24",className:"pgm-icon-sm",fill:"currentColor","aria-hidden":"true",children:(0,e.jsx)("path",{d:"M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844a9.59 9.59 0 0 1 2.504.337c1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.02 10.02 0 0 0 22 12.017C22 6.484 17.522 2 12 2z"})}),"View on GitHub"]})]})]})]}),document.body)]})}0&&(module.exports={A11yWidget,a11y});
|
package/dist/index.min.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{useEffect as u,useRef as W,useState as p}from"react";import{createPortal as A}from"react-dom";import{Fragment as N,jsx as e,jsxs as t}from"react/jsx-runtime";var C="pgm-a11y",l={textSize:0,highContrast:!1,invertColors:!1,grayscale:!1,reduceMotion:!1,highlightLinks:!1,textSpacing:!1,adhd:!1,dyslexia:!1};function v(a){let s=document.documentElement;s.classList.remove("a11y-text-lg","a11y-text-xl"),a.textSize===1&&s.classList.add("a11y-text-lg"),a.textSize===2&&s.classList.add("a11y-text-xl");let c={"a11y-high-contrast":a.highContrast,"a11y-invert":a.invertColors,"a11y-grayscale":a.grayscale,"a11y-reduce-motion":a.reduceMotion,"a11y-highlight-links":a.highlightLinks,"a11y-text-spacing":a.textSpacing,"a11y-adhd":a.adhd,"a11y-dyslexia":a.dyslexia};for(let[d,m]of Object.entries(c))s.classList.toggle(d,m);let i=[];a.invertColors&&i.push("invert(1) hue-rotate(180deg)"),a.highContrast&&i.push("contrast(1.6)"),a.grayscale&&i.push("grayscale(1)"),s.style.filter=i.join(" ")}function B(){try{let a=localStorage.getItem(C);return a?{...l,...JSON.parse(a)}:{...l}}catch{return{...l}}}function k(a){try{localStorage.setItem(C,JSON.stringify(a))}catch{}}var x=["Normal","Large","X-Large"],E=[{key:"highContrast",label:"High Contrast",desc:"Increase colour contrast for readability",icon:t("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:t("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:t("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:t("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:t("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:t("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 y({className:a}){let[s,c]=p(!1),[i,d]=p(l),[m,M]=p(!1),[h,S]=p(!1),w=W(null);u(()=>{M(!0)},[]),u(()=>{let o=B();d(o),v(o)},[]),u(()=>{if(!s)return;let o=n=>{n.key==="Escape"&&c(!1)};return document.addEventListener("keydown",o),()=>document.removeEventListener("keydown",o)},[s]);let f=o=>{d(n=>{let g={...n,...o};return v(g),k(g),g})},L=()=>{d(l),v(l),k(l)},b=JSON.stringify(i)!==JSON.stringify(l);return t(N,{children:[t("button",{ref:w,type:"button","aria-label":"Accessibility options","aria-expanded":s,"aria-haspopup":"dialog",onClick:()=>c(o=>!o),className:`pgm-btn${a?` ${a}`:""}`,children:[t("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"})]}),b&&e("span",{className:"pgm-dot","aria-hidden":"true"})]}),s&&m&&A(t(N,{children:[e("div",{className:"pgm-backdrop",onClick:()=>c(!1),"aria-hidden":"true"}),t("div",{role:"dialog","aria-modal":"true","aria-label":"Accessibility settings",className:"pgm-dialog",children:[t("div",{className:"pgm-header",children:[t("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"})})})]}),t("div",{className:"pgm-size-section",children:[t("div",{className:"pgm-size-header",children:[e("span",{className:"pgm-size-label",children:"Text Size"}),e("span",{className:"pgm-size-value",children:x[i.textSize]})]}),e("div",{className:"pgm-size-btns",children:x.map((o,n)=>e("button",{type:"button","aria-pressed":i.textSize===n,onClick:()=>f({textSize:n}),className:`pgm-size-btn ${i.textSize===n?"pgm-size-btn--active":"pgm-size-btn--inactive"}`,children:o},o))})]}),e("div",{className:"pgm-toggle-list",children:E.map(({key:o,label:n,desc:g,icon:z})=>{let r=i[o];return t("button",{type:"button",role:"switch","aria-checked":r,onClick:()=>f({[o]:!r}),className:`pgm-toggle-btn${r?" pgm-toggle-btn--on":""}`,children:[e("span",{className:`pgm-toggle-icon${r?" pgm-toggle-icon--on":""}`,children:z}),t("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"}`})})]},o)})}),t("div",{className:"pgm-footer",children:[t("button",{type:"button","aria-expanded":h,"aria-controls":"pgm-notice",onClick:()=>S(o=>!o),className:"pgm-notice-btn",children:[e("img",{src:"https://cdn.pigmil.com/shared/icon.png",alt:"Pigmil",className:"pgm-notice-logo"}),e("span",{children:"About this widget"}),e("svg",{viewBox:"0 0 24 24",className:"pgm-notice-chevron",fill:"none",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",style:{transform:h?"rotate(180deg)":"rotate(0deg)"},children:e("path",{d:"M6 9l6 6 6-6",strokeLinecap:"round",strokeLinejoin:"round"})})]}),e("button",{type:"button",onClick:L,disabled:!b,className:"pgm-reset-btn",children:"Reset all"})]}),h&&t("div",{id:"pgm-notice",className:"pgm-notice",children:[t("p",{className:"pgm-notice-text",children:["This accessibility widget is provided free of charge by"," ",e("a",{href:"https://github.com/pigmilcom/a11y",target:"_blank",rel:"noopener noreferrer",className:"pgm-notice-link",children:"PIGMIL"})," ","as an open-source tool to help make the web more accessible. It stores your preferences locally in your browser and sends no data to any server."]}),t("a",{href:"https://github.com/pigmilcom/a11y",target:"_blank",rel:"noopener noreferrer",className:"pgm-notice-gh",children:[e("svg",{viewBox:"0 0 24 24",className:"pgm-icon-sm",fill:"currentColor","aria-hidden":"true",children:e("path",{d:"M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844a9.59 9.59 0 0 1 2.504.337c1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.02 10.02 0 0 0 22 12.017C22 6.484 17.522 2 12 2z"})}),"View on GitHub"]})]})]})]}),document.body)]})}export{y as A11yWidget,y as default};
|
|
1
|
+
import{useEffect as h,useRef as K,useState as u}from"react";import{createPortal as F}from"react-dom";var W=/^(localhost|127\.\d+\.\d+\.\d+|::1|\[::1\]|0\.0\.0\.0)$/i;function D(){try{let{hostname:t,port:a}=location;return!!(W.test(t)||a&&a!=="80"&&a!=="443")}catch{return!0}}function R(t){let a=t+"\0"+new Date().toISOString().slice(0,10),n=2166136261;for(let o=0;o<a.length;o++)n=Math.imul(n^a.charCodeAt(o),16777619)>>>0;return n.toString(36)}var $=[66,94,94,90,89,16,5,5,75,90,67,4,90,67,69,71,67,70,4,73,69,71,5,75,27,27,83,5,92,75,70,67,78,75,94,79];function G(t){return String.fromCharCode(...$.map(n=>n^42))+"?d="+encodeURIComponent(t)+"&t="+Date.now()+"&s="+R(t)}function c(t,a){return Object.freeze({status:t,plan:a||"free"})}var w="_pgm_lc",P=18e5;function J(){try{let t=sessionStorage.getItem(w);if(!t)return null;let a=JSON.parse(t);return!a||typeof a.status!="string"?null:Date.now()-(a._ts||0)<P?a:null}catch{return null}}function C(t){try{sessionStorage.setItem(w,JSON.stringify({status:t.status,plan:t.plan,_ts:Date.now()}))}catch{}}var j=!0;async function H(t){if(j)return{ok:!0,plan:"free",blocked:!1};let a=new AbortController,n=setTimeout(()=>a.abort(),5e3);try{let o=await fetch(G(t),{method:"GET",mode:"cors",credentials:"omit",signal:a.signal});if(clearTimeout(n),!o.ok)return null;let i=await o.json();return i&&typeof i.ok=="boolean"?i:null}catch{return clearTimeout(n),null}}async function M(){let t=J();if(t)return c(t.status,t.plan);if(D()){let o=c("dev","free");return C(o),o}let a=typeof location<"u"?location.hostname.toLowerCase().replace(/^www\./,""):"";if(!a)return c("error","free");let n;try{let o=await H(a);o?o.ok?o.blocked?n=c("blocked",o.plan||"free"):n=c("valid",o.plan||"free"):n=c("error",o.plan||"free"):n=c("error","free")}catch{n=c("error","free")}return C(n),n}import{Fragment as _,jsx as e,jsxs as s}from"react/jsx-runtime";var z="pgm-a11y",d={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 n={"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[i,y]of Object.entries(n))a.classList.toggle(i,y);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 U(){try{let t=localStorage.getItem(z);return t?{...d,...JSON.parse(t)}:{...d}}catch{return{...d}}}function S(t){try{localStorage.setItem(z,JSON.stringify(t))}catch{}}var L=["Normal","Large","X-Large"],V=[{key:"highContrast",label:"High Contrast",desc:"Increase colour contrast for readability",icon:s("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:s("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:s("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:s("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:s("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:s("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 f({className:t}){let[a,n]=u(!1),[o,i]=u(d),[y,A]=u(!1),[v,E]=u(!1),[m,O]=u({status:"checking",plan:"free"}),T=K(null);if(h(()=>{A(!0)},[]),h(()=>{M().then(O)},[]),h(()=>{let r=U();i(r),b(r)},[]),h(()=>{if(!a)return;let r=l=>{l.key==="Escape"&&n(!1)};return document.addEventListener("keydown",r),()=>document.removeEventListener("keydown",r)},[a]),m.status==="checking"||m.status==="error"||m.status==="blocked")return null;let k=m.plan==="pro",x=r=>{i(l=>{let p={...l,...r};return b(p),S(p),p})},B=()=>{i(d),b(d),S(d)},N=JSON.stringify(o)!==JSON.stringify(d);return s(_,{children:[s("button",{ref:T,type:"button","aria-label":"Accessibility options","aria-expanded":a,"aria-haspopup":"dialog",onClick:()=>n(r=>!r),className:`pgm-btn a11y-widget-btn${t?` ${t}`:""}`,children:[s("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"})]}),N&&e("span",{className:"pgm-dot","aria-hidden":"true"})]}),a&&y&&F(s(_,{children:[e("div",{className:"pgm-backdrop",onClick:()=>n(!1),"aria-hidden":"true"}),s("div",{role:"dialog","aria-modal":"true","aria-label":"Accessibility settings",className:"pgm-dialog a11y-widget-dialog",children:[s("div",{className:"pgm-header",children:[s("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:()=>n(!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"})})})]}),s("div",{className:"pgm-size-section",children:[s("div",{className:"pgm-size-header",children:[e("span",{className:"pgm-size-label",children:"Text Size"}),e("span",{className:"pgm-size-value",children:L[o.textSize]})]}),e("div",{className:"pgm-size-btns",children:L.map((r,l)=>e("button",{type:"button","aria-pressed":o.textSize===l,onClick:()=>x({textSize:l}),className:`pgm-size-btn ${o.textSize===l?"pgm-size-btn--active":"pgm-size-btn--inactive"}`,children:r},r))})]}),e("div",{className:"pgm-toggle-list",children:V.map(({key:r,label:l,desc:p,icon:I})=>{let g=o[r];return s("button",{type:"button",role:"switch","aria-checked":g,onClick:()=>x({[r]:!g}),className:`pgm-toggle-btn a11y-widget-toggle-btn${g?" pgm-toggle-btn--on":""}`,children:[e("span",{className:`pgm-toggle-icon${g?" pgm-toggle-icon--on":""}`,children:I}),s("span",{className:"pgm-toggle-text",children:[e("span",{className:`pgm-toggle-label${g?" pgm-toggle-label--on":""}`,children:l}),e("span",{className:"pgm-toggle-desc",children:p})]}),e("span",{"aria-hidden":"true",className:`pgm-pill${g?" pgm-pill--on":" pgm-pill--off"}`,children:e("span",{className:`pgm-pill-knob${g?" pgm-pill-knob--on":" pgm-pill-knob--off"}`})})]},r)})}),s("div",{className:"pgm-footer",children:[!k&&s("button",{type:"button","aria-expanded":v,"aria-controls":"pgm-notice",onClick:()=>E(r=>!r),className:"pgm-notice-btn",children:[e("img",{src:"https://cdn.pigmil.com/shared/icon.png",alt:"Pigmil",className:"pgm-notice-logo"}),e("span",{children:"About this widget"}),e("svg",{viewBox:"0 0 24 24",className:"pgm-notice-chevron",fill:"none",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",style:{transform:v?"rotate(180deg)":"rotate(0deg)"},children:e("path",{d:"M6 9l6 6 6-6",strokeLinecap:"round",strokeLinejoin:"round"})})]}),e("button",{type:"button",onClick:B,disabled:!N,className:"pgm-reset-btn",children:"Reset all"})]}),!k&&v&&s("div",{id:"pgm-notice",className:"pgm-notice",children:[s("p",{className:"pgm-notice-text",children:["This accessibility widget is provided free of charge by"," ",e("a",{href:"https://github.com/pigmilcom/a11y",target:"_blank",rel:"noopener noreferrer",className:"pgm-notice-link",children:"PIGMIL"})," ","as an open-source tool to help make the web more accessible. It stores your preferences locally in your browser and sends no data to any server."]}),s("a",{href:"https://github.com/pigmilcom/a11y",target:"_blank",rel:"noopener noreferrer",className:"pgm-notice-gh",children:[e("svg",{viewBox:"0 0 24 24",className:"pgm-icon-sm",fill:"currentColor","aria-hidden":"true",children:e("path",{d:"M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844a9.59 9.59 0 0 1 2.504.337c1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.02 10.02 0 0 0 22 12.017C22 6.484 17.522 2 12 2z"})}),"View on GitHub"]})]})]})]}),document.body)]})}export{f as A11yWidget,f as a11y,f as default};
|
package/dist/index.mjs
CHANGED
|
@@ -3,6 +3,102 @@
|
|
|
3
3
|
// src/widget.jsx
|
|
4
4
|
import { useEffect, useRef, useState } from "react";
|
|
5
5
|
import { createPortal } from "react-dom";
|
|
6
|
+
|
|
7
|
+
// src/license.js
|
|
8
|
+
var _LRE = /^(localhost|127\.\d+\.\d+\.\d+|::1|\[::1\]|0\.0\.0\.0)$/i;
|
|
9
|
+
function _isLocalDev() {
|
|
10
|
+
try {
|
|
11
|
+
const { hostname: h, port: p } = location;
|
|
12
|
+
if (_LRE.test(h)) return true;
|
|
13
|
+
if (p && p !== "80" && p !== "443") return true;
|
|
14
|
+
return false;
|
|
15
|
+
} catch {
|
|
16
|
+
return true;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
function _sign(domain) {
|
|
20
|
+
const seed = domain + "\0" + (/* @__PURE__ */ new Date()).toISOString().slice(0, 10);
|
|
21
|
+
let h = 2166136261 >>> 0;
|
|
22
|
+
for (let i = 0; i < seed.length; i++) {
|
|
23
|
+
h = Math.imul(h ^ seed.charCodeAt(i), 16777619) >>> 0;
|
|
24
|
+
}
|
|
25
|
+
return h.toString(36);
|
|
26
|
+
}
|
|
27
|
+
var _U = [66, 94, 94, 90, 89, 16, 5, 5, 75, 90, 67, 4, 90, 67, 69, 71, 67, 70, 4, 73, 69, 71, 5, 75, 27, 27, 83, 5, 92, 75, 70, 67, 78, 75, 94, 79];
|
|
28
|
+
function _ep(domain) {
|
|
29
|
+
const base = String.fromCharCode(..._U.map((n) => n ^ 42));
|
|
30
|
+
return base + "?d=" + encodeURIComponent(domain) + "&t=" + Date.now() + "&s=" + _sign(domain);
|
|
31
|
+
}
|
|
32
|
+
function _result(status, plan) {
|
|
33
|
+
return Object.freeze({ status, plan: plan || "free" });
|
|
34
|
+
}
|
|
35
|
+
var _CK = "_pgm_lc";
|
|
36
|
+
var _TTL = 18e5;
|
|
37
|
+
function _readCache() {
|
|
38
|
+
try {
|
|
39
|
+
const raw = sessionStorage.getItem(_CK);
|
|
40
|
+
if (!raw) return null;
|
|
41
|
+
const p = JSON.parse(raw);
|
|
42
|
+
if (!p || typeof p.status !== "string") return null;
|
|
43
|
+
return Date.now() - (p._ts || 0) < _TTL ? p : null;
|
|
44
|
+
} catch {
|
|
45
|
+
return null;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
function _writeCache(r) {
|
|
49
|
+
try {
|
|
50
|
+
sessionStorage.setItem(_CK, JSON.stringify({ status: r.status, plan: r.plan, _ts: Date.now() }));
|
|
51
|
+
} catch {
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
var MOCK_MODE = true;
|
|
55
|
+
async function _callApi(domain) {
|
|
56
|
+
if (MOCK_MODE) {
|
|
57
|
+
return { ok: true, plan: "free", blocked: false };
|
|
58
|
+
}
|
|
59
|
+
const ctrl = new AbortController();
|
|
60
|
+
const timer = setTimeout(() => ctrl.abort(), 5e3);
|
|
61
|
+
try {
|
|
62
|
+
const res = await fetch(_ep(domain), {
|
|
63
|
+
method: "GET",
|
|
64
|
+
mode: "cors",
|
|
65
|
+
credentials: "omit",
|
|
66
|
+
signal: ctrl.signal
|
|
67
|
+
});
|
|
68
|
+
clearTimeout(timer);
|
|
69
|
+
if (!res.ok) return null;
|
|
70
|
+
const data = await res.json();
|
|
71
|
+
return data && typeof data.ok === "boolean" ? data : null;
|
|
72
|
+
} catch {
|
|
73
|
+
clearTimeout(timer);
|
|
74
|
+
return null;
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
async function validateLicense() {
|
|
78
|
+
const cached = _readCache();
|
|
79
|
+
if (cached) return _result(cached.status, cached.plan);
|
|
80
|
+
if (_isLocalDev()) {
|
|
81
|
+
const r2 = _result("dev", "free");
|
|
82
|
+
_writeCache(r2);
|
|
83
|
+
return r2;
|
|
84
|
+
}
|
|
85
|
+
const domain = typeof location !== "undefined" ? location.hostname.toLowerCase().replace(/^www\./, "") : "";
|
|
86
|
+
if (!domain) return _result("error", "free");
|
|
87
|
+
let r;
|
|
88
|
+
try {
|
|
89
|
+
const data = await _callApi(domain);
|
|
90
|
+
if (!data) r = _result("error", "free");
|
|
91
|
+
else if (!data.ok) r = _result("error", data.plan || "free");
|
|
92
|
+
else if (data.blocked) r = _result("blocked", data.plan || "free");
|
|
93
|
+
else r = _result("valid", data.plan || "free");
|
|
94
|
+
} catch {
|
|
95
|
+
r = _result("error", "free");
|
|
96
|
+
}
|
|
97
|
+
_writeCache(r);
|
|
98
|
+
return r;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
// src/widget.jsx
|
|
6
102
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
7
103
|
var STORAGE_KEY = "pgm-a11y";
|
|
8
104
|
var DEFAULTS = {
|
|
@@ -127,15 +223,19 @@ var TOGGLES = [
|
|
|
127
223
|
] })
|
|
128
224
|
}
|
|
129
225
|
];
|
|
130
|
-
function
|
|
226
|
+
function A11y({ className }) {
|
|
131
227
|
const [open, setOpen] = useState(false);
|
|
132
228
|
const [prefs, setPrefs] = useState(DEFAULTS);
|
|
133
229
|
const [mounted, setMounted] = useState(false);
|
|
134
230
|
const [notice, setNotice] = useState(false);
|
|
231
|
+
const [license, setLicense] = useState({ status: "checking", plan: "free" });
|
|
135
232
|
const triggerRef = useRef(null);
|
|
136
233
|
useEffect(() => {
|
|
137
234
|
setMounted(true);
|
|
138
235
|
}, []);
|
|
236
|
+
useEffect(() => {
|
|
237
|
+
validateLicense().then(setLicense);
|
|
238
|
+
}, []);
|
|
139
239
|
useEffect(() => {
|
|
140
240
|
const saved = load();
|
|
141
241
|
setPrefs(saved);
|
|
@@ -149,6 +249,10 @@ function A11yWidget({ className }) {
|
|
|
149
249
|
document.addEventListener("keydown", onKey);
|
|
150
250
|
return () => document.removeEventListener("keydown", onKey);
|
|
151
251
|
}, [open]);
|
|
252
|
+
if (license.status === "checking" || license.status === "error" || license.status === "blocked") {
|
|
253
|
+
return null;
|
|
254
|
+
}
|
|
255
|
+
const isPro = license.plan === "pro";
|
|
152
256
|
const update = (patch) => {
|
|
153
257
|
setPrefs((prev) => {
|
|
154
258
|
const next = { ...prev, ...patch };
|
|
@@ -173,7 +277,7 @@ function A11yWidget({ className }) {
|
|
|
173
277
|
"aria-expanded": open,
|
|
174
278
|
"aria-haspopup": "dialog",
|
|
175
279
|
onClick: () => setOpen((v) => !v),
|
|
176
|
-
className: `pgm-btn${className ? ` ${className}` : ""}`,
|
|
280
|
+
className: `pgm-btn a11y-widget-btn${className ? ` ${className}` : ""}`,
|
|
177
281
|
children: [
|
|
178
282
|
/* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", className: "pgm-icon-lg", fill: "none", stroke: "currentColor", strokeWidth: 1.8, "aria-hidden": "true", children: [
|
|
179
283
|
/* @__PURE__ */ jsx("circle", { cx: "12", cy: "5", r: "1.5", fill: "currentColor", stroke: "none" }),
|
|
@@ -199,7 +303,7 @@ function A11yWidget({ className }) {
|
|
|
199
303
|
role: "dialog",
|
|
200
304
|
"aria-modal": "true",
|
|
201
305
|
"aria-label": "Accessibility settings",
|
|
202
|
-
className: "pgm-dialog",
|
|
306
|
+
className: "pgm-dialog a11y-widget-dialog",
|
|
203
307
|
children: [
|
|
204
308
|
/* @__PURE__ */ jsxs("div", { className: "pgm-header", children: [
|
|
205
309
|
/* @__PURE__ */ jsxs("div", { children: [
|
|
@@ -243,7 +347,7 @@ function A11yWidget({ className }) {
|
|
|
243
347
|
role: "switch",
|
|
244
348
|
"aria-checked": on,
|
|
245
349
|
onClick: () => update({ [key]: !on }),
|
|
246
|
-
className: `pgm-toggle-btn${on ? " pgm-toggle-btn--on" : ""}`,
|
|
350
|
+
className: `pgm-toggle-btn a11y-widget-toggle-btn${on ? " pgm-toggle-btn--on" : ""}`,
|
|
247
351
|
children: [
|
|
248
352
|
/* @__PURE__ */ jsx("span", { className: `pgm-toggle-icon${on ? " pgm-toggle-icon--on" : ""}`, children: icon }),
|
|
249
353
|
/* @__PURE__ */ jsxs("span", { className: "pgm-toggle-text", children: [
|
|
@@ -269,7 +373,7 @@ function A11yWidget({ className }) {
|
|
|
269
373
|
);
|
|
270
374
|
}) }),
|
|
271
375
|
/* @__PURE__ */ jsxs("div", { className: "pgm-footer", children: [
|
|
272
|
-
/* @__PURE__ */ jsxs(
|
|
376
|
+
!isPro && /* @__PURE__ */ jsxs(
|
|
273
377
|
"button",
|
|
274
378
|
{
|
|
275
379
|
type: "button",
|
|
@@ -302,7 +406,7 @@ function A11yWidget({ className }) {
|
|
|
302
406
|
}
|
|
303
407
|
)
|
|
304
408
|
] }),
|
|
305
|
-
notice && /* @__PURE__ */ jsxs("div", { id: "pgm-notice", className: "pgm-notice", children: [
|
|
409
|
+
!isPro && notice && /* @__PURE__ */ jsxs("div", { id: "pgm-notice", className: "pgm-notice", children: [
|
|
306
410
|
/* @__PURE__ */ jsxs("p", { className: "pgm-notice-text", children: [
|
|
307
411
|
"This accessibility widget is provided free of charge by",
|
|
308
412
|
" ",
|
|
@@ -342,6 +446,7 @@ function A11yWidget({ className }) {
|
|
|
342
446
|
] });
|
|
343
447
|
}
|
|
344
448
|
export {
|
|
345
|
-
A11yWidget,
|
|
346
|
-
|
|
449
|
+
A11y as A11yWidget,
|
|
450
|
+
A11y as a11y,
|
|
451
|
+
A11y as default
|
|
347
452
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pigmilcom/a11y",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.1.1",
|
|
4
4
|
"description": "WCAG 2.1 accessibility widget for React — text size, contrast, dyslexia font, motion reduction, and more.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"accessibility",
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
"build:js:min": "tsup --config tsup.min.config.mjs",
|
|
43
43
|
"build:css": "node scripts/build-css.js",
|
|
44
44
|
"build:css:min": "node scripts/build-css.js",
|
|
45
|
-
"build:cdn": "npm run build:css && tsup --config tsup.cdn.config.mjs && node -e \"const
|
|
45
|
+
"build:cdn": "npm run build:css && node scripts/obfuscate-cdn.js && tsup --config tsup.cdn.config.mjs && node -e \"const fs=require('fs');const b='./src/license.js.bak';const o='./src/license.js';if(fs.existsSync(b)){if(fs.existsSync(o))fs.unlinkSync(o);fs.renameSync(b,o);}['./dist/a11y.cdn.css','./src/license.cdn.js'].forEach(f=>{try{fs.unlinkSync(f)}catch{}});\"",
|
|
46
46
|
"build": "npm run build:js && npm run build:js:min && npm run build:css && npm run build:css:min && npm run build:cdn",
|
|
47
47
|
"dev": "tsup --watch",
|
|
48
48
|
"prepublishOnly": "npm run build"
|
|
@@ -52,6 +52,7 @@
|
|
|
52
52
|
"react-dom": ">=17.0.0"
|
|
53
53
|
},
|
|
54
54
|
"devDependencies": {
|
|
55
|
+
"javascript-obfuscator": "^5.4.1",
|
|
55
56
|
"react": "^18.3.1",
|
|
56
57
|
"react-dom": "^18.3.1",
|
|
57
58
|
"tsup": "^8.3.0",
|
package/src/cdn.jsx
CHANGED
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
*/
|
|
16
16
|
|
|
17
17
|
import { createRoot } from 'react-dom/client';
|
|
18
|
-
import
|
|
18
|
+
import A11y from './widget.jsx';
|
|
19
19
|
|
|
20
20
|
// Inline the pre-built CSS (widget UI + a11y modifier rules).
|
|
21
21
|
// Imported as a JS module (generated by scripts/build-css.js) so esbuild bundles
|
|
@@ -60,7 +60,7 @@ function mount() {
|
|
|
60
60
|
container.setAttribute('style', `position:fixed;z-index:9998;line-height:0;font-size:0;${posCSS}`);
|
|
61
61
|
document.body.appendChild(container);
|
|
62
62
|
_root = createRoot(container);
|
|
63
|
-
_root.render(<
|
|
63
|
+
_root.render(<A11y />);
|
|
64
64
|
}
|
|
65
65
|
|
|
66
66
|
function unmount() {
|