@krautzource/aria-tree-walker - npm Package Compare versions

Comparing version 3.1.1 to 3.1.2

CHANGELOG.md

@@ -5,2 +5,4 @@ # Changelog
 
+### [3.1.2](https://github.com/krautzource/aria-tree-walker/compare/v3.1.1...v3.1.2) (2021-05-31)
+
 ### [3.1.1](https://github.com/krautzource/aria-tree-walker/compare/v3.1.0...v3.1.1) (2021-04-16)
@@ -7,0 +9,0 @@

dist/aria-tree-walker.cjs.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const t=(i,s)=>{const a=new e(s.getAttribute("data-owns-id"));"A"===s.tagName.toUpperCase()&&""!==s.getAttribute("href")&&(a.href=s.getAttribute("href"),s.setAttribute("tabindex","-1"));const h=s.getAttribute("data-owns");return h?(h.split(" ").forEach((e=>{const s=i.querySelector(`[data-owns-id="${e}"]`);if(!s)return void console.warn("no child with data-owns-id",e);const h=t(i,s);h.parent=a,a.children.push(h)})),a):a};class e{constructor(t){this.name=t,this.parent=null,this.href=null,this.children=[]}}class i{constructor(t){this.root=t,this.active=t}up(){this.active.parent&&(this.active=this.active.parent)}down(){this.active.children.length&&(this.active=this.active.children[0])}left(){if(this.active.parent){let t=this.active.parent.children.indexOf(this.active);t>0&&(this.active=this.active.parent.children[t-1])}}right(){if(this.active.parent){let t=this.active.parent.children.indexOf(this.active);t<this.active.parent.children.length-1&&(this.active=this.active.parent.children[t+1])}}activateLink(){this.active.href&&(window.location.href=this.active.href)}}class s{constructor(e){this.node=e,this.tree=(e=>{const s=e.hasAttribute("data-owns")?e:e.querySelector("[data-owns]");return s?new i(t(s,s)):console.warn("no data-owns attribute in tree:",e)})(e),this.node.addEventListener("keydown",this.move.bind(this)),this.node.addEventListener("focusin",(()=>{this.node.setAttribute("tabindex","-1"),this.highlight(!0)})),this.node.addEventListener("focusout",(()=>{this.highlight(!1),this.node.setAttribute("tabindex","0")}))}active(){return this.tree.active}move(t){switch(this.highlight(!1),[32,37,38,39,40,13,32].indexOf(t.keyCode)>-1&&t.preventDefault(),t.keyCode){case 37:this.tree.left();break;case 38:this.tree.up();break;case 39:this.tree.right();break;case 40:this.tree.down();break;case 32:case 13:this.tree.activateLink()}this.highlight(!0)}highlightSubtree(t,e){e&&(!0===t&&e.classList.add("is-highlight"),!1===t&&e.classList.remove("is-highlight"),e.getAttribute("data-owns")&&e.getAttribute("data-owns").split(" ").forEach((e=>this.highlightSubtree(t,this.node.querySelector(`[data-owns-id="${e}"]`)))))}highlight(t){const e=this.active().name===this.node.getAttribute("data-owns-id")?this.node:this.node.querySelector(`[data-owns-id="${this.active().name}"]`);this.highlightSubtree(t,e),!0===t&&(e.setAttribute("tabindex","0"),e.classList.add("is-activedescendant"),e.focus()),!1===t&&(e.setAttribute("tabindex","-1"),e.classList.remove("is-activedescendant"))}}exports.attachNavigator=function(t){new s(t),t.setAttribute("tabindex","0")};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const t=(i,s)=>{const a=new e(s.getAttribute("data-owns-id"));"A"===s.tagName.toUpperCase()&&""!==s.getAttribute("href")&&(a.href=s.getAttribute("href"),s.setAttribute("tabindex","-1"));const h=s.getAttribute("data-owns");return h?(h.split(" ").forEach((e=>{const s=i.querySelector(`[data-owns-id="${e}"]`);if(!s)return void console.warn("no child with data-owns-id",e);const h=t(i,s);h.parent=a,a.children.push(h)})),a):a};class e{constructor(t){this.name=t,this.parent=null,this.href=null,this.children=[]}}class i{constructor(t){this.root=t,this.active=t}up(){this.active.parent&&(this.active=this.active.parent)}down(){this.active.children.length&&(this.active=this.active.children[0])}left(){if(this.active.parent){let t=this.active.parent.children.indexOf(this.active);t>0&&(this.active=this.active.parent.children[t-1])}}right(){if(this.active.parent){let t=this.active.parent.children.indexOf(this.active);t<this.active.parent.children.length-1&&(this.active=this.active.parent.children[t+1])}}activateLink(){this.active.href&&(window.location.href=this.active.href)}}class s{constructor(e){this.node=e,this.tree=(e=>{const s=e.hasAttribute("data-owns")?e:e.querySelector("[data-owns]");return s?new i(t(s,s)):console.warn("no data-owns attribute in tree:",e)})(e),this.node.addEventListener("keydown",this.move.bind(this)),this.node.addEventListener("focusin",(()=>{this.node.setAttribute("tabindex","-1"),this.highlight(!0)})),this.node.addEventListener("focusout",(()=>{this.highlight(!1),this.node.setAttribute("tabindex","0")}))}active(){return this.tree.active}move(t){if([32,37,38,39,40,13,32].includes(t.keyCode)){switch(t.preventDefault(),this.highlight(!1),t.keyCode){case 37:this.tree.left();break;case 38:this.tree.up();break;case 39:this.tree.right();break;case 40:this.tree.down();break;case 32:case 13:this.tree.activateLink()}this.highlight(!0)}}highlightSubtree(t,e){e&&(!0===t&&e.classList.add("is-highlight"),!1===t&&e.classList.remove("is-highlight"),e.getAttribute("data-owns")&&e.getAttribute("data-owns").split(" ").forEach((e=>this.highlightSubtree(t,this.node.querySelector(`[data-owns-id="${e}"]`)))))}highlight(t){const e=this.active().name===this.node.getAttribute("data-owns-id")?this.node:this.node.querySelector(`[data-owns-id="${this.active().name}"]`);this.highlightSubtree(t,e),!0===t&&(e.setAttribute("tabindex","0"),e.classList.add("is-activedescendant"),e.focus()),!1===t&&(e.setAttribute("tabindex","-1"),e.classList.remove("is-activedescendant"))}}exports.attachNavigator=function(t){new s(t),t.setAttribute("tabindex","0")};

