Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@krautzource/aria-tree-walker

Package Overview
Dependencies
Maintainers
1
Versions
10
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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

Comparing version 3.3.0 to 3.4.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.hasAttribute("href")&&(a.href=s.getAttribute("href"),s.setAttribute("tabindex","-1")),s.hasAttribute("data-href")&&(a.href=s.getAttribute("data-href"));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"),this.node.setAttribute("data-activedescendant",this.active().name),e.focus()),!1===t&&(e.setAttribute("tabindex","-1"),e.classList.remove("is-activedescendant"),this.node.setAttribute("data-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.hasAttribute("href")&&(a.href=s.getAttribute("href"),s.setAttribute("tabindex","-1")),s.hasAttribute("data-href")&&(a.href=s.getAttribute("data-href"));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,s){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);const a={};s instanceof AbortSignal&&(a.signal=s),this.node.addEventListener("keydown",this.move.bind(this),a),this.node.addEventListener("focusin",(()=>{this.node.setAttribute("tabindex","-1"),this.highlight(!0)}),a),this.node.addEventListener("focusout",(()=>{this.highlight(!1),this.node.setAttribute("tabindex","0")}),a)}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.setAttribute("aria-hidden","true"),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"),this.node.setAttribute("data-activedescendant",this.active().name),e.focus()),!1===t&&(e.setAttribute("tabindex","-1"),e.classList.remove("is-activedescendant"),this.node.setAttribute("data-activedescendant","")),e.removeAttribute("aria-hidden")}}exports.attachNavigator=function(t,e){new s(t,e),t.setAttribute("tabindex","0")};

@@ -1,1 +0,1 @@

