ape-accessibility 0.3.0 → 0.5.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.
Files changed (10) hide show
  1. package/README.md +188 -157
  2. package/dist/auto.cjs +199 -264
  3. package/dist/auto.global.js +201 -201
  4. package/dist/auto.js +199 -264
  5. package/dist/index.cjs +199 -264
  6. package/dist/index.d.cts +10 -1
  7. package/dist/index.d.ts +10 -1
  8. package/dist/index.global.js +208 -208
  9. package/dist/index.js +199 -264
  10. package/package.json +78 -73
package/README.md CHANGED
@@ -1,157 +1,188 @@
1
- # ape-accessibility
2
-
3
- Plug-and-play accessibility widget for any web application. Works with React, Next.js, Vue, Nuxt, Angular, vanilla JS — zero configuration required.
4
-
5
- The widget renders inside a **Shadow DOM**, so its styles are fully isolated and will never interfere with your application's CSS.
6
-
7
- ## Installation
8
-
9
- ```bash
10
- npm install ape-accessibility
11
- # or
12
- pnpm add ape-accessibility
13
- # or
14
- yarn add ape-accessibility
15
- ```
16
-
17
- ## Usage
18
-
19
- ### Auto-mount (zero config)
20
-
21
- ```js
22
- import 'ape-accessibility/auto'
23
- // Widget appears automatically in the bottom-left corner
24
- ```
25
-
26
- That's it. No CSS imports, no providers, no wrappers.
27
-
28
- ### With configuration
29
-
30
- ```js
31
- import { accessibility } from 'ape-accessibility'
32
-
33
- const widget = accessibility.init({
34
- position: 'bottom-right', // 'bottom-left' | 'bottom-right'
35
- zIndex: 9999,
36
- })
37
-
38
- accessibility.configure({
39
- theme: {
40
- primary500: '#0ea5e9',
41
- primary600: '#0284c7',
42
- primary700: '#0369a1',
43
- panelBackground: '#f8fafc',
44
- fabActive: '#fde68a',
45
- fabInactive: '#f1f5f9',
46
- backdrop: 'rgba(2, 6, 23, 0.4)',
47
- },
48
- })
49
-
50
- // Remove the widget
51
- widget.destroy()
52
- ```
53
-
54
- ### Script tag (no bundler)
55
-
56
- ```html
57
- <script src="https://unpkg.com/ape-accessibility/dist/index.global.js"></script>
58
- ```
59
-
60
- The widget auto-mounts when the script loads. For manual control:
61
-
62
- ```html
63
- <script>
64
- const widget = ApeAccessibility.init({ position: 'bottom-right' })
65
- </script>
66
- ```
67
-
68
- ## API
69
-
70
- | Function | Description |
71
- | -------------------- | ------------------------------------------ |
72
- | `accessibility.init(config?)` | Mounts the widget. Returns `{ destroy() }` |
73
- | `accessibility.destroy()` | Removes the widget from the DOM |
74
- | `accessibility.configure(config?)` | Updates runtime widget config (including theme) |
75
- | `accessibility.getConfig()` | Returns current widget config |
76
- | `accessibility.getSettings()` | Returns current accessibility settings |
77
- | `accessibility.resetAllSettings()` | Resets all settings to their defaults |
78
-
79
- ### Config options
80
-
81
- | Option | Type | Default |
82
- | ------------- | ------------------------------------- | --------------- |
83
- | `position` | `'bottom-left'` \| `'bottom-right'` | `'bottom-left'` |
84
- | `zIndex` | `number` | `9999` |
85
- | `containerId` | `string` | `'ape-accessibility-root'` |
86
- | `theme` | `Partial<WidgetTheme>` | default theme values |
87
-
88
- ### Theme options
89
-
90
- | Option | Type | Default |
91
- | ------ | ---- | ------- |
92
- | `primary500` | `string` | `#005dca` |
93
- | `primary600` | `string` | `#004faf` |
94
- | `primary700` | `string` | `#003b8a` |
95
- | `panelBackground` | `string` | `#f9fafb` |
96
- | `fabActive` | `string` | `#ffd54f` |
97
- | `fabInactive` | `string` | `#f6f6f6` |
98
- | `backdrop` | `string` | `rgba(0, 0, 0, 0.2)` |
99
-
100
- ## Features
101
-
102
- | Feature | Description |
103
- | -------------------- | -------------------------------------------------------- |
104
- | Font size | Increase/decrease (90%–120%) |
105
- | High contrast | High contrast mode for improved readability |
106
- | Saturation | High, low, or monochrome modes |
107
- | Dyslexia font | Switches to OpenDyslexic font |
108
- | Letter spacing | Adjust letter spacing for better readability |
109
- | Line height | Adjust line height / leading |
110
- | Highlight headings | Visually highlights all headings on the page |
111
- | Highlight links | Visually highlights all links on the page |
112
- | Bold text | Applies bold weight to all body text |
113
- | Pause animations | Stops all CSS animations and transitions |
114
- | Large cursor | Increases cursor size for easier tracking |
115
- | Reading guide | Horizontal line that follows the cursor |
116
- | Read aloud | Text-to-speech using the Web Speech API |
117
- | Page structure | Navigate the page by heading hierarchy |
118
- | Hide images | Hides images, videos, and SVGs |
119
- | Text alignment | Force left, center, or right alignment |
120
- | Accessibility profiles | Presets for visual, cognitive, motor, and senior needs |
121
-
122
- ## How it works
123
-
124
- - **Widget UI** (panel, buttons, animations) renders inside a [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM), completely isolated from the host page. Your styles won't break, and the widget's styles won't leak.
125
- - **Accessibility tools** (high contrast, dyslexia font, large cursor, etc.) are injected into the host document intentionally, since they need to affect the entire page.
126
- - **React is bundled internally** — no peer dependencies, no version conflicts with your app.
127
-
128
- ## Framework compatibility
129
-
130
- | Framework | Status |
131
- | ---------- | ------ |
132
- | React | Works |
133
- | Next.js | Works |
134
- | Vue | pending |
135
- | Nuxt | pending |
136
- | Angular | pending |
137
- | Vanilla JS | Works |
138
- | Any other | pending |
139
-
140
- ## Bundle size
141
-
142
- ~265 KB minified (~75 KB gzipped). Includes React internally — no external dependencies required.
143
-
144
- ## Development
145
-
146
- ```bash
147
- git clone https://github.com/APE-SENA-2025/ape-accessibility.git
148
- cd ape-accessibility
149
- pnpm install
150
- pnpm dev
151
- ```
152
-
153
- Opens a dev server at `http://localhost:3333` with hot reload.
154
-
155
- ## License
156
-
157
- All rights reserved.
1
+ # ape-accessibility
2
+
3
+ Plug-and-play accessibility widget for any web application. Works with React, Next.js, Vue, Nuxt, Angular, vanilla JS — zero configuration required.
4
+
5
+ The widget renders inside a **Shadow DOM**, so its styles are fully isolated and will never interfere with your application's CSS.
6
+
7
+ ## Installation
8
+
9
+ ```bash
10
+ npm install ape-accessibility
11
+ # or
12
+ pnpm add ape-accessibility
13
+ # or
14
+ yarn add ape-accessibility
15
+ ```
16
+
17
+ ## Usage
18
+
19
+ ### Auto-mount (zero config)
20
+
21
+ ```js
22
+ import 'ape-accessibility/auto'
23
+ // Widget appears automatically in the bottom-left corner
24
+ ```
25
+
26
+ That's it. No CSS imports, no providers, no wrappers.
27
+
28
+ ### With configuration
29
+
30
+ ```js
31
+ import { accessibility } from 'ape-accessibility'
32
+
33
+ const widget = accessibility.init({
34
+ position: 'bottom-right', // 'bottom-left' | 'bottom-right'
35
+ zIndex: 9999,
36
+ })
37
+
38
+ accessibility.configure({
39
+ theme: {
40
+ primary500: '#0ea5e9',
41
+ primary600: '#0284c7',
42
+ primary700: '#0369a1',
43
+ panelBackground: '#f8fafc',
44
+ fabActive: '#fde68a',
45
+ fabInactive: '#f1f5f9',
46
+ backdrop: 'rgba(2, 6, 23, 0.4)',
47
+ },
48
+ })
49
+
50
+ // Remove the widget
51
+ widget.destroy()
52
+ ```
53
+
54
+ ### React component (recommended)
55
+
56
+ If you're using React/Next.js, you can mount and configure the widget as a component:
57
+
58
+ ```tsx
59
+ import { AccessibilityWidget } from 'ape-accessibility'
60
+
61
+ export default function Layout() {
62
+ return (
63
+ <>
64
+ {/* ...your app layout... */}
65
+ <AccessibilityWidget
66
+ config={{
67
+ position: 'bottom-right',
68
+ zIndex: 9999,
69
+ theme: {
70
+ primary500: '#0ea5e9',
71
+ primary600: '#0284c7',
72
+ primary700: '#0369a1',
73
+ panelBackground: '#f8fafc',
74
+ fabActive: '#fde68a',
75
+ fabInactive: '#f1f5f9',
76
+ backdrop: 'rgba(2, 6, 23, 0.4)',
77
+ },
78
+ }}
79
+ />
80
+ </>
81
+ )
82
+ }
83
+ ```
84
+
85
+ ### Script tag (no bundler)
86
+
87
+ ```html
88
+ <script src="https://unpkg.com/ape-accessibility/dist/index.global.js"></script>
89
+ ```
90
+
91
+ The widget auto-mounts when the script loads. For manual control:
92
+
93
+ ```html
94
+ <script>
95
+ const widget = ApeAccessibility.init({ position: 'bottom-right' })
96
+ </script>
97
+ ```
98
+
99
+ ## API
100
+
101
+ | Function | Description |
102
+ | -------------------- | ------------------------------------------ |
103
+ | `accessibility.init(config?)` | Mounts the widget. Returns `{ destroy() }` |
104
+ | `accessibility.destroy()` | Removes the widget from the DOM |
105
+ | `accessibility.configure(config?)` | Updates runtime widget config (including theme) |
106
+ | `accessibility.getConfig()` | Returns current widget config |
107
+ | `accessibility.getSettings()` | Returns current accessibility settings |
108
+ | `accessibility.resetAllSettings()` | Resets all settings to their defaults |
109
+
110
+ ### Config options
111
+
112
+ | Option | Type | Default |
113
+ | ------------- | ------------------------------------- | --------------- |
114
+ | `position` | `'bottom-left'` \| `'bottom-right'` | `'bottom-left'` |
115
+ | `zIndex` | `number` | `9999` |
116
+ | `containerId` | `string` | `'ape-accessibility-root'` |
117
+ | `theme` | `Partial<WidgetTheme>` | default theme values |
118
+
119
+ ### Theme options
120
+
121
+ | Option | Type | Default |
122
+ | ------ | ---- | ------- |
123
+ | `primary500` | `string` | `#005dca` |
124
+ | `primary600` | `string` | `#004faf` |
125
+ | `primary700` | `string` | `#003b8a` |
126
+ | `panelBackground` | `string` | `#f9fafb` |
127
+ | `fabActive` | `string` | `#ffd54f` |
128
+ | `fabInactive` | `string` | `#f6f6f6` |
129
+ | `backdrop` | `string` | `rgba(0, 0, 0, 0.2)` |
130
+
131
+ ## Features
132
+
133
+ | Feature | Description |
134
+ | -------------------- | -------------------------------------------------------- |
135
+ | Font size | Increase/decrease (90%–120%) |
136
+ | High contrast | High contrast mode for improved readability |
137
+ | Saturation | High, low, or monochrome modes |
138
+ | Dyslexia font | Switches to OpenDyslexic font |
139
+ | Letter spacing | Adjust letter spacing for better readability |
140
+ | Line height | Adjust line height / leading |
141
+ | Highlight headings | Visually highlights all headings on the page |
142
+ | Highlight links | Visually highlights all links on the page |
143
+ | Bold text | Applies bold weight to all body text |
144
+ | Pause animations | Stops all CSS animations and transitions |
145
+ | Large cursor | Increases cursor size for easier tracking |
146
+ | Reading guide | Horizontal line that follows the cursor |
147
+ | Read aloud | Text-to-speech using the Web Speech API |
148
+ | Page structure | Navigate the page by heading hierarchy |
149
+ | Hide images | Hides images, videos, and SVGs |
150
+ | Text alignment | Force left, center, or right alignment |
151
+ | Accessibility profiles | Presets for visual, cognitive, motor, and senior needs |
152
+
153
+ ## How it works
154
+
155
+ - **Widget UI** (panel, buttons, animations) renders inside a [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM), completely isolated from the host page. Your styles won't break, and the widget's styles won't leak.
156
+ - **Accessibility tools** (high contrast, dyslexia font, large cursor, etc.) are injected into the host document intentionally, since they need to affect the entire page.
157
+ - **React is bundled internally** — no peer dependencies, no version conflicts with your app.
158
+
159
+ ## Framework compatibility
160
+
161
+ | Framework | Status |
162
+ | ---------- | ------ |
163
+ | React | Works |
164
+ | Next.js | Works |
165
+ | Vue | pending |
166
+ | Nuxt | pending |
167
+ | Angular | pending |
168
+ | Vanilla JS | Works |
169
+ | Any other | pending |
170
+
171
+ ## Bundle size
172
+
173
+ ~265 KB minified (~75 KB gzipped). Includes React internally — no external dependencies required.
174
+
175
+ ## Development
176
+
177
+ ```bash
178
+ git clone https://github.com/APE-SENA-2025/ape-accessibility.git
179
+ cd ape-accessibility
180
+ pnpm install
181
+ pnpm dev
182
+ ```
183
+
184
+ Opens a dev server at `http://localhost:3333` with hot reload.
185
+
186
+ ## License
187
+
188
+ All rights reserved.