feat(a11y): Implement keyboard shortcuts and accessibility (Task 13)

- Create AccessibilityContext for global focus management and expanded state
- Add roving tabindex to sidebar with Up/Down/Enter/Home/End navigation
- Focus management: after login, after view change, after item expansion
- Global Escape closes expanded items across all views
- Add scope='col' to SummaryView table headers
- Add focus-after-expand to ConsultationsView
- Update ARIA roles: role='menu', role='menuitem', aria-current
This commit is contained in:
2026-02-11 02:49:51 +00:00
parent fc3c0659b2
commit f7f7e0db8c
9 changed files with 258 additions and 40 deletions
+11 -3
View File
@@ -1,5 +1,6 @@
import { useState, useEffect, useCallback } from 'react'
import { Shield } from 'lucide-react'
import { useAccessibility } from '../contexts/AccessibilityContext'
interface LoginScreenProps {
onComplete: () => void
@@ -12,6 +13,7 @@ export function LoginScreen({ onComplete }: LoginScreenProps) {
const [isTypingUsername, setIsTypingUsername] = useState(true)
const [isTypingPassword, setIsTypingPassword] = useState(false)
const [buttonPressed, setButtonPressed] = useState(false)
const { requestFocusAfterLogin } = useAccessibility()
const fullUsername = 'A.CHARLWOOD'
const passwordLength = 8
@@ -26,7 +28,10 @@ export function LoginScreen({ onComplete }: LoginScreenProps) {
setPasswordDots(passwordLength)
setTimeout(() => {
setButtonPressed(true)
setTimeout(onComplete, 200)
setTimeout(() => {
requestFocusAfterLogin()
onComplete()
}, 200)
}, 300)
return
}
@@ -55,14 +60,17 @@ export function LoginScreen({ onComplete }: LoginScreenProps) {
setTimeout(() => {
setButtonPressed(true)
setTimeout(onComplete, 200)
setTimeout(() => {
requestFocusAfterLogin()
onComplete()
}, 200)
}, 150)
}
}, 20)
}, 150)
}
}, 30)
}, [onComplete, prefersReducedMotion])
}, [onComplete, prefersReducedMotion, requestFocusAfterLogin])
useEffect(() => {
const cursorInterval = setInterval(() => {