DEV Community
Follow
Add Arrow-Key Shortcuts to a Confirmation Dialog Without Breaking Accessibility
This text discusses adding keyboard shortcuts to a confirmation dialog, specifically for arrow key navigation between Cancel and Confirm buttons. It emphasizes that this is an enhancement and not a replacement for foundational accessibility features. Essential accessibility requirements for alert-style confirmations are listed, including accessible names, focus management, keyboard constraints, escape dismissal, visible focus, and focus return. The WAI-ARIA Authoring Practices Alert Dialog Pattern is cited as the basis for modal semantics and keyboard interaction.The proposed solution isolates the new arrow key mapping into a pure function and an event handler that only intercepts specific arrow key presses, leaving other keyboard interactions like Tab, Shift+Tab, and Escape untouched. A minimal dialog example using native HTML semantics is provided, demonstrating focus on Cancel by default. The text then outlines a testing procedure, including running pure mapping tests and manually testing the dialog with a keyboard and screen reader. The core design principle is to add shortcuts as an enhancement around semantic controls while ensuring that unhandled keys continue to function as expected. The author notes their contribution to the MonkeyCode project and discloses that the described behavior is based on public issues and code.