dist/aria-tree-walker.esm.js

@@ -1,1 +0,1 @@
-const t=(i,s)=>{const a=new e(s.getAttribute("data-owns-id"));"A"===s.tagName.toUpperCase()&&""!==s.getAttribute("href")&&(a.href=s.getAttribute("href"),s.setAttribute("tabindex","-1"));const h=s.getAttribute("data-owns");return h?(h.split(" ").forEach((e=>{const s=i.querySelector(`[data-owns-id="${e}"]`);if(!s)return void console.warn("no child with data-owns-id",e);const h=t(i,s);h.parent=a,a.children.push(h)})),a):a};class e{constructor(t){this.name=t,this.parent=null,this.href=null,this.children=[]}}class i{constructor(t){this.root=t,this.active=t}up(){this.active.parent&&(this.active=this.active.parent)}down(){this.active.children.length&&(this.active=this.active.children[0])}left(){if(this.active.parent){let t=this.active.parent.children.indexOf(this.active);t>0&&(this.active=this.active.parent.children[t-1])}}right(){if(this.active.parent){let t=this.active.parent.children.indexOf(this.active);t<this.active.parent.children.length-1&&(this.active=this.active.parent.children[t+1])}}activateLink(){this.active.href&&(window.location.href=this.active.href)}}function s(t){new a(t),t.setAttribute("tabindex","0")}class a{constructor(e){this.node=e,this.tree=(e=>{const s=e.hasAttribute("data-owns")?e:e.querySelector("[data-owns]");return s?new i(t(s,s)):console.warn("no data-owns attribute in tree:",e)})(e),this.node.addEventListener("keydown",this.move.bind(this)),this.node.addEventListener("focusin",(()=>{this.node.setAttribute("tabindex","-1"),this.highlight(!0)})),this.node.addEventListener("focusout",(()=>{this.highlight(!1),this.node.setAttribute("tabindex","0")}))}active(){return this.tree.active}move(t){switch(this.highlight(!1),[32,37,38,39,40,13,32].indexOf(t.keyCode)>-1&&t.preventDefault(),t.keyCode){case 37:this.tree.left();break;case 38:this.tree.up();break;case 39:this.tree.right();break;case 40:this.tree.down();break;case 32:case 13:this.tree.activateLink()}this.highlight(!0)}highlightSubtree(t,e){e&&(!0===t&&e.classList.add("is-highlight"),!1===t&&e.classList.remove("is-highlight"),e.getAttribute("data-owns")&&e.getAttribute("data-owns").split(" ").forEach((e=>this.highlightSubtree(t,this.node.querySelector(`[data-owns-id="${e}"]`)))))}highlight(t){const e=this.active().name===this.node.getAttribute("data-owns-id")?this.node:this.node.querySelector(`[data-owns-id="${this.active().name}"]`);this.highlightSubtree(t,e),!0===t&&(e.setAttribute("tabindex","0"),e.classList.add("is-activedescendant"),e.focus()),!1===t&&(e.setAttribute("tabindex","-1"),e.classList.remove("is-activedescendant"))}}export{s as attachNavigator};
+const t=(i,s)=>{const a=new e(s.getAttribute("data-owns-id"));"A"===s.tagName.toUpperCase()&&""!==s.getAttribute("href")&&(a.href=s.getAttribute("href"),s.setAttribute("tabindex","-1"));const h=s.getAttribute("data-owns");return h?(h.split(" ").forEach((e=>{const s=i.querySelector(`[data-owns-id="${e}"]`);if(!s)return void console.warn("no child with data-owns-id",e);const h=t(i,s);h.parent=a,a.children.push(h)})),a):a};class e{constructor(t){this.name=t,this.parent=null,this.href=null,this.children=[]}}class i{constructor(t){this.root=t,this.active=t}up(){this.active.parent&&(this.active=this.active.parent)}down(){this.active.children.length&&(this.active=this.active.children[0])}left(){if(this.active.parent){let t=this.active.parent.children.indexOf(this.active);t>0&&(this.active=this.active.parent.children[t-1])}}right(){if(this.active.parent){let t=this.active.parent.children.indexOf(this.active);t<this.active.parent.children.length-1&&(this.active=this.active.parent.children[t+1])}}activateLink(){this.active.href&&(window.location.href=this.active.href)}}function s(t){new a(t),t.setAttribute("tabindex","0")}class a{constructor(e){this.node=e,this.tree=(e=>{const s=e.hasAttribute("data-owns")?e:e.querySelector("[data-owns]");return s?new i(t(s,s)):console.warn("no data-owns attribute in tree:",e)})(e),this.node.addEventListener("keydown",this.move.bind(this)),this.node.addEventListener("focusin",(()=>{this.node.setAttribute("tabindex","-1"),this.highlight(!0)})),this.node.addEventListener("focusout",(()=>{this.highlight(!1),this.node.setAttribute("tabindex","0")}))}active(){return this.tree.active}move(t){if([32,37,38,39,40,13,32].includes(t.keyCode)){switch(t.preventDefault(),this.highlight(!1),t.keyCode){case 37:this.tree.left();break;case 38:this.tree.up();break;case 39:this.tree.right();break;case 40:this.tree.down();break;case 32:case 13:this.tree.activateLink()}this.highlight(!0)}}highlightSubtree(t,e){e&&(!0===t&&e.classList.add("is-highlight"),!1===t&&e.classList.remove("is-highlight"),e.getAttribute("data-owns")&&e.getAttribute("data-owns").split(" ").forEach((e=>this.highlightSubtree(t,this.node.querySelector(`[data-owns-id="${e}"]`)))))}highlight(t){const e=this.active().name===this.node.getAttribute("data-owns-id")?this.node:this.node.querySelector(`[data-owns-id="${this.active().name}"]`);this.highlightSubtree(t,e),!0===t&&(e.setAttribute("tabindex","0"),e.classList.add("is-activedescendant"),e.focus()),!1===t&&(e.setAttribute("tabindex","-1"),e.classList.remove("is-activedescendant"))}}export{s as attachNavigator};

