Accessibility improvements: skip link, focus trap, ARIA live regions, and labeling

[Mosas2000]

Summary

The application has several accessibility deficiencies that impact keyboard-only users, screen reader users, and users with assistive technologies. These issues should be addressed to meet WCAG 2.1 AA compliance.

Issues

1. No Skip-to-Content Link

• The page has no mechanism for keyboard users to skip past the header and navigation directly to the main content
• Users must tab through the entire header, theme toggle, notification bell, and all five navigation tabs before reaching page content

2. ConfirmDialog Does Not Trap Focus

• When the confirm dialog modal opens (src/components/ui/confirm-dialog.jsx), focus is set to the container but is not trapped within the dialog
• Users can Tab out of the modal into the background content, which is visually obscured by the backdrop
• Focus should cycle between the dialog's interactive elements while the modal is open

3. Missing ARIA Live Regions

• Dynamic content updates (new tips in the live feed, notification count changes, toast messages) are not announced to screen readers
• Toast container should use aria-live="polite" or role="alert"
• The notification badge count should use aria-live="polite" to announce new notifications

4. Incomplete ARIA Labeling

• The theme toggle button in the header lacks an accessible label describing its current state
• Filter and sort controls in RecentTips and TipHistory lack associated labels
• The notification bell button does not convey its purpose or unread count to assistive technology

5. Color Contrast in Status Indicators

• The API health indicator dot in the header relies solely on color (green/red) to convey status
• No text alternative or pattern differentiation is provided for colorblind users

Expected Behavior

• A visually hidden skip link should be the first focusable element on the page
• Modal dialogs should implement a focus trap that cycles within the dialog
• Dynamic content regions should be properly annotated with ARIA live attributes
• All interactive controls should have descriptive accessible names
• Status information should not rely solely on color

Relevant Files

• frontend/src/App.jsx - main layout, navigation
• frontend/src/components/Header.jsx - header with health indicator, theme toggle
• frontend/src/components/ui/confirm-dialog.jsx - modal dialog
• frontend/src/components/ui/toast.jsx - toast notifications
• frontend/src/components/NotificationBell.jsx - notification dropdown