@pigmilcom/a11y 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Potentially problematic release.

This version of @pigmilcom/a11y might be problematic. Click here for more details.

Files changed (6) hide show
  1. package/README.md +181 -0
  2. package/dist/index.css +626 -0
  3. package/dist/index.js +319 -0
  4. package/dist/index.mjs +294 -0
  5. package/package.json +61 -0
  6. package/types/index.d.ts +12 -0
package/README.md ADDED
@@ -0,0 +1,181 @@
1
+ # @pigmilcom/a11y
2
+
3
+ WCAG 2.1 accessibility widget for React. Lets visitors adjust text size, contrast, colour filters, motion, and more — preferences apply instantly and persist across sessions via `localStorage`.
4
+
5
+ ---
6
+
7
+ ## Features
8
+
9
+ - Text size — Normal / Large / X-Large
10
+ - High contrast
11
+ - Invert colours
12
+ - Grayscale
13
+ - Reduce motion
14
+ - Highlight links
15
+ - Text spacing (WCAG 1.4.12)
16
+ - ADHD-friendly mode
17
+ - Dyslexia-friendly font
18
+ - Persists in `localStorage`
19
+ - Full keyboard & screen-reader support (`role="dialog"`, `aria-checked`, `aria-expanded`)
20
+ - Zero runtime dependencies (React peer dep only)
21
+
22
+ ---
23
+
24
+ ## Installation
25
+
26
+ ```bash
27
+ npm install @pigmilcom/a11y
28
+ # yarn
29
+ yarn add @pigmilcom/a11y
30
+ # pnpm
31
+ pnpm add @pigmilcom/a11y
32
+ ```
33
+
34
+ ---
35
+
36
+ ## Quick start
37
+
38
+ ### 1 — Import the stylesheet (once, globally)
39
+
40
+ ```js
41
+ import '@pigmilcom/a11y/styles';
42
+ ```
43
+
44
+ This single import contains both the panel UI styles and all the accessibility
45
+ class rules applied to `<html>`. No Tailwind installation required.
46
+
47
+ ### 2 — Drop in the widget
48
+
49
+ ```jsx
50
+ import A11yWidget from '@pigmilcom/a11y';
51
+
52
+ <A11yWidget className="fixed bottom-4 right-4 rounded" />
53
+ ```
54
+
55
+ The `className` prop is forwarded to the trigger button — use it to position
56
+ the widget wherever suits your layout.
57
+
58
+ ---
59
+
60
+ ## Framework examples
61
+
62
+ ### Next.js App Router
63
+
64
+ ```jsx
65
+ // app/layout.jsx
66
+ import '@pigmilcom/a11y/styles';
67
+ import A11yWidget from '@pigmilcom/a11y';
68
+
69
+ export default function RootLayout({ children }) {
70
+ return (
71
+ <html lang="en">
72
+ <body>
73
+ {children}
74
+ <A11yWidget className="fixed bottom-4 right-4 rounded" />
75
+ </body>
76
+ </html>
77
+ );
78
+ }
79
+ ```
80
+
81
+ > The component is already marked `'use client'` — no extra wrapper needed.
82
+
83
+ ### Vite + React
84
+
85
+ ```jsx
86
+ // src/main.jsx
87
+ import '@pigmilcom/a11y/styles';
88
+ import React from 'react';
89
+ import ReactDOM from 'react-dom/client';
90
+ import App from './App';
91
+
92
+ ReactDOM.createRoot(document.getElementById('root')).render(<App />);
93
+ ```
94
+
95
+ ```jsx
96
+ // src/App.jsx
97
+ import A11yWidget from '@pigmilcom/a11y';
98
+
99
+ export default function App() {
100
+ return (
101
+ <>
102
+ {/* …your content… */}
103
+ <A11yWidget className="fixed bottom-4 right-4 rounded" />
104
+ </>
105
+ );
106
+ }
107
+ ```
108
+
109
+ ---
110
+
111
+ ## Props
112
+
113
+ | Prop | Type | Default | Description |
114
+ | ----------- | -------- | ------- | ------------------------------------------- |
115
+ | `className` | `string` | — | Extra classes added to the trigger `<button>` |
116
+
117
+ ---
118
+
119
+ ## CSS classes applied to `<html>`
120
+
121
+ When a preference is enabled the widget adds a class to `document.documentElement`.
122
+ All rules live in `@pigmilcom/a11y/styles` and can be freely overridden in your own stylesheet.
123
+
124
+ | Class | Feature |
125
+ | ----------------------- | ----------------------------------------- |
126
+ | `a11y-text-lg` | Font size +18 % |
127
+ | `a11y-text-xl` | Font size +45 % |
128
+ | `a11y-high-contrast` | Contrast filter (1.6×) |
129
+ | `a11y-invert` | Invert colours (re-inverts images/video) |
130
+ | `a11y-grayscale` | Grayscale filter |
131
+ | `a11y-reduce-motion` | Strips all animations & transitions |
132
+ | `a11y-highlight-links` | Outlines every link and `[role="link"]` |
133
+ | `a11y-text-spacing` | Letter / word / line spacing (WCAG 1.4.12)|
134
+ | `a11y-adhd` | Removes motion + adds strong focus ring |
135
+ | `a11y-dyslexia` | Switches to a high-readability system font|
136
+
137
+ ---
138
+
139
+ ## Tailwind CSS users
140
+
141
+ The pre-built `@pigmilcom/a11y/styles` import **already contains all required
142
+ utility styles** — you do not need Tailwind installed.
143
+
144
+ If you _do_ use Tailwind v3 and want to avoid shipping duplicate utility
145
+ declarations, add the package to your `content` scanning paths and skip the
146
+ stylesheet import:
147
+
148
+ ```js
149
+ // tailwind.config.js
150
+ export default {
151
+ content: [
152
+ './src/**/*.{js,jsx,ts,tsx}',
153
+ './node_modules/@pigmilcom/a11y/dist/**/*.{js,mjs}',
154
+ ],
155
+ // …
156
+ };
157
+ ```
158
+
159
+ ---
160
+
161
+ ## Storage
162
+
163
+ Preferences are saved under the `localStorage` key `pgm-a11y` as a JSON
164
+ object. The widget reads and re-applies them on first client render, so
165
+ preferences survive page reloads and navigation. On SSR the widget hydrates
166
+ without errors — all DOM access is guarded by a `mounted` flag.
167
+
168
+ ---
169
+
170
+ ## Requirements
171
+
172
+ | Peer dependency | Version |
173
+ | --------------- | ------- |
174
+ | `react` | ≥ 17 |
175
+ | `react-dom` | ≥ 17 |
176
+
177
+ ---
178
+
179
+ ## License
180
+
181
+ MIT © [pigmilcom](https://pigmilcom.com)