Socket
Socket
Sign inDemoInstall

a11y-dialog

Package Overview
Dependencies
1
Maintainers
1
Versions
65
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 6.0.0 to 6.0.1

2

dist/a11y-dialog.esm.js

@@ -274,3 +274,3 @@ var focusableSelectors = [

A11yDialog.prototype.off = function (type, handler) {
var index = this._listeners[type].indexOf(handler);
var index = (this._listeners[type] || []).indexOf(handler);

@@ -277,0 +277,0 @@ if (index > -1) {

@@ -1,2 +0,2 @@

/*! a11y-dialog 6.0.0 — © Kitty Giraudel */
var t=['a[href]:not([tabindex^="-"]):not([inert])','area[href]:not([tabindex^="-"]):not([inert])',"input:not([disabled]):not([inert])","select:not([disabled]):not([inert])","textarea:not([disabled]):not([inert])","button:not([disabled]):not([inert])",'iframe:not([tabindex^="-"]):not([inert])','audio[controls]:not([tabindex^="-"]):not([inert])','video[controls]:not([tabindex^="-"]):not([inert])','[contenteditable]:not([tabindex^="-"]):not([inert])','[tabindex]:not([tabindex^="-"]):not([inert])'];function i(t,i){this._show=this.show.bind(this),this._hide=this.hide.bind(this),this._maintainFocus=this._maintainFocus.bind(this),this._bindKeypress=this._bindKeypress.bind(this),this._previouslyFocused=null,this.container=t,this.dialog=t.querySelector('dialog, [role="dialog"], [role="alertdialog"]'),this.role=this.dialog.getAttribute("role")||"dialog",this.useDialog="show"in document.createElement("dialog")&&"DIALOG"===this.dialog.nodeName,this._listeners={},this.create(i)}function e(t){return Array.prototype.slice.call(t)}function n(t,i){return e((i||document).querySelectorAll(t))}function o(t){var i=s(t),e=t.querySelector("[autofocus]")||i[0];e&&e.focus()}function s(i){return n(t.join(","),i).filter((function(t){return!!(t.offsetWidth||t.offsetHeight||t.getClientRects().length)}))}function r(){n("[data-a11y-dialog]").forEach((function(t){new i(t,t.getAttribute("data-a11y-dialog")||void 0)}))}i.prototype.create=function(t){var i,o;return this._targets=this._targets||function(t){if(NodeList.prototype.isPrototypeOf(t))return e(t);if(Element.prototype.isPrototypeOf(t))return[t];if("string"==typeof t)return n(t)}(t)||(i=this.container,(o=e(i.parentNode.childNodes).filter((function(t){return 1===t.nodeType}))).splice(o.indexOf(i),1),o),this.shown=this.dialog.hasAttribute("open"),this.dialog.setAttribute("role",this.role),this.useDialog?(this.container.setAttribute("data-a11y-dialog-native",""),this.container.removeAttribute("aria-hidden")):this.shown?this.container.removeAttribute("aria-hidden"):this.container.setAttribute("aria-hidden",!0),this._openers=n('[data-a11y-dialog-show="'+this.container.id+'"]'),this._openers.forEach(function(t){t.addEventListener("click",this._show)}.bind(this)),this._closers=n("[data-a11y-dialog-hide]",this.container).concat(n('[data-a11y-dialog-hide="'+this.container.id+'"]')),this._closers.forEach(function(t){t.addEventListener("click",this._hide)}.bind(this)),this._fire("create"),this},i.prototype.show=function(t){return this.shown||(this.shown=!0,this._previouslyFocused=document.activeElement,this.useDialog?this.dialog.showModal(t instanceof Event?void 0:t):(this.dialog.setAttribute("open",""),this.container.removeAttribute("aria-hidden"),this._targets.forEach((function(t){t.hasAttribute("aria-hidden")&&t.setAttribute("data-a11y-dialog-original-aria-hidden",t.getAttribute("aria-hidden")),t.setAttribute("aria-hidden","true")}))),o(this.dialog),document.body.addEventListener("focus",this._maintainFocus,!0),document.addEventListener("keydown",this._bindKeypress),this._fire("show",t)),this},i.prototype.hide=function(t){return this.shown?(this.shown=!1,this.useDialog?this.dialog.close(t instanceof Event?void 0:t):(this.dialog.removeAttribute("open"),this.container.setAttribute("aria-hidden","true"),this._targets.forEach((function(t){t.hasAttribute("data-a11y-dialog-original-aria-hidden")?(t.setAttribute("aria-hidden",t.getAttribute("data-a11y-dialog-original-aria-hidden")),t.removeAttribute("data-a11y-dialog-original-aria-hidden")):t.removeAttribute("aria-hidden")}))),this._previouslyFocused&&this._previouslyFocused.focus&&this._previouslyFocused.focus(),document.body.removeEventListener("focus",this._maintainFocus,!0),document.removeEventListener("keydown",this._bindKeypress),this._fire("hide",t),this):this},i.prototype.destroy=function(){return this.hide(),this._openers.forEach(function(t){t.removeEventListener("click",this._show)}.bind(this)),this._closers.forEach(function(t){t.removeEventListener("click",this._hide)}.bind(this)),this._fire("destroy"),this._listeners={},this},i.prototype.on=function(t,i){return void 0===this._listeners[t]&&(this._listeners[t]=[]),this._listeners[t].push(i),this},i.prototype.off=function(t,i){var e=this._listeners[t].indexOf(i);return e>-1&&this._listeners[t].splice(e,1),this},i.prototype._fire=function(t,i){(this._listeners[t]||[]).forEach(function(t){t(this.container,i)}.bind(this))},i.prototype._bindKeypress=function(t){this.dialog.contains(document.activeElement)&&(this.shown&&27===t.which&&"alertdialog"!==this.role&&(t.preventDefault(),this.hide(t)),this.shown&&9===t.which&&function(t,i){var e=s(t),n=e.indexOf(document.activeElement);i.shiftKey&&0===n?(e[e.length-1].focus(),i.preventDefault()):i.shiftKey||n!==e.length-1||(e[0].focus(),i.preventDefault())}(this.dialog,t))},i.prototype._maintainFocus=function(t){var i=t.target.getAttribute("data-a11y-dialog-show");this.shown&&!this.container.contains(t.target)&&i===this.container.id&&o(this.container)},"undefined"!=typeof document&&("loading"===document.readyState?document.addEventListener("DOMContentLoaded",r):window.requestAnimationFrame?window.requestAnimationFrame(r):window.setTimeout(r,16));export default i;
/*! a11y-dialog 6.0.1 — © Kitty Giraudel */
var t=['a[href]:not([tabindex^="-"]):not([inert])','area[href]:not([tabindex^="-"]):not([inert])',"input:not([disabled]):not([inert])","select:not([disabled]):not([inert])","textarea:not([disabled]):not([inert])","button:not([disabled]):not([inert])",'iframe:not([tabindex^="-"]):not([inert])','audio[controls]:not([tabindex^="-"]):not([inert])','video[controls]:not([tabindex^="-"]):not([inert])','[contenteditable]:not([tabindex^="-"]):not([inert])','[tabindex]:not([tabindex^="-"]):not([inert])'];function i(t,i){this._show=this.show.bind(this),this._hide=this.hide.bind(this),this._maintainFocus=this._maintainFocus.bind(this),this._bindKeypress=this._bindKeypress.bind(this),this._previouslyFocused=null,this.container=t,this.dialog=t.querySelector('dialog, [role="dialog"], [role="alertdialog"]'),this.role=this.dialog.getAttribute("role")||"dialog",this.useDialog="show"in document.createElement("dialog")&&"DIALOG"===this.dialog.nodeName,this._listeners={},this.create(i)}function e(t){return Array.prototype.slice.call(t)}function n(t,i){return e((i||document).querySelectorAll(t))}function o(t){var i=s(t),e=t.querySelector("[autofocus]")||i[0];e&&e.focus()}function s(i){return n(t.join(","),i).filter((function(t){return!!(t.offsetWidth||t.offsetHeight||t.getClientRects().length)}))}function r(){n("[data-a11y-dialog]").forEach((function(t){new i(t,t.getAttribute("data-a11y-dialog")||void 0)}))}i.prototype.create=function(t){var i,o;return this._targets=this._targets||function(t){if(NodeList.prototype.isPrototypeOf(t))return e(t);if(Element.prototype.isPrototypeOf(t))return[t];if("string"==typeof t)return n(t)}(t)||(i=this.container,(o=e(i.parentNode.childNodes).filter((function(t){return 1===t.nodeType}))).splice(o.indexOf(i),1),o),this.shown=this.dialog.hasAttribute("open"),this.dialog.setAttribute("role",this.role),this.useDialog?(this.container.setAttribute("data-a11y-dialog-native",""),this.container.removeAttribute("aria-hidden")):this.shown?this.container.removeAttribute("aria-hidden"):this.container.setAttribute("aria-hidden",!0),this._openers=n('[data-a11y-dialog-show="'+this.container.id+'"]'),this._openers.forEach(function(t){t.addEventListener("click",this._show)}.bind(this)),this._closers=n("[data-a11y-dialog-hide]",this.container).concat(n('[data-a11y-dialog-hide="'+this.container.id+'"]')),this._closers.forEach(function(t){t.addEventListener("click",this._hide)}.bind(this)),this._fire("create"),this},i.prototype.show=function(t){return this.shown||(this.shown=!0,this._previouslyFocused=document.activeElement,this.useDialog?this.dialog.showModal(t instanceof Event?void 0:t):(this.dialog.setAttribute("open",""),this.container.removeAttribute("aria-hidden"),this._targets.forEach((function(t){t.hasAttribute("aria-hidden")&&t.setAttribute("data-a11y-dialog-original-aria-hidden",t.getAttribute("aria-hidden")),t.setAttribute("aria-hidden","true")}))),o(this.dialog),document.body.addEventListener("focus",this._maintainFocus,!0),document.addEventListener("keydown",this._bindKeypress),this._fire("show",t)),this},i.prototype.hide=function(t){return this.shown?(this.shown=!1,this.useDialog?this.dialog.close(t instanceof Event?void 0:t):(this.dialog.removeAttribute("open"),this.container.setAttribute("aria-hidden","true"),this._targets.forEach((function(t){t.hasAttribute("data-a11y-dialog-original-aria-hidden")?(t.setAttribute("aria-hidden",t.getAttribute("data-a11y-dialog-original-aria-hidden")),t.removeAttribute("data-a11y-dialog-original-aria-hidden")):t.removeAttribute("aria-hidden")}))),this._previouslyFocused&&this._previouslyFocused.focus&&this._previouslyFocused.focus(),document.body.removeEventListener("focus",this._maintainFocus,!0),document.removeEventListener("keydown",this._bindKeypress),this._fire("hide",t),this):this},i.prototype.destroy=function(){return this.hide(),this._openers.forEach(function(t){t.removeEventListener("click",this._show)}.bind(this)),this._closers.forEach(function(t){t.removeEventListener("click",this._hide)}.bind(this)),this._fire("destroy"),this._listeners={},this},i.prototype.on=function(t,i){return void 0===this._listeners[t]&&(this._listeners[t]=[]),this._listeners[t].push(i),this},i.prototype.off=function(t,i){var e=(this._listeners[t]||[]).indexOf(i);return e>-1&&this._listeners[t].splice(e,1),this},i.prototype._fire=function(t,i){(this._listeners[t]||[]).forEach(function(t){t(this.container,i)}.bind(this))},i.prototype._bindKeypress=function(t){this.dialog.contains(document.activeElement)&&(this.shown&&27===t.which&&"alertdialog"!==this.role&&(t.preventDefault(),this.hide(t)),this.shown&&9===t.which&&function(t,i){var e=s(t),n=e.indexOf(document.activeElement);i.shiftKey&&0===n?(e[e.length-1].focus(),i.preventDefault()):i.shiftKey||n!==e.length-1||(e[0].focus(),i.preventDefault())}(this.dialog,t))},i.prototype._maintainFocus=function(t){var i=t.target.getAttribute("data-a11y-dialog-show");this.shown&&!this.container.contains(t.target)&&i===this.container.id&&o(this.container)},"undefined"!=typeof document&&("loading"===document.readyState?document.addEventListener("DOMContentLoaded",r):window.requestAnimationFrame?window.requestAnimationFrame(r):window.setTimeout(r,16));export default i;

@@ -280,3 +280,3 @@ (function (global, factory) {

A11yDialog.prototype.off = function (type, handler) {
var index = this._listeners[type].indexOf(handler);
var index = (this._listeners[type] || []).indexOf(handler);

@@ -283,0 +283,0 @@ if (index > -1) {

@@ -1,2 +0,2 @@

/*! a11y-dialog 6.0.0 — © Kitty Giraudel */
!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?module.exports=i():"function"==typeof define&&define.amd?define(i):(t="undefined"!=typeof globalThis?globalThis:t||self).A11yDialog=i()}(this,(function(){"use strict";var t=['a[href]:not([tabindex^="-"]):not([inert])','area[href]:not([tabindex^="-"]):not([inert])',"input:not([disabled]):not([inert])","select:not([disabled]):not([inert])","textarea:not([disabled]):not([inert])","button:not([disabled]):not([inert])",'iframe:not([tabindex^="-"]):not([inert])','audio[controls]:not([tabindex^="-"]):not([inert])','video[controls]:not([tabindex^="-"]):not([inert])','[contenteditable]:not([tabindex^="-"]):not([inert])','[tabindex]:not([tabindex^="-"]):not([inert])'];function i(t,i){this._show=this.show.bind(this),this._hide=this.hide.bind(this),this._maintainFocus=this._maintainFocus.bind(this),this._bindKeypress=this._bindKeypress.bind(this),this._previouslyFocused=null,this.container=t,this.dialog=t.querySelector('dialog, [role="dialog"], [role="alertdialog"]'),this.role=this.dialog.getAttribute("role")||"dialog",this.useDialog="show"in document.createElement("dialog")&&"DIALOG"===this.dialog.nodeName,this._listeners={},this.create(i)}function e(t){return Array.prototype.slice.call(t)}function n(t,i){return e((i||document).querySelectorAll(t))}function o(t){var i=s(t),e=t.querySelector("[autofocus]")||i[0];e&&e.focus()}function s(i){return n(t.join(","),i).filter((function(t){return!!(t.offsetWidth||t.offsetHeight||t.getClientRects().length)}))}function r(){n("[data-a11y-dialog]").forEach((function(t){new i(t,t.getAttribute("data-a11y-dialog")||void 0)}))}return i.prototype.create=function(t){var i,o;return this._targets=this._targets||function(t){if(NodeList.prototype.isPrototypeOf(t))return e(t);if(Element.prototype.isPrototypeOf(t))return[t];if("string"==typeof t)return n(t)}(t)||(i=this.container,(o=e(i.parentNode.childNodes).filter((function(t){return 1===t.nodeType}))).splice(o.indexOf(i),1),o),this.shown=this.dialog.hasAttribute("open"),this.dialog.setAttribute("role",this.role),this.useDialog?(this.container.setAttribute("data-a11y-dialog-native",""),this.container.removeAttribute("aria-hidden")):this.shown?this.container.removeAttribute("aria-hidden"):this.container.setAttribute("aria-hidden",!0),this._openers=n('[data-a11y-dialog-show="'+this.container.id+'"]'),this._openers.forEach(function(t){t.addEventListener("click",this._show)}.bind(this)),this._closers=n("[data-a11y-dialog-hide]",this.container).concat(n('[data-a11y-dialog-hide="'+this.container.id+'"]')),this._closers.forEach(function(t){t.addEventListener("click",this._hide)}.bind(this)),this._fire("create"),this},i.prototype.show=function(t){return this.shown||(this.shown=!0,this._previouslyFocused=document.activeElement,this.useDialog?this.dialog.showModal(t instanceof Event?void 0:t):(this.dialog.setAttribute("open",""),this.container.removeAttribute("aria-hidden"),this._targets.forEach((function(t){t.hasAttribute("aria-hidden")&&t.setAttribute("data-a11y-dialog-original-aria-hidden",t.getAttribute("aria-hidden")),t.setAttribute("aria-hidden","true")}))),o(this.dialog),document.body.addEventListener("focus",this._maintainFocus,!0),document.addEventListener("keydown",this._bindKeypress),this._fire("show",t)),this},i.prototype.hide=function(t){return this.shown?(this.shown=!1,this.useDialog?this.dialog.close(t instanceof Event?void 0:t):(this.dialog.removeAttribute("open"),this.container.setAttribute("aria-hidden","true"),this._targets.forEach((function(t){t.hasAttribute("data-a11y-dialog-original-aria-hidden")?(t.setAttribute("aria-hidden",t.getAttribute("data-a11y-dialog-original-aria-hidden")),t.removeAttribute("data-a11y-dialog-original-aria-hidden")):t.removeAttribute("aria-hidden")}))),this._previouslyFocused&&this._previouslyFocused.focus&&this._previouslyFocused.focus(),document.body.removeEventListener("focus",this._maintainFocus,!0),document.removeEventListener("keydown",this._bindKeypress),this._fire("hide",t),this):this},i.prototype.destroy=function(){return this.hide(),this._openers.forEach(function(t){t.removeEventListener("click",this._show)}.bind(this)),this._closers.forEach(function(t){t.removeEventListener("click",this._hide)}.bind(this)),this._fire("destroy"),this._listeners={},this},i.prototype.on=function(t,i){return void 0===this._listeners[t]&&(this._listeners[t]=[]),this._listeners[t].push(i),this},i.prototype.off=function(t,i){var e=this._listeners[t].indexOf(i);return e>-1&&this._listeners[t].splice(e,1),this},i.prototype._fire=function(t,i){(this._listeners[t]||[]).forEach(function(t){t(this.container,i)}.bind(this))},i.prototype._bindKeypress=function(t){this.dialog.contains(document.activeElement)&&(this.shown&&27===t.which&&"alertdialog"!==this.role&&(t.preventDefault(),this.hide(t)),this.shown&&9===t.which&&function(t,i){var e=s(t),n=e.indexOf(document.activeElement);i.shiftKey&&0===n?(e[e.length-1].focus(),i.preventDefault()):i.shiftKey||n!==e.length-1||(e[0].focus(),i.preventDefault())}(this.dialog,t))},i.prototype._maintainFocus=function(t){var i=t.target.getAttribute("data-a11y-dialog-show");this.shown&&!this.container.contains(t.target)&&i===this.container.id&&o(this.container)},"undefined"!=typeof document&&("loading"===document.readyState?document.addEventListener("DOMContentLoaded",r):window.requestAnimationFrame?window.requestAnimationFrame(r):window.setTimeout(r,16)),i}));
/*! a11y-dialog 6.0.1 — © Kitty Giraudel */
!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?module.exports=i():"function"==typeof define&&define.amd?define(i):(t="undefined"!=typeof globalThis?globalThis:t||self).A11yDialog=i()}(this,(function(){"use strict";var t=['a[href]:not([tabindex^="-"]):not([inert])','area[href]:not([tabindex^="-"]):not([inert])',"input:not([disabled]):not([inert])","select:not([disabled]):not([inert])","textarea:not([disabled]):not([inert])","button:not([disabled]):not([inert])",'iframe:not([tabindex^="-"]):not([inert])','audio[controls]:not([tabindex^="-"]):not([inert])','video[controls]:not([tabindex^="-"]):not([inert])','[contenteditable]:not([tabindex^="-"]):not([inert])','[tabindex]:not([tabindex^="-"]):not([inert])'];function i(t,i){this._show=this.show.bind(this),this._hide=this.hide.bind(this),this._maintainFocus=this._maintainFocus.bind(this),this._bindKeypress=this._bindKeypress.bind(this),this._previouslyFocused=null,this.container=t,this.dialog=t.querySelector('dialog, [role="dialog"], [role="alertdialog"]'),this.role=this.dialog.getAttribute("role")||"dialog",this.useDialog="show"in document.createElement("dialog")&&"DIALOG"===this.dialog.nodeName,this._listeners={},this.create(i)}function e(t){return Array.prototype.slice.call(t)}function n(t,i){return e((i||document).querySelectorAll(t))}function o(t){var i=s(t),e=t.querySelector("[autofocus]")||i[0];e&&e.focus()}function s(i){return n(t.join(","),i).filter((function(t){return!!(t.offsetWidth||t.offsetHeight||t.getClientRects().length)}))}function r(){n("[data-a11y-dialog]").forEach((function(t){new i(t,t.getAttribute("data-a11y-dialog")||void 0)}))}return i.prototype.create=function(t){var i,o;return this._targets=this._targets||function(t){if(NodeList.prototype.isPrototypeOf(t))return e(t);if(Element.prototype.isPrototypeOf(t))return[t];if("string"==typeof t)return n(t)}(t)||(i=this.container,(o=e(i.parentNode.childNodes).filter((function(t){return 1===t.nodeType}))).splice(o.indexOf(i),1),o),this.shown=this.dialog.hasAttribute("open"),this.dialog.setAttribute("role",this.role),this.useDialog?(this.container.setAttribute("data-a11y-dialog-native",""),this.container.removeAttribute("aria-hidden")):this.shown?this.container.removeAttribute("aria-hidden"):this.container.setAttribute("aria-hidden",!0),this._openers=n('[data-a11y-dialog-show="'+this.container.id+'"]'),this._openers.forEach(function(t){t.addEventListener("click",this._show)}.bind(this)),this._closers=n("[data-a11y-dialog-hide]",this.container).concat(n('[data-a11y-dialog-hide="'+this.container.id+'"]')),this._closers.forEach(function(t){t.addEventListener("click",this._hide)}.bind(this)),this._fire("create"),this},i.prototype.show=function(t){return this.shown||(this.shown=!0,this._previouslyFocused=document.activeElement,this.useDialog?this.dialog.showModal(t instanceof Event?void 0:t):(this.dialog.setAttribute("open",""),this.container.removeAttribute("aria-hidden"),this._targets.forEach((function(t){t.hasAttribute("aria-hidden")&&t.setAttribute("data-a11y-dialog-original-aria-hidden",t.getAttribute("aria-hidden")),t.setAttribute("aria-hidden","true")}))),o(this.dialog),document.body.addEventListener("focus",this._maintainFocus,!0),document.addEventListener("keydown",this._bindKeypress),this._fire("show",t)),this},i.prototype.hide=function(t){return this.shown?(this.shown=!1,this.useDialog?this.dialog.close(t instanceof Event?void 0:t):(this.dialog.removeAttribute("open"),this.container.setAttribute("aria-hidden","true"),this._targets.forEach((function(t){t.hasAttribute("data-a11y-dialog-original-aria-hidden")?(t.setAttribute("aria-hidden",t.getAttribute("data-a11y-dialog-original-aria-hidden")),t.removeAttribute("data-a11y-dialog-original-aria-hidden")):t.removeAttribute("aria-hidden")}))),this._previouslyFocused&&this._previouslyFocused.focus&&this._previouslyFocused.focus(),document.body.removeEventListener("focus",this._maintainFocus,!0),document.removeEventListener("keydown",this._bindKeypress),this._fire("hide",t),this):this},i.prototype.destroy=function(){return this.hide(),this._openers.forEach(function(t){t.removeEventListener("click",this._show)}.bind(this)),this._closers.forEach(function(t){t.removeEventListener("click",this._hide)}.bind(this)),this._fire("destroy"),this._listeners={},this},i.prototype.on=function(t,i){return void 0===this._listeners[t]&&(this._listeners[t]=[]),this._listeners[t].push(i),this},i.prototype.off=function(t,i){var e=(this._listeners[t]||[]).indexOf(i);return e>-1&&this._listeners[t].splice(e,1),this},i.prototype._fire=function(t,i){(this._listeners[t]||[]).forEach(function(t){t(this.container,i)}.bind(this))},i.prototype._bindKeypress=function(t){this.dialog.contains(document.activeElement)&&(this.shown&&27===t.which&&"alertdialog"!==this.role&&(t.preventDefault(),this.hide(t)),this.shown&&9===t.which&&function(t,i){var e=s(t),n=e.indexOf(document.activeElement);i.shiftKey&&0===n?(e[e.length-1].focus(),i.preventDefault()):i.shiftKey||n!==e.length-1||(e[0].focus(),i.preventDefault())}(this.dialog,t))},i.prototype._maintainFocus=function(t){var i=t.target.getAttribute("data-a11y-dialog-show");this.shown&&!this.container.contains(t.target)&&i===this.container.id&&o(this.container)},"undefined"!=typeof document&&("loading"===document.readyState?document.addEventListener("DOMContentLoaded",r):window.requestAnimationFrame?window.requestAnimationFrame(r):window.setTimeout(r,16)),i}));
{
"name": "a11y-dialog",
"version": "6.0.0",
"version": "6.0.1",
"description": "A tiny script to make dialog windows accessible to assistive technology users.",

@@ -5,0 +5,0 @@ "homepage": "https://github.com/HugoGiraudel/a11y-dialog",

@@ -118,3 +118,3 @@ # [A11y Dialog](http://hugogiraudel.github.io/a11y-dialog/)

- It may have the `alertdialog` role to make it behave like a “modal”. See the [Usage as a modal](#usage-as-a-modal) section of the docs.
- It can be a `<dialog>` element, but there might be [browsers inconsistencies](#about-the-html-dialog-element).
- It can be a `<dialog>` element, but [is not recommended](#using-the-dialog-html-element).
- It doesn’t have to have the `aria-labelledby` attribute however this is recommended. It should match the `id` of the dialog title.

@@ -142,61 +142,62 @@

#### About the HTML dialog element
### Styling
As mentioned in the comments above, the script works fine with the native HTML `<dialog>` element and will polyfill its behaviour so the dialog works in any browser, regardless of their support for that HTML element. However, it is recommended _not_ to use it and to rely on a `<div>` with `role="dialog"` instead. Amongst other, here are the issues with the HTML `<dialog>` element:
- Clicking the backdrop does not close the dialog on Chrome.
- The native `::backdrop` only shows when programatically opening the dialog, not when using the `open` attribute.
- Default styles are left to the browsers’ discretion and can be inconsistent.
- The [modal pattern](#usage-as-a-modal) (`role="alertdialog"`) simply does not work with the dialog element.
- It still requires JavaScript anyway, so it’s not even 100% HTML.
- [Read more about the shortcoming of the dialog element by Scott Ohara](https://www.scottohara.me/blog/2019/03/05/open-dialog.html).
### Styling layer
The script itself does not take care of any styling whatsoever, not even the `display` property. It basically mostly toggles the `aria-hidden` attribute on the dialog itself and its counterpart content containers (where the rest of the site/app lives).
If using the `<dialog>` element (which is [not recommended due to browser inconsistencies](#about-the-html-dialog-element)), its visibility will be handled by the user-agent itself. If using a `<div>` with the `dialog` role (which is recommended for consistency), the styling layer is up to the implementor (you).
Here is a solid set of styles to get started (note that you might have to rename the class names to fit your code):
We recommend using at least the following styles to make everything work on both supporting and non-supporting user-agents:
```css
/**
* When the native `<dialog>` element is supported and used, the overlay is
* handled natively and can be styled with `::backdrop`, which means the DOM one
* should be removed.
*
* The `data-a11y-dialog-native` attribute is set by the script when the
* `<dialog>` element is properly supported. Feel free to replace `:first-child`
* with the overlay selector you prefer.
*
* This rule can be safely omitted when *not* using the <dialog> element.
* 1. Make the dialog container, and its child overlay spread across the entire
* window.
*/
[data-a11y-dialog-native] > :first-child {
display: none;
.dialog-container,
.dialog-overlay {
position: fixed; /* 1 */
top: 0; /* 1 */
right: 0; /* 1 */
bottom: 0; /* 1 */
left: 0; /* 1 */
}
/**
* When the `<dialog>` element is used but not supported by the user agent, its
* default display is `inline` which can cause layout issues. This makes sure
* the dialog is correctly displayed when open.
*
* This rule can be safely omitted when *not* using the <dialog> element.
* 1. Make sure the dialog container and all its descendants sits on top of the
* rest of the page.
* 2. Make the dialog container a flex container to easily center the dialog.
*/
dialog[open] {
display: block;
.dialog-container {
z-index: 2; /* 1 */
display: flex; /* 2 */
}
/**
* When the native `<dialog>` element is not supported, the script toggles the
* `aria-hidden` attribute on the container. If `aria-hidden` is set to `true`,
* the container should be hidden entirely.
*
* Feel free to replace `.dialog-container` with the container selector you
* prefer.
* 1. Make sure the dialog container and all its descendants are not visible and
* not focusable when the dialog is hidden.
*/
.dialog-container[aria-hidden='true'] {
display: none;
display: none; /* 1 */
}
/**
* 1. Make the overlay look like an overlay.
*/
.dialog-overlay {
background-color: rgba(43, 46, 56, 0.9); /* 1 */
}
/**
* 1. Vertically and horizontally center the dialog in the page.
* 2. Make sure the dialog sits on top of the overlay.
* 3. Make sure the dialog has an opaque background.
*/
.dialog-content {
margin: auto; /* 1 */
z-index: 2; /* 2 */
position: relative; /* 2 */
background-color: white; /* 3 */
}
```
The rest, such as what the dialog really looks like, and how its content is styled, is left at your own discretion. These styles should be enough to get you on the right track.
### Instantiation

@@ -272,4 +273,2 @@

In addition, the library adds a `data-a11y-dialog-native` attribute (with no value) when the `<dialog>` element is used and natively supported. This attribute is essentially used to customise the styling layer based on user-agent support (or lack thereof).
### JS API

@@ -287,4 +286,2 @@

When the `<dialog>` element is used and natively supported, the argument passed to `show()` and `hide()` is being passed to the native call to [`showModal()`](https://www.w3.org/TR/html52/interactive-elements.html#dom-htmldialogelement-showmodal) and [`close()`](https://www.w3.org/TR/html52/interactive-elements.html#dom-htmldialogelement-close). If necessary, the `returnValue` can be read using `<instance>.dialog.returnValue`.
For advanced usages, there are `create()` and `destroy()` methods. These are responsible for attaching click event listeners to dialog openers and closers. Note that the `create()` method is **automatically called on instantiation** so there is no need to call it again directly.

@@ -342,2 +339,32 @@

### Animations
As mentioned in the [styling](#styling) section, how the dialog looks is entirely up to the implementor (you). The following boilerplate code can be used to add a simple entering animation to the dialog.
```css
@keyframes fade-in {
from {
opacity: 0;
}
}
@keyframes slide-up {
from {
transform: translateY(10%);
}
}
.dialog-overlay {
animation: fade-in 200ms both;
}
/**
* 1. Add an animation delay equal to the overlay animation duration to wait for
* the overlay to appear before animation in the dialog.
*/
.dialog-content {
animation: fade-in 400ms 200ms both, slide-up 400ms 200ms both; /* 1 */
}
```
### Usage as a “modal”

@@ -349,3 +376,3 @@

1. Replace `role="dialog"` with `role="alertdialog"`. This will make sure <kbd>ESC</kbd> doesn’t close the modal. Note that this role does not work properly with the native `<dialog>` element so make sure to use `<div role="alertdialog">`.
1. Replace `role="dialog"` with `role="alertdialog"`. This will make sure <kbd>ESC</kbd> doesn’t close the modal. Note that this role does not work properly with the [native `<dialog>` element](#using-the-dialog-html-element) so make sure to use `<div role="alertdialog">`.
2. Remove `data-a11y-dialog-hide` from the overlay element. This makes sure it is not possible to close the modal by clicking outside of it.

@@ -356,2 +383,62 @@ 3. In case the user actively needs to operate with the modal, you might consider removing the close button from it. Be sure to still offer a way to eventually close the modal.

### Using the dialog HTML element
As mentioned in the [HTML section](#html-boilerplate), the script works fine with the native HTML `<dialog>` element and will polyfill its behaviour so the dialog works in any browser, regardless of their support for that HTML element. However, it is recommended _not_ to use it and to rely on a `<div>` with `role="dialog"` instead. Amongst other, here are the issues with the HTML `<dialog>` element:
- Clicking the backdrop does not close the dialog on Chrome.
- The native `::backdrop` only shows when programatically opening the dialog, not when using the `open` attribute.
- Default styles are left to the browsers’ discretion and can be inconsistent.
- The [modal pattern](#usage-as-a-modal) (`role="alertdialog"`) simply does not work with the dialog element.
- It still requires JavaScript anyway, so it’s not even 100% HTML.
- [Read more about the shortcoming of the dialog element by Scott O'hara](https://www.scottohara.me/blog/2019/03/05/open-dialog.html).
If you really want to use the `<dialog>` HTML element nevertheless, here are a few things you should know.
The [provided base styles](#styling) will not quite work because the dialog container does not receive the `aria-hidden` attribute when hidden. That is because the dialog’s visibility is handled by the user-agent itself. This means the container is essentially always displayed. For that reason, it should not made fixed on top of everything, otherwise it prevents interacting with the page at all.
Fortunately, the library adds a `data-a11y-dialog-native` attribute (with no value) when the `<dialog>` element is used and natively supported. This attribute can be used to customise the styling layer based on user-agent support (or lack thereof).
The following styles are more suited to using `<dialog>`.
```css
/**
* 1. When the native `<dialog>` element is supported and used, the overlay is
* handled natively and can be styled with `::backdrop`, which means the DOM
* one should be removed. Feel free to replace `:first-child` with the
* overlay selector of your choice.
*/
[data-a11y-dialog-native] > :first-child {
display: none; /* 1 */
}
/**
* 1. Absolutely center the dialog on top of the page.
*/
dialog {
position: fixed; /* 1 */
top: 50%; /* 1 */
left: 50%; /* 1 */
transform: translate(-50%, -50%); /* 1 */
z-index: 2; /* 1 */
}
/**
* 1. When the `<dialog>` element is used but not supported by the user agent,
* its default display is `inline` which can cause layout issues. This makes
* sure the dialog is correctly displayed when open.
*/
dialog[open] {
display: block; /* 1 */
}
/**
* 1. Make the overlay look like an overlay.
*/
dialog::backdrop {
background-color: rgba(43, 46, 56, 0.9); /* 1 */
}
```
When the `<dialog>` element is used and natively supported, the argument passed to `show()` and `hide()` is being passed to the native call to [`showModal()`](https://www.w3.org/TR/html52/interactive-elements.html#dom-htmldialogelement-showmodal) and [`close()`](https://www.w3.org/TR/html52/interactive-elements.html#dom-htmldialogelement-close). If necessary, the `returnValue` can be read using `<instance>.dialog.returnValue`.
### Nested dialogs

@@ -358,0 +445,0 @@

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc