MetaMask / MetaMask/metamask-design-system
fix: failing accessibility tests
- Dominant language
- TypeScript
- Stars
- 37
- Forks
- 14
- Avg merge
- 1d 9h
- Merged PRs (30d)
- 60
Description
### **Description**
Fix accessibility violations that are now being detected by the new accessibility testing infrastructure introduced in the Storybook v9 upgrade. The PR #761 enabled automatic accessibility testing with `a11y: { test: 'error' }` configuration, which now fails tests when accessibility violations are found. This issue aims to identify and resolve all accessibility violations across the design system components to ensure full compliance with accessibility standards.
https://github.com/user-attachments/assets/3f11a053-a758-4f5b-a234-461ab60a5576
### **Technical Details**
- The Storybook v9 upgrade introduced enhanced accessibility testing with `@storybook/addon-a11y`
- Tests are configured to fail when accessibility violations are detected (`test: 'error'`)
- Need to audit all components in the design system for accessibility compliance
- Focus on common accessibility issues like:
- Missing alt text on images
- Insufficient color contrast ratios
- Missing ARIA labels and descriptions
- Improper heading hierarchy
- Missing keyboard navigation support
- Form elements without proper labels
- Update component implementations to meet WCAG 2.1 AA standards
- Ensure all interactive elements are keyboard accessible
- Verify proper semantic HTML structure
### **Acceptance Criteria**
- [ ] All Storybook accessibility tests pass without errors
- [ ] Components meet WCAG 2.1 AA accessibility standards
- [ ] Color contrast ratios meet minimum requirements (4.5:1 for normal text, 3:1 for large text)
- [ ] All interactive elements are keyboard accessible
- [ ] All images have appropriate alt text or are marked as decorative
- [ ] Form elements have proper labels and descriptions
- [ ] ARIA attributes are used correctly where needed
- [ ] Semantic HTML structure is maintained
- [ ] Screen reader compatibility is verified
- [ ] Documentation is updated to include accessibility best practices for component usage
### **References**
- [Storybook v9 upgrade PR #761](https://github.com/MetaMask/metamask-design-system/pull/761)
- [Accessibility testing documentation](https://github.com/MetaMask/metamask-design-system/blob/main/docs/accessibility-testing.md)
- [Storybook accessibility addon documentation](https://storybook.js.org/docs/writing-tests/accessibility-testing)
- [WCAG 2.1 AA Guidelines](https://www.w3.org/WAI/WCAG21/quickref/?versions=2.1&levels=aa)
- [Storybook vitest integration docs](https://storybook.js.org/docs/writing-tests/integrations/vitest-addon)
Contributor guide
Research direction
Start by running the Storybook accessibility tests configured with `a11y: { test: 'error' }`, then inspect the reported violations across the design system components. Read `docs/accessibility-testing.md` and the Storybook v9 upgrade context in PR #761. Done means the accessibility tests pass, the listed WCAG 2.1 AA requirements are met, and the accessibility guidance is documented.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- storybook, typescript
- Domain
- accessibility, documentation, frontend, testing
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 30/100