ape-accessibility 0.2.3 → 0.3.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 (12) hide show
  1. package/README.md +157 -130
  2. package/dist/auto.cjs +276 -0
  3. package/dist/auto.d.cts +2 -0
  4. package/dist/auto.d.ts +2 -0
  5. package/dist/auto.global.js +276 -0
  6. package/dist/auto.js +276 -0
  7. package/dist/index.cjs +212 -16371
  8. package/dist/index.d.cts +22 -1
  9. package/dist/index.d.ts +22 -1
  10. package/dist/index.global.js +212 -16366
  11. package/dist/index.js +212 -16354
  12. package/package.json +73 -60
package/README.md CHANGED
@@ -1,130 +1,157 @@
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'
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 { init, destroy } from 'ape-accessibility'
32
-
33
- const widget = init({
34
- position: 'bottom-right', // 'bottom-left' | 'bottom-right'
35
- zIndex: 9999,
36
- })
37
-
38
- // Remove the widget
39
- widget.destroy()
40
- ```
41
-
42
- ### Script tag (no bundler)
43
-
44
- ```html
45
- <script src="https://unpkg.com/ape-accessibility/dist/index.global.js"></script>
46
- ```
47
-
48
- The widget auto-mounts when the script loads. For manual control:
49
-
50
- ```html
51
- <script>
52
- const widget = ApeAccessibility.init({ position: 'bottom-right' })
53
- </script>
54
- ```
55
-
56
- ## API
57
-
58
- | Function | Description |
59
- | -------------------- | ------------------------------------------ |
60
- | `init(config?)` | Mounts the widget. Returns `{ destroy() }` |
61
- | `destroy()` | Removes the widget from the DOM |
62
- | `getSettings()` | Returns the current accessibility settings |
63
- | `resetAllSettings()` | Resets all settings to their defaults |
64
-
65
- ### Config options
66
-
67
- | Option | Type | Default |
68
- | ------------- | ------------------------------------- | --------------- |
69
- | `position` | `'bottom-left'` \| `'bottom-right'` | `'bottom-left'` |
70
- | `zIndex` | `number` | `9999` |
71
- | `containerId` | `string` | `'ape-accessibility-root'` |
72
-
73
- ## Features
74
-
75
- | Feature | Description |
76
- | -------------------- | -------------------------------------------------------- |
77
- | Font size | Increase/decrease (90%–120%) |
78
- | High contrast | High contrast mode for improved readability |
79
- | Saturation | High, low, or monochrome modes |
80
- | Dyslexia font | Switches to OpenDyslexic font |
81
- | Letter spacing | Adjust letter spacing for better readability |
82
- | Line height | Adjust line height / leading |
83
- | Highlight headings | Visually highlights all headings on the page |
84
- | Highlight links | Visually highlights all links on the page |
85
- | Bold text | Applies bold weight to all body text |
86
- | Pause animations | Stops all CSS animations and transitions |
87
- | Large cursor | Increases cursor size for easier tracking |
88
- | Reading guide | Horizontal line that follows the cursor |
89
- | Read aloud | Text-to-speech using the Web Speech API |
90
- | Page structure | Navigate the page by heading hierarchy |
91
- | Hide images | Hides images, videos, and SVGs |
92
- | Text alignment | Force left, center, or right alignment |
93
- | Accessibility profiles | Presets for visual, cognitive, motor, and senior needs |
94
-
95
- ## How it works
96
-
97
- - **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.
98
- - **Accessibility tools** (high contrast, dyslexia font, large cursor, etc.) are injected into the host document intentionally, since they need to affect the entire page.
99
- - **React is bundled internally** — no peer dependencies, no version conflicts with your app.
100
-
101
- ## Framework compatibility
102
-
103
- | Framework | Status |
104
- | ---------- | ------ |
105
- | React | Works |
106
- | Next.js | Works |
107
- | Vue | pending |
108
- | Nuxt | pending |
109
- | Angular | pending |
110
- | Vanilla JS | Works |
111
- | Any other | pending |
112
-
113
- ## Bundle size
114
-
115
- ~265 KB minified (~75 KB gzipped). Includes React internally — no external dependencies required.
116
-
117
- ## Development
118
-
119
- ```bash
120
- git clone https://github.com/APE-SENA-2025/ape-accessibility.git
121
- cd ape-accessibility
122
- pnpm install
123
- pnpm dev
124
- ```
125
-
126
- Opens a dev server at `http://localhost:3333` with hot reload.
127
-
128
- ## License
129
-
130
- 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
+ ### 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.