const t=(i,s)=>{const a=new e(s.getAttribute("data-owns-id"));"A"===s.tagName.toUpperCase()&&s.hasAttribute("href")&&(a.href=s.getAttribute("href"),s.setAttribute("tabindex","-1")),s.hasAttribute("data-href")&&(a.href=s.getAttribute("data-href"));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"),this.node.setAttribute("data-activedescendant",this.active().name),e.focus()),!1===t&&(e.setAttribute("tabindex","-1"),e.classList.remove("is-activedescendant"),this.node.setAttribute("data-activedescendant",""))}}export{s as attachNavigator};
const t=(i,s)=>{const a=new e(s.getAttribute("data-owns-id"));"A"===s.tagName.toUpperCase()&&s.hasAttribute("href")&&(a.href=s.getAttribute("href"),s.setAttribute("tabindex","-1")),s.hasAttribute("data-href")&&(a.href=s.getAttribute("data-href"));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,e){new a(t,e),t.setAttribute("tabindex","0")}class a{constructor(e,s){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);const a={};s instanceof AbortSignal&&(a.signal=s),this.node.addEventListener("keydown",this.move.bind(this),a),this.node.addEventListener("focusin",(()=>{this.node.setAttribute("tabindex","-1"),this.highlight(!0)}),a),this.node.addEventListener("focusout",(()=>{this.highlight(!1),this.node.setAttribute("tabindex","0")}),a)}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.setAttribute("aria-hidden","true"),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"),this.node.setAttribute("data-activedescendant",this.active().name),e.focus()),!1===t&&(e.setAttribute("tabindex","-1"),e.classList.remove("is-activedescendant"),this.node.setAttribute("data-activedescendant","")),e.removeAttribute("aria-hidden")}}export{s as attachNavigator};

@@ -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.hasAttribute("href")&&(a.href=s.getAttribute("href"),s.setAttribute("tabindex","-1")),s.hasAttribute("data-href")&&(a.href=s.getAttribute("data-href"));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"),this.node.setAttribute("data-activedescendant",this.active().name),e.focus()),!1===t&&(e.setAttribute("tabindex","-1"),e.classList.remove("is-activedescendant"),this.node.setAttribute("data-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.hasAttribute("href")&&(a.href=s.getAttribute("href"),s.setAttribute("tabindex","-1")),s.hasAttribute("data-href")&&(a.href=s.getAttribute("data-href"));const n=s.getAttribute("data-owns");return n?(n.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 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,i){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);const a={};i instanceof AbortSignal&&(a.signal=i),this.node.addEventListener("keydown",this.move.bind(this),a),this.node.addEventListener("focusin",(()=>{this.node.setAttribute("tabindex","-1"),this.highlight(!0)}),a),this.node.addEventListener("focusout",(()=>{this.highlight(!1),this.node.setAttribute("tabindex","0")}),a)}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.setAttribute("aria-hidden","true"),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"),this.node.setAttribute("data-activedescendant",this.active().name),e.focus()),!1===t&&(e.setAttribute("tabindex","-1"),e.classList.remove("is-activedescendant"),this.node.setAttribute("data-activedescendant","")),e.removeAttribute("aria-hidden")}}return t.attachNavigator=function(t,e){new a(t,e),t.setAttribute("tabindex","0")},Object.defineProperty(t,"__esModule",{value:!0}),t}({});
/**
* Attaches a navigator to the DOM node.
* @param {Node} node The target node.
* @param {Node} node - The target node.
* @param {AbortSignal} [abortControllerSignal] - An (optional) signal from an AbortController.
*/
export function attachNavigator(node: Node): void;
export function attachNavigator(node: Node, abortControllerSignal?: AbortSignal): void;
{
"name": "@krautzource/aria-tree-walker",
"version": "3.3.0",
"version": "3.4.0",
"description": "A lightweight walker for labeled aria(-owns) trees",

@@ -8,2 +8,5 @@ "main": "dist/aria-tree-walker.cjs.js",

"types": "dist/aria-tree-walker.d.ts",
"files": [
"dist/*"
],
"scripts": {

@@ -41,15 +44,15 @@ "pretest": "npx rollup -c rollup.config.js",

"devDependencies": {
"@krautzource/sre-to-tree": "^2.0.1",
"@krautzource/sre-to-tree": "^2.0.2",
"ava": "^3.15.0",
"jsdom": "^16.6.0",
"mathjax-full": "^3.1.4",
"playwright": "^1.12.2",
"jsdom": "^18.0.1",
"mathjax-full": "^3.2.0",
"playwright": "^1.16.3",
"polka": "^0.5.2",
"rollup": "^2.51.2",
"rollup": "^2.59.0",
"rollup-plugin-terser": "^7.0.2",
"sirv": "^1.0.12",
"speech-rule-engine": "^3.3.1",
"standard-version": "^9.3.0",
"typescript": "^4.3.2"
"sirv": "^1.0.18",
"speech-rule-engine": "^4.0.0-beta.2",
"standard-version": "^9.3.2",
"typescript": "^4.4.4"
}
}

@@ -18,5 +18,5 @@ # aria-tree-walker

The navigator extracts an abtract tree based on suitably prepared data-owns and data-owns-id attributes. The abstract tree is used to provide keyboard navigation and (accessible) focus management (using the "roving tabindex" technique).
The navigator extracts an abtract tree based on suitably prepared `data-owns` and `data-owns-id` attributes. The abstract tree is used to provide keyboard navigation and (accessible) focus management (using the "roving tabindex" technique).
The active tree node will get a class of `is-activedescendant` for (visual) styling purposes.
The active tree node will get a class of `is-activedescendant` for (visual) styling purposes while nodes in its subtree will get a class of `is-highlight`.

@@ -27,7 +27,7 @@ ## Content expectations

- The DOM node **must** either have a data-owns attribute or have a descendant with a data-owns attribute (which will serve as de-facto root - having a wrapping node around the "real" root can make things easier for authoring/design).
- The data-owns attribute contains a space-separated list of identifiers, matching data-owns-id attribute values on descendant nodes.
- The "data-owns tree" **should** be "full" since navigation stops at elements without data-owns attribute.
- Each node with data-owns attribute **should** have suitable roles and ARIA markup, e.g., `role="tree"` and `role="treeitem"` as well as an `aria-label` with a suitable accessible name (to get a "flat" name).
- Visual highlighting is handled by author CSS using `.is-activedescendant`.
- The DOM node **must** either have a `data-owns` attribute or have a descendant with a `data-owns` attribute (which will serve as de-facto root - having a wrapping node around the "real" root can make things easier for authoring/design).
- The `data-owns` attribute contains a space-separated list of identifiers, matching `data-owns-id` attribute values on descendant nodes.
- The "`data-owns` tree" **should** be "full" since navigation stops at elements without `data-owns` attribute.
- Each node with `data-owns` attribute **should** have suitable roles and ARIA markup, e.g., `role="tree"` and `role="treeitem"` as well as an `aria-label` with a suitable accessible name (to get a "flat" name).
- Visual highlighting is handled by author-provided CSS using `.is-activedescendant`, `.is-highlight`.

@@ -49,1 +49,10 @@ ## User Experience

From there, the walker evolved from SRE-specific markup to a general purpose aria(-owns) tree walker. At that point, it was forked to this repository and continued as aria-tree-walker. The goal is to support any such tree (e.g., complex diagrammatic content) and to gradually improve the user experience.
## Thanks
Besides the [contributors](./AUTHORS.txt), the following organizations have helped in the development of this library:
[![American Institute of Mathematics](https://aimath.org/wp-content/uploads/cropped-mh85-logo1.jpg)](https://aimath.org/)
[![American Mathematical Society](https://www.ams.org/images/content/logo.png)](https://www.ams.org)
SocketSocket SOC 2 Logo

Product

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

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc