Add ARIA attributes to dropdown components

[Mosas2000]

Overview

This PR adds comprehensive accessibility improvements to dropdown components, addressing issue #162 and ensuring WCAG 2.1 Level A compliance.

Changes

Components Updated

LanguageSwitcher

• Added aria-haspopup, aria-expanded, aria-controls attributes
• Added role and aria-selected to options
• Implemented keyboard navigation (Escape key)
• Added focus management

NetworkSelector

• Added aria-haspopup, aria-expanded, aria-controls attributes
• Added role and aria-selected to options
• Implemented keyboard navigation (Escape key)
• Added focus management

MarketFilter

• Added ARIA attributes to category dropdown
• Added ARIA attributes to sort dropdown
• Implemented keyboard navigation

New Features

Reusable Hook

• Created useAccessibleDropdown hook for easy implementation
• Handles all ARIA attributes automatically
• Manages keyboard navigation and focus

Utility Functions

• Screen reader announcements
• Focus management utilities
• ARIA validation helpers
• Keyboard navigation utilities

Components

• AccessibilityAnnouncer for live regions
• SkipToMain for keyboard navigation
• Example accessible dropdown component

Hooks

• useAccessibleDropdown - Complete dropdown accessibility
• useKeyboardNavigation - Keyboard event handling
• useFocusTrap - Focus trapping for modals

Testing

• Comprehensive accessibility tests for all components
• Tests for useAccessibleDropdown hook
• Tests for accessibility utilities

Documentation

• Complete accessibility guide
• Migration guide for existing dropdowns
• Accessibility checklist
• Implementation overview
• Code examples

Styling

• Focus indicators for keyboard navigation
• High contrast mode support
• Reduced motion support
• Screen reader utilities

WCAG Compliance

This implementation meets the following WCAG 2.1 criteria:

✅ 4.1.2 Name, Role, Value (Level A)

• All dropdowns have proper roles and ARIA attributes
• States are programmatically determinable

✅ 2.1.1 Keyboard (Level A)

• All dropdowns operable via keyboard
• Escape key closes dropdowns
• Focus management implemented

✅ 2.4.3 Focus Order (Level A)

• Logical focus order maintained
• Focus returns to trigger after selection

✅ 2.4.7 Focus Visible (Level AA)

• Clear focus indicators provided

Benefits

• Screen reader users can now use all dropdowns
• Keyboard-only users have full access
• Reusable hook reduces code duplication
• Comprehensive test coverage
• Clear documentation for future development

Testing

Manual Testing

• Tested with keyboard navigation
• Tested with NVDA screen reader
• Tested click outside behavior
• Verified focus management

Automated Testing

All tests passing:

• LanguageSwitcher accessibility tests
• NetworkSelector accessibility tests
• useAccessibleDropdown hook tests
• Accessibility utility tests

Files Changed

Components (3 updated, 3 new)

• frontend/src/components/LanguageSwitcher.tsx
• frontend/src/components/NetworkSelector.tsx
• frontend/src/components/MarketFilter.tsx
• frontend/src/components/AccessibilityAnnouncer.tsx (new)
• frontend/src/components/SkipToMain.tsx (new)
• frontend/src/components/examples/AccessibleDropdownExample.tsx (new)

Hooks (3 new)

• frontend/src/hooks/useAccessibleDropdown.ts (new)
• frontend/src/hooks/useKeyboardNavigation.ts (new)
• frontend/src/hooks/useFocusTrap.ts (new)

Utilities (3 new)

• frontend/src/utils/accessibility.ts (new)
• frontend/src/types/accessibility.ts (new)
• frontend/src/constants/accessibility.ts (new)

Tests (4 new)

• frontend/src/components/tests/LanguageSwitcher.accessibility.test.tsx (new)
• frontend/src/components/tests/NetworkSelector.accessibility.test.tsx (new)
• frontend/src/hooks/tests/useAccessibleDropdown.test.ts (new)
• frontend/src/utils/tests/accessibility.test.ts (new)

Documentation (5 new)

• frontend/docs/DROPDOWN_ACCESSIBILITY.md (new)
• frontend/docs/DROPDOWN_MIGRATION_GUIDE.md (new)
• frontend/docs/ACCESSIBILITY_CHECKLIST.md (new)
• frontend/src/accessibility/README.md (new)
• DROPDOWN_ACCESSIBILITY_SUMMARY.md (new)

Styles (1 new)

• frontend/src/styles/accessibility.css (new)

Migration Path

Existing dropdowns can be easily migrated using the new hook:

// Before
const [isOpen, setIsOpen] = useState(false);

// After
const { isOpen, buttonProps, listboxProps, optionProps } = useAccessibleDropdown('my-dropdown');

See DROPDOWN_MIGRATION_GUIDE.md for detailed instructions.

Closes #162