New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@krautzource/aria-tree-walker

Package Overview
Dependencies
Maintainers
1
Versions
10
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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

Comparing version 3.0.1 to 3.1.0

.github/workflows/testing.yaml

7

CHANGELOG.md

@@ -5,2 +5,9 @@ # Changelog

## [3.1.0](https://github.com/krautzource/aria-tree-walker/compare/v3.0.1...v3.1.0) (2021-04-12)
### Features
* **navigator:** add subtree highlighting ([bb83ad2](https://github.com/krautzource/aria-tree-walker/commit/bb83ad2b254e17312c4c11010ebf8b648499184d)), closes [#21](https://github.com/krautzource/aria-tree-walker/issues/21)
### [3.0.1](https://github.com/krautzource/aria-tree-walker/compare/v3.0.0...v3.0.1) (2021-03-31)

@@ -7,0 +14,0 @@

2

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 n=s.getAttribute("data-owns");return n?(n.split(" ").forEach((e=>{const s=i.querySelector(`[data-owns-id="${e}"]`),n=t(i,s);n.parent=a,a.children.push(n)})),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)}highlight(t){const e=this.active().name===this.node.getAttribute("data-owns-id")?this.node:this.node.querySelector(`[data-owns-id="${this.active().name}"]`);!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}"]`),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){!0===t&&e.classList.add("is-highlight"),!1===t&&e.classList.remove("is-highlight"),e.hasAttribute("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")};

2

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 n=s.getAttribute("data-owns");return n?(n.split(" ").forEach((e=>{const s=i.querySelector(`[data-owns-id="${e}"]`),n=t(i,s);n.parent=a,a.children.push(n)})),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)}highlight(t){const e=this.active().name===this.node.getAttribute("data-owns-id")?this.node:this.node.querySelector(`[data-owns-id="${this.active().name}"]`);!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 h=new e(s.getAttribute("data-owns-id"));"A"===s.tagName.toUpperCase()&&""!==s.getAttribute("href")&&(h.href=s.getAttribute("href"),s.setAttribute("tabindex","-1"));const a=s.getAttribute("data-owns");return a?(a.split(" ").forEach((e=>{const s=i.querySelector(`[data-owns-id="${e}"]`),a=t(i,s);a.parent=h,h.children.push(a)})),h):h};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 h(t),t.setAttribute("tabindex","0")}class h{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){!0===t&&e.classList.add("is-highlight"),!1===t&&e.classList.remove("is-highlight"),e.hasAttribute("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};

2

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 n=s.getAttribute("data-owns");return n?(n.split(" ").forEach((i=>{const s=t.querySelector(`[data-owns-id="${i}"]`),n=e(t,s);n.parent=a,a.children.push(n)})),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)}highlight(t){const e=this.active().name===this.node.getAttribute("data-owns-id")?this.node:this.node.querySelector(`[data-owns-id="${this.active().name}"]`);!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}"]`),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){!0===t&&e.classList.add("is-highlight"),!1===t&&e.classList.remove("is-highlight"),e.hasAttribute("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}({});

5

docs/source/generateDocs.js

@@ -38,4 +38,3 @@ const fs = require('fs');

