From 21b1d815d316b8a5e2b78c6b4d796c26e61306af Mon Sep 17 00:00:00 2001 From: Daniel Bedeleanu Date: Fri, 17 Apr 2026 13:01:25 +0300 Subject: [PATCH] docs(a11y): add accessibility testing guide and reduced motion support - Phase 3 Add comprehensive accessibility testing documentation: - Keyboard navigation testing flows (5 detailed test scenarios) - Screen reader testing guide (VoiceOver, Narrator) - Color contrast testing procedures - Mobile accessibility requirements - Touch target size validation - Tool recommendations (Axe, WAVE, Lighthouse) - Issue reporting template - WCAG 2.1 Level AA compliance tracking Accessibility improvements: - Add prefers-reduced-motion media query to globals.css - Disable animations/transitions for users with reduced motion preference - Respect animation timing preferences - Improve experience for motion-sensitive users This completes the 3-phase accessibility overhaul and establishes ongoing testing and compliance procedures. --- frontend/app/globals.css | 25 +++ frontend/docs/ACCESSIBILITY_TESTING.md | 273 +++++++++++++++++++++++++ 2 files changed, 298 insertions(+) create mode 100644 frontend/docs/ACCESSIBILITY_TESTING.md diff --git a/frontend/app/globals.css b/frontend/app/globals.css index c8b5b713..e71d1145 100644 --- a/frontend/app/globals.css +++ b/frontend/app/globals.css @@ -64,3 +64,28 @@ body { .pt-safe { padding-top: env(safe-area-inset-top); } + +/* Accessibility: Respect user's reduced motion preference */ +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } + + /* Disable keyframe animations */ + @keyframes scan { + 0%, 100% { top: 0%; } + 50% { top: 100%; } + } + + .animate-spin-slow { + animation: none !important; + } + + .animate-pulse { + animation: none !important; + } +} diff --git a/frontend/docs/ACCESSIBILITY_TESTING.md b/frontend/docs/ACCESSIBILITY_TESTING.md new file mode 100644 index 00000000..c15bc8a2 --- /dev/null +++ b/frontend/docs/ACCESSIBILITY_TESTING.md @@ -0,0 +1,273 @@ +# Accessibility Testing Guide + +## Keyboard Navigation Testing + +Test these flows without using the mouse. Use only Tab, Shift+Tab, Enter, Space, and Arrow keys. + +### Test Flow 1: Bottom Navigation +1. Load the application +2. Press Tab repeatedly to highlight each nav button +3. Verify focus ring is visible on each button (blue outline) +4. Press Enter to navigate to each section +5. Verify you can navigate back with Shift+Tab + +**Expected Result:** All 5 buttons (Home, Inventory, Logs, Admin, Logout) are reachable via Tab. Focus is always visible. + +### Test Flow 2: Scanner Component +1. Navigate to home page +2. Press Tab to reach zoom button (if available) +3. Press Tab to reach "Try Again" button +4. Verify focus states are clear +5. Press Enter on buttons to activate them + +**Expected Result:** All buttons show focus ring before activation. + +### Test Flow 3: Modal Dialogs +1. Trigger ItemComparisonModal or ConfirmationModal +2. Press Tab through all buttons +3. Verify focus doesn't trap (can escape with Tab/Escape) +4. Close modal with Escape key +5. Focus should return to trigger button + +**Expected Result:** Modals don't create keyboard traps. All buttons are tab-reachable. + +### Test Flow 4: Form Inputs +1. Navigate to AIOnboarding upload form +2. Press Tab through all form fields +3. Verify focus ring appears on all inputs +4. Type in each field to verify they're functional +5. Press Tab to next field + +**Expected Result:** All input fields are reachable and usable via keyboard. + +--- + +## Accessibility Audit Checklist + +### Level 1: Critical (Must Fix) +- [ ] All buttons have focus indicators (focus:ring-2) +- [ ] All clickable elements have cursor-pointer +- [ ] All form inputs have associated labels +- [ ] All images have descriptive alt text +- [ ] No keyboard traps (tab can always move forward/backward) +- [ ] Focus order follows visual order (left→right, top→bottom) + +### Level 2: Major (Should Fix) +- [ ] Icon-only buttons have aria-label +- [ ] Modal dialogs manage focus +- [ ] Error messages are associated with form fields +- [ ] Color is not the only indicator (text + color) +- [ ] Touch targets are 44×44px minimum +- [ ] Text contrast is 4.5:1 minimum (WCAG AA) + +### Level 3: Minor (Nice to Have) +- [ ] Skip links for keyboard users +- [ ] Landmark elements (
,