dwmkerr / dwmkerr/effective-shell

[A11Y] [Low] Missing ARIA attributes on custom components

Open
#413 0 comments 0 reactions 0 assignees View on GitHub
accessibility severity-low wcag-a
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 ? (

...

) : (
{alt
)}
...
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 ? (


This is the prompt used to generate this recording with{' '}
Shellwright.

{children}

) : (
{alt
)}


{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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.