Panel
Collapsible or persistent containers used to present supplementary information.
Creating access for everyone, everywhere requires attention to accessibility attributes, best practices, and requirements. Find accessibility guidance below.
Note: Components in each code library are implemented differently (especially Flutter). Many of the behaviors and attributes described are already handled for you as part of our components. Product teams are responsible for ensuring their apps meet all current requirements. Some of the information below may not apply to your implementation.
Best practices
Ensure the following best practices are met when implementing this component during development.
Note: Modal panels are implemented as dialogs whereas responsive ones are not. Modal panels have a backdrop scrim and the escape key closes them.
- Check your panel on different screen sizes to make sure it displays correctly.
- Ensure the content inside is responsive and wraps appropriately. Our components have default widths, but you may need to adjust these. If you make changes, check how the handles fit.
- Ensure modal panels have
. - Ensure all panels have
pointing to the ID of your panel title if present. - Ensure all panels have
pointing to the ID of your panel content if present.
Keyboard controls
| Key | Behavior |
|---|---|
| Enter or Space | Prompts the action associated with the focused interactive element. |
| Tab | Moves keyboard focus to the next focused interactive element. |
| Shift + Tab | Moves keyboard focus backwards to the previous interactive element in the panel. |
| Esc | Closes the panel. |