Modals must be fully keyboard operable.
Expected behavior:
- Escape: Close modal
- Tab: Cycle through focusable elements
- Enter: Activate focused button
Implementation:
const handleKeyDown = (e) => {
if (e.key === 'Escape') {
closeModal();
}
if (e.key === 'Tab') {
handleFocusTrap(e);
}
};
Prevent background scroll: When modal is open, add overflow: hidden to body.
Don't close on Escape if modal has unsaved changes. Show confirmation instead.