elias/everything-claude-code
1
0
Fork 0
mirror of https://github.com/affaan-m/everything-claude-code.git synced 2026-04-13 20:28:36 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: correct accessibility terminology and code fence in a11y skill and agent

Browse Source 
- Fix inverted focus trap terms: Keyboard Traps -> Uncontained Modal Focus with WCAG SC 2.1.2 reference
- Fix Step 1 blocker example: missing keyboard traps -> missing focus containment in modals
- Attach [language] placeholder to opening triple-backtick fence in agent implementation template
This commit is contained in:
Balaji Guntur 2026-04-11 20:30:47 -07:00
parent 33673fb37a
commit 51abaf0fc0
No known key found for this signature in database
GPG Key ID: 53CDC4CC895DBD5C
2 changed files with 9 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
agents/a11y-architect.md
View File

@ -20,7 +20,7 @@ You are a Senior Accessibility Architect. Your goal is to ensure that every digi
- Determine if the target is **Web**, **iOS**, or **Android**.
- Analyze the user interaction (e.g., Is this a simple button or a complex data grid?).
- Identify potential accessibility "blockers" (e.g., color-only indicators, missing keyboard traps).
- Identify potential accessibility "blockers" (e.g., color-only indicators, missing focus containment in modals).
### Step 2: Strategic Implementation
@ -101,7 +101,7 @@ For every component or page request, provide:
For major UI decisions, use this format:
```markdown
````markdown
# ADR-ACC-[000]: [Title of the Accessibility Decision]
## Status
@ -125,14 +125,15 @@ _Detail the specific implementation choice._
### Code/Spec
[language]
```[language]
// Example: SwiftUI
Button(action: close) {
Image(systemName: "xmark")
.frame(width: 44, height: 44) // Standardizing hit area
Image(systemName: "xmark")
.frame(width: 44, height: 44) // Standardizing hit area
}
.accessibilityLabel("Close modal")
```
````
## Reference

5
skills/accessibility/SKILL.md
View File

@ -117,14 +117,15 @@ Switch(
- **Div-Buttons**: Using a `<div>` or `<span>` for a click event without adding a role and keyboard support.
- **Color-Only Meaning**: Indicating an error or status _only_ with a color change (e.g., turning a border red).
- **Infinite Tab Loops**: Modals that don't trap focus, allowing users to "escape" into the background content while the modal is open.
- **Uncontained Modal Focus**: Modals that don't trap focus, allowing keyboard users to navigate background content while the modal is open. Focus must be contained _and_ escapable via the `Escape` key or an explicit close button (WCAG SC 2.1.2).
- **Redundant Alt Text**: Using "Image of..." or "Picture of..." in alt text (screen readers already announce the role "Image").
## Best Practices Checklist
- [ ] Interactive elements meet the **24x24px** (Web) or **44x44pt** (Native) target size.
- [ ] Focus indicators are clearly visible and high-contrast.
- [ ] No "Keyboard Traps" exist in complex components (modals, dropdowns).
- [ ] Modals **contain focus** while open, and release it cleanly on close (`Escape` key or close button).
- [ ] Dropdowns and menus restore focus to the trigger element on close.
- [ ] Forms provide text-based error suggestions.
- [ ] All icon-only buttons have a descriptive text label.
- [ ] Content reflows properly when text is scaled.