@pigmilcom/a11y 1.0.0 → 1.0.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 +42 -3
- package/dist/a11y.cdn.js +270 -0
- package/dist/index.css +20 -0
- package/package.json +6 -3
- package/src/cdn.jsx +77 -0
package/README.md
CHANGED
|
@@ -1,6 +1,39 @@
|
|
|
1
1
|
# @pigmilcom/a11y
|
|
2
2
|
|
|
3
|
-
WCAG 2.1 accessibility widget
|
|
3
|
+
WCAG 2.1 accessibility widget. Drop in one `<script>` tag **or** install via npm — visitors get instant control over text size, contrast, colour filters, motion, and more. Preferences persist via `localStorage`.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## CDN — Plug & Play
|
|
8
|
+
|
|
9
|
+
No React, no npm, no build step. Just add this to your `<head>`:
|
|
10
|
+
|
|
11
|
+
```html
|
|
12
|
+
<script
|
|
13
|
+
src="https://cdn.pigmil.com/a11y/dist/a11y.cdn.js"
|
|
14
|
+
data-position="bottom-right"
|
|
15
|
+
></script>
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
The widget auto-mounts on `DOMContentLoaded`. React 18 and all CSS are bundled inside — nothing else needed.
|
|
19
|
+
|
|
20
|
+
### `data-position` values
|
|
21
|
+
|
|
22
|
+
| Value | Placement |
|
|
23
|
+
| --------------- | ------------------ |
|
|
24
|
+
| `bottom-right` | Bottom-right corner (default) |
|
|
25
|
+
| `bottom-left` | Bottom-left corner |
|
|
26
|
+
| `top-right` | Top-right corner |
|
|
27
|
+
| `top-left` | Top-left corner |
|
|
28
|
+
|
|
29
|
+
### Programmatic control
|
|
30
|
+
|
|
31
|
+
The CDN build exposes `window.PigmilA11y` for manual control:
|
|
32
|
+
|
|
33
|
+
```js
|
|
34
|
+
PigmilA11y.mount(); // mount the widget
|
|
35
|
+
PigmilA11y.unmount(); // remove the widget and clean up
|
|
36
|
+
```
|
|
4
37
|
|
|
5
38
|
---
|
|
6
39
|
|
|
@@ -21,7 +54,7 @@ WCAG 2.1 accessibility widget for React. Lets visitors adjust text size, contras
|
|
|
21
54
|
|
|
22
55
|
---
|
|
23
56
|
|
|
24
|
-
## Installation
|
|
57
|
+
## npm Installation
|
|
25
58
|
|
|
26
59
|
```bash
|
|
27
60
|
npm install @pigmilcom/a11y
|
|
@@ -33,7 +66,7 @@ pnpm add @pigmilcom/a11y
|
|
|
33
66
|
|
|
34
67
|
---
|
|
35
68
|
|
|
36
|
-
## Quick start
|
|
69
|
+
## Quick start (React)
|
|
37
70
|
|
|
38
71
|
### 1 — Import the stylesheet (once, globally)
|
|
39
72
|
|
|
@@ -169,6 +202,12 @@ without errors — all DOM access is guarded by a `mounted` flag.
|
|
|
169
202
|
|
|
170
203
|
## Requirements
|
|
171
204
|
|
|
205
|
+
### CDN
|
|
206
|
+
|
|
207
|
+
No dependencies. Works in any HTML page.
|
|
208
|
+
|
|
209
|
+
### npm package
|
|
210
|
+
|
|
172
211
|
| Peer dependency | Version |
|
|
173
212
|
| --------------- | ------- |
|
|
174
213
|
| `react` | ≥ 17 |
|