a11y-dialog - npm Package Compare versions

Comparing version 5.3.2 to 5.4.0

a11y-dialog.js

@@ -81,2 +81,5 @@ /* global NodeList, Element, Event, define */
       this.container.setAttribute('data-a11y-dialog-native', '');
+      // Remove initial `aria-hidden` from container
+      // See: https://github.com/edenspiekermann/a11y-dialog/pull/117#issuecomment-706056246
+      this.container.removeAttribute('aria-hidden');
     }
@@ -134,7 +137,9 @@
       this.dialog.setAttribute('open', '');
-      this.container.removeAttribute('aria-hidden');
 
       // Iterate over the targets to disable them by setting their `aria-hidden`
-      // attribute to `true`
+      // attribute to `true` and, if present, storing the current value of `aria-hidden`
       this._targets.forEach(function(target) {
+        if (target.hasAttribute('aria-hidden')) {
+          target.setAttribute('data-a11y-dialog-original-aria-hidden', target.getAttribute('aria-hidden'));
+        }
         target.setAttribute('aria-hidden', 'true');
@@ -182,5 +187,10 @@ });
       // Iterate over the targets to enable them by removing their `aria-hidden`
-      // attribute
+      // attribute or resetting it to its original value
       this._targets.forEach(function(target) {
-        target.removeAttribute('aria-hidden');
+        if (target.hasAttribute('data-a11y-dialog-original-aria-hidden')) {
+          target.setAttribute('aria-hidden', target.getAttribute('data-a11y-dialog-original-aria-hidden'));
+          target.removeAttribute('data-a11y-dialog-original-aria-hidden');
+        } else {
+          target.removeAttribute('aria-hidden');
+        }
       });
@@ -187,0 +197,0 @@ }

a11y-dialog.min.js

@@ -1,2 +0,2 @@
-/*! a11y-dialog 5.3.2 — © Edenspiekermann */
-!function(t){"use strict";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.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){return NodeList.prototype.isPrototypeOf(t)?e(t):Element.prototype.isPrototypeOf(t)?[t]:"string"==typeof t?n(t):void 0}function s(t){var i=r(t),e=t.querySelector("[autofocus]")||i[0];e&&e.focus()}function r(t){return n(c.join(","),t).filter(function(t){return!!(t.offsetWidth||t.offsetHeight||t.getClientRects().length)})}function h(t,i){var e=r(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())}function a(t){var i=e(t.parentNode.childNodes),n=i.filter(function(t){return 1===t.nodeType});return n.splice(n.indexOf(t),1),n}var d,c=['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:not([tabindex^="-"]):not([inert])','video:not([tabindex^="-"]):not([inert])','[contenteditable]:not([tabindex^="-"]):not([inert])','[tabindex]:not([tabindex^="-"]):not([inert])'];i.prototype.create=function(t){return this._targets=this._targets||o(t)||a(this.container),this.shown=this.dialog.hasAttribute("open"),this.dialog.setAttribute("role",this.role),this.useDialog?this.container.setAttribute("data-a11y-dialog-native",""):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:(this.shown=!0,d=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.setAttribute("aria-hidden","true")})),s(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.removeAttribute("aria-hidden")})),d&&d.focus&&d.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.shown&&27===t.which&&"alertdialog"!==this.role&&(t.preventDefault(),this.hide(t)),this.shown&&9===t.which&&h(this.dialog,t)},i.prototype._maintainFocus=function(t){this.shown&&!this.container.contains(t.target)&&s(this.dialog)},"undefined"!=typeof module&&void 0!==module.exports?module.exports=i:"function"==typeof define&&define.amd?define("A11yDialog",[],function(){return i}):"object"==typeof t&&(t.A11yDialog=i)}("undefined"!=typeof global?global:window);
+/*! a11y-dialog 5.4.0 — © Edenspiekermann */
+!function(t){"use strict";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.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){return NodeList.prototype.isPrototypeOf(t)?e(t):Element.prototype.isPrototypeOf(t)?[t]:"string"==typeof t?n(t):void 0}function s(t){var i=r(t),e=t.querySelector("[autofocus]")||i[0];e&&e.focus()}function r(t){return n(c.join(","),t).filter(function(t){return!!(t.offsetWidth||t.offsetHeight||t.getClientRects().length)})}function a(t,i){var e=r(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())}function h(t){var i=e(t.parentNode.childNodes),n=i.filter(function(t){return 1===t.nodeType});return n.splice(n.indexOf(t),1),n}var d,c=['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:not([tabindex^="-"]):not([inert])','video:not([tabindex^="-"]):not([inert])','[contenteditable]:not([tabindex^="-"]):not([inert])','[tabindex]:not([tabindex^="-"]):not([inert])'];i.prototype.create=function(t){return this._targets=this._targets||o(t)||h(this.container),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:(this.shown=!0,d=document.activeElement,this.useDialog?this.dialog.showModal(t instanceof Event?void 0:t):(this.dialog.setAttribute("open",""),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")})),s(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")})),d&&d.focus&&d.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.shown&&27===t.which&&"alertdialog"!==this.role&&(t.preventDefault(),this.hide(t)),this.shown&&9===t.which&&a(this.dialog,t)},i.prototype._maintainFocus=function(t){this.shown&&!this.container.contains(t.target)&&s(this.dialog)},"undefined"!=typeof module&&void 0!==module.exports?module.exports=i:"function"==typeof define&&define.amd?define("A11yDialog",[],function(){return i}):"object"==typeof t&&(t.A11yDialog=i)}("undefined"!=typeof global?global:window);

package.json

 {
   "name": "a11y-dialog",
-  "version": "5.3.2",
+  "version": "5.4.0",
   "description": "A tiny script to make dialog windows accessible to assistive technology users.",
@@ -5,0 +5,0 @@ "homepage": "https://github.com/edenspiekermann/a11y-dialog",

README.md

 # [A11y Dialog](http://edenspiekermann.github.io/a11y-dialog/)
 
-[a11y-dialog](http://edenspiekermann.github.io/a11y-dialog/) is a lightweight (1.4Kb) yet flexible script to create accessible dialog windows.
+[a11y-dialog](http://edenspiekermann.github.io/a11y-dialog/) is a lightweight (1.5Kb) yet flexible script to create accessible dialog windows.
 
@@ -44,6 +44,7 @@ ✔︎ No dependencies
   - It is not the actual dialog window, just the container with which the script interacts.
-  - It can have a different id than `my-accessible-dialog`, but it needs an `id`
-  anyway.
+  - It can have a different id than `my-accessible-dialog`, but it needs an `id` anyway.
+  - It can have a different class, or no class at all—as long as your CSS accounts for that.
+  - It should have an initial `aria-hidden="true"` to avoid a “flash of unhidden dialog” on page load.
 -->
-<div id="my-accessible-dialog">
+<div class="dialog-container" id="my-accessible-dialog" aria-hidden="true">
 
@@ -50,0 +51,0 @@ <!--

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

35363

increased by3.71%

Lines of code

439

increased by2.57%

Number of lines in readme file

267

increased by0.38%

No dependency changes