dwmkerr / dwmkerr/effective-shell
[A11Y] [Low] Missing ARIA attributes on custom components
- Dominant language
- JavaScript
- Stars
- 780
- Forks
- 93
- Avg merge
- 1d 7h
- Merged PRs (30d)
- 3
Description
## Accessibility Issue: Missing ARIA attributes on custom components
**WCAG Level:** A
**Severity:** Low
**Category:** ARIA Usage
### Issue Description
Several custom React components could benefit from additional ARIA attributes to improve screen reader announcements and context for assistive technology users.
### User Impact
- **Affected Users:** Screen reader users, users with visual impairments
- **Severity:** Users may miss context about dynamic content changes
### Violations Found
#### File: `src/components/ShellwrightRecording/ShellwrightRecording.tsx`
**Lines:** 14-46
```tsx
{showPrompt ? (
...
) : (
)}
...
setShowPrompt(!showPrompt)}
>
{showPrompt ? 'Show recording' : 'Show prompt'}
```
**Issue:**
1. The container could use `aria-live="polite"` to announce content changes when toggling
2. The toggle button could use `aria-expanded` to indicate state
3. The button could use `aria-controls` to associate with the content area
---
### Recommended Fix
```tsx
const ShellwrightRecording: React.FC = ({
src,
alt,
children
}) => {
const [showPrompt, setShowPrompt] = useState(false);
const contentId = React.useId();
return (
{showPrompt ? (
) : (
)}
{children && (
<>
Generated with{' '}
Shellwright
setShowPrompt(!showPrompt)}
aria-expanded={showPrompt}
aria-controls={contentId}
>
{showPrompt ? 'Show recording' : 'Show prompt'}
)}
);
};
```
**Changes Made:**
1. Added `aria-live="polite"` to the content container
2. Added `aria-expanded` attribute to toggle button
3. Added `aria-controls` to associate button with content
4. Used `React.useId()` for unique ID generation
### Testing Instructions
1. Enable a screen reader (NVDA, VoiceOver, or JAWS)
2. Navigate to a ShellwrightRecording component
3. Focus the toggle button
4. Verify the screen reader announces the expanded/collapsed state
5. Activate the button and verify the content change is announced
### Resources
- [WCAG 4.1.2 Name, Role, Value](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html)
- [MDN: aria-expanded](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)
- [MDN: aria-live](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-live)
### Acceptance Criteria
- [ ] ARIA attributes added to ShellwrightRecording component
- [ ] Tested with screen reader
- [ ] Content changes are properly announced
- [ ] Manual testing completed
---
Contributor guide
Assessment
This issue has not been assessed yet.