UNPKG

van11y-accessible-modal-window-aria

Version:

ES2015 accessible modal window system, using ARIA (compatible IE9+ when transpiled)

van11y.net/accessible-modal/

7 lines • 7 kB
1
2
3
4
5
6
7
/** * van11y-accessible-modal-window-aria - ES2015 accessible modal window system, using ARIA (compatible IE9+ when transpiled) * @version v2.5.1 * @link https://van11y.net/accessible-modal/ * @license MIT : https://github.com/nico3333fr/van11y-accessible-modal-window-aria/blob/master/LICENSE */ (f=>{var A="js-modal",c="label_modal_",r="modal",v="data-modal-background-click",C="data-modal-prefix-class",p="data-modal-text",h="data-modal-content-id",y="data-modal-describedby-id",k="data-modal-title",x="data-modal-focus-toid",I="data-modal-close-text",L="data-modal-close-title",T="data-modal-close-img",s="dialog",m="modal-close",E="js-modal-close",B="js-modal-close",j="data-content-back-id",M="data-focus-back",b="modal__wrapper",g="modal__content",P="js-modal-content",V="modal__closeimg",W="modal-close__text",u="modal-title",z="modal-title",G="a[href], area[href], input:not([type='hidden']):not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]",D="js-modal-page",_="js-modal",w="js-modal-overlay",o="modal-overlay",H="Close modal",N="data-background-click",n="invisible",S="no-scroll",J="role",Q="open",U="aria-labelledby",X="aria-describedby",q="aria-hidden",l="aria-haspopup",i="dialog",F=function(t){return f.getElementById(t)},Y=function(t,e){t.classList?t.classList.add(e):t.className+=" "+e},O=function(t,e){t.classList?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\b)"+e.split(" ").join("|")+"(\\b|$)","gi")," ")},R=function(t,e){return t.classList?t.classList.contains(e):new RegExp("(^| )"+e+"( |$)","gi").test(t.className)};function a(t){t.parentNode.removeChild(t)}function t(t){var e=!(1<arguments.length&&void 0!==arguments[1])||arguments[1];d(t).forEach(function(t){var e=Math.random().toString(32).slice(2,12),a=F(D),o=f.querySelector("body");if(t.getAttribute("id")||t.setAttribute("id",c+e),t.setAttribute(l,i),null===a||0===a.length){var e=f.createElement("DIV"),n=(e.setAttribute("id",D),o),d=e;for("string"==typeof d&&(d=document.createElement(d)),n.appendChild(d);n.firstChild!==d;)d.appendChild(n.firstChild)}}),e&&["click","keydown"].forEach(function(g){f.body.addEventListener(g,function(t){var e,a,o,n,d,c,l,i,r,s,u,m=$(t.target,A),b=(!0!==R(t.target,A)&&""===m||"click"!==g||(n=f.querySelector("body"),e=!0===(m=""!==m?F(m):t.target).hasAttribute(C)?m.getAttribute(C)+"-":"",b=!0===m.hasAttribute(p)?m.getAttribute(p):"",l=!0===m.hasAttribute(h)?m.getAttribute(h):"",u=!0===m.hasAttribute(y)?m.getAttribute(y):"",a=!0===m.hasAttribute(k)?m.getAttribute(k):"",i=!0===m.hasAttribute(I)?m.getAttribute(I):H,r=!0===m.hasAttribute(L)?m.getAttribute(L):i,s=!0===m.hasAttribute(T)?m.getAttribute(T):"",c=!0===m.hasAttribute(v)?m.getAttribute(v):"",d=!0===m.hasAttribute(x)?m.getAttribute(x):"",o=F(D),n.insertAdjacentHTML("beforeEnd",Z({text:r,backgroundEnabled:c,prefixClass:e})),n.insertAdjacentHTML("beforeEnd",tt({modalText:b,modalPrefixClass:e,backgroundEnabled:l,modalTitle:a,modalCloseText:i,modalCloseTitle:r,modalCloseImgPath:s,modalContentId:l,modalDescribedById:u,modalFocusBackId:m.getAttribute("id")})),o.setAttribute(q,"true"),Y(n,S),c=F(E),(""!==d&&F(d)||c).focus(),t.preventDefault()),$(t.target,B));t.target.getAttribute("id")!==E&&""===b&&t.target.getAttribute("id")!==w&&!0!==R(t.target,B)||"click"!==g||(e=f.querySelector("body"),a=F(D),i=F(_),r=F(P)?F(P).innerHTML:"",s=F(w),u=(l=F(E)).getAttribute(M),m=l.getAttribute(j),o=s.getAttribute(N),t.target.getAttribute("id")===w&&"disabled"===o)||(K({modal:i,modalContent:r,overlay:s,modalFocusBackId:u,contentBackId:m,backgroundEnabled:o,fromId:t.target.getAttribute("id")}),a.removeAttribute(q),O(e,S)),F(_)&&"keydown"===g&&(n=f.querySelector("body"),d=F(D),c=F(_),b=F(P)?F(P).innerHTML:"",l=F(w),r=(i=F(E)).getAttribute(M),s=i.getAttribute(j),u=[].slice.call(c.querySelectorAll(G)),27===t.keyCode&&(K({modal:c,modalContent:b,overlay:l,modalFocusBackId:r,contentBackId:s}),d.removeAttribute(q),O(n,S)),9===t.keyCode&&0<=u.indexOf(t.target)&&(t.shiftKey?t.target===u[0]&&(u[u.length-1].focus(),t.preventDefault()):t.target===u[u.length-1]&&(u[0].focus(),t.preventDefault())),9===t.keyCode)&&-1===u.indexOf(t.target)&&(t.preventDefault(),u[0].focus())},!0)})}function e(){t(),document.removeEventListener("DOMContentLoaded",e)}var $=function(t,e){for(var a=!1,o=t.parentNode;o&&!1===a;)!0===R(o,e)?a=!0:o=o.parentNode;return!0===a?o.getAttribute("id"):""},Z=function(t){var e=t.text||H,a=t.prefixClass+o,t="disabled"===t.backgroundEnabled?"disabled":"enabled";return'<span\n id="'.concat(w,'"\n class="').concat(a,'"\n ').concat(N,'="').concat(t,'"\n title="').concat(e,'"\n >\n <span class="').concat(n,'">').concat(e,"</span>\n </span>")},tt=function(t){var e=_,a=t.modalPrefixClass+r,o=t.modalPrefixClass+b,n=t.modalPrefixClass+m,d=t.modalCloseImgPath?'<img src="'.concat(t.modalCloseImgPath,'" alt="').concat(t.modalCloseText,'" class="').concat(t.modalPrefixClass).concat(V,'" />'):'<span class="'.concat(t.modalPrefixClass).concat(W,'">\n ').concat(t.modalCloseText,"\n </span>"),c=t.modalPrefixClass+g,l=t.modalPrefixClass+z,l=""!==t.modalTitle?'<h1 id="'.concat(u,'" class="').concat(l,'">\n ').concat(t.modalTitle,"\n </h1>"):"",n='<button type="button" class="'.concat(B," ").concat(n,'" id="').concat(E,'" title="').concat(t.modalCloseTitle,'" ').concat(j,'="').concat(t.modalContentId,'" ').concat(M,'="').concat(t.modalFocusBackId,'">\n ').concat(d,"\n </button>"),d=t.modalText,i=""!==t.modalDescribedById?"".concat(X,'="').concat(t.modalDescribedById,'"'):"";return""===d&&t.modalContentId&&(t=F(t.modalContentId))&&(d='<div id="'.concat(P,'">\n ').concat(t.innerHTML,"\n </div"),t.innerHTML=""),'<dialog id="'.concat(e,'" class="').concat(a,'" ').concat(J,'="').concat(s,'" ').concat(i," ").concat(Q," ").concat(U,'="').concat(u,'">\n <div role="document" class="').concat(o,'">\n ').concat(n,'\n <div class="').concat(c,'">\n ').concat(l,"\n ").concat(d,"\n </div>\n </div>\n </dialog>")},K=function(t){var e;a(t.modal),a(t.overlay),""!==t.contentBackId&&(e=F(t.contentBackId))&&(e.innerHTML=t.modalContent),t.modalFocusBackId&&(e=F(t.modalFocusBackId))&&e.focus()},d=function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:f;return[].slice.call(t.querySelectorAll("."+A))};document.addEventListener("DOMContentLoaded",e),window.van11yAccessibleModalWindowAria=t})(document);