MetaMask / MetaMask/metamask-design-system

fix: failing accessibility tests

Open
#782 0 comments 0 reactions 0 assignees View on GitHub
team-design-system
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.