a11y-accordion-component/dist/a11y-accordion-component.min.js

Accessible Accordion Component in Vanilla JS

!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{("undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this).Accordions=e()}}(function(){return function(){return function e(t,i,r){function n(s,a){if(!i[s]){if(!t[s]){var u="function"==typeof require&&require;if(!a&&u)return u(s,!0);if(o)return o(s,!0);var c=new Error("Cannot find module '"+s+"'");throw c.code="MODULE_NOT_FOUND",c}var l=i[s]={exports:{}};t[s][0].call(l.exports,function(e){var i=t[s][1][e];return n(i||e)},l,l.exports,e,t,i,r)}return i[s].exports}for(var o="function"==typeof require&&require,s=0;s<r.length;s++)n(r[s]);return n}}()({1:[function(e,t,i){"use strict";Object.defineProperty(i,"__esModule",{value:!0});var r=function(){return function(e,t){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e))return function(e,t){var i=[],r=!0,n=!1,o=void 0;try{for(var s,a=e[Symbol.iterator]();!(r=(s=a.next()).done)&&(i.push(s.value),!t||i.length!==t);r=!0);}catch(e){n=!0,o=e}finally{try{!r&&a.return&&a.return()}finally{if(n)throw o}}return i}(e,t);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),n=function(){function e(e,t){for(var i=0;i<t.length;i++){var r=t[i];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,i,r){return i&&e(t.prototype,i),r&&e(t,r),t}}();var o,s,a,u,c,l,d,h,f,g,v=(o=13,s=32,a=33,u=34,c=35,l=36,d=38,h=40,f=function(){function e(t){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.accordion=t.accordion,this.triggers=this.queryFilter(this.accordion.querySelectorAll("[data-controls]"));var i=r(this.triggers,1);this.firstTrigger=i[0],this.lastTrigger=this.triggers[this.triggers.length-1],this.state=[],this.currentFocusedIndex=null,this.isMultiSelectable=t.isMultiSelectable,this.isCollapsible=t.isCollapsible,this.onFocus=this.onFocus.bind(this),this.onClick=this.onClick.bind(this),this.onKeydown=this.onKeydown.bind(this)}return n(e,[{key:"queryFilter",value:function(e){var t=this,i=[],r=void 0;return e.forEach(function(e){for(r=e.parentNode;r!==t.accordion;){if(r.dataset.component===t.accordion.dataset.component)return;r=r.parentNode}i.push(e)}),i}},{key:"setState",value:function(e){var t=this;this.state.forEach(function(i){e.currentTarget===i.trigger?t.isCollapsible?i.isExpanded=!i.isExpanded:(i.isDisabled=!0,i.isExpanded=!0):(t.isMultiSelectable||(i.isExpanded=!1),t.isCollapsible||(i.isDisabled=!1))}),this.updateAttributes(e)}},{key:"onFocus",value:function(e){var t=this;this.state.forEach(function(i,r){e.target===i.trigger&&(t.currentFocusedIndex=r)})}},{key:"setFocus",value:function(e){e.target.hasAttribute("data-controls")?(e.preventDefault(),e.stopPropagation(),e.which!==d&&e.which!==a||this.state[this.currentFocusedIndex].prevTrigger.focus(),e.which!==h&&e.which!==u||this.state[this.currentFocusedIndex].nextTrigger.focus(),e.which===l&&this.firstTrigger.focus(),e.which===c&&this.lastTrigger.focus()):(e.which!==a&&e.which!==u||(e.preventDefault(),e.stopPropagation()),e.which===a&&this.state[this.currentFocusedIndex].trigger.focus(),e.which===u&&this.state[this.currentFocusedIndex].nextTrigger.focus())}},{key:"addAttributes",value:function(){this.accordion.setAttribute("role","presentation"),this.state.forEach(function(e){e.trigger.setAttribute("role","button"),e.trigger.setAttribute("tabindex",0),e.trigger.setAttribute("aria-controls",e.trigger.dataset.controls),e.panel.setAttribute("role","region"),e.panel.setAttribute("tabindex",-1),e.panel.setAttribute("aria-labelledby",e.trigger.id)})}},{key:"updateAttributes",value:function(e){e&&e.preventDefault(),this.state.forEach(function(e){e.trigger.setAttribute("aria-expanded",e.isExpanded),e.trigger.setAttribute("aria-disabled",e.isDisabled),e.panel.setAttribute("aria-hidden",!e.isExpanded)})}},{key:"removeAttributes",value:function(){delete this.accordion.dataset.component,this.accordion.removeAttribute("role"),this.state.forEach(function(e){e.trigger.removeAttribute("role"),e.trigger.removeAttribute("tabindex"),e.trigger.removeAttribute("aria-controls"),e.trigger.removeAttribute("aria-expanded"),e.trigger.removeAttribute("aria-disabled"),e.panel.removeAttribute("role"),e.panel.removeAttribute("tabindex"),e.panel.removeAttribute("aria-hidden"),e.panel.removeAttribute("aria-labelledby")})}},{key:"onClick",value:function(e){this.setState(e)}},{key:"onKeydown",value:function(e){e.which===o&&e.target.hasAttribute("data-controls")&&this.setState(e),e.which===s&&e.target.hasAttribute("data-controls")&&this.setState(e),e.which===d&&this.setFocus(e),e.which===h&&this.setFocus(e),e.which===l&&this.setFocus(e),e.which===c&&this.setFocus(e),e.which===a&&this.setFocus(e),e.which===u&&this.setFocus(e)}},{key:"addEventListeners",value:function(e,t){e.addEventListener("focus",this.onFocus),e.addEventListener("click",this.onClick),e.addEventListener("keydown",this.onKeydown),t.addEventListener("keydown",this.onKeydown)}},{key:"removeEventListeners",value:function(e,t){e.removeEventListener("focus",this.onFocus),e.removeEventListener("click",this.onClick),e.removeEventListener("keydown",this.onKeydown),t.removeEventListener("keydown",this.onKeydown)}},{key:"destroy",value:function(){var e=this;this.state.forEach(function(t){e.removeEventListeners(t.trigger,t.panel)}),this.removeAttributes()}},{key:"render",value:function(){var e=this,t=void 0,i=void 0;this.triggers.forEach(function(r,n){t=document.getElementById(r.dataset.controls),(i="true"===r.dataset.open)&&(e.currentFocusedIndex=n),e.state.push({trigger:r,prevTrigger:e.triggers[n-1]||e.lastTrigger,nextTrigger:e.triggers[n+1]||e.firstTrigger,panel:t,isExpanded:i,isDisabled:!e.isCollapsible&&i}),e.addEventListeners(r,t)}),this.addAttributes(),this.updateAttributes()}}]),e}(),g=[],{render:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},i=t.isMultiSelectable,r=void 0===i||i,n=t.isCollapsible,o=void 0===n||n,s=document.getElementById(e),a={accordion:s,isMultiSelectable:r,isCollapsible:o};s.dataset.component="accordion";var u=new f(a);u.render(),g.push(u)},destroy:function(e){g.forEach(function(t,i){e===t.accordion.id&&(t.destroy(),g.splice(i,1))})},init:function(){var e={};document.querySelectorAll('[data-component="accordion"]').forEach(function(t){e.accordion=t,e.isMultiSelectable="false"!==t.dataset.multiselectable,e.isCollapsible="false"!==t.dataset.collapsible,new f(e).render()})}});i.default=v},{}]},{},[1])(1)});