dist/aria-tree-walker.iife.js

@@ -1,1 +0,1 @@
-var AriaTreeWalker=function(t){"use strict";const e=(t,s)=>{const a=new i(s.getAttribute("data-owns-id"));"A"===s.tagName.toUpperCase()&&""!==s.getAttribute("href")&&(a.href=s.getAttribute("href"),s.setAttribute("tabindex","-1"));const h=s.getAttribute("data-owns");return h?(h.split(" ").forEach((i=>{const s=t.querySelector(`[data-owns-id="${i}"]`);if(!s)return void console.warn("no child with data-owns-id",i);const h=e(t,s);h.parent=a,a.children.push(h)})),a):a};class i{constructor(t){this.name=t,this.parent=null,this.href=null,this.children=[]}}class s{constructor(t){this.root=t,this.active=t}up(){this.active.parent&&(this.active=this.active.parent)}down(){this.active.children.length&&(this.active=this.active.children[0])}left(){if(this.active.parent){let t=this.active.parent.children.indexOf(this.active);t>0&&(this.active=this.active.parent.children[t-1])}}right(){if(this.active.parent){let t=this.active.parent.children.indexOf(this.active);t<this.active.parent.children.length-1&&(this.active=this.active.parent.children[t+1])}}activateLink(){this.active.href&&(window.location.href=this.active.href)}}class a{constructor(t){this.node=t,this.tree=(t=>{const i=t.hasAttribute("data-owns")?t:t.querySelector("[data-owns]");return i?new s(e(i,i)):console.warn("no data-owns attribute in tree:",t)})(t),this.node.addEventListener("keydown",this.move.bind(this)),this.node.addEventListener("focusin",(()=>{this.node.setAttribute("tabindex","-1"),this.highlight(!0)})),this.node.addEventListener("focusout",(()=>{this.highlight(!1),this.node.setAttribute("tabindex","0")}))}active(){return this.tree.active}move(t){switch(this.highlight(!1),[32,37,38,39,40,13,32].indexOf(t.keyCode)>-1&&t.preventDefault(),t.keyCode){case 37:this.tree.left();break;case 38:this.tree.up();break;case 39:this.tree.right();break;case 40:this.tree.down();break;case 32:case 13:this.tree.activateLink()}this.highlight(!0)}highlightSubtree(t,e){e&&(!0===t&&e.classList.add("is-highlight"),!1===t&&e.classList.remove("is-highlight"),e.getAttribute("data-owns")&&e.getAttribute("data-owns").split(" ").forEach((e=>this.highlightSubtree(t,this.node.querySelector(`[data-owns-id="${e}"]`)))))}highlight(t){const e=this.active().name===this.node.getAttribute("data-owns-id")?this.node:this.node.querySelector(`[data-owns-id="${this.active().name}"]`);this.highlightSubtree(t,e),!0===t&&(e.setAttribute("tabindex","0"),e.classList.add("is-activedescendant"),e.focus()),!1===t&&(e.setAttribute("tabindex","-1"),e.classList.remove("is-activedescendant"))}}return t.attachNavigator=function(t){new a(t),t.setAttribute("tabindex","0")},Object.defineProperty(t,"__esModule",{value:!0}),t}({});
+var AriaTreeWalker=function(t){"use strict";const e=(t,s)=>{const a=new i(s.getAttribute("data-owns-id"));"A"===s.tagName.toUpperCase()&&""!==s.getAttribute("href")&&(a.href=s.getAttribute("href"),s.setAttribute("tabindex","-1"));const h=s.getAttribute("data-owns");return h?(h.split(" ").forEach((i=>{const s=t.querySelector(`[data-owns-id="${i}"]`);if(!s)return void console.warn("no child with data-owns-id",i);const h=e(t,s);h.parent=a,a.children.push(h)})),a):a};class i{constructor(t){this.name=t,this.parent=null,this.href=null,this.children=[]}}class s{constructor(t){this.root=t,this.active=t}up(){this.active.parent&&(this.active=this.active.parent)}down(){this.active.children.length&&(this.active=this.active.children[0])}left(){if(this.active.parent){let t=this.active.parent.children.indexOf(this.active);t>0&&(this.active=this.active.parent.children[t-1])}}right(){if(this.active.parent){let t=this.active.parent.children.indexOf(this.active);t<this.active.parent.children.length-1&&(this.active=this.active.parent.children[t+1])}}activateLink(){this.active.href&&(window.location.href=this.active.href)}}class a{constructor(t){this.node=t,this.tree=(t=>{const i=t.hasAttribute("data-owns")?t:t.querySelector("[data-owns]");return i?new s(e(i,i)):console.warn("no data-owns attribute in tree:",t)})(t),this.node.addEventListener("keydown",this.move.bind(this)),this.node.addEventListener("focusin",(()=>{this.node.setAttribute("tabindex","-1"),this.highlight(!0)})),this.node.addEventListener("focusout",(()=>{this.highlight(!1),this.node.setAttribute("tabindex","0")}))}active(){return this.tree.active}move(t){if([32,37,38,39,40,13,32].includes(t.keyCode)){switch(t.preventDefault(),this.highlight(!1),t.keyCode){case 37:this.tree.left();break;case 38:this.tree.up();break;case 39:this.tree.right();break;case 40:this.tree.down();break;case 32:case 13:this.tree.activateLink()}this.highlight(!0)}}highlightSubtree(t,e){e&&(!0===t&&e.classList.add("is-highlight"),!1===t&&e.classList.remove("is-highlight"),e.getAttribute("data-owns")&&e.getAttribute("data-owns").split(" ").forEach((e=>this.highlightSubtree(t,this.node.querySelector(`[data-owns-id="${e}"]`)))))}highlight(t){const e=this.active().name===this.node.getAttribute("data-owns-id")?this.node:this.node.querySelector(`[data-owns-id="${this.active().name}"]`);this.highlightSubtree(t,e),!0===t&&(e.setAttribute("tabindex","0"),e.classList.add("is-activedescendant"),e.focus()),!1===t&&(e.setAttribute("tabindex","-1"),e.classList.remove("is-activedescendant"))}}return t.attachNavigator=function(t){new a(t),t.setAttribute("tabindex","0")},Object.defineProperty(t,"__esModule",{value:!0}),t}({});

