Dialog component uses dialog role along with aria-labelledby referring to the header element however any attribute is passed to the root element so you may use aria-labelledby to override this default behavior. In addition aria-modal is added since focus is kept within the popup.
Trigger element also requires aria-expanded and aria-controls to be handled explicitly.
Close element is a button with an aria-label that refers to the aria.close property of the
| Key | Function |
|---|---|
| tab | Moves focus to the next the focusable element within the dialog if modal is true. Otherwise, the focusable element in the page tab sequence. |
| shift + tab | Moves focus to the previous the focusable element within the dialog if modal is true. Otherwise, the focusable element in the page tab sequence. |
| escape | Closes the dialog if closeOnEscape is true. |
| Key | Function |
|---|---|
| enter | Closes the dialog. |
| space | Closes the dialog. |