@pigmilcom/a11y 1.0.7 → 1.0.9
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/dist/a11y.cdn.js +429 -5
- package/dist/index.css +67 -6
- package/dist/index.js +54 -1
- 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 +54 -1
- package/package.json +2 -2
- package/src/cdn.jsx +15 -10
package/dist/index.css
CHANGED
|
@@ -271,12 +271,6 @@ accessibility class rules that get toggled on <html> by the widget.
|
|
|
271
271
|
border-top: 1px solid rgba(255,255,255,0.07);
|
|
272
272
|
padding: 0.625rem 1rem;
|
|
273
273
|
}
|
|
274
|
-
.pgm-footer-note {
|
|
275
|
-
font-size: 0.5rem;
|
|
276
|
-
text-transform: uppercase;
|
|
277
|
-
letter-spacing: 0.1em;
|
|
278
|
-
color: rgba(255,255,255,0.2);
|
|
279
|
-
}
|
|
280
274
|
.pgm-reset-btn {
|
|
281
275
|
font-size: 0.56rem;
|
|
282
276
|
text-transform: uppercase;
|
|
@@ -296,6 +290,73 @@ accessibility class rules that get toggled on <html> by the widget.
|
|
|
296
290
|
box-shadow: 0 0 0 2px #00e5a0;
|
|
297
291
|
}
|
|
298
292
|
|
|
293
|
+
/* Notice toggle button in footer */
|
|
294
|
+
.pgm-notice-btn {
|
|
295
|
+
display: flex;
|
|
296
|
+
align-items: center;
|
|
297
|
+
gap: 0.375rem;
|
|
298
|
+
background: none;
|
|
299
|
+
border: none;
|
|
300
|
+
cursor: pointer;
|
|
301
|
+
color: rgba(255,255,255,0.25);
|
|
302
|
+
font-size: 0.5rem;
|
|
303
|
+
text-transform: uppercase;
|
|
304
|
+
letter-spacing: 0.1em;
|
|
305
|
+
padding: 0;
|
|
306
|
+
transition: color 150ms;
|
|
307
|
+
}
|
|
308
|
+
.pgm-notice-btn:hover { color: rgba(255,255,255,0.55); }
|
|
309
|
+
.pgm-notice-btn:focus-visible {
|
|
310
|
+
outline: none;
|
|
311
|
+
box-shadow: 0 0 0 2px #00e5a0;
|
|
312
|
+
border-radius: 2px;
|
|
313
|
+
}
|
|
314
|
+
.pgm-notice-logo {
|
|
315
|
+
width: 0.875rem;
|
|
316
|
+
height: 0.875rem;
|
|
317
|
+
border-radius: 2px;
|
|
318
|
+
flex-shrink: 0;
|
|
319
|
+
}
|
|
320
|
+
.pgm-notice-chevron {
|
|
321
|
+
width: 0.625rem;
|
|
322
|
+
height: 0.625rem;
|
|
323
|
+
flex-shrink: 0;
|
|
324
|
+
transition: transform 200ms;
|
|
325
|
+
}
|
|
326
|
+
|
|
327
|
+
/* Collapsible notice panel */
|
|
328
|
+
.pgm-notice {
|
|
329
|
+
border-top: 1px solid rgba(255,255,255,0.07);
|
|
330
|
+
padding: 0.75rem 1rem 1rem;
|
|
331
|
+
display: flex;
|
|
332
|
+
flex-direction: column;
|
|
333
|
+
gap: 0.625rem;
|
|
334
|
+
}
|
|
335
|
+
.pgm-notice-text {
|
|
336
|
+
font-size: 0.625rem;
|
|
337
|
+
line-height: 1.65;
|
|
338
|
+
color: rgba(255,255,255,0.4);
|
|
339
|
+
margin: 0;
|
|
340
|
+
}
|
|
341
|
+
.pgm-notice-link,
|
|
342
|
+
.pgm-notice-gh {
|
|
343
|
+
font-size: 0.625rem;
|
|
344
|
+
color: #00e5a0;
|
|
345
|
+
text-decoration: none;
|
|
346
|
+
transition: opacity 150ms;
|
|
347
|
+
}
|
|
348
|
+
.pgm-notice-link:hover,
|
|
349
|
+
.pgm-notice-gh:hover { opacity: 0.75; }
|
|
350
|
+
.pgm-notice-gh {
|
|
351
|
+
display: inline-flex;
|
|
352
|
+
align-items: center;
|
|
353
|
+
gap: 0.3rem;
|
|
354
|
+
font-size: 0.56rem;
|
|
355
|
+
text-transform: uppercase;
|
|
356
|
+
letter-spacing: 0.1em;
|
|
357
|
+
font-weight: 600;
|
|
358
|
+
}
|
|
359
|
+
|
|
299
360
|
/* ── Text size ──────────────────────────────────────────────────────────────── */
|
|
300
361
|
html.a11y-text-lg { font-size: 118% !important; }
|
|
301
362
|
html.a11y-text-xl { font-size: 145% !important; }
|
package/dist/index.js
CHANGED
|
@@ -156,6 +156,7 @@ function A11yWidget({ className }) {
|
|
|
156
156
|
const [open, setOpen] = (0, import_react.useState)(false);
|
|
157
157
|
const [prefs, setPrefs] = (0, import_react.useState)(DEFAULTS);
|
|
158
158
|
const [mounted, setMounted] = (0, import_react.useState)(false);
|
|
159
|
+
const [notice, setNotice] = (0, import_react.useState)(false);
|
|
159
160
|
const triggerRef = (0, import_react.useRef)(null);
|
|
160
161
|
(0, import_react.useEffect)(() => {
|
|
161
162
|
setMounted(true);
|
|
@@ -293,7 +294,28 @@ function A11yWidget({ className }) {
|
|
|
293
294
|
);
|
|
294
295
|
}) }),
|
|
295
296
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "pgm-footer", children: [
|
|
296
|
-
/* @__PURE__ */ (0, import_jsx_runtime.
|
|
297
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
298
|
+
"button",
|
|
299
|
+
{
|
|
300
|
+
type: "button",
|
|
301
|
+
"aria-expanded": notice,
|
|
302
|
+
"aria-controls": "pgm-notice",
|
|
303
|
+
onClick: () => setNotice((v) => !v),
|
|
304
|
+
className: "pgm-notice-btn",
|
|
305
|
+
children: [
|
|
306
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
307
|
+
"img",
|
|
308
|
+
{
|
|
309
|
+
src: "https://cdn.pigmil.com/shared/icon.png",
|
|
310
|
+
alt: "Pigmil",
|
|
311
|
+
className: "pgm-notice-logo"
|
|
312
|
+
}
|
|
313
|
+
),
|
|
314
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "About this widget" }),
|
|
315
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", className: "pgm-notice-chevron", fill: "none", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", style: { transform: notice ? "rotate(180deg)" : "rotate(0deg)" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M6 9l6 6 6-6", strokeLinecap: "round", strokeLinejoin: "round" }) })
|
|
316
|
+
]
|
|
317
|
+
}
|
|
318
|
+
),
|
|
297
319
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
298
320
|
"button",
|
|
299
321
|
{
|
|
@@ -304,6 +326,37 @@ function A11yWidget({ className }) {
|
|
|
304
326
|
children: "Reset all"
|
|
305
327
|
}
|
|
306
328
|
)
|
|
329
|
+
] }),
|
|
330
|
+
notice && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { id: "pgm-notice", className: "pgm-notice", children: [
|
|
331
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "pgm-notice-text", children: [
|
|
332
|
+
"This accessibility widget is provided free of charge by",
|
|
333
|
+
" ",
|
|
334
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
335
|
+
"a",
|
|
336
|
+
{
|
|
337
|
+
href: "https://github.com/pigmilcom/a11y",
|
|
338
|
+
target: "_blank",
|
|
339
|
+
rel: "noopener noreferrer",
|
|
340
|
+
className: "pgm-notice-link",
|
|
341
|
+
children: "PIGMIL"
|
|
342
|
+
}
|
|
343
|
+
),
|
|
344
|
+
" ",
|
|
345
|
+
"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."
|
|
346
|
+
] }),
|
|
347
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
348
|
+
"a",
|
|
349
|
+
{
|
|
350
|
+
href: "https://github.com/pigmilcom/a11y",
|
|
351
|
+
target: "_blank",
|
|
352
|
+
rel: "noopener noreferrer",
|
|
353
|
+
className: "pgm-notice-gh",
|
|
354
|
+
children: [
|
|
355
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", className: "pgm-icon-sm", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.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" }) }),
|
|
356
|
+
"View on GitHub"
|
|
357
|
+
]
|
|
358
|
+
}
|
|
359
|
+
)
|
|
307
360
|
] })
|
|
308
361
|
]
|
|
309
362
|
}
|
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);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-
|
|
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-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
|
|
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});
|
package/dist/index.min.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{useEffect as
|
|
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};
|
package/dist/index.mjs
CHANGED
|
@@ -131,6 +131,7 @@ function A11yWidget({ className }) {
|
|
|
131
131
|
const [open, setOpen] = useState(false);
|
|
132
132
|
const [prefs, setPrefs] = useState(DEFAULTS);
|
|
133
133
|
const [mounted, setMounted] = useState(false);
|
|
134
|
+
const [notice, setNotice] = useState(false);
|
|
134
135
|
const triggerRef = useRef(null);
|
|
135
136
|
useEffect(() => {
|
|
136
137
|
setMounted(true);
|
|
@@ -268,7 +269,28 @@ function A11yWidget({ className }) {
|
|
|
268
269
|
);
|
|
269
270
|
}) }),
|
|
270
271
|
/* @__PURE__ */ jsxs("div", { className: "pgm-footer", children: [
|
|
271
|
-
/* @__PURE__ */
|
|
272
|
+
/* @__PURE__ */ jsxs(
|
|
273
|
+
"button",
|
|
274
|
+
{
|
|
275
|
+
type: "button",
|
|
276
|
+
"aria-expanded": notice,
|
|
277
|
+
"aria-controls": "pgm-notice",
|
|
278
|
+
onClick: () => setNotice((v) => !v),
|
|
279
|
+
className: "pgm-notice-btn",
|
|
280
|
+
children: [
|
|
281
|
+
/* @__PURE__ */ jsx(
|
|
282
|
+
"img",
|
|
283
|
+
{
|
|
284
|
+
src: "https://cdn.pigmil.com/shared/icon.png",
|
|
285
|
+
alt: "Pigmil",
|
|
286
|
+
className: "pgm-notice-logo"
|
|
287
|
+
}
|
|
288
|
+
),
|
|
289
|
+
/* @__PURE__ */ jsx("span", { children: "About this widget" }),
|
|
290
|
+
/* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "pgm-notice-chevron", fill: "none", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", style: { transform: notice ? "rotate(180deg)" : "rotate(0deg)" }, children: /* @__PURE__ */ jsx("path", { d: "M6 9l6 6 6-6", strokeLinecap: "round", strokeLinejoin: "round" }) })
|
|
291
|
+
]
|
|
292
|
+
}
|
|
293
|
+
),
|
|
272
294
|
/* @__PURE__ */ jsx(
|
|
273
295
|
"button",
|
|
274
296
|
{
|
|
@@ -279,6 +301,37 @@ function A11yWidget({ className }) {
|
|
|
279
301
|
children: "Reset all"
|
|
280
302
|
}
|
|
281
303
|
)
|
|
304
|
+
] }),
|
|
305
|
+
notice && /* @__PURE__ */ jsxs("div", { id: "pgm-notice", className: "pgm-notice", children: [
|
|
306
|
+
/* @__PURE__ */ jsxs("p", { className: "pgm-notice-text", children: [
|
|
307
|
+
"This accessibility widget is provided free of charge by",
|
|
308
|
+
" ",
|
|
309
|
+
/* @__PURE__ */ jsx(
|
|
310
|
+
"a",
|
|
311
|
+
{
|
|
312
|
+
href: "https://github.com/pigmilcom/a11y",
|
|
313
|
+
target: "_blank",
|
|
314
|
+
rel: "noopener noreferrer",
|
|
315
|
+
className: "pgm-notice-link",
|
|
316
|
+
children: "PIGMIL"
|
|
317
|
+
}
|
|
318
|
+
),
|
|
319
|
+
" ",
|
|
320
|
+
"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."
|
|
321
|
+
] }),
|
|
322
|
+
/* @__PURE__ */ jsxs(
|
|
323
|
+
"a",
|
|
324
|
+
{
|
|
325
|
+
href: "https://github.com/pigmilcom/a11y",
|
|
326
|
+
target: "_blank",
|
|
327
|
+
rel: "noopener noreferrer",
|
|
328
|
+
className: "pgm-notice-gh",
|
|
329
|
+
children: [
|
|
330
|
+
/* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "pgm-icon-sm", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ 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" }) }),
|
|
331
|
+
"View on GitHub"
|
|
332
|
+
]
|
|
333
|
+
}
|
|
334
|
+
)
|
|
282
335
|
] })
|
|
283
336
|
]
|
|
284
337
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pigmilcom/a11y",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.9",
|
|
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 \"
|
|
45
|
+
"build:cdn": "npm run build:css && tsup --config tsup.cdn.config.mjs && node -e \"const f='./dist/a11y.cdn.css'; require('fs').existsSync(f) && require('fs').unlinkSync(f)\"",
|
|
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"
|
package/src/cdn.jsx
CHANGED
|
@@ -10,26 +10,29 @@
|
|
|
10
10
|
* data-position="top-right"
|
|
11
11
|
* data-position="top-left"
|
|
12
12
|
*
|
|
13
|
-
* NOTE:
|
|
14
|
-
*
|
|
13
|
+
* NOTE: Run "npm run build:css" before "npm run build:cdn" to regenerate
|
|
14
|
+
* src/a11y-css.js (the CSS-as-JS module that esbuild bundles inline).
|
|
15
15
|
*/
|
|
16
16
|
|
|
17
17
|
import { createRoot } from 'react-dom/client';
|
|
18
18
|
import A11yWidget from './widget.jsx';
|
|
19
19
|
|
|
20
20
|
// Inline the pre-built CSS (widget UI + a11y modifier rules).
|
|
21
|
-
//
|
|
22
|
-
|
|
21
|
+
// Imported as a JS module (generated by scripts/build-css.js) so esbuild bundles
|
|
22
|
+
// the string inline rather than tsup extracting it to a separate .css file.
|
|
23
|
+
import css from './a11y-css.js';
|
|
23
24
|
|
|
24
25
|
// ── Capture currentScript synchronously (only valid during initial execution) ─
|
|
25
26
|
const _script = document.currentScript;
|
|
26
27
|
|
|
27
28
|
// ── Position map — inline CSS applied to the container ────────────────────────
|
|
29
|
+
// env(safe-area-inset-*) ensures the button clears notches/home-bar on iOS/Android.
|
|
30
|
+
// Falls back to 0px on devices that don't support safe-area env variables.
|
|
28
31
|
const POSITIONS = {
|
|
29
|
-
'bottom-right': 'bottom:1.25rem;right:1.25rem',
|
|
30
|
-
'bottom-left': 'bottom:1.25rem;left:1.25rem',
|
|
31
|
-
'top-right': 'top:1.25rem;right:1.25rem',
|
|
32
|
-
'top-left': 'top:1.25rem;left:1.25rem',
|
|
32
|
+
'bottom-right': 'bottom:calc(env(safe-area-inset-bottom,0px) + 1.25rem);right:calc(env(safe-area-inset-right,0px) + 1.25rem)',
|
|
33
|
+
'bottom-left': 'bottom:calc(env(safe-area-inset-bottom,0px) + 1.25rem);left:calc(env(safe-area-inset-left,0px) + 1.25rem)',
|
|
34
|
+
'top-right': 'top:calc(env(safe-area-inset-top,0px) + 1.25rem);right:calc(env(safe-area-inset-right,0px) + 1.25rem)',
|
|
35
|
+
'top-left': 'top:calc(env(safe-area-inset-top,0px) + 1.25rem);left:calc(env(safe-area-inset-left,0px) + 1.25rem)',
|
|
33
36
|
};
|
|
34
37
|
|
|
35
38
|
// ── Style injection — idempotent, runs once ────────────────────────────────────
|
|
@@ -49,10 +52,12 @@ function mount() {
|
|
|
49
52
|
injectStyles();
|
|
50
53
|
const container = document.createElement('div');
|
|
51
54
|
container.id = 'pgm-a11y-root';
|
|
52
|
-
// Inline styles win over any class-based CSS — no ordering conflicts
|
|
55
|
+
// Inline styles win over any class-based CSS — no ordering conflicts.
|
|
56
|
+
// line-height:0 / font-size:0 prevent inherited whitespace from adding
|
|
57
|
+
// phantom height/width to the container div.
|
|
53
58
|
const pos = _script?.dataset?.position ?? 'bottom-right';
|
|
54
59
|
const posCSS = POSITIONS[pos] ?? POSITIONS['bottom-right'];
|
|
55
|
-
container.setAttribute('style', `position:fixed;z-index:9998;${posCSS}`);
|
|
60
|
+
container.setAttribute('style', `position:fixed;z-index:9998;line-height:0;font-size:0;${posCSS}`);
|
|
56
61
|
document.body.appendChild(container);
|
|
57
62
|
_root = createRoot(container);
|
|
58
63
|
_root.render(<A11yWidget />);
|