a11y-dialog
Version:
A tiny script to make dialog windows accessible to assistive technology users.
3 lines (2 loc) • 4.56 kB
JavaScript
/*! a11y-dialog 8.1.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 n(t){(t.querySelector("[autofocus]")||t).focus()}function o(t,e){if(e&&h(t))return t;if(function(t){return(!t.shadowRoot||"-1"!==t.getAttribute("tabindex"))&&!t.matches(":disabled,[hidden],[inert]")}(t))if(t.shadowRoot){let i=r(t.shadowRoot,e);for(;i;){const t=o(i,e);if(t)return t;i=d(i,e)}}else if("slot"===t.localName){const i=t.assignedElements({flatten:!0});e||i.reverse();for(const t of i){const i=o(t,e);if(i)return i}}else{let i=r(t,e);for(;i;){const t=o(i,e);if(t)return t;i=d(i,e)}}return!e&&h(t)?t:null}function r(t,e){return e?t.firstElementChild:t.lastElementChild}function d(t,e){return e?t.nextElementSibling:t.previousElementSibling}const h=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 a(t=document){const e=t.activeElement;return e?e.shadowRoot?a(e.shadowRoot)||document.activeElement:e:null}function l(t,e){const[i,s]=function(t){const e=o(t,!0);return[e,e?o(t,!1)||e:null]}(t);if(!i)return e.preventDefault();const n=a();e.shiftKey&&n===i?(s.focus(),e.preventDefault()):e.shiftKey||n!==s||(i.focus(),e.preventDefault())}function u(t,e){return function e(i){if(!i||i===document||i===window)return null;const s=c(i);return s&&(i=s),i.closest(t)||e(i.getRootNode().host)}(e)}function c(t){return t.assignedSlot||(t.parentNode?c(t.parentNode):null)}const f="data-a11y-dialog";class ${$el;id;previouslyFocused;shown;constructor(t){this.$el=t,this.id=this.$el.getAttribute(f)||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.fire("destroy").defaultPrevented||(this.hide(),document.removeEventListener("click",this.handleTriggerClicks,!0),this.$el.replaceWith(this.$el.cloneNode(!0))),this}show(t){if(this.shown)return this;return this.fire("show",t).defaultPrevented||(this.shown=!0,this.$el.removeAttribute("aria-hidden"),this.previouslyFocused=a(),"BODY"===this.previouslyFocused?.tagName&&t?.target&&(this.previouslyFocused=t.target),"focus"===t?.type?this.maintainFocus():n(this.$el),document.body.addEventListener("focus",this.maintainFocus,!0),this.$el.addEventListener("keydown",this.bindKeypress,!0)),this}hide(t){if(!this.shown)return this;return this.fire("hide",t).defaultPrevented||(this.shown=!1,this.$el.setAttribute("aria-hidden","true"),document.body.removeEventListener("focus",this.maintainFocus,!0),this.$el.removeEventListener("keydown",this.bindKeypress,!0),this.previouslyFocused?.focus?.()),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){const i=new CustomEvent(t,{detail:e,cancelable:!0});return this.$el.dispatchEvent(i),i}handleTriggerClicks(t){const e=t.composedPath()[0],i=u(`[${f}-show="${this.id}"]`,e),s=u(`[${f}-hide="${this.id}"]`,e),n=u(`[${f}-hide]`,e)&&u('[aria-modal="true"]',e)===this.$el;i&&this.show(t),(s||n)&&this.hide(t)}bindKeypress(t){if(u('[aria-modal="true"]',a())!==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(){const t=a();u(`[aria-modal="true"], [${f}-ignore-focus-trap]`,t)||n(this.$el)}}function m(){for(const t of document.querySelectorAll("[data-a11y-dialog]"))new $(t)}"undefined"!=typeof document&&("loading"===document.readyState?document.addEventListener("DOMContentLoaded",m):m());export{$ as default};