fix: failing accessibility tests #782
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.
storybookv9.accessibility.mov
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