docs/source/generateDocs.js

@@ -22,4 +22,18 @@ const fs = require('fs');
     <h1>A lightweight walker for labeled ARIA trees</h1>
-    <p>This demo requires a browser with support for ES6 modules. Try current Firefox, e.g., with NVDA or JAWS. Other builds are available, see <a href="https://github.com/krautzource/">github.com/krautzource/aria-tree-walker</a>.</p>
+    <p>This demo requires a browser with support for ES6 modules; anything not IE should work. Other builds of this library are available, see <a href="https://github.com/krautzource/">github.com/krautzource/aria-tree-walker</a>.</p>
+    <p>For screenreader users, any recent release should work, e.g., NVDA, JAWS, Orca; for VoiceOver the instructions work on non-Safari browsers. On mobile, ARIA trees are not well supported in general.</p>
     <p><strong>Try this</strong>: focus a diagram (click on it or tab to it), then use the arrow keys. If you're using a screenreader, use browse mode until you encounter a diagram, then switch out of virtual/browse mode to explore with arrow keys. Depending on the screenreader you may have to move the focus to the diagram.</p>
+    <p>If you are <strong>not</strong> a screenreader user, use the options below to get similar results.</p>
+    <fieldset>
+      <legend>Options for non-screenreader user</legend>
+      <div>
+        <input type="checkbox" id="speechSynth" name="speechSynth">
+        <label for="speechSynth">Speech Synthesis</label>
+      </div>
+      <div>
+        <input type="checkbox" id="subtitle" name="enableSubtitle">
+        <label for="subtitle">Subtitles</label>
+      </div>
+    </fieldset>
+  
     <h2>A simple diagram</h2>