<p>Another typical use case are diagrams created with D3 such as the simple (pre-rendered) tree diagram below. Of course it is also possible to <a href="./d3/">do this client-side</a>.</p>
<svg data-treewalker="" id="d3" role="tree" aria-label="A simple tree diagram about encyclopedia structure" aria-description="Focus to navigate with arrow keys." data-owns="encyclopedia" width="300" height="300" class=""><g transform="translate(-40,40)"><path class="link" d="M128.57142857142856,100C128.57142857142856,0 171.42857142857142,100 171.42857142857142,0"></path><path class="link" d="M214.28571428571428,100C214.28571428571428,0 171.42857142857142,100 171.42857142857142,0"></path><path class="link" d="M85.71428571428571,200C85.71428571428571,100 128.57142857142856,200 128.57142857142856,100"></path><path class="link" d="M171.42857142857142,200C171.42857142857142,100 128.57142857142856,200 128.57142857142856,100"></path><g class="node node--internal" data-owns-id="encyclopedia" role="treeitem" aria-label="encyclopedia" data-owns="culture science" transform="translate(171.42857142857142,0)"><circle r="2.5"></circle><text dy="-1em" x="36" style="text-anchor: end;">encyclopedia</text></g><g class="node node--internal" data-owns-id="culture" role="treeitem" aria-label="culture" data-owns="art craft" transform="translate(128.57142857142856,100)"><circle r="2.5"></circle><text dy="-1em" x="21" style="text-anchor: end;">culture</text></g><g class="node node--leaf" data-owns-id="science" role="treeitem" aria-label="science" data-owns="" transform="translate(214.28571428571428,100)"><circle r="2.5"></circle><text dy="0.3em" x="8" style="text-anchor: start;">science</text></g><g class="node node--leaf" data-owns-id="art" role="treeitem" aria-label="art" data-owns="" transform="translate(85.71428571428571,200)"><circle r="2.5"></circle><text dy="0.3em" x="8" style="text-anchor: start;">art</text></g><g class="node node--leaf" data-owns-id="craft" role="treeitem" aria-label="craft" data-owns="" transform="translate(171.42857142857142,200)"><circle r="2.5"></circle><text dy="0.3em" x="8" style="text-anchor: start;">craft</text></g></g></svg>
<h2>An equation in SVG</h2>
<svg data-treewalker="" id="d3" role="tree" aria-label="A simple tree diagram about encyclopedia structure" aria-description="Focus to navigate with arrow keys." data-owns="encyclopedia" width="300" height="300" class=""><g transform="translate(-40,40)"><path class="link" d="M128.57142857142856,100C128.57142857142856,0 171.42857142857142,100 171.42857142857142,0"></path><path class="link" d="M214.28571428571428,100C214.28571428571428,0 171.42857142857142,100 171.42857142857142,0"></path><path class="link" d="M85.71428571428571,200C85.71428571428571,100 128.57142857142856,200 128.57142857142856,100"></path><path class="link" d="M171.42857142857142,200C171.42857142857142,100 128.57142857142856,200 128.57142857142856,100"></path><g class="node node--internal" data-owns-id="encyclopedia" role="treeitem" aria-level="1" aria-label="encyclopedia" data-owns="culture science" transform="translate(171.42857142857142,0)"><circle r="2.5"></circle><text dy="-1em" x="36" style="text-anchor: end;">encyclopedia</text></g><g class="node node--internal" data-owns-id="culture" role="treeitem" aria-level="2" aria-label="culture" data-owns="art craft" transform="translate(128.57142857142856,100)"><circle r="2.5"></circle><text dy="-1em" x="21" style="text-anchor: end;">culture</text></g><g class="node node--leaf" data-owns-id="science" role="treeitem" aria-level="2" aria-label="science" data-owns="" transform="translate(214.28571428571428,100)"><circle r="2.5"></circle><text dy="0.3em" x="8" style="text-anchor: start;">science</text></g><g class="node node--leaf" data-owns-id="art" role="treeitem" aria-level="3" aria-label="art" data-owns="" transform="translate(85.71428571428571,200)"><circle r="2.5"></circle><text dy="0.3em" x="8" style="text-anchor: start;">art</text></g><g class="node node--leaf" data-owns-id="craft" role="treeitem" aria-level="3" aria-label="craft" data-owns="" transform="translate(171.42857142857142,200)"><circle r="2.5"></circle><text dy="0.3em" x="8" style="text-anchor: start;">craft</text></g></g></svg> <h2>An equation in SVG</h2>
<p>Another typical use case is equational content such as the following SVG describing the solution to the quadratic equation, created with <a href="https://www.mathjax.org">MathJax</a> and <a href="https://github.com/zorkow/speech-rule-engine/">Speech Rule Engine</a> (with additional post-processing, see the doc sources here).</p>

