v1.4.1 — Keyboard Accessibility, Read-only Mode & Selection Animations

What's New

Keyboard Accessibility (WCAG)

• ARIA listbox/option roles on the tooth grid and tiles
• aria-selected synced with selection state, aria-multiselectable on grid
• Enter/Space to toggle tooth selection
• Arrow keys to navigate between teeth (Left/Right within row, Up/Down between arches)
• Escape to clear selection
• :focus-visible outline styles in both light and dark mode
• Hidden wisdom teeth are properly removed from tab order (tabindex="-1", aria-hidden)

Read-only Mode

• New readOnly prop on the App component
• New setReadOnly(value) / getReadOnly() API functions
• Disables all click, touch, and keyboard interactions
• Control panel dimmed with opacity: 0.5 and pointer-events: none
• All tiles removed from tab order
• Ideal for print views, reports, and view-only displays

Selection Animations

• Pulsing dashed border via ::after pseudo-element around selected teeth
• Glowing drop-shadow effect on selected tooth SVGs
• Smooth .25s ease transitions for selection/deselection
• Full dark mode support with dedicated keyframes
• prefers-reduced-motion: reduce — static fallback for motion-sensitive users

New i18n Keys

• readOnly.label added to all 8 languages (HU/EN/DE/ES/IT/SK/PL/RU)

Testing

• 7 new tests in a11y.test.ts — 161 total tests across 9 files
• All tests passing

Full Changelog: v1.4.0...v1.4.1