Disclosure components.
WHAT THEY MUST DO
Indicate their expanded state Open and close by keyboard Allow arrow key navigation between items Close on escape, returning focus to the trigger Announce their nature and state
WHAT DISTINGUISHES A MENU FROM A LIST OF LINKS
A menu contains actions and has specific keyboard expectations.
WHY THAT MATTERS
Marking navigation as a menu creates expectations the implementation must meet.
WHAT TO USE FOR SIMPLE SELECTION
The native select element.
WHY
It is accessible, works on every device, and provides the native mobile picker.
WHEN A CUSTOM ONE IS WARRANTED
Searching within many options Selecting several Rich content within options
WHAT TO USE THEN
An established accessible library.
WHAT TO BE CAREFUL WITH
Opening on hover, which excludes touch Closing when focus moves within the component Options extending beyond the screen
WHAT TO TEST
Operating it entirely by keyboard, and on a touch device.
WHAT TO PROVIDE
A visible focus indicator on the active option.
