Drawer 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 drawer 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 drawer. |
| shift + tab | Moves focus to the previous the focusable element within the drawer. |
| escape | Closes the dialog. |
| Key | Function |
|---|---|
| enter | Closes the drawer. |
| space | Closes the drawer. |