@@ -57,2 +71,60 @@ <p>The method works for many types of diagrams such as the following simple diagram of a house.</p>
     <script type="module" src="example.js"></script>
+    <script>
+      const speechObserver = new MutationObserver(function(mutationRecordArray) {
+        const activeDescendantRecord = mutationRecordArray.find(record => record.target.getAttribute('tabindex') === '0');
+        if (!activeDescendantRecord || activeDescendantRecord.target !== document.activeElement) {
+          window.speechSynthesis.cancel();
+          return;
+        }
+        const activeDescendant = activeDescendantRecord.target;
+        if (!activeDescendant.getAttribute('aria-label')) return;
+        if (window.speechSynthesis.speaking) {
+          window.speechSynthesis.cancel();
+        }
+        let ssu = new SpeechSynthesisUtterance(activeDescendant.getAttribute('aria-label'));
+        window.speechSynthesis.speak(ssu);
+      });
+
+      const speechConnect = () => document.querySelectorAll('[data-treewalker]').forEach(node => speechObserver.observe(node, {subtree: true, attributeFilter: ['tabindex']}));
+
+      document.getElementById('speechSynth').addEventListener('click',  () => {
+        if (window.speechSynthesis.speaking) window.speechSynthesis.cancel();
+        if (document.getElementById('speechSynth').checked) {
+        speechConnect(); 
+        return;
+        } 
+        speechObserver.disconnect(); 
+        })
+
+      const subtitle = document.createElement('div');
+      subtitle.setAttribute('aria-hidden', 'true');
+      subtitle.setAttribute('style', 'position: fixed; bottom:0; left: 0; background-color: black; color: white; max-width: 100%');      
+      document.body.appendChild(subtitle);
+
+      subtitleObserver = new MutationObserver(function(mutationRecordArray) {
+        const activeDescendantRecord = mutationRecordArray.find(record => record.target.getAttribute('tabindex') === '0');
+        if (!activeDescendantRecord || activeDescendantRecord.target !== document.activeElement) {
+          subtitle.innerHTML  = '';
+          return;
+        }
+        const activeDescendant = activeDescendantRecord.target;
+        if (!activeDescendant.getAttribute('aria-label') || activeDescendant !== document.activeElement) {
+          subtitle.innerHTML  = '';
+          return;
+        }
+        subtitle.innerHTML  = activeDescendant.getAttribute('aria-label');
+        // const activeTree = activeDescendant.closest('[data-treewalker]');
+        // const rect = activeTree.getBoundingClientRect();
+        // subtitle.style.bottom = (window.innerHeight - rect.bottom - subtitle.scrollHeight)+'px';
+        // subtitle.style.left = rect.left+'px';
+        // subtitle.style.width = rect.width+'px';
+        // console.log(rect)
+      });
+
+      const subtitleConnect = () => document.querySelectorAll('[data-treewalker]').forEach(node => subtitleObserver.observe(node, {subtree: true, attributeFilter: ['tabindex']}));
+
+      document.getElementById('subtitle').addEventListener('click',  () => {
+        document.getElementById('subtitle').checked ? subtitleConnect() : subtitleObserver.disconnect();
+      })
+    </script>
   </body>
