Two accessible expand/collapse widgets. Each widget is wrapped in a container with class "example" and the controlled content container uses class "details". Use keyboard: Tab to the button, then Space or Enter to toggle. Press Escape while focus is inside the panel to close it.
Basic expandable panel
This simple panel uses a button with aria-expanded and aria-controls. The pane has class "details".
Accessible by design. This region is controlled by the button above. When collapsed, assistive technologies will be told the region is hidden. Focusable elements inside are made unfocusable while collapsed to prevent keyboard users from tabbing into hidden content.
Try navigating with Tab, and use Enter/Space on the button to open and close. When the panel is open and focus moves inside, press Escape to close and return focus to the toggle button.
This example demonstrates restoring focusability of interactive elements inside the details region when it opens.
Form controls inside this panel are disabled for keyboard access while the panel is closed, and restored when opened. That prevents users tabbing to hidden content.
While collapsed, the form controls are not reachable with Tab. They become focusable again when you open the panel.