Date pickers, comboboxes, menus and popovers all open a panel on top of the page. The moment that panel opens, the keyboard has a question to answer: where does the focus go now, where may it go next, and where does it land when the panel closes? Get it wrong and a keyboard user walks out of an open calendar into the page behind it, or a screen reader user is sent back to the top of the document after picking a date.

This guide covers how to answer those questions in a way that works for keyboard users, screen reader users and everyone using a mouse or a finger. The examples are plain JavaScript, so they apply to any framework.