Sidebar component uses complementary role by default, since any attribute is passed to the root element aria role can be changed depending on your use case and additional attributes like aria-labelledby can be added. In addition aria-modal is added since focus is kept within the sidebar when opened.
Trigger element also requires aria-expanded and aria-controls to be handled explicitly.
Key | Function |
---|---|
tab | Moves focus to the next the focusable element within the sidebar. |
shift + tab | Moves focus to the previous the focusable element within the sidebar. |
escape | Closes the dialog. |
Key | Function |
---|---|
enter | Closes the sidebar. |
space | Closes the sidebar. |