a11y-dialog - npm Package Compare versions

Comparing version 8.0.3 to 8.0.4

dist/a11y-dialog.esm.js

@@ -365,2 +365,13 @@ const not = {
         }
+        let hasOpenPopover = false;
+        try {
+            hasOpenPopover = !!this.$el.querySelector('[popover]:not([popover="manual"]):popover-open');
+        }
+        catch {
+            // Run that DOM query in a try/catch because not all browsers support the
+            // `:popover-open` selector, which would cause the whole expression to
+            // fail
+            // See: https://caniuse.com/mdn-css_selectors_popover-open
+            // See: https://github.com/KittyGiraudel/a11y-dialog/pull/578#discussion_r1343215149
+        }
         // If the dialog is shown and the ESC key is pressed, prevent any further
@@ -372,3 +383,3 @@ // effects from the ESC key and hide the dialog, unless:
             this.$el.getAttribute('role') !== 'alertdialog' &&
-            !this.$el.querySelector('[popover]:not([popover="manual"]):popover-open')) {
+            !hasOpenPopover) {
             event.preventDefault();
@@ -375,0 +386,0 @@ this.hide(event);

dist/a11y-dialog.esm.min.js

@@ -1,2 +0,2 @@
-/*! a11y-dialog 8.0.3 — © Kitty Giraudel */
-const t=":not([inert]):not([inert] *)",e=':not([tabindex^="-"])',i=":not(:disabled)";var s=[`a[href]${t}${e}`,`area[href]${t}${e}`,`input:not([type="hidden"]):not([type="radio"])${t}${e}${i}`,`input[type="radio"]${t}${e}${i}`,`select${t}${e}${i}`,`textarea${t}${e}${i}`,`button${t}${e}${i}`,`details${t} > summary:first-of-type${e}`,`iframe${t}${e}`,`audio[controls]${t}${e}`,`video[controls]${t}${e}`,`[contenteditable]${t}${e}`,`[tabindex]${t}${e}`];function o(t){(t.querySelector("[autofocus]")||t).focus()}function n(t,e){if(e&&d(t))return t;if(!((i=t).shadowRoot&&"-1"===i.getAttribute("tabindex")||i.matches(":disabled,[hidden],[inert]")))if(t.shadowRoot){let i=r(t.shadowRoot,e);for(;i;){const t=n(i,e);if(t)return t;i=a(i,e)}}else if("slot"===t.localName){const i=t.assignedElements({flatten:!0});e||i.reverse();for(const t of i){const i=n(t,e);if(i)return i}}else{let i=r(t,e);for(;i;){const t=n(i,e);if(t)return t;i=a(i,e)}}var i;return!e&&d(t)?t:null}function r(t,e){return e?t.firstElementChild:t.lastElementChild}function a(t,e){return e?t.nextElementSibling:t.previousElementSibling}const d=t=>!t.shadowRoot?.delegatesFocus&&(t.matches(s.join(","))&&!(t=>!(!t.matches("details:not([open]) *")||t.matches("details>summary:first-of-type"))||!(t.offsetWidth||t.offsetHeight||t.getClientRects().length))(t));function h(t=document){const e=t.activeElement;return e?e.shadowRoot?h(e.shadowRoot)||document.activeElement:e:null}function l(t,e){const[i,s]=function(t){const e=n(t,!0);return[e,e?n(t,!1)||e:null]}(t);if(!i)return e.preventDefault();const o=h();e.shiftKey&&o===i?(s.focus(),e.preventDefault()):e.shiftKey||o!==s||(i.focus(),e.preventDefault())}class u{$el;id;previouslyFocused;shown;constructor(t){this.$el=t,this.id=this.$el.getAttribute("data-a11y-dialog")||this.$el.id,this.previouslyFocused=null,this.shown=!1,this.maintainFocus=this.maintainFocus.bind(this),this.bindKeypress=this.bindKeypress.bind(this),this.handleTriggerClicks=this.handleTriggerClicks.bind(this),this.show=this.show.bind(this),this.hide=this.hide.bind(this),this.$el.setAttribute("aria-hidden","true"),this.$el.setAttribute("aria-modal","true"),this.$el.setAttribute("tabindex","-1"),this.$el.hasAttribute("role")||this.$el.setAttribute("role","dialog"),document.addEventListener("click",this.handleTriggerClicks,!0)}destroy(){return this.hide(),document.removeEventListener("click",this.handleTriggerClicks,!0),this.$el.replaceWith(this.$el.cloneNode(!0)),this.fire("destroy"),this}show(t){return this.shown||(this.shown=!0,this.$el.removeAttribute("aria-hidden"),this.previouslyFocused=h(),"BODY"===this.previouslyFocused?.tagName&&t?.target&&(this.previouslyFocused=t.target),"focus"===t?.type?this.maintainFocus(t):o(this.$el),document.body.addEventListener("focus",this.maintainFocus,!0),this.$el.addEventListener("keydown",this.bindKeypress,!0),this.fire("show",t)),this}hide(t){return this.shown?(this.shown=!1,this.$el.setAttribute("aria-hidden","true"),this.previouslyFocused?.focus?.(),document.body.removeEventListener("focus",this.maintainFocus,!0),this.$el.removeEventListener("keydown",this.bindKeypress,!0),this.fire("hide",t),this):this}on(t,e,i){return this.$el.addEventListener(t,e,i),this}off(t,e,i){return this.$el.removeEventListener(t,e,i),this}fire(t,e){this.$el.dispatchEvent(new CustomEvent(t,{detail:e,cancelable:!0}))}handleTriggerClicks(t){const e=t.target;e.closest(`[data-a11y-dialog-show="${this.id}"]`)&&this.show(t),(e.closest(`[data-a11y-dialog-hide="${this.id}"]`)||e.closest("[data-a11y-dialog-hide]")&&e.closest('[aria-modal="true"]')===this.$el)&&this.hide(t)}bindKeypress(t){document.activeElement?.closest('[aria-modal="true"]')===this.$el&&("Escape"!==t.key||"alertdialog"===this.$el.getAttribute("role")||this.$el.querySelector('[popover]:not([popover="manual"]):popover-open')||(t.preventDefault(),this.hide(t)),"Tab"===t.key&&l(this.$el,t))}maintainFocus(t){t.target.closest('[aria-modal="true"], [data-a11y-dialog-ignore-focus-trap]')||o(this.$el)}}function c(){for(const t of document.querySelectorAll("[data-a11y-dialog]"))new u(t)}"undefined"!=typeof document&&("loading"===document.readyState?document.addEventListener("DOMContentLoaded",c):c());export{u as default};
+/*! a11y-dialog 8.0.4 — © Kitty Giraudel */
+const t=":not([inert]):not([inert] *)",e=':not([tabindex^="-"])',i=":not(:disabled)";var s=[`a[href]${t}${e}`,`area[href]${t}${e}`,`input:not([type="hidden"]):not([type="radio"])${t}${e}${i}`,`input[type="radio"]${t}${e}${i}`,`select${t}${e}${i}`,`textarea${t}${e}${i}`,`button${t}${e}${i}`,`details${t} > summary:first-of-type${e}`,`iframe${t}${e}`,`audio[controls]${t}${e}`,`video[controls]${t}${e}`,`[contenteditable]${t}${e}`,`[tabindex]${t}${e}`];function o(t){(t.querySelector("[autofocus]")||t).focus()}function n(t,e){if(e&&d(t))return t;if(!((i=t).shadowRoot&&"-1"===i.getAttribute("tabindex")||i.matches(":disabled,[hidden],[inert]")))if(t.shadowRoot){let i=r(t.shadowRoot,e);for(;i;){const t=n(i,e);if(t)return t;i=a(i,e)}}else if("slot"===t.localName){const i=t.assignedElements({flatten:!0});e||i.reverse();for(const t of i){const i=n(t,e);if(i)return i}}else{let i=r(t,e);for(;i;){const t=n(i,e);if(t)return t;i=a(i,e)}}var i;return!e&&d(t)?t:null}function r(t,e){return e?t.firstElementChild:t.lastElementChild}function a(t,e){return e?t.nextElementSibling:t.previousElementSibling}const d=t=>!t.shadowRoot?.delegatesFocus&&(t.matches(s.join(","))&&!(t=>!(!t.matches("details:not([open]) *")||t.matches("details>summary:first-of-type"))||!(t.offsetWidth||t.offsetHeight||t.getClientRects().length))(t));function h(t=document){const e=t.activeElement;return e?e.shadowRoot?h(e.shadowRoot)||document.activeElement:e:null}function l(t,e){const[i,s]=function(t){const e=n(t,!0);return[e,e?n(t,!1)||e:null]}(t);if(!i)return e.preventDefault();const o=h();e.shiftKey&&o===i?(s.focus(),e.preventDefault()):e.shiftKey||o!==s||(i.focus(),e.preventDefault())}class u{$el;id;previouslyFocused;shown;constructor(t){this.$el=t,this.id=this.$el.getAttribute("data-a11y-dialog")||this.$el.id,this.previouslyFocused=null,this.shown=!1,this.maintainFocus=this.maintainFocus.bind(this),this.bindKeypress=this.bindKeypress.bind(this),this.handleTriggerClicks=this.handleTriggerClicks.bind(this),this.show=this.show.bind(this),this.hide=this.hide.bind(this),this.$el.setAttribute("aria-hidden","true"),this.$el.setAttribute("aria-modal","true"),this.$el.setAttribute("tabindex","-1"),this.$el.hasAttribute("role")||this.$el.setAttribute("role","dialog"),document.addEventListener("click",this.handleTriggerClicks,!0)}destroy(){return this.hide(),document.removeEventListener("click",this.handleTriggerClicks,!0),this.$el.replaceWith(this.$el.cloneNode(!0)),this.fire("destroy"),this}show(t){return this.shown||(this.shown=!0,this.$el.removeAttribute("aria-hidden"),this.previouslyFocused=h(),"BODY"===this.previouslyFocused?.tagName&&t?.target&&(this.previouslyFocused=t.target),"focus"===t?.type?this.maintainFocus(t):o(this.$el),document.body.addEventListener("focus",this.maintainFocus,!0),this.$el.addEventListener("keydown",this.bindKeypress,!0),this.fire("show",t)),this}hide(t){return this.shown?(this.shown=!1,this.$el.setAttribute("aria-hidden","true"),this.previouslyFocused?.focus?.(),document.body.removeEventListener("focus",this.maintainFocus,!0),this.$el.removeEventListener("keydown",this.bindKeypress,!0),this.fire("hide",t),this):this}on(t,e,i){return this.$el.addEventListener(t,e,i),this}off(t,e,i){return this.$el.removeEventListener(t,e,i),this}fire(t,e){this.$el.dispatchEvent(new CustomEvent(t,{detail:e,cancelable:!0}))}handleTriggerClicks(t){const e=t.target;e.closest(`[data-a11y-dialog-show="${this.id}"]`)&&this.show(t),(e.closest(`[data-a11y-dialog-hide="${this.id}"]`)||e.closest("[data-a11y-dialog-hide]")&&e.closest('[aria-modal="true"]')===this.$el)&&this.hide(t)}bindKeypress(t){if(document.activeElement?.closest('[aria-modal="true"]')!==this.$el)return;let e=!1;try{e=!!this.$el.querySelector('[popover]:not([popover="manual"]):popover-open')}catch{}"Escape"!==t.key||"alertdialog"===this.$el.getAttribute("role")||e||(t.preventDefault(),this.hide(t)),"Tab"===t.key&&l(this.$el,t)}maintainFocus(t){t.target.closest('[aria-modal="true"], [data-a11y-dialog-ignore-focus-trap]')||o(this.$el)}}function c(){for(const t of document.querySelectorAll("[data-a11y-dialog]"))new u(t)}"undefined"!=typeof document&&("loading"===document.readyState?document.addEventListener("DOMContentLoaded",c):c());export{u as default};

dist/a11y-dialog.js

@@ -371,2 +371,13 @@ (function (global, factory) {
           }
+          let hasOpenPopover = false;
+          try {
+              hasOpenPopover = !!this.$el.querySelector('[popover]:not([popover="manual"]):popover-open');
+          }
+          catch {
+              // Run that DOM query in a try/catch because not all browsers support the
+              // `:popover-open` selector, which would cause the whole expression to
+              // fail
+              // See: https://caniuse.com/mdn-css_selectors_popover-open
+              // See: https://github.com/KittyGiraudel/a11y-dialog/pull/578#discussion_r1343215149
+          }
           // If the dialog is shown and the ESC key is pressed, prevent any further
@@ -378,3 +389,3 @@ // effects from the ESC key and hide the dialog, unless:
               this.$el.getAttribute('role') !== 'alertdialog' &&
-              !this.$el.querySelector('[popover]:not([popover="manual"]):popover-open')) {
+              !hasOpenPopover) {
               event.preventDefault();
@@ -381,0 +392,0 @@ this.hide(event);

dist/a11y-dialog.min.js

@@ -1,2 +0,2 @@
-/*! a11y-dialog 8.0.3 — © Kitty Giraudel */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).A11yDialog=t()}(this,(function(){"use strict";const e=":not([inert]):not([inert] *)",t=':not([tabindex^="-"])',i=":not(:disabled)";var s=[`a[href]${e}${t}`,`area[href]${e}${t}`,`input:not([type="hidden"]):not([type="radio"])${e}${t}${i}`,`input[type="radio"]${e}${t}${i}`,`select${e}${t}${i}`,`textarea${e}${t}${i}`,`button${e}${t}${i}`,`details${e} > summary:first-of-type${t}`,`iframe${e}${t}`,`audio[controls]${e}${t}`,`video[controls]${e}${t}`,`[contenteditable]${e}${t}`,`[tabindex]${e}${t}`];function o(e){(e.querySelector("[autofocus]")||e).focus()}function n(e,t){if(t&&d(e))return e;if(!((i=e).shadowRoot&&"-1"===i.getAttribute("tabindex")||i.matches(":disabled,[hidden],[inert]")))if(e.shadowRoot){let i=r(e.shadowRoot,t);for(;i;){const e=n(i,t);if(e)return e;i=a(i,t)}}else if("slot"===e.localName){const i=e.assignedElements({flatten:!0});t||i.reverse();for(const e of i){const i=n(e,t);if(i)return i}}else{let i=r(e,t);for(;i;){const e=n(i,t);if(e)return e;i=a(i,t)}}var i;return!t&&d(e)?e:null}function r(e,t){return t?e.firstElementChild:e.lastElementChild}function a(e,t){return t?e.nextElementSibling:e.previousElementSibling}const d=e=>!e.shadowRoot?.delegatesFocus&&(e.matches(s.join(","))&&!(e=>!(!e.matches("details:not([open]) *")||e.matches("details>summary:first-of-type"))||!(e.offsetWidth||e.offsetHeight||e.getClientRects().length))(e));function l(e=document){const t=e.activeElement;return t?t.shadowRoot?l(t.shadowRoot)||document.activeElement:t:null}function h(e,t){const[i,s]=function(e){const t=n(e,!0);return[t,t?n(e,!1)||t:null]}(e);if(!i)return t.preventDefault();const o=l();t.shiftKey&&o===i?(s.focus(),t.preventDefault()):t.shiftKey||o!==s||(i.focus(),t.preventDefault())}class u{$el;id;previouslyFocused;shown;constructor(e){this.$el=e,this.id=this.$el.getAttribute("data-a11y-dialog")||this.$el.id,this.previouslyFocused=null,this.shown=!1,this.maintainFocus=this.maintainFocus.bind(this),this.bindKeypress=this.bindKeypress.bind(this),this.handleTriggerClicks=this.handleTriggerClicks.bind(this),this.show=this.show.bind(this),this.hide=this.hide.bind(this),this.$el.setAttribute("aria-hidden","true"),this.$el.setAttribute("aria-modal","true"),this.$el.setAttribute("tabindex","-1"),this.$el.hasAttribute("role")||this.$el.setAttribute("role","dialog"),document.addEventListener("click",this.handleTriggerClicks,!0)}destroy(){return this.hide(),document.removeEventListener("click",this.handleTriggerClicks,!0),this.$el.replaceWith(this.$el.cloneNode(!0)),this.fire("destroy"),this}show(e){return this.shown||(this.shown=!0,this.$el.removeAttribute("aria-hidden"),this.previouslyFocused=l(),"BODY"===this.previouslyFocused?.tagName&&e?.target&&(this.previouslyFocused=e.target),"focus"===e?.type?this.maintainFocus(e):o(this.$el),document.body.addEventListener("focus",this.maintainFocus,!0),this.$el.addEventListener("keydown",this.bindKeypress,!0),this.fire("show",e)),this}hide(e){return this.shown?(this.shown=!1,this.$el.setAttribute("aria-hidden","true"),this.previouslyFocused?.focus?.(),document.body.removeEventListener("focus",this.maintainFocus,!0),this.$el.removeEventListener("keydown",this.bindKeypress,!0),this.fire("hide",e),this):this}on(e,t,i){return this.$el.addEventListener(e,t,i),this}off(e,t,i){return this.$el.removeEventListener(e,t,i),this}fire(e,t){this.$el.dispatchEvent(new CustomEvent(e,{detail:t,cancelable:!0}))}handleTriggerClicks(e){const t=e.target;t.closest(`[data-a11y-dialog-show="${this.id}"]`)&&this.show(e),(t.closest(`[data-a11y-dialog-hide="${this.id}"]`)||t.closest("[data-a11y-dialog-hide]")&&t.closest('[aria-modal="true"]')===this.$el)&&this.hide(e)}bindKeypress(e){document.activeElement?.closest('[aria-modal="true"]')===this.$el&&("Escape"!==e.key||"alertdialog"===this.$el.getAttribute("role")||this.$el.querySelector('[popover]:not([popover="manual"]):popover-open')||(e.preventDefault(),this.hide(e)),"Tab"===e.key&&h(this.$el,e))}maintainFocus(e){e.target.closest('[aria-modal="true"], [data-a11y-dialog-ignore-focus-trap]')||o(this.$el)}}function c(){for(const e of document.querySelectorAll("[data-a11y-dialog]"))new u(e)}return"undefined"!=typeof document&&("loading"===document.readyState?document.addEventListener("DOMContentLoaded",c):c()),u}));
+/*! a11y-dialog 8.0.4 — © Kitty Giraudel */
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).A11yDialog=e()}(this,(function(){"use strict";const t=":not([inert]):not([inert] *)",e=':not([tabindex^="-"])',i=":not(:disabled)";var s=[`a[href]${t}${e}`,`area[href]${t}${e}`,`input:not([type="hidden"]):not([type="radio"])${t}${e}${i}`,`input[type="radio"]${t}${e}${i}`,`select${t}${e}${i}`,`textarea${t}${e}${i}`,`button${t}${e}${i}`,`details${t} > summary:first-of-type${e}`,`iframe${t}${e}`,`audio[controls]${t}${e}`,`video[controls]${t}${e}`,`[contenteditable]${t}${e}`,`[tabindex]${t}${e}`];function o(t){(t.querySelector("[autofocus]")||t).focus()}function n(t,e){if(e&&d(t))return t;if(!((i=t).shadowRoot&&"-1"===i.getAttribute("tabindex")||i.matches(":disabled,[hidden],[inert]")))if(t.shadowRoot){let i=r(t.shadowRoot,e);for(;i;){const t=n(i,e);if(t)return t;i=a(i,e)}}else if("slot"===t.localName){const i=t.assignedElements({flatten:!0});e||i.reverse();for(const t of i){const i=n(t,e);if(i)return i}}else{let i=r(t,e);for(;i;){const t=n(i,e);if(t)return t;i=a(i,e)}}var i;return!e&&d(t)?t:null}function r(t,e){return e?t.firstElementChild:t.lastElementChild}function a(t,e){return e?t.nextElementSibling:t.previousElementSibling}const d=t=>!t.shadowRoot?.delegatesFocus&&(t.matches(s.join(","))&&!(t=>!(!t.matches("details:not([open]) *")||t.matches("details>summary:first-of-type"))||!(t.offsetWidth||t.offsetHeight||t.getClientRects().length))(t));function l(t=document){const e=t.activeElement;return e?e.shadowRoot?l(e.shadowRoot)||document.activeElement:e:null}function h(t,e){const[i,s]=function(t){const e=n(t,!0);return[e,e?n(t,!1)||e:null]}(t);if(!i)return e.preventDefault();const o=l();e.shiftKey&&o===i?(s.focus(),e.preventDefault()):e.shiftKey||o!==s||(i.focus(),e.preventDefault())}class u{$el;id;previouslyFocused;shown;constructor(t){this.$el=t,this.id=this.$el.getAttribute("data-a11y-dialog")||this.$el.id,this.previouslyFocused=null,this.shown=!1,this.maintainFocus=this.maintainFocus.bind(this),this.bindKeypress=this.bindKeypress.bind(this),this.handleTriggerClicks=this.handleTriggerClicks.bind(this),this.show=this.show.bind(this),this.hide=this.hide.bind(this),this.$el.setAttribute("aria-hidden","true"),this.$el.setAttribute("aria-modal","true"),this.$el.setAttribute("tabindex","-1"),this.$el.hasAttribute("role")||this.$el.setAttribute("role","dialog"),document.addEventListener("click",this.handleTriggerClicks,!0)}destroy(){return this.hide(),document.removeEventListener("click",this.handleTriggerClicks,!0),this.$el.replaceWith(this.$el.cloneNode(!0)),this.fire("destroy"),this}show(t){return this.shown||(this.shown=!0,this.$el.removeAttribute("aria-hidden"),this.previouslyFocused=l(),"BODY"===this.previouslyFocused?.tagName&&t?.target&&(this.previouslyFocused=t.target),"focus"===t?.type?this.maintainFocus(t):o(this.$el),document.body.addEventListener("focus",this.maintainFocus,!0),this.$el.addEventListener("keydown",this.bindKeypress,!0),this.fire("show",t)),this}hide(t){return this.shown?(this.shown=!1,this.$el.setAttribute("aria-hidden","true"),this.previouslyFocused?.focus?.(),document.body.removeEventListener("focus",this.maintainFocus,!0),this.$el.removeEventListener("keydown",this.bindKeypress,!0),this.fire("hide",t),this):this}on(t,e,i){return this.$el.addEventListener(t,e,i),this}off(t,e,i){return this.$el.removeEventListener(t,e,i),this}fire(t,e){this.$el.dispatchEvent(new CustomEvent(t,{detail:e,cancelable:!0}))}handleTriggerClicks(t){const e=t.target;e.closest(`[data-a11y-dialog-show="${this.id}"]`)&&this.show(t),(e.closest(`[data-a11y-dialog-hide="${this.id}"]`)||e.closest("[data-a11y-dialog-hide]")&&e.closest('[aria-modal="true"]')===this.$el)&&this.hide(t)}bindKeypress(t){if(document.activeElement?.closest('[aria-modal="true"]')!==this.$el)return;let e=!1;try{e=!!this.$el.querySelector('[popover]:not([popover="manual"]):popover-open')}catch{}"Escape"!==t.key||"alertdialog"===this.$el.getAttribute("role")||e||(t.preventDefault(),this.hide(t)),"Tab"===t.key&&h(this.$el,t)}maintainFocus(t){t.target.closest('[aria-modal="true"], [data-a11y-dialog-ignore-focus-trap]')||o(this.$el)}}function c(){for(const t of document.querySelectorAll("[data-a11y-dialog]"))new u(t)}return"undefined"!=typeof document&&("loading"===document.readyState?document.addEventListener("DOMContentLoaded",c):c()),u}));

package.json

 {
   "name": "a11y-dialog",
   "type": "module",
-  "version": "8.0.3",
+  "version": "8.0.4",
   "description": "A tiny script to make dialog windows accessible to assistive technology users.",
@@ -6,0 +6,0 @@ "homepage": "https://a11y-dialog.netlify.app/",

No alert changes

Improved metrics

Total package byte prevSize

50509

increased by2.16%

Lines of code

950

increased by2.37%

No dependency changes