accessibility-widgets 2.0.2 → 2.0.4
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 +1 -85
- package/package.json +2 -2
- package/widget.js +1 -1
package/README.md
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
|
|
7
7
|
A comprehensive, zero-dependency accessibility widget that enhances web accessibility for all users. This lightweight, single-file JavaScript solution provides 14+ accessibility features to make your website instantly more inclusive and compliant with WCAG 2.1 AA, Section 508, and EN 301 549 standards.
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
<img width="1277" height="989" alt="image" src="https://github.com/user-attachments/assets/f6abe245-9d92-4f53-941c-06b77bde1cac" />
|
|
10
10
|
|
|
11
11
|
|
|
12
12
|
## ⚡ Quick Start
|
|
@@ -403,89 +403,6 @@ Cycle through Arial (modern sans-serif), Times New Roman (traditional serif), an
|
|
|
403
403
|
</html>
|
|
404
404
|
```
|
|
405
405
|
|
|
406
|
-
### NPM/Module Usage
|
|
407
|
-
```javascript
|
|
408
|
-
// main.js
|
|
409
|
-
import 'accessibility-widgets/widget.js';
|
|
410
|
-
|
|
411
|
-
// Optional: Configure before import
|
|
412
|
-
window.ACCESSIBILITY_WIDGET_CONFIG = {
|
|
413
|
-
enableVoiceControl: false,
|
|
414
|
-
widgetWidth: '400px'
|
|
415
|
-
};
|
|
416
|
-
|
|
417
|
-
// Widget auto-initializes
|
|
418
|
-
```
|
|
419
|
-
|
|
420
|
-
### React/Vue/Angular Integration
|
|
421
|
-
```javascript
|
|
422
|
-
// App.jsx (React)
|
|
423
|
-
import { useEffect } from 'react';
|
|
424
|
-
|
|
425
|
-
function App() {
|
|
426
|
-
useEffect(() => {
|
|
427
|
-
// Configure widget
|
|
428
|
-
window.ACCESSIBILITY_WIDGET_CONFIG = {
|
|
429
|
-
colors: { primary: '#4caf50' }
|
|
430
|
-
};
|
|
431
|
-
|
|
432
|
-
// Load widget script
|
|
433
|
-
const script = document.createElement('script');
|
|
434
|
-
script.src = 'https://unpkg.com/accessibility-widgets@latest/widget.js';
|
|
435
|
-
script.async = true;
|
|
436
|
-
document.body.appendChild(script);
|
|
437
|
-
|
|
438
|
-
return () => {
|
|
439
|
-
// Cleanup if needed
|
|
440
|
-
document.body.removeChild(script);
|
|
441
|
-
};
|
|
442
|
-
}, []);
|
|
443
|
-
|
|
444
|
-
return <div>Your App Content</div>;
|
|
445
|
-
}
|
|
446
|
-
```
|
|
447
|
-
|
|
448
|
-
## 🛠️ Development
|
|
449
|
-
|
|
450
|
-
```bash
|
|
451
|
-
# Clone repository
|
|
452
|
-
git clone https://github.com/sinanisler/accessibility-widgets.git
|
|
453
|
-
cd accessibility-widgets
|
|
454
|
-
|
|
455
|
-
# Install dependencies (optional)
|
|
456
|
-
npm install
|
|
457
|
-
|
|
458
|
-
# Start local server
|
|
459
|
-
npm run dev
|
|
460
|
-
# Opens http://localhost:8000
|
|
461
|
-
```
|
|
462
|
-
|
|
463
|
-
## 📦 NPM Publishing Setup
|
|
464
|
-
|
|
465
|
-
After setting up your NPM account:
|
|
466
|
-
|
|
467
|
-
1. **Create NPM Token**:
|
|
468
|
-
```bash
|
|
469
|
-
npm login
|
|
470
|
-
npm token create
|
|
471
|
-
```
|
|
472
|
-
|
|
473
|
-
2. **Add to GitHub Secrets**:
|
|
474
|
-
- Go to your repository Settings → Secrets and variables → Actions
|
|
475
|
-
- Create new secret: `NPM_TOKEN`
|
|
476
|
-
- Paste your NPM token
|
|
477
|
-
|
|
478
|
-
3. **Publish**:
|
|
479
|
-
```bash
|
|
480
|
-
# Manual publish
|
|
481
|
-
npm publish
|
|
482
|
-
|
|
483
|
-
# Or create GitHub release to trigger workflow
|
|
484
|
-
git tag v2.0.0
|
|
485
|
-
git push origin v2.0.0
|
|
486
|
-
```
|
|
487
|
-
|
|
488
|
-
The GitHub Actions workflow will automatically publish to NPM on new releases.
|
|
489
406
|
|
|
490
407
|
## 🤝 Contributing
|
|
491
408
|
|
|
@@ -512,7 +429,6 @@ GPL-3.0 License - See [LICENSE](LICENSE) file for details.
|
|
|
512
429
|
|
|
513
430
|
- ⭐ Star this repository
|
|
514
431
|
- 🐛 [Report bugs](https://github.com/sinanisler/accessibility-widgets/issues)
|
|
515
|
-
- 💡 [Request features](https://github.com/sinanisler/accessibility-widgets/issues)
|
|
516
432
|
- ❤️ [Sponsor on GitHub](https://github.com/sponsors/sinanisler)
|
|
517
433
|
|
|
518
434
|
## 📊 Stats
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
2
|
"name": "accessibility-widgets",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.4",
|
|
4
4
|
"description": "A comprehensive, lightweight accessibility widget that enhances web accessibility for all users. Provides multiple accessibility features including screen reader support, voice control, high contrast mode, and more.",
|
|
5
5
|
"main": "widget.js",
|
|
6
6
|
"scripts": {
|
package/widget.js
CHANGED