Accordion

Each accordion contains a header and an associated panel. Interacting with the header toggles between hiding and showing the associated panel.

When focused on a header, pressing Enter or Space will open the associated panel, and close the rest of them. Tab and Shift+Tab is used to navigate between the headers. If the panels contain focusable elements (i.e. form elements), they will properly enter and exit focus order.

On MacOs, press CMD + F5 to enable VoiceOver and try it for yourself.