ape-accessibility 0.2.2 → 0.2.5

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 (5) hide show
  1. package/README.md +91 -43
  2. package/dist/index.cjs +13 -16177
  3. package/dist/index.global.js +13 -16172
  4. package/dist/index.js +13 -16160
  5. package/package.json +7 -4
package/README.md CHANGED
@@ -1,43 +1,51 @@
1
1
  # ape-accessibility
2
2
 
3
- Widget de accesibilidad plug-and-play para cualquier aplicacion web. Funciona con React, Vue, Angular, vanilla JS — sin configuracion.
3
+ Plug-and-play accessibility widget for any web application. Works with React, Next.js, Vue, Nuxt, Angular, vanilla JS — zero configuration required.
4
4
 
5
- ## Instalacion
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
6
8
 
7
9
  ```bash
8
10
  npm install ape-accessibility
11
+ # or
12
+ pnpm add ape-accessibility
13
+ # or
14
+ yarn add ape-accessibility
9
15
  ```
10
16
 
11
- ## Uso
17
+ ## Usage
12
18
 
13
- ### Auto-mount (cero configuracion)
19
+ ### Auto-mount (zero config)
14
20
 
15
21
  ```js
16
22
  import 'ape-accessibility'
17
- // El widget aparece automaticamente en la esquina inferior izquierda
23
+ // Widget appears automatically in the bottom-left corner
18
24
  ```
19
25
 
20
- ### Con configuracion
26
+ That's it. No CSS imports, no providers, no wrappers.
27
+
28
+ ### With configuration
21
29
 
22
30
  ```js
23
31
  import { init, destroy } from 'ape-accessibility'
24
32
 
25
33
  const widget = init({
26
- position: 'bottom-right', // 'bottom-left' | 'bottom-right'
34
+ position: 'bottom-right', // 'bottom-left' | 'bottom-right'
27
35
  zIndex: 9999,
28
36
  })
29
37
 
30
- // Para remover el widget
38
+ // Remove the widget
31
39
  widget.destroy()
32
40
  ```
33
41
 
34
- ### Script tag (sin bundler)
42
+ ### Script tag (no bundler)
35
43
 
36
44
  ```html
37
45
  <script src="https://unpkg.com/ape-accessibility/dist/index.global.js"></script>
38
46
  ```
39
47
 
40
- El widget se auto-monta al cargar el script. Para control manual:
48
+ The widget auto-mounts when the script loads. For manual control:
41
49
 
42
50
  ```html
43
51
  <script>
@@ -47,36 +55,76 @@ El widget se auto-monta al cargar el script. Para control manual:
47
55
 
48
56
  ## API
49
57
 
50
- | Funcion | Descripcion |
51
- |---------|-------------|
52
- | `init(config?)` | Monta el widget. Retorna `{ destroy() }` |
53
- | `destroy()` | Remueve el widget del DOM |
54
- | `getSettings()` | Retorna la configuracion actual |
55
- | `resetAllSettings()` | Resetea todas las funciones a valores por defecto |
56
-
57
- ## Funcionalidades
58
-
59
- | Funcion | Descripcion |
60
- |---------|-------------|
61
- | Tamano de fuente | Incrementar/decrementar (90%-120%) |
62
- | Alto contraste | Modo de alto contraste |
63
- | Saturacion | Alta, baja o monocromo |
64
- | Fuente dislexia | Fuente OpenDyslexic |
65
- | Espaciado | Control de letras e interlineado |
66
- | Resaltado | Resaltar titulos y enlaces |
67
- | Animaciones | Pausar todas las animaciones |
68
- | Cursor grande | Cursor de mayor tamano |
69
- | Guia de lectura | Linea que sigue el cursor |
70
- | Lectura en voz alta | Text-to-speech del contenido |
71
- | Estructura de pagina | Navegar por encabezados |
72
- | Perfiles | Presets para discapacidad visual, cognitiva, motora, adulto mayor |
73
- | Ocultar imagenes | Esconde imagenes, videos y SVGs |
74
- | Alineacion de texto | Forzar alineacion izquierda, centro o derecha |
75
-
76
- ## Tamano
77
-
78
- ~75 KB gzipped (incluye React internamente, no requiere dependencias externas).
79
-
80
- ## Licencia
81
-
82
- MIT
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.