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
+18 -15
View File
@@ -4,26 +4,29 @@ import { BootSequence } from './components/BootSequence'
import { ECGAnimation } from './components/ECGAnimation'
import { LoginScreen } from './components/LoginScreen'
import { PMRInterface } from './components/PMRInterface'
import { AccessibilityProvider } from './contexts/AccessibilityContext'
function App() {
const [phase, setPhase] = useState<Phase>('boot')
return (
<div className="min-h-screen">
{phase === 'boot' && (
<BootSequence onComplete={() => setPhase('ecg')} />
)}
{phase === 'ecg' && (
<ECGAnimation onComplete={() => setPhase('login')} />
)}
{phase === 'login' && (
<LoginScreen onComplete={() => setPhase('pmr')} />
)}
{phase === 'pmr' && <PMRInterface />}
</div>
<AccessibilityProvider>
<div className="min-h-screen">
{phase === 'boot' && (
<BootSequence onComplete={() => setPhase('ecg')} />
)}
{phase === 'ecg' && (
<ECGAnimation onComplete={() => setPhase('login')} />
)}
{phase === 'login' && (
<LoginScreen onComplete={() => setPhase('pmr')} />
)}
{phase === 'pmr' && <PMRInterface />}
</div>
</AccessibilityProvider>
)
}