Skip to content

@KittyGiraudel KittyGiraudel released this Apr 21, 2018

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'

Internals

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