What component has

Keyboard support

Keyboard support

Key	Function
Tab	Moves focus to the next focusable element.
Shift + Tab	Moves focus to the previous focusable element.
Esc	Closes the panel.

See detailed information about the keyboard support for clickable elements in the Keyboard control guide.

Default attributes

Default attributes

Component	Attribute	Usage
SidePanel	role="dialog"	Identifies the element as a dialog, indicating to assistive technology that its content is grouped and separated from the rest of the page content.
SidePanel	aria-modal="true"	Tells assistive technologies that the content underneath the current dialog is not available for interaction.
SidePanel.Close	aria-label="Close"	Sets the default accessible name for the Close button.

Considerations for developers and designers

• It's required to set either the aria-label or the aria-labelledby attribute for the SidePanel component. If your SidePanel has a visible title, it's best to reference it in the aria-labelledby attribute.
• Make sure to use correct heading tags and hierarchy for titles in SidePanel.

Resources

W3 modal dialog example has detailed information about the modal dialogs accessible behavior.

Other recommendations

Find more accessibility recommendations in the common Accessibility guide.