5.3.2

• Add TypeScript type definitions (#114, by @morkro)

5.3.1

• Make sure the previous element has a focus method before calling it (c7ffa34)

5.3.0

• Allow access to the escape key event from listeners (#107, by @pascalduez)

5.2.0

• Add support for role="alertdialog" (#98, by @flu0)

5.1.2

• Make sure not to cause errors on the server (d2414c6)

5.1.1

• Allow focus on and

5.1.0

• Provide a way not to use the <dialog> element — Thanks to @Leimi for the feature request and original implementation (#91, #92)

5.0.2

• Fix an issue with restoring focus to former element (91c2f90)

5.0.1

• Ensure role="dialog" is always set —even when <dialog> is natively supported— for better screen-reader support

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 a role="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 and embed 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 the open 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 renamed container. (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 original aria-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() and close() 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)

Internals

• The script now uses Prettier. (4257e58)
• The script is now linted on pre-commit. (4257e58)
• The test suite has been improved. (2b6d3f0)