@@ -59,0 +131,0 @@ </html>

docs/treewalker.js

@@ -1,1 +0,1 @@
-const t=(i,s)=>{const a=new e(s.getAttribute("data-owns-id"));"A"===s.tagName.toUpperCase()&&""!==s.getAttribute("href")&&(a.href=s.getAttribute("href"),s.setAttribute("tabindex","-1"));const h=s.getAttribute("data-owns");return h?(h.split(" ").forEach((e=>{const s=i.querySelector(`[data-owns-id="${e}"]`);if(!s)return void console.warn("no child with data-owns-id",e);const h=t(i,s);h.parent=a,a.children.push(h)})),a):a};class e{constructor(t){this.name=t,this.parent=null,this.href=null,this.children=[]}}class i{constructor(t){this.root=t,this.active=t}up(){this.active.parent&&(this.active=this.active.parent)}down(){this.active.children.length&&(this.active=this.active.children[0])}left(){if(this.active.parent){let t=this.active.parent.children.indexOf(this.active);t>0&&(this.active=this.active.parent.children[t-1])}}right(){if(this.active.parent){let t=this.active.parent.children.indexOf(this.active);t<this.active.parent.children.length-1&&(this.active=this.active.parent.children[t+1])}}activateLink(){this.active.href&&(window.location.href=this.active.href)}}function s(t){new a(t),t.setAttribute("tabindex","0")}class a{constructor(e){this.node=e,this.tree=(e=>{const s=e.hasAttribute("data-owns")?e:e.querySelector("[data-owns]");return s?new i(t(s,s)):console.warn("no data-owns attribute in tree:",e)})(e),this.node.addEventListener("keydown",this.move.bind(this)),this.node.addEventListener("focusin",(()=>{this.node.setAttribute("tabindex","-1"),this.highlight(!0)})),this.node.addEventListener("focusout",(()=>{this.highlight(!1),this.node.setAttribute("tabindex","0")}))}active(){return this.tree.active}move(t){switch(this.highlight(!1),[32,37,38,39,40,13,32].indexOf(t.keyCode)>-1&&t.preventDefault(),t.keyCode){case 37:this.tree.left();break;case 38:this.tree.up();break;case 39:this.tree.right();break;case 40:this.tree.down();break;case 32:case 13:this.tree.activateLink()}this.highlight(!0)}highlightSubtree(t,e){e&&(!0===t&&e.classList.add("is-highlight"),!1===t&&e.classList.remove("is-highlight"),e.getAttribute("data-owns")&&e.getAttribute("data-owns").split(" ").forEach((e=>this.highlightSubtree(t,this.node.querySelector(`[data-owns-id="${e}"]`)))))}highlight(t){const e=this.active().name===this.node.getAttribute("data-owns-id")?this.node:this.node.querySelector(`[data-owns-id="${this.active().name}"]`);this.highlightSubtree(t,e),!0===t&&(e.setAttribute("tabindex","0"),e.classList.add("is-activedescendant"),e.focus()),!1===t&&(e.setAttribute("tabindex","-1"),e.classList.remove("is-activedescendant"))}}export{s as attachNavigator};
+const t=(i,s)=>{const a=new e(s.getAttribute("data-owns-id"));"A"===s.tagName.toUpperCase()&&""!==s.getAttribute("href")&&(a.href=s.getAttribute("href"),s.setAttribute("tabindex","-1"));const h=s.getAttribute("data-owns");return h?(h.split(" ").forEach((e=>{const s=i.querySelector(`[data-owns-id="${e}"]`);if(!s)return void console.warn("no child with data-owns-id",e);const h=t(i,s);h.parent=a,a.children.push(h)})),a):a};class e{constructor(t){this.name=t,this.parent=null,this.href=null,this.children=[]}}class i{constructor(t){this.root=t,this.active=t}up(){this.active.parent&&(this.active=this.active.parent)}down(){this.active.children.length&&(this.active=this.active.children[0])}left(){if(this.active.parent){let t=this.active.parent.children.indexOf(this.active);t>0&&(this.active=this.active.parent.children[t-1])}}right(){if(this.active.parent){let t=this.active.parent.children.indexOf(this.active);t<this.active.parent.children.length-1&&(this.active=this.active.parent.children[t+1])}}activateLink(){this.active.href&&(window.location.href=this.active.href)}}function s(t){new a(t),t.setAttribute("tabindex","0")}class a{constructor(e){this.node=e,this.tree=(e=>{const s=e.hasAttribute("data-owns")?e:e.querySelector("[data-owns]");return s?new i(t(s,s)):console.warn("no data-owns attribute in tree:",e)})(e),this.node.addEventListener("keydown",this.move.bind(this)),this.node.addEventListener("focusin",(()=>{this.node.setAttribute("tabindex","-1"),this.highlight(!0)})),this.node.addEventListener("focusout",(()=>{this.highlight(!1),this.node.setAttribute("tabindex","0")}))}active(){return this.tree.active}move(t){if([32,37,38,39,40,13,32].includes(t.keyCode)){switch(t.preventDefault(),this.highlight(!1),t.keyCode){case 37:this.tree.left();break;case 38:this.tree.up();break;case 39:this.tree.right();break;case 40:this.tree.down();break;case 32:case 13:this.tree.activateLink()}this.highlight(!0)}}highlightSubtree(t,e){e&&(!0===t&&e.classList.add("is-highlight"),!1===t&&e.classList.remove("is-highlight"),e.getAttribute("data-owns")&&e.getAttribute("data-owns").split(" ").forEach((e=>this.highlightSubtree(t,this.node.querySelector(`[data-owns-id="${e}"]`)))))}highlight(t){const e=this.active().name===this.node.getAttribute("data-owns-id")?this.node:this.node.querySelector(`[data-owns-id="${this.active().name}"]`);this.highlightSubtree(t,e),!0===t&&(e.setAttribute("tabindex","0"),e.classList.add("is-activedescendant"),e.focus()),!1===t&&(e.setAttribute("tabindex","-1"),e.classList.remove("is-activedescendant"))}}export{s as attachNavigator};

