ngp-accessibility 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.
- package/README.md +104 -0
- package/package.json +38 -0
package/README.md
ADDED
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
# NGP Accessibility
|
|
2
|
+
|
|
3
|
+
React accessibility package with translation, text sizing, contrast modes, and voice commands.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- 🌐 Multi-language support (English, Tagalog, Cebuano/Visayan)
|
|
8
|
+
- 📏 Text size adjustment (increase/decrease)
|
|
9
|
+
- 🎨 High contrast mode
|
|
10
|
+
- 🔄 Negative contrast mode
|
|
11
|
+
- 💡 Light background mode
|
|
12
|
+
- 🔗 Links underline toggle
|
|
13
|
+
- 📖 Readable font mode
|
|
14
|
+
- 🎤 Voice command support
|
|
15
|
+
- ✅ TypeScript & JavaScript compatible
|
|
16
|
+
- 📦 Zero dependencies (peer: React)
|
|
17
|
+
|
|
18
|
+
## Installation
|
|
19
|
+
|
|
20
|
+
```bash
|
|
21
|
+
npm install ngp-accessibility
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
## Usage
|
|
25
|
+
|
|
26
|
+
### Option 1: Toolbar (Horizontal)
|
|
27
|
+
|
|
28
|
+
```jsx
|
|
29
|
+
import { AccessibilityProvider, AccessibilityToolbar } from 'ngp-accessibility';
|
|
30
|
+
import 'ngp-accessibility/dist/styles.css';
|
|
31
|
+
|
|
32
|
+
function App() {
|
|
33
|
+
return (
|
|
34
|
+
<AccessibilityProvider>
|
|
35
|
+
<AccessibilityToolbar />
|
|
36
|
+
<YourContent />
|
|
37
|
+
</AccessibilityProvider>
|
|
38
|
+
);
|
|
39
|
+
}
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
### Option 2: Dropdown Button
|
|
43
|
+
|
|
44
|
+
```jsx
|
|
45
|
+
import { AccessibilityProvider, AccessibilityDropdown } from 'ngp-accessibility';
|
|
46
|
+
import 'ngp-accessibility/dist/styles.css';
|
|
47
|
+
|
|
48
|
+
function App() {
|
|
49
|
+
return (
|
|
50
|
+
<AccessibilityProvider>
|
|
51
|
+
<div style={{ textAlign: 'right', padding: '10px' }}>
|
|
52
|
+
<AccessibilityDropdown />
|
|
53
|
+
</div>
|
|
54
|
+
<YourContent />
|
|
55
|
+
</AccessibilityProvider>
|
|
56
|
+
);
|
|
57
|
+
}
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
## Voice Commands
|
|
61
|
+
|
|
62
|
+
When voice command is enabled, you can use:
|
|
63
|
+
- "increase text" / "palakihin"
|
|
64
|
+
- "decrease text" / "paliitin"
|
|
65
|
+
- "high contrast" / "mataas"
|
|
66
|
+
- "negative contrast" / "negatibo"
|
|
67
|
+
- "light background" / "maliwanag"
|
|
68
|
+
- "underline" / "guhit"
|
|
69
|
+
- "readable font" / "madaling"
|
|
70
|
+
|
|
71
|
+
## API
|
|
72
|
+
|
|
73
|
+
### AccessibilityProvider
|
|
74
|
+
Wrap your app with this provider.
|
|
75
|
+
|
|
76
|
+
### useAccessibility()
|
|
77
|
+
Hook that returns:
|
|
78
|
+
- `language`, `setLanguage(lang)`
|
|
79
|
+
- `textSize`, `increaseText()`, `decreaseText()`
|
|
80
|
+
- `highContrast`, `toggleHighContrast()`
|
|
81
|
+
- `negativeContrast`, `toggleNegativeContrast()`
|
|
82
|
+
- `lightBackground`, `toggleLightBackground()`
|
|
83
|
+
- `underlineLinks`, `toggleUnderlineLinks()`
|
|
84
|
+
- `readableFont`, `toggleReadableFont()`
|
|
85
|
+
- `voiceEnabled`, `toggleVoice()`
|
|
86
|
+
- `translate(key)` - Get translated text
|
|
87
|
+
|
|
88
|
+
### AccessibilityToolbar
|
|
89
|
+
Pre-built toolbar component with all controls.
|
|
90
|
+
|
|
91
|
+
## Full Documentation
|
|
92
|
+
|
|
93
|
+
For complete documentation including:
|
|
94
|
+
- Full page translation guide
|
|
95
|
+
- Custom toolbar examples
|
|
96
|
+
- TypeScript support
|
|
97
|
+
- CSS customization
|
|
98
|
+
- Advanced usage examples
|
|
99
|
+
|
|
100
|
+
See [DOCUMENTATION.md](./DOCUMENTATION.md)
|
|
101
|
+
|
|
102
|
+
## License
|
|
103
|
+
|
|
104
|
+
MIT
|
package/package.json
ADDED
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "ngp-accessibility",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "React accessibility package with translation, text sizing, contrast modes, and voice commands",
|
|
5
|
+
"author": {
|
|
6
|
+
"name": "Rodolfo Miclat Jr."
|
|
7
|
+
},
|
|
8
|
+
"main": "dist/index.js",
|
|
9
|
+
"module": "dist/index.esm.js",
|
|
10
|
+
"types": "dist/index.d.ts",
|
|
11
|
+
"files": [
|
|
12
|
+
"dist"
|
|
13
|
+
],
|
|
14
|
+
"scripts": {
|
|
15
|
+
"build": "rollup -c",
|
|
16
|
+
"dev": "rollup -c -w"
|
|
17
|
+
},
|
|
18
|
+
"keywords": [
|
|
19
|
+
"react",
|
|
20
|
+
"accessibility",
|
|
21
|
+
"a11y",
|
|
22
|
+
"translation",
|
|
23
|
+
"voice-command"
|
|
24
|
+
],
|
|
25
|
+
"peerDependencies": {
|
|
26
|
+
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
|
27
|
+
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
|
28
|
+
},
|
|
29
|
+
"devDependencies": {
|
|
30
|
+
"@rollup/plugin-commonjs": "^25.0.0",
|
|
31
|
+
"@rollup/plugin-node-resolve": "^15.0.0",
|
|
32
|
+
"@rollup/plugin-typescript": "^11.0.0",
|
|
33
|
+
"@types/react": "^18.0.0",
|
|
34
|
+
"rollup": "^3.0.0",
|
|
35
|
+
"typescript": "^5.0.0"
|
|
36
|
+
},
|
|
37
|
+
"license": "MIT"
|
|
38
|
+
}
|