a11y-dialog

• Fix minor issues when querying focusable elements (#156)
• Improve instructions regarding CDN usage (#154)
• Add documentation about locking window scroll (#153)
• Simplify a JavaScript expression (2cc152fd7fd365f0ac06b8f995eddcf3879f3650)
• Update author’s name (e94c7d4)
• Move documentation to Docusaurus (tree/documentation, #161, 1813b7737838922cb6ed86c3a8e69e194e29aeda, ab4c7956c84b2b4ef5113d9b2378ae2ecf623249, 04de7f3c3baf0593f93a988f2cb466381ef3f54b)
• Move example to CodeSandbox (cc22140ab9ea8bbcfc223e0469b554f893cc27ef, 580a284c5c37e71433b4abbad704ae50cdc428e5, c05e45e39772a1f6aa00c9a7b1f8d46f814a4128)

• Prevent potential issue with this._listeners being undefined in .off method (#148)

In theory, v6.0.0 should be entirely backward compatible with the latest version from v5. However since the move to Rollup could have unintended side-effect, we’re leaning on the safe side and bumping the major. If you are experiencing any issue with v6, please kindly report them.

Package

• Add support for nested dialogs (#141)
• Move bundling to Rollup (#133)
• Use focusable-selectors to get focusable elements (#134, #143)
• Package an ESM version of the script for CDN usage (#133)
• Move dist files in a dedicated folder, leaving only the source file at the root (#133)
• Move the repository over to KittyGiraudel/a11y-dialog instead of edenspiekermann/a11y-dialog (#138)

Documentation

• Improve the documentation about the expected HTML structure (#137)
• Add a warning about using <dialog> in the documentation (#137)
• Update installation instructions to mention ESM and CDNs (#139, #140)

Tests

• Move testing from Mocha to Cypress (#129)
• Run tests on CI (#130)
• Clean up examples (#142)

• Prevent an issue on some CI with a function being declared within a condition (61069a44d5febfe35dde5f867ccde0bd4f3d9adb)

• Prevent a DOM error when ‘data-a11y-dialog’ has no value (30a8c2f51244d84866eb43099f2c673aece353fa)
• Apply minor improvement to the documentation (b3f6856ecd3ca58c87390da5f08c37f9443bf185)

• Provide a way to automatically instantiate dialogs through the DOM API to make it possible to use the library without writing any JavaScript (#128)

• Update development dependencies (a1e21de663225324cc99139e69f8779136527694, ec13ef5f679ad69c28b26f2623ad1709ed4789a8, 7c1ce973774f242ab51ace7f20ce3be99a4fad90, 6b1e50ac1ebfaa6515ca7684d4d4f26e82eb900d, 3b5ccb20a7190473a90c701e4b64dbb624be6a07)
• Rename master to main (9718f2a479620a74d4e42930fcd3ab25eaee445b)
• Update author’s name (e0d398032ebb56b43cc1401e3b144fc3d6082439)

• Updates type definition (#123, by @morkro)

• Reintroduce removal of aria-hidden (#119, by @patrickhlauke)

• Improve handling of aria-hidden for dialog siblings (#117, by @patrickhlauke)

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

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

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

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

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

• Allow focus on and elements when dialog is shown (#93)

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

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

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

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: https://github.com/edenspiekermann/a11y-dialog/pull/77.

General

• Bower is no longer supported. (77297a4d2bbb5a4c8ebfd75cf8a56dc1525dee99)
• No longer suggest to maintain a local copy of the script. (a6850bf25f58cc3e8c168a0e28360adfddb8c4ce)

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: (439e1cc0bf0b43fb283b0e29a32f9e0301ece827)

'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). (0a8052abd0af769a538bda968527641738b8fc59)

- <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). (de239a421fd8ebc8b67a236f7152ad89a249e9d5)

- <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). (00da776cce38ab4fcf2425541fdee31c7c17f090)

- <div role="document">

• [BREAKING] The list of focusable elements has been updated: (62f554cafb09933df288d0eca2abae6763c14bfe)
  • 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. (329ef803213bf93f580b78611456815398572ec4)

+ [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. (1112ff54557fdfc91ce8c5492b3bb2db5505b465)

<!-- Highly discouraged yet possible -->
<dialog open>

• The undocumented node property previously holding the dialog container has been renamed container. (eb2c1e4b7973828befb9e986351e4acda80fd813)

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. (8348a798b33787479bd3b37e60a45a8976d6f722)

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. (bd394600c572a1b01174d54de9ca39e61c4f7ec2)

• 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. (be55273e25fb2c000245a58598338f7206605c5a)

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. (23e52f8ce88cb16b75fa352db7a27b7f7ecd6ab1)

Internals

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