5.0.0
The version 5.0.0 of a11y-dialog aims at leveraging the native <dialog>
element from HTML 5.2 when available. On user-agents which do not support <dialog>
, it will keep working as previously (a few variations to be found below).
This version involves quite a few breaking changes and expects a different initial DOM and styling base than version 4. Find below a list of changes and a migration guide.
Pull-request: #77.
General
- Bower is no longer supported. (77297a4)
- No longer suggest to maintain a local copy of the script. (a6850bf)
DOM
- The script now adds a
data-a11y-dialog-native
attribute (with no value) to the dialog container when the<dialog>
element and all its functionalities are natively supported. The following check is performed to see if it is natively supported: (439e1cc)
'show' in document.createElement('dialog')
- [BREAKING] The dialog container no longer expects
aria-hidden="true"
(implied by the<dialog>
element or handled by the script). (0a8052a)
- <div id="my-accessible-dialog" aria-hidden="true">
+ <div id="my-accessible-dialog">
- [BREAKING] The dialog element is now expected to be a
<dialog>
element and therefore no longer expects arole="dialog"
(implied by the<dialog>
element or ensured by the script). (de239a4)
- <div role="dialog" aria-labelledby="dialog-title">
+ <dialog aria-labelledby="dialog-title">
- The dialog element no longer expects a direct child with
role="document"
(implied by the<dialog>
element or optional otherwise). (00da776)
- <div role="document">
- [BREAKING] The list of focusable elements has been updated: (62f554c)
object
andembed
elements are no longer considered focusable.- A traditionally focusable element with a negative
tabindex
is no longer considered focusable. - A focusable element with an
inert
attribute is no longer considered focusable.
Styling
- [BREAKING] The mandatory base styles have been updated to accommodate for both supporting and non-supporting user-agents. Refer to documentation in the README for further details. (329ef80)
+ [data-a11y-dialog-native] > :first-child {
+ display: none;
+ }
+ dialog[open] {
+ display: block;
+ }
.dialog-container[aria-hidden='true'] {
display: none;
}
JavaScript
- [BREAKING] The initial
shown
property now properly reflects the status of the DOM instead of ensuring the dialog is closed. It means a dialog can theoretically be started open with theopen
attribute however I highly recommend not to do that. (1112ff5)
<!-- Highly discouraged yet possible -->
<dialog open>
- The undocumented
node
property previously holding the dialog container has been renamedcontainer
. (eb2c1e4)
const container = document.querySelector('#my-accessible-dialog');
const instance = new A11yDialog(container);
// instance.container === container
- The dialog element itself is now stored in an undocumented
dialog
property. (8348a79)
const container = document.querySelector('#my-accessible-dialog');
const instance = new A11yDialog(container);
// instance.dialog === container.querySelector('dialog')
Behaviour
-
[BREAKING] The app container(s) (likely the dialog container’s siblings) no longer have their
aria-hidden
attribute toggled on open/close when<dialog>
is natively supported (implied by the native behaviour). Additionally, the script no longer preservers and restores the originalaria-hidden
attribute from the dialog container and its siblings. (bd39460) -
The script now toggles an
open
attribute on the dialog element on open/close to be in sync with the native behaviour.
const container = document.querySelector('#my-accessible-dialog');
const instance = new A11yDialog(container);
instance.show()
// instance.dialog.hasAttribute('open') === true
- The script now defers opening/closing to the native
showModal()
andclose()
methods when supported, following their signature. (be55273)
const container = document.querySelector('#my-accessible-dialog');
const instance = new A11yDialog(container);
instance.hide('something');
// instance.dialog.returnValue === 'something'
- On dialog open, the first descendant with an
autofocus
attribute will be focused to respect the dialog focusing steps from the specifications. If none present, the first focusable element will be focused as before. (23e52f8)