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)

4.0.1

• Add license key to package.json (37155b2)

4.0.0

• No longer pass event.target as second argument of events (#75)
• No longer pass event.currentTarget as third argument of events (#75)
• Now pass event (whole object) as second argument of events (#75)

3.1.0

• Pass event.currentTarget as third argument to all events (#74)

3.0.2

• Fixed incorrect tabindex value for dialog title in documentation (#64)

⚠️ Important update

Prior to 3.0.2, a11y-dialog recommended to add tabindex="0" to the dialog title so that it can be focused by the script on dialog opening, in order to avoid jumping directly to an element further down within the dialog. This constitues a WCAG violation under Focus Order.

Version 3.0.2 now recommends you put the close button first so it can be focused right away, and remove tabindex="0" from the title element.

3.0.1

• Fixed global context to ensure platform compatibility (#72)

3.0.0

• Main element no longer assumed (breaking)
• Events no longer DOM based (breaking)
• New events callback signature (breaking)
• Lack of initial aria-hidden="true" now safe (possibly breaking)
• New .create() method
• Method chaining now possible
• New test suite
• Library entirely rewritten with inline comments + JSDoc
• Reworked documentation

PR: #62.
Intro: http://hugogiraudel.com/2017/01/30/introducing-a11y-dialog-v3/.
Credits: thanks to Mike Smart & Loïc Giraudel.

2.5.7

2.5.7

2.5.5

• Prevent the show method from ever running if dialog is shown and the hide method from ever running if dialog is hidden (#58)