Skip to content

feat(a11y): add accessibility improvements to layout and key pages#66

Open
nymulinfoinlet wants to merge 1 commit intomainfrom
feat/accessibility
Open

feat(a11y): add accessibility improvements to layout and key pages#66
nymulinfoinlet wants to merge 1 commit intomainfrom
feat/accessibility

Conversation

@nymulinfoinlet
Copy link
Copy Markdown
Contributor

Summary

  • Added "Skip to main content" link as first focusable element in DashboardLayout
  • Added ARIA attributes: aria-current="page" on active nav, aria-label on icon-only buttons (sidebar close, menu toggle, user menu), aria-expanded/aria-haspopup on dropdowns, role="menu"/role="menuitem" on user dropdown
  • Added role="alert" on error messages (QuizPage), aria-live="polite" on loading/streaming areas (QuizPage generating screen, ReviewQueuePage loading/explanation)
  • Added aria-hidden="true" on decorative Lucide icons throughout layout, dashboard, quiz, and review pages
  • Added global *:focus-visible outline style (2px solid #2563eb) for keyboard navigation visibility
  • Added semantic role="banner" on header, role="main" with id="main-content" on content area

Resolves #54

Test plan

  • Tab through the dashboard layout and verify all interactive elements receive visible focus outlines
  • Verify "Skip to main content" link appears on focus and jumps to main content area
  • Verify screen reader announces active navigation item via aria-current
  • Verify error messages in QuizPage are announced by screen reader (role=alert)
  • Verify user dropdown menu can be dismissed with Escape key
  • Verify decorative icons are hidden from screen readers (aria-hidden)
  • Run axe or Lighthouse accessibility audit and confirm score improvement

🤖 Generated with Claude Code

Add skip-to-content link, ARIA labels on navigation and icon buttons,
aria-current on active nav items, role=alert on error messages, aria-live
on loading/streaming areas, focus-visible global outline, semantic HTML
roles on header/main/sidebar. Covers DashboardLayout, DashboardHomePage,
QuizPage, and ReviewQueuePage. Resolves #54.

Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat(accessibility): WCAG 2.1 AA compliance for all dashboard pages

1 participant