From 9c1c150d3afb44d3d701ad91cb349cf987b54245 Mon Sep 17 00:00:00 2001 From: 2kool2 Date: Tue, 13 Sep 2016 17:44:13 +0100 Subject: [PATCH] update --- index.html | 8 ++++---- js/accessible-faq.1.0.min.js | 19 ++++++++----------- 2 files changed, 12 insertions(+), 15 deletions(-) diff --git a/index.html b/index.html index c9cb07c..41c60fd 100644 --- a/index.html +++ b/index.html @@ -77,7 +77,7 @@

FAQ using ARIA ro

How it works

-

Takes a dl list and wraps each of its dt content with a button. The dt is targeted by the data-pab attribute which has the value of the id of the dd to show or hide.

+

Takes a dl list and wraps each dt content with a button. The dt is targeted by the data-pab attribute which has the value of the id of the dd to show or hide.

Adding the data attribute data-pab-expand to a dt will expand a dd on page-load.

@@ -91,11 +91,11 @@

How it works

- + diff --git a/js/accessible-faq.1.0.min.js b/js/accessible-faq.1.0.min.js index 535a3a8..405be42 100644 --- a/js/accessible-faq.1.0.min.js +++ b/js/accessible-faq.1.0.min.js @@ -1,14 +1,11 @@ // https://john-dugan.com/javascript-debounce/ var debounce=function(e,t,n){var a;return function(){var r=this,i=arguments,o=function(){a=null,n||e.apply(r,i)},s=n&&!a;clearTimeout(a),a=setTimeout(o,t||200),s&&e.apply(r,i)}}; -// https://github.com/2kool2/accessible-popup -(function(u,f,v){function w(b){var a=f.createElement("a");a.id=d+"_"+b.count+"_lnk_close";a.className=d+"_lnk-close";a.tabIndex=0;a.appendChild(n("icon-cross","svg-close","Close modal"));a.count=b.count;a.addEventListener("click",l,!1);a.addEventListener("keydown",m,!1);return a}function x(b){var a=f.createElement("p");a.id=d+"_"+b.count+"_desc";a.className=d+"_desc";a.tabIndex=0;a.innerHTML=b.getAttribute("data-modalDesc")||"Tab or Shift + Tab to move focus.";a.count=b.count;a.addEventListener("keydown", -m,!1);return a}function n(b,a,c){var d=f.createElementNS("http://www.w3.org/2000/svg","svg");d.classList.add(a);c&&(a=f.createElementNS("http://www.w3.org/2000/svg","title"),a.textContent=c,d.appendChild(a));c=f.createElementNS("http://www.w3.org/2000/svg","use");c.setAttributeNS("http://www.w3.org/1999/xlink","href","#"+b);d.appendChild(c);return d}function y(b){var a=f.createElement("h1");a.id=d+"_"+b.count+"_title";a.className=d+"_title";a.tabIndex=0;var c;c="";var e=b.getElementsByTagName("img"); -e&&e[0]&&(c=e[0].alt);c=b.getAttribute("data-modalTitle")||c||b.textContent;a.textContent=c;a.count=b.count;a.addEventListener("keydown",m,!1);return a}function m(b){var a=b.target;27===b.which&&l(b);9===b.which&&b.shiftKey&&a.classList.contains(d+"_title")&&(b.preventDefault(),f.getElementById(d+"_"+b.target.count+"_lnk_close").focus());9===b.which&&!b.shiftKey&&a.classList.contains(d+"_lnk-close")&&(b.preventDefault(),f.getElementById(d+"_"+b.target.count+"_title").focus());13!==b.which&&32!==b.which|| -!a.classList.contains(d+"_lnk-close")||(b.preventDefault(),l(b))}function z(b){if(13===b.which||32===b.which)b.preventDefault(),p(b)}function p(b){b.preventDefault();if(b=q(b.target)){b=b.count;var a=d+"_"+b,c=d+"_"+h,e=f.getElementById(a),a=f.getElementById(a+"_"+h);e&&a&&(a.className.match(c+"-on")||(a.className+=" "+c+"-on"),e.setAttribute("aria-hidden","false"),A(e),r(!!e.getAttribute("aria-hidden")),f.body.classList.add(k),f.getElementById(d+"_"+b+"_title").focus())}}function q(b){var a=b;if("body"=== -b.tagName.toLowerCase())return!1;b.a||(a=q(b.parentElement));return a}function A(b){var a,c;b.getElementsByClassName(d+"_iframe")[0]||(c=f.createElement("iframe"),c.addEventListener("load",function(){c.classList.add(d+"_iframe-on")},!1),c.src=b.a,c.className=d+"_iframe",a=t(b),c.width=a.width,c.height=a.height,c.setAttribute("frameborder",0),c.setAttribute("allowfullscreen",!0),a=f.getElementById(d+"_"+b.count+"_lnk_close"),b.insertBefore(c,a))}function B(){for(var b,a,c,e=f.getElementsByClassName(d), -g=e.length;g--;)for(b=t(e[g]),a=e[g].getElementsByClassName(d+"_iframe"),c=a.length;c--;)a[c].width=b.width,a[c].height=b.height}function t(b){var a=b.cloneNode(!0),c={};a.className=d;a.setAttribute("style","position:fixed;visibility:hidden;transform: none");b.parentElement.appendChild(a);c.width=a.clientWidth;c.height=a.clientHeight;b.parentElement.removeChild(a);return c}function l(b){var a=b.target.count;b=f.getElementById(d+"_"+a);a=f.getElementById(d+"_"+a+"_"+h);b&&(b.setAttribute("aria-hidden", -"true"),a.className=a.className.replace(h+"-on",""),r(!b.getAttribute("aria-hidden")),b=f.getElementById(b.c),f.body.classList.remove(k),b.focus())}function r(b){for(var a=f.getElementsByClassName("-"+d),c=a.length;c--;)b?(a[c].classList.add(k),"body"!==a[c].tagName.toLowerCase&&a[c].setAttribute("aria-hidden","true")):(a[c].classList.remove(k),a[c].removeAttribute("aria-hidden"))}var d="modal",h="lightbox",k="-"+d+"-open";(function(b){d=b.g||d;h=b.f||h;k=b.b?"-"+d+b.b:k;var a;if(b=f.querySelectorAll("[data-"+ -d+"]")){for(var c=b.length;c--;)if(a=!1,b[c].hasAttribute("href")&&(a=b[c].href),b[c].getAttribute("data-modal").length&&(a=b[c].getAttribute("data-modal")),a){b[c].a=a;b[c].count=c;a=b[c];a.id=a.id||"modal_"+a.count+"_lnk";a.setAttribute("aria-controls",d+"_"+a.count);"button"!==a.tagName.toLowerCase()&&(a.setAttribute("aria-role","button"),a.addEventListener("keydown",z,!1));a.tabIndex=0;a.addEventListener("click",p,!1);a=b[c];var e=f.createElement("section");e.id=d+"_"+a.count;e.count=a.count; -e.c=a.id;e.className=d;e.setAttribute("aria-hidden","true");e.setAttribute("aria-labelledby",d+"_"+a.count+"_title");e.setAttribute("aria-describedby",d+"_"+a.count+"_desc");e.setAttribute("role","dialog");e.a=a.a;e.appendChild(y(a));e.appendChild(n("icon-loading","svg-loading","Loading"));e.appendChild(x(a));e.appendChild(w(a));f.body.appendChild(e);a=b[c];var e=a.count,g=f.createElement("div");g.id=d+"_"+e+"_"+h;g.className=d+"_"+h;g.count=e;g.c=a.id;g.addEventListener("click",l,!1);f.body.appendChild(g)}u.addEventListener("resize", -v(B,250,!1))}})({g:"modal",b:"-open",f:"lightbox"})})(window,document,debounce); +// https://github.com/2kool2/accessible-faq +var Pab = (function(f,d,n){function k(a){var b=a.getAttribute("data-pab"),b=d.getElementById(b),c;b&&l&&(c=d.createElement("button"),c.className=p,c.innerHTML=a.innerHTML,c.setAttribute("aria-expanded",!1),c.setAttribute("id",g+q++),c.setAttribute("aria-controls",a.getAttribute("data-pab")),a.innerHTML="",a.appendChild(c),(a=a.parentElement)&&!a.className.match(g+"container")&&(a.className+=" "+g+"container"),a=c,c=a.cloneNode(!0),c.innerHTML.match("svg")||(c.innerHTML+="Show',a.parentElement.replaceChild(c,a)),a=c,b.setAttribute("aria-hidden",!e(a)),b.setAttribute("aria-labelledby",a.id),c.addEventListener("click",r,!1),t(c,b))}function t(a,b){var c=f.location.hash.replace("#","");a.parentElement.hasAttribute("data-pab-expand")&&setTimeout(function(){h(a,b,e(a))},500);b.id===c&&setTimeout(function(){h(a,b,!1);a.focus()},1E3)}function l(){return d.querySelectorAll&& +d.addEventListener}function u(){for(var a=d.querySelectorAll("[data-pab]"),b=a.length,c;b--;)if(c=d.getElementById(a[b].getAttribute("data-pab")))c.style.maxHeight=m(c)+"px"}function r(a){var b=a.target,c;b&&(a.stopPropagation(),a=d.getElementById(b.getAttribute("aria-controls")))&&(c=e(b),h(b,a,c))}function v(a){e(a)||(a.style.maxHeight=m(a)+"px")}function h(a,b,c){a.setAttribute("aria-expanded",!c);v(b);f.requestAnimationFrame(function(){b.setAttribute("aria-hidden",c)});w(a)}function w(a){var b= +a.getElementsByTagName("title");b&&b[0]&&(b[0].innerHTML=e(a)?"Hide":"Show")}function m(a){var b=a.cloneNode(!0),c;b.id=a.id+"_clone";b.setAttribute("style","display:block;width:"+a.offsetWidth+"px;position:absolute;top:0;left:-999rem;max-height:none;height:auto;visibility:visible;");a.parentNode.insertBefore(b,a.nextSibling);c=b.clientHeight;a.parentElement.removeChild(b);return c}function e(a){return a&&("true"===a.getAttribute("aria-expanded")||"false"===a.getAttribute("aria-hidden"))}var g="data-pab".replace("data-", +"")+"_",p="data-pab".replace("data-","")+"-btn",q=0;l&&(f.addEventListener("load",function(){Array.prototype.slice.call(d.querySelectorAll("[data-pab]")).reduce(function(a,b){k(b);return!0},{});return!0},!1),f.addEventListener("resize",n(u,500),!1));return{add:k}})(window,document,debounce); + +// Pab.add(toggle-object);