BAC-003 · Delivery-date picker traps keyboard focus
- Criterion
- SC 2.1.2 No Keyboard Trap (A)
- Where
- Checkout › Delivery › Date picker
- Who is affected
- Keyboard users, switch users, and screen reader users
What we observed. Using a keyboard alone in Chrome and Firefox on Windows, pressing Enter on Choose a delivery date opens the calendar and moves focus to the first available day. From there, Tab, Shift+Tab, and Escape all leave focus inside the grid. There is no close button, and the arrow keys cycle through dates indefinitely. The only way out is a mouse click outside the calendar, so a keyboard user can't reach the payment step. NVDA also announces each day as "button" with no date; that is logged separately as BAC-004.
Fix. Stop swallowing every keypress. Arrow keys should move between days, Tab should reach the dialog's Cancel and Choose date buttons, and Escape should close the calendar and return focus to the trigger. The ARIA Authoring Practices date picker dialog describes the full keyboard model. If the calendar is a native <dialog> opened with showModal(), the browser handles Escape for you.
// Before: every key is blocked, so nothing can leave the grid
grid.addEventListener("keydown", (e) => {
e.preventDefault();
moveFocus(e.key);
});
// After: arrows move between days, Tab works normally,
// and Escape closes the dialog and returns focus to the trigger
grid.addEventListener("keydown", (e) => {
if (e.key === "Escape") {
closeDialog();
trigger.focus();
} else if (e.key.startsWith("Arrow")) {
e.preventDefault();
moveFocus(e.key);
}
});