lib/navigator.js

@@ -32,6 +32,7 @@ import { extractAbstractTree } from './abstractTree.js';
   move(event) {
+    if (![32, 37, 38, 39, 40, 13, 32].includes(event.keyCode)) {
+      return;
+    }
+    event.preventDefault();
     this.highlight(false);
-    if ([32, 37, 38, 39, 40, 13, 32].indexOf(event.keyCode) > -1) {
-      event.preventDefault();
-    }
     switch (event.keyCode) {
@@ -38,0 +39,0 @@ case 37: //left

package.json

 {
   "name": "@krautzource/aria-tree-walker",
-  "version": "3.1.1",
+  "version": "3.1.2",
   "description": "A lightweight walker for labeled aria(-owns) trees",
@@ -40,15 +40,15 @@ "main": "dist/aria-tree-walker.cjs.js",
   "devDependencies": {
-    "@krautzource/sre-to-tree": "^2.0.0",
+    "@krautzource/sre-to-tree": "^2.0.1",
     "ava": "^3.15.0",
-    "jsdom": "^16.4.0",
-    "mathjax-full": "^3.1.2",
-    "playwright": "^1.9.1",
+    "jsdom": "^16.6.0",
+    "mathjax-full": "^3.1.4",
+    "playwright": "^1.11.1",
     "polka": "^0.5.2",
-    "rollup": "^2.40.0",
+    "rollup": "^2.50.5",
     "rollup-plugin-terser": "^7.0.2",
-    "sirv": "^1.0.11",
-    "speech-rule-engine": "^3.2.0-beta.2",
-    "standard-version": "^9.1.1",
-    "typescript": "^4.2.2"
+    "sirv": "^1.0.12",
+    "speech-rule-engine": "^3.3.1",
+    "standard-version": "^9.3.0",
+    "typescript": "^4.3.2"
   }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

405997

increased by2.17%

Lines of code

1602

increased by4.3%

No dependency changes