web-accessibility

Use role="dialog" with aria-modal="true", aria-labelledby pointing to the title, and aria-describedby for the content. Trap focus inside the modal, move focus to it on open, close on ESC, and return focus to the trigger element on close.

Handle ArrowUp and ArrowDown to move through options, Enter or Space to select, and Escape to close and return focus to the trigger button. Use role="listbox" on the list and role="option" with aria-selected on items.

WCAG 2.1 Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Level AAA raises these to 7:1 and 4.5:1 respectively. Never convey information by color alone; pair it with icons or text.

Semantic HTML should come first: a native <button> provides keyboard focus, Enter/Space activation, and screen reader announcements for free. ARIA roles on divs require manually reimplementing all of that behavior, so use them only as a last resort.

Removing the focus outline leaves keyboard users with no visible indication of which element is focused, making the interface unusable without a mouse. Instead of outline: none, provide a custom focus style such as a colored outline with offset.

Use jest-axe with @testing-library/react: render the component, run axe(container), and assert expect(results).toHaveNoViolations(). Complement automated scans with manual keyboard-only testing and screen readers like NVDA or VoiceOver.