ai-flow-dev 2.7.0 → 2.8.1
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/LICENSE +21 -21
- package/README.md +573 -570
- package/package.json +74 -74
- package/prompts/backend/flow-build-phase-0.md +535 -535
- package/prompts/backend/flow-build-phase-1.md +626 -626
- package/prompts/backend/flow-build-phase-10.md +340 -340
- package/prompts/backend/flow-build-phase-2.md +573 -573
- package/prompts/backend/flow-build-phase-3.md +834 -834
- package/prompts/backend/flow-build-phase-4.md +554 -554
- package/prompts/backend/flow-build-phase-5.md +703 -703
- package/prompts/backend/flow-build-phase-6.md +524 -524
- package/prompts/backend/flow-build-phase-7.md +1001 -1001
- package/prompts/backend/flow-build-phase-8.md +1407 -1407
- package/prompts/backend/flow-build-phase-9.md +477 -477
- package/prompts/backend/flow-build.md +137 -137
- package/prompts/backend/flow-check-review.md +656 -20
- package/prompts/backend/flow-check-test.md +526 -14
- package/prompts/backend/flow-check.md +717 -67
- package/prompts/backend/flow-commit.md +88 -119
- package/prompts/backend/flow-docs-sync.md +354 -354
- package/prompts/backend/flow-finish.md +919 -0
- package/prompts/backend/flow-release.md +949 -0
- package/prompts/backend/flow-work-feature.md +61 -61
- package/prompts/backend/flow-work-fix.md +46 -46
- package/prompts/backend/flow-work-refactor.md +48 -48
- package/prompts/backend/flow-work-resume.md +34 -34
- package/prompts/backend/flow-work.md +1098 -1286
- package/prompts/desktop/flow-build-phase-0.md +359 -359
- package/prompts/desktop/flow-build-phase-1.md +295 -295
- package/prompts/desktop/flow-build-phase-10.md +357 -357
- package/prompts/desktop/flow-build-phase-2.md +282 -282
- package/prompts/desktop/flow-build-phase-3.md +291 -291
- package/prompts/desktop/flow-build-phase-4.md +308 -308
- package/prompts/desktop/flow-build-phase-5.md +269 -269
- package/prompts/desktop/flow-build-phase-6.md +350 -350
- package/prompts/desktop/flow-build-phase-7.md +297 -297
- package/prompts/desktop/flow-build-phase-8.md +541 -541
- package/prompts/desktop/flow-build-phase-9.md +439 -439
- package/prompts/desktop/flow-build.md +156 -156
- package/prompts/desktop/flow-check-review.md +656 -20
- package/prompts/desktop/flow-check-test.md +526 -14
- package/prompts/desktop/flow-check.md +717 -67
- package/prompts/desktop/flow-commit.md +88 -119
- package/prompts/desktop/flow-docs-sync.md +354 -354
- package/prompts/desktop/flow-finish.md +919 -0
- package/prompts/desktop/flow-release.md +662 -0
- package/prompts/desktop/flow-work-feature.md +61 -61
- package/prompts/desktop/flow-work-fix.md +46 -46
- package/prompts/desktop/flow-work-refactor.md +48 -48
- package/prompts/desktop/flow-work-resume.md +34 -34
- package/prompts/desktop/flow-work.md +1202 -1390
- package/prompts/frontend/flow-build-phase-0.md +425 -425
- package/prompts/frontend/flow-build-phase-1.md +626 -626
- package/prompts/frontend/flow-build-phase-10.md +33 -33
- package/prompts/frontend/flow-build-phase-2.md +573 -573
- package/prompts/frontend/flow-build-phase-3.md +782 -782
- package/prompts/frontend/flow-build-phase-4.md +554 -554
- package/prompts/frontend/flow-build-phase-5.md +703 -703
- package/prompts/frontend/flow-build-phase-6.md +524 -524
- package/prompts/frontend/flow-build-phase-7.md +1001 -1001
- package/prompts/frontend/flow-build-phase-8.md +872 -872
- package/prompts/frontend/flow-build-phase-9.md +94 -94
- package/prompts/frontend/flow-build.md +137 -137
- package/prompts/frontend/flow-check-review.md +656 -20
- package/prompts/frontend/flow-check-test.md +526 -14
- package/prompts/frontend/flow-check.md +717 -67
- package/prompts/frontend/flow-commit.md +88 -119
- package/prompts/frontend/flow-docs-sync.md +550 -550
- package/prompts/frontend/flow-finish.md +919 -0
- package/prompts/frontend/flow-release.md +519 -0
- package/prompts/frontend/flow-work-api.md +1547 -0
- package/prompts/frontend/flow-work-feature.md +61 -61
- package/prompts/frontend/flow-work-fix.md +38 -38
- package/prompts/frontend/flow-work-refactor.md +48 -48
- package/prompts/frontend/flow-work-resume.md +34 -34
- package/prompts/frontend/flow-work.md +1595 -1320
- package/prompts/mobile/flow-build-phase-0.md +425 -425
- package/prompts/mobile/flow-build-phase-1.md +626 -626
- package/prompts/mobile/flow-build-phase-10.md +32 -32
- package/prompts/mobile/flow-build-phase-2.md +573 -573
- package/prompts/mobile/flow-build-phase-3.md +782 -782
- package/prompts/mobile/flow-build-phase-4.md +554 -554
- package/prompts/mobile/flow-build-phase-5.md +703 -703
- package/prompts/mobile/flow-build-phase-6.md +524 -524
- package/prompts/mobile/flow-build-phase-7.md +1001 -1001
- package/prompts/mobile/flow-build-phase-8.md +888 -888
- package/prompts/mobile/flow-build-phase-9.md +90 -90
- package/prompts/mobile/flow-build.md +135 -135
- package/prompts/mobile/flow-check-review.md +656 -20
- package/prompts/mobile/flow-check-test.md +526 -14
- package/prompts/mobile/flow-check.md +717 -67
- package/prompts/mobile/flow-commit.md +88 -119
- package/prompts/mobile/flow-docs-sync.md +620 -620
- package/prompts/mobile/flow-finish.md +919 -0
- package/prompts/mobile/flow-release.md +751 -0
- package/prompts/mobile/flow-work-api.md +1500 -0
- package/prompts/mobile/flow-work-feature.md +61 -61
- package/prompts/mobile/flow-work-fix.md +46 -46
- package/prompts/mobile/flow-work-refactor.md +48 -48
- package/prompts/mobile/flow-work-resume.md +34 -34
- package/prompts/mobile/flow-work.md +1605 -1329
- package/prompts/shared/mermaid-guidelines.md +102 -102
- package/prompts/shared/scope-levels.md +114 -114
- package/prompts/shared/smart-skip-preflight.md +214 -214
- package/prompts/shared/story-points.md +55 -55
- package/prompts/shared/task-format.md +74 -74
- package/prompts/shared/task-summary-template.md +277 -277
- package/templates/AGENT.template.md +443 -443
- package/templates/backend/.clauderules.template +112 -112
- package/templates/backend/.cursorrules.template +102 -102
- package/templates/backend/README.template.md +2 -2
- package/templates/backend/ai-instructions.template.md +2 -2
- package/templates/backend/copilot-instructions.template.md +2 -2
- package/templates/backend/docs/api.template.md +320 -320
- package/templates/backend/docs/business-flows.template.md +97 -97
- package/templates/backend/docs/code-standards.template.md +2 -2
- package/templates/backend/docs/contributing.template.md +3 -3
- package/templates/backend/docs/data-model.template.md +520 -520
- package/templates/backend/docs/testing.template.md +2 -2
- package/templates/backend/project-brief.template.md +2 -2
- package/templates/backend/specs/configuration.template.md +2 -2
- package/templates/backend/specs/security.template.md +2 -2
- package/templates/desktop/.clauderules.template +112 -112
- package/templates/desktop/.cursorrules.template +102 -102
- package/templates/desktop/README.template.md +170 -170
- package/templates/desktop/ai-instructions.template.md +366 -366
- package/templates/desktop/copilot-instructions.template.md +140 -140
- package/templates/desktop/docs/docs/api.template.md +320 -320
- package/templates/desktop/docs/docs/architecture.template.md +724 -724
- package/templates/desktop/docs/docs/business-flows.template.md +102 -102
- package/templates/desktop/docs/docs/code-standards.template.md +792 -792
- package/templates/desktop/docs/docs/contributing.template.md +149 -149
- package/templates/desktop/docs/docs/data-model.template.md +520 -520
- package/templates/desktop/docs/docs/operations.template.md +720 -720
- package/templates/desktop/docs/docs/testing.template.md +722 -722
- package/templates/desktop/project-brief.template.md +150 -150
- package/templates/desktop/specs/specs/configuration.template.md +121 -121
- package/templates/desktop/specs/specs/security.template.md +392 -392
- package/templates/frontend/README.template.md +2 -2
- package/templates/frontend/ai-instructions.template.md +2 -2
- package/templates/frontend/docs/api-integration.template.md +362 -362
- package/templates/frontend/docs/components.template.md +2 -2
- package/templates/frontend/docs/error-handling.template.md +360 -360
- package/templates/frontend/docs/operations.template.md +107 -107
- package/templates/frontend/docs/performance.template.md +124 -124
- package/templates/frontend/docs/pwa.template.md +119 -119
- package/templates/frontend/docs/state-management.template.md +2 -2
- package/templates/frontend/docs/styling.template.md +2 -2
- package/templates/frontend/docs/testing.template.md +2 -2
- package/templates/frontend/project-brief.template.md +2 -2
- package/templates/frontend/specs/accessibility.template.md +95 -95
- package/templates/frontend/specs/configuration.template.md +2 -2
- package/templates/frontend/specs/security.template.md +175 -175
- package/templates/fullstack/README.template.md +252 -252
- package/templates/fullstack/ai-instructions.template.md +444 -444
- package/templates/fullstack/project-brief.template.md +157 -157
- package/templates/fullstack/specs/configuration.template.md +340 -340
- package/templates/mobile/README.template.md +167 -167
- package/templates/mobile/ai-instructions.template.md +196 -196
- package/templates/mobile/docs/app-store.template.md +135 -135
- package/templates/mobile/docs/architecture.template.md +63 -63
- package/templates/mobile/docs/native-features.template.md +94 -94
- package/templates/mobile/docs/navigation.template.md +59 -59
- package/templates/mobile/docs/offline-strategy.template.md +65 -65
- package/templates/mobile/docs/permissions.template.md +56 -56
- package/templates/mobile/docs/state-management.template.md +85 -85
- package/templates/mobile/docs/testing.template.md +109 -109
- package/templates/mobile/project-brief.template.md +69 -69
- package/templates/mobile/specs/build-configuration.template.md +91 -91
- package/templates/mobile/specs/deployment.template.md +92 -92
- package/templates/work.template.md +61 -47
|
@@ -1,125 +1,125 @@
|
|
|
1
|
-
# Progressive Web App (PWA)
|
|
2
|
-
|
|
3
|
-
> PWA features and offline capabilities for {{PROJECT_NAME}}
|
|
1
|
+
# Progressive Web App (PWA)
|
|
2
|
+
|
|
3
|
+
> PWA features and offline capabilities for {{PROJECT_NAME}}
|
|
4
4
|
---
|
|
5
|
-
## 🎯 PWA Strategy
|
|
6
|
-
|
|
7
|
-
**Service Worker:** {{SERVICE_WORKER_ENABLED}}
|
|
8
|
-
**Caching Strategy:** {{CACHING_STRATEGY}}
|
|
9
|
-
**Install Prompt:** {{INSTALL_PROMPT}}
|
|
10
|
-
**Offline Support:** {{OFFLINE_SUPPORT}}
|
|
5
|
+
## 🎯 PWA Strategy
|
|
6
|
+
|
|
7
|
+
**Service Worker:** {{SERVICE_WORKER_ENABLED}}
|
|
8
|
+
**Caching Strategy:** {{CACHING_STRATEGY}}
|
|
9
|
+
**Install Prompt:** {{INSTALL_PROMPT}}
|
|
10
|
+
**Offline Support:** {{OFFLINE_SUPPORT}}
|
|
11
11
|
---
|
|
12
|
-
## 🔧 Service Worker
|
|
13
|
-
|
|
14
|
-
### Registration
|
|
15
|
-
|
|
16
|
-
```typescript
|
|
17
|
-
// registerServiceWorker.ts
|
|
18
|
-
if ('serviceWorker' in navigator) {
|
|
19
|
-
window.addEventListener('load', () => {
|
|
20
|
-
navigator.serviceWorker
|
|
21
|
-
.register('/sw.js')
|
|
22
|
-
.then((registration) => {
|
|
23
|
-
console.log('SW registered:', registration);
|
|
24
|
-
})
|
|
25
|
-
.catch((error) => {
|
|
26
|
-
console.error('SW registration failed:', error);
|
|
27
|
-
});
|
|
28
|
-
});
|
|
29
|
-
}
|
|
30
|
-
```
|
|
31
|
-
|
|
32
|
-
### Service Worker Implementation
|
|
33
|
-
|
|
34
|
-
```javascript
|
|
35
|
-
// public/sw.js
|
|
36
|
-
const CACHE_NAME = 'app-v1';
|
|
37
|
-
const urlsToCache = [
|
|
38
|
-
'/',
|
|
39
|
-
'/index.html',
|
|
40
|
-
'/assets/app.js',
|
|
41
|
-
'/assets/app.css',
|
|
42
|
-
];
|
|
43
|
-
|
|
44
|
-
// Install
|
|
45
|
-
self.addEventListener('install', (event) => {
|
|
46
|
-
event.waitUntil(
|
|
47
|
-
caches.open(CACHE_NAME).then((cache) => {
|
|
48
|
-
return cache.addAll(urlsToCache);
|
|
49
|
-
})
|
|
50
|
-
);
|
|
51
|
-
});
|
|
52
|
-
|
|
53
|
-
// Fetch (Cache-first strategy)
|
|
54
|
-
self.addEventListener('fetch', (event) => {
|
|
55
|
-
event.respondWith(
|
|
56
|
-
caches.match(event.request).then((response) => {
|
|
57
|
-
return response || fetch(event.request);
|
|
58
|
-
})
|
|
59
|
-
);
|
|
60
|
-
});
|
|
61
|
-
```
|
|
12
|
+
## 🔧 Service Worker
|
|
13
|
+
|
|
14
|
+
### Registration
|
|
15
|
+
|
|
16
|
+
```typescript
|
|
17
|
+
// registerServiceWorker.ts
|
|
18
|
+
if ('serviceWorker' in navigator) {
|
|
19
|
+
window.addEventListener('load', () => {
|
|
20
|
+
navigator.serviceWorker
|
|
21
|
+
.register('/sw.js')
|
|
22
|
+
.then((registration) => {
|
|
23
|
+
console.log('SW registered:', registration);
|
|
24
|
+
})
|
|
25
|
+
.catch((error) => {
|
|
26
|
+
console.error('SW registration failed:', error);
|
|
27
|
+
});
|
|
28
|
+
});
|
|
29
|
+
}
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
### Service Worker Implementation
|
|
33
|
+
|
|
34
|
+
```javascript
|
|
35
|
+
// public/sw.js
|
|
36
|
+
const CACHE_NAME = 'app-v1';
|
|
37
|
+
const urlsToCache = [
|
|
38
|
+
'/',
|
|
39
|
+
'/index.html',
|
|
40
|
+
'/assets/app.js',
|
|
41
|
+
'/assets/app.css',
|
|
42
|
+
];
|
|
43
|
+
|
|
44
|
+
// Install
|
|
45
|
+
self.addEventListener('install', (event) => {
|
|
46
|
+
event.waitUntil(
|
|
47
|
+
caches.open(CACHE_NAME).then((cache) => {
|
|
48
|
+
return cache.addAll(urlsToCache);
|
|
49
|
+
})
|
|
50
|
+
);
|
|
51
|
+
});
|
|
52
|
+
|
|
53
|
+
// Fetch (Cache-first strategy)
|
|
54
|
+
self.addEventListener('fetch', (event) => {
|
|
55
|
+
event.respondWith(
|
|
56
|
+
caches.match(event.request).then((response) => {
|
|
57
|
+
return response || fetch(event.request);
|
|
58
|
+
})
|
|
59
|
+
);
|
|
60
|
+
});
|
|
61
|
+
```
|
|
62
62
|
---
|
|
63
|
-
## 📱 Web App Manifest
|
|
64
|
-
|
|
65
|
-
```json
|
|
66
|
-
// public/manifest.json
|
|
67
|
-
{
|
|
68
|
-
"name": "{{PROJECT_NAME}}",
|
|
69
|
-
"short_name": "{{PROJECT_SHORT_NAME}}",
|
|
70
|
-
"description": "{{PROJECT_DESCRIPTION}}",
|
|
71
|
-
"start_url": "/",
|
|
72
|
-
"display": "standalone",
|
|
73
|
-
"background_color": "#ffffff",
|
|
74
|
-
"theme_color": "#000000",
|
|
75
|
-
"icons": [
|
|
76
|
-
{
|
|
77
|
-
"src": "/icon-192.png",
|
|
78
|
-
"sizes": "192x192",
|
|
79
|
-
"type": "image/png"
|
|
80
|
-
},
|
|
81
|
-
{
|
|
82
|
-
"src": "/icon-512.png",
|
|
83
|
-
"sizes": "512x512",
|
|
84
|
-
"type": "image/png"
|
|
85
|
-
}
|
|
86
|
-
]
|
|
87
|
-
}
|
|
88
|
-
```
|
|
63
|
+
## 📱 Web App Manifest
|
|
64
|
+
|
|
65
|
+
```json
|
|
66
|
+
// public/manifest.json
|
|
67
|
+
{
|
|
68
|
+
"name": "{{PROJECT_NAME}}",
|
|
69
|
+
"short_name": "{{PROJECT_SHORT_NAME}}",
|
|
70
|
+
"description": "{{PROJECT_DESCRIPTION}}",
|
|
71
|
+
"start_url": "/",
|
|
72
|
+
"display": "standalone",
|
|
73
|
+
"background_color": "#ffffff",
|
|
74
|
+
"theme_color": "#000000",
|
|
75
|
+
"icons": [
|
|
76
|
+
{
|
|
77
|
+
"src": "/icon-192.png",
|
|
78
|
+
"sizes": "192x192",
|
|
79
|
+
"type": "image/png"
|
|
80
|
+
},
|
|
81
|
+
{
|
|
82
|
+
"src": "/icon-512.png",
|
|
83
|
+
"sizes": "512x512",
|
|
84
|
+
"type": "image/png"
|
|
85
|
+
}
|
|
86
|
+
]
|
|
87
|
+
}
|
|
88
|
+
```
|
|
89
89
|
---
|
|
90
|
-
## 📲 Install Prompt
|
|
91
|
-
|
|
92
|
-
```typescript
|
|
93
|
-
// utils/installPrompt.ts
|
|
94
|
-
let deferredPrompt: BeforeInstallPromptEvent | null = null;
|
|
95
|
-
|
|
96
|
-
window.addEventListener('beforeinstallprompt', (e) => {
|
|
97
|
-
e.preventDefault();
|
|
98
|
-
deferredPrompt = e;
|
|
99
|
-
showInstallButton();
|
|
100
|
-
});
|
|
101
|
-
|
|
102
|
-
export function showInstallPrompt() {
|
|
103
|
-
if (deferredPrompt) {
|
|
104
|
-
deferredPrompt.prompt();
|
|
105
|
-
deferredPrompt.userChoice.then((choiceResult) => {
|
|
106
|
-
if (choiceResult.outcome === 'accepted') {
|
|
107
|
-
console.log('User accepted install');
|
|
108
|
-
}
|
|
109
|
-
deferredPrompt = null;
|
|
110
|
-
});
|
|
111
|
-
}
|
|
112
|
-
}
|
|
113
|
-
```
|
|
90
|
+
## 📲 Install Prompt
|
|
91
|
+
|
|
92
|
+
```typescript
|
|
93
|
+
// utils/installPrompt.ts
|
|
94
|
+
let deferredPrompt: BeforeInstallPromptEvent | null = null;
|
|
95
|
+
|
|
96
|
+
window.addEventListener('beforeinstallprompt', (e) => {
|
|
97
|
+
e.preventDefault();
|
|
98
|
+
deferredPrompt = e;
|
|
99
|
+
showInstallButton();
|
|
100
|
+
});
|
|
101
|
+
|
|
102
|
+
export function showInstallPrompt() {
|
|
103
|
+
if (deferredPrompt) {
|
|
104
|
+
deferredPrompt.prompt();
|
|
105
|
+
deferredPrompt.userChoice.then((choiceResult) => {
|
|
106
|
+
if (choiceResult.outcome === 'accepted') {
|
|
107
|
+
console.log('User accepted install');
|
|
108
|
+
}
|
|
109
|
+
deferredPrompt = null;
|
|
110
|
+
});
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
```
|
|
114
114
|
---
|
|
115
|
-
## 🔗 Related Documents
|
|
116
|
-
|
|
117
|
-
- [Performance](performance.md) - PWA performance
|
|
118
|
-
- [Operations](operations.md) - PWA deployment
|
|
115
|
+
## 🔗 Related Documents
|
|
116
|
+
|
|
117
|
+
- [Performance](performance.md) - PWA performance
|
|
118
|
+
- [Operations](operations.md) - PWA deployment
|
|
119
119
|
---
|
|
120
|
-
**Last Updated:** {{GENERATION_DATE}}
|
|
121
|
-
|
|
122
|
-
**PWA Features:** {{PWA_FEATURES}}
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
120
|
+
**Last Updated:** {{GENERATION_DATE}}
|
|
121
|
+
|
|
122
|
+
**PWA Features:** {{PWA_FEATURES}}
|
|
123
|
+
|
|
124
|
+
|
|
125
|
+
|
|
@@ -1,101 +1,101 @@
|
|
|
1
|
-
# Accessibility Specification
|
|
2
|
-
|
|
3
|
-
> Accessibility requirements and WCAG compliance for {{PROJECT_NAME}}
|
|
1
|
+
# Accessibility Specification
|
|
2
|
+
|
|
3
|
+
> Accessibility requirements and WCAG compliance for {{PROJECT_NAME}}
|
|
4
4
|
---
|
|
5
|
-
## 🎯 Accessibility Target
|
|
6
|
-
|
|
7
|
-
**WCAG Level:** {{A11Y_COMPLIANCE}}
|
|
8
|
-
**Screen Reader Testing:** {{SCREEN_READER_TESTING}}
|
|
9
|
-
**Keyboard Navigation:** {{KEYBOARD_NAVIGATION}}
|
|
5
|
+
## 🎯 Accessibility Target
|
|
6
|
+
|
|
7
|
+
**WCAG Level:** {{A11Y_COMPLIANCE}}
|
|
8
|
+
**Screen Reader Testing:** {{SCREEN_READER_TESTING}}
|
|
9
|
+
**Keyboard Navigation:** {{KEYBOARD_NAVIGATION}}
|
|
10
10
|
---
|
|
11
|
-
## ♿ WCAG Compliance
|
|
12
|
-
|
|
13
|
-
### Level AA Requirements
|
|
14
|
-
|
|
15
|
-
- **Color Contrast:** 4.5:1 for normal text, 3:1 for large text
|
|
16
|
-
- **Keyboard Accessible:** All functionality available via keyboard
|
|
17
|
-
- **Focus Indicators:** Visible focus indicators
|
|
18
|
-
- **Alt Text:** Images have descriptive alt text
|
|
19
|
-
- **Semantic HTML:** Proper use of semantic elements
|
|
20
|
-
|
|
21
|
-
### Level AAA Requirements (if applicable)
|
|
22
|
-
|
|
23
|
-
- **Color Contrast:** 7:1 for normal text, 4.5:1 for large text
|
|
24
|
-
- **Sign Language:** Sign language interpretation for audio
|
|
25
|
-
- **Extended Audio Description:** Extended audio descriptions
|
|
11
|
+
## ♿ WCAG Compliance
|
|
12
|
+
|
|
13
|
+
### Level AA Requirements
|
|
14
|
+
|
|
15
|
+
- **Color Contrast:** 4.5:1 for normal text, 3:1 for large text
|
|
16
|
+
- **Keyboard Accessible:** All functionality available via keyboard
|
|
17
|
+
- **Focus Indicators:** Visible focus indicators
|
|
18
|
+
- **Alt Text:** Images have descriptive alt text
|
|
19
|
+
- **Semantic HTML:** Proper use of semantic elements
|
|
20
|
+
|
|
21
|
+
### Level AAA Requirements (if applicable)
|
|
22
|
+
|
|
23
|
+
- **Color Contrast:** 7:1 for normal text, 4.5:1 for large text
|
|
24
|
+
- **Sign Language:** Sign language interpretation for audio
|
|
25
|
+
- **Extended Audio Description:** Extended audio descriptions
|
|
26
26
|
---
|
|
27
|
-
## ⌨️ Keyboard Navigation
|
|
28
|
-
|
|
29
|
-
### Focus Management
|
|
30
|
-
|
|
31
|
-
```typescript
|
|
32
|
-
// Focus trap in modals
|
|
33
|
-
function trapFocus(element: HTMLElement) {
|
|
34
|
-
const focusableElements = element.querySelectorAll(
|
|
35
|
-
'a[href], button, textarea, input, select, [tabindex]:not([tabindex="-1"])'
|
|
36
|
-
);
|
|
37
|
-
|
|
38
|
-
const firstElement = focusableElements[0] as HTMLElement;
|
|
39
|
-
const lastElement = focusableElements[focusableElements.length - 1] as HTMLElement;
|
|
40
|
-
|
|
41
|
-
element.addEventListener('keydown', (e) => {
|
|
42
|
-
if (e.key === 'Tab') {
|
|
43
|
-
if (e.shiftKey && document.activeElement === firstElement) {
|
|
44
|
-
e.preventDefault();
|
|
45
|
-
lastElement.focus();
|
|
46
|
-
} else if (!e.shiftKey && document.activeElement === lastElement) {
|
|
47
|
-
e.preventDefault();
|
|
48
|
-
firstElement.focus();
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
});
|
|
52
|
-
}
|
|
53
|
-
```
|
|
54
|
-
|
|
55
|
-
### Skip Links
|
|
56
|
-
|
|
57
|
-
```html
|
|
58
|
-
<a href="#main-content" class="skip-link">Skip to main content</a>
|
|
59
|
-
```
|
|
27
|
+
## ⌨️ Keyboard Navigation
|
|
28
|
+
|
|
29
|
+
### Focus Management
|
|
30
|
+
|
|
31
|
+
```typescript
|
|
32
|
+
// Focus trap in modals
|
|
33
|
+
function trapFocus(element: HTMLElement) {
|
|
34
|
+
const focusableElements = element.querySelectorAll(
|
|
35
|
+
'a[href], button, textarea, input, select, [tabindex]:not([tabindex="-1"])'
|
|
36
|
+
);
|
|
37
|
+
|
|
38
|
+
const firstElement = focusableElements[0] as HTMLElement;
|
|
39
|
+
const lastElement = focusableElements[focusableElements.length - 1] as HTMLElement;
|
|
40
|
+
|
|
41
|
+
element.addEventListener('keydown', (e) => {
|
|
42
|
+
if (e.key === 'Tab') {
|
|
43
|
+
if (e.shiftKey && document.activeElement === firstElement) {
|
|
44
|
+
e.preventDefault();
|
|
45
|
+
lastElement.focus();
|
|
46
|
+
} else if (!e.shiftKey && document.activeElement === lastElement) {
|
|
47
|
+
e.preventDefault();
|
|
48
|
+
firstElement.focus();
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
});
|
|
52
|
+
}
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
### Skip Links
|
|
56
|
+
|
|
57
|
+
```html
|
|
58
|
+
<a href="#main-content" class="skip-link">Skip to main content</a>
|
|
59
|
+
```
|
|
60
60
|
---
|
|
61
|
-
## 🗣️ Screen Reader Support
|
|
62
|
-
|
|
63
|
-
### ARIA Labels
|
|
64
|
-
|
|
65
|
-
```typescript
|
|
66
|
-
// Descriptive labels
|
|
67
|
-
<button aria-label="Close dialog">×</button>
|
|
68
|
-
|
|
69
|
-
// Live regions
|
|
70
|
-
<div aria-live="polite" aria-atomic="true">
|
|
71
|
-
{notification}
|
|
72
|
-
</div>
|
|
73
|
-
```
|
|
74
|
-
|
|
75
|
-
### Semantic HTML
|
|
76
|
-
|
|
77
|
-
```html
|
|
78
|
-
<!-- ✅ Good -->
|
|
79
|
-
<nav>
|
|
80
|
-
<ul>
|
|
81
|
-
<li><a href="/">Home</a></li>
|
|
82
|
-
</ul>
|
|
83
|
-
</nav>
|
|
84
|
-
|
|
85
|
-
<!-- ❌ Bad -->
|
|
86
|
-
<div>
|
|
87
|
-
<div><span>Home</span></div>
|
|
88
|
-
</div>
|
|
89
|
-
```
|
|
61
|
+
## 🗣️ Screen Reader Support
|
|
62
|
+
|
|
63
|
+
### ARIA Labels
|
|
64
|
+
|
|
65
|
+
```typescript
|
|
66
|
+
// Descriptive labels
|
|
67
|
+
<button aria-label="Close dialog">×</button>
|
|
68
|
+
|
|
69
|
+
// Live regions
|
|
70
|
+
<div aria-live="polite" aria-atomic="true">
|
|
71
|
+
{notification}
|
|
72
|
+
</div>
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
### Semantic HTML
|
|
76
|
+
|
|
77
|
+
```html
|
|
78
|
+
<!-- ✅ Good -->
|
|
79
|
+
<nav>
|
|
80
|
+
<ul>
|
|
81
|
+
<li><a href="/">Home</a></li>
|
|
82
|
+
</ul>
|
|
83
|
+
</nav>
|
|
84
|
+
|
|
85
|
+
<!-- ❌ Bad -->
|
|
86
|
+
<div>
|
|
87
|
+
<div><span>Home</span></div>
|
|
88
|
+
</div>
|
|
89
|
+
```
|
|
90
90
|
---
|
|
91
|
-
## 🔗 Related Documents
|
|
92
|
-
|
|
93
|
-
- [Styling](../docs/styling.md) - Accessibility in styling
|
|
94
|
-
- [Components](../docs/components.md) - Accessible components
|
|
91
|
+
## 🔗 Related Documents
|
|
92
|
+
|
|
93
|
+
- [Styling](../docs/styling.md) - Accessibility in styling
|
|
94
|
+
- [Components](../docs/components.md) - Accessible components
|
|
95
95
|
---
|
|
96
|
-
**Last Updated:** {{GENERATION_DATE}}
|
|
97
|
-
|
|
98
|
-
**WCAG Level:** {{A11Y_COMPLIANCE}}
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
96
|
+
**Last Updated:** {{GENERATION_DATE}}
|
|
97
|
+
|
|
98
|
+
**WCAG Level:** {{A11Y_COMPLIANCE}}
|
|
99
|
+
|
|
100
|
+
|
|
101
|
+
|