The DOM API relies on
data-* attributes. They all live under the
data-a11y-dialog-* namespace for consistency, clarity and robustness. Two attributes are recognised:
idof the dialog element is expected as a value
idof the dialog element is expected as a value; if omitted, the closest parent dialog element (if any) will be the target
The following button will open the dialog with the
your-dialog-id id when interacted with.
The following button will close the dialog in which it lives when interacted with.
The following button will close the dialog with the
your-dialog-id id when interacted with. Given that the only focusable elements when the dialog is open are the focusable children of the dialog itself, it seems rather unlikely that you will ever need this but in case you do, well you can.
Regarding the JS API, it simply consists on
hide() methods on the dialog instance.
For advanced usages, there are
destroy() methods. These are responsible for attaching click event listeners to dialog openers and closers. Note that the
create() method is automatically called on instantiation so there is no need to call it again directly.
If necessary, the
create() method also accepts the
targets containers (the one toggled along with the dialog element) in the same form as the second argument from the constructor. If omitted, the one given to the constructor (or default) will be used.