@@ -67,2 +66,2 @@ ${out.svg

if (!texstring) console.log('No input texstring; using default');
main(texstring || 'x={-b\\pm\\sqrt{b^2-4ac}\\over2a}');
main(texstring || '\\begin{equation}x={-b\\pm\\sqrt{b^2-4ac}\\over2a} \\tag{1} \\end{equation}');

2

docs/source/sre-enrich-rewrite.js

@@ -23,3 +23,3 @@ const sre = require('speech-rule-engine');

.AllPackages.filter( x => x!=='bussproofs'); // NOTE bussproofs needs getBBox() method
const tex = new TeX({ packages: AllPackages });
const tex = new TeX({ packages: AllPackages, tagSide: 'left', });
const html = new HTMLDocument('', liteAdaptor(), { InputJax: tex });

@@ -26,0 +26,0 @@ const MmlVisitor = require('mathjax-full/js/core/MmlTree/SerializedMmlVisitor.js')

2

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 n=s.getAttribute("data-owns");return n?(n.split(" ").forEach((e=>{const s=i.querySelector(`[data-owns-id="${e}"]`),n=t(i,s);n.parent=a,a.children.push(n)})),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)}highlight(t){const e=this.active().name===this.node.getAttribute("data-owns-id")?this.node:this.node.querySelector(`[data-owns-id="${this.active().name}"]`);!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 h=new e(s.getAttribute("data-owns-id"));"A"===s.tagName.toUpperCase()&&""!==s.getAttribute("href")&&(h.href=s.getAttribute("href"),s.setAttribute("tabindex","-1"));const a=s.getAttribute("data-owns");return a?(a.split(" ").forEach((e=>{const s=i.querySelector(`[data-owns-id="${e}"]`),a=t(i,s);a.parent=h,h.children.push(a)})),h):h};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 h(t),t.setAttribute("tabindex","0")}class h{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){!0===t&&e.classList.add("is-highlight"),!1===t&&e.classList.remove("is-highlight"),e.hasAttribute("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};

12

lib/navigator.js

@@ -59,2 +59,13 @@ import { extractAbstractTree } from './abstractTree.js';

highlightSubtree(boolean, node) {
if (boolean === true) {
node.classList.add('is-highlight');
}
if (boolean === false) {
node.classList.remove('is-highlight');
}
if (!node.hasAttribute('data-owns')) return;
node.getAttribute('data-owns').split(' ').forEach(id => this.highlightSubtree(boolean, this.node.querySelector(`[data-owns-id="${id}"]`)));
}
highlight(boolean) {

@@ -65,2 +76,3 @@ const activedescendant =

: this.node.querySelector(`[data-owns-id="${this.active().name}"]`);
this.highlightSubtree(boolean, activedescendant);
if (boolean === true) {

@@ -67,0 +79,0 @@ activedescendant.setAttribute('tabindex', '0');

5

package.json
{
"name": "@krautzource/aria-tree-walker",
"version": "3.0.1",
"version": "3.1.0",
"description": "A lightweight walker for labeled aria(-owns) trees",

@@ -14,3 +14,4 @@ "main": "dist/aria-tree-walker.cjs.js",

"postbuild": "npm run declarations",
"docs": "node docs/source/generateDocs.js && npx rollup -c rollup.config.js && cp ./dist/aria-tree-walker.esm.js ./docs/treewalker.js",
"predocs": "npm run build && cp ./dist/aria-tree-walker.esm.js ./docs/treewalker.js",
"docs": "node docs/source/generateDocs.js",
"release": "standard-version"

@@ -17,0 +18,0 @@ },

22

test/test.js

@@ -96,1 +96,23 @@ const sirv = require('sirv');

});
test('highlighting: tree', pageMacro, async (t, page) => {
await page.goto('localhost:8080/test/');
await page.keyboard.press('Tab');
let classnameTree = await page.evaluate(() => document.querySelector('[aria-label="test tree 1"]').className);
t.is(classnameTree, 'is-highlight is-activedescendant');
let classnameTreeitem = await page.evaluate(() => document.querySelector('[aria-label="test tree 1"] [data-owns-id="treeitem1"]').className);
t.is(classnameTreeitem, 'is-highlight');
await page.keyboard.press('ArrowDown');
classnameTree = await page.evaluate(() => document.querySelector('[aria-label="test tree 1"]').className);
classnameTreeitem = await page.evaluate(() => document.querySelector('[aria-label="test tree 1"] [data-owns-id="treeitem1"]').className)
t.is(classnameTree, '');
t.is(classnameTreeitem, 'is-highlight is-activedescendant');
});
test('highlighting: subtreeitem not descendant', pageMacro, async (t, page) => {
await page.goto('localhost:8080/test/');
await page.keyboard.press('Tab');
await page.keyboard.press('ArrowDown');
const classname = await page.evaluate(() => document.querySelector('[aria-label="test tree 1"] [data-owns-id="treeitem3"]').className);
t.is(classname, 'is-highlight');
});
docs/d3/index.html

Sorry, the diff of this file is not supported yet

docs/index.html

Sorry, the diff of this file is not supported yet

docs/source/Aspirin-skeletal.svg

Sorry, the diff of this file is not supported yet

docs/source/image.svg

Sorry, the diff of this file is not supported yet

docs/style.css

Sorry, the diff of this file is not supported yet

test/index.html

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc