aria-api 0.8.0 → 0.9.1

package/README.md

@@ -14,7 +14,7 @@ complicated. This library takes care of exactly that.
     npm install aria-api
 
 This installation method works best if you use tools like webpack or
-browserify. There is also an UMD build included as `dist/aria.js`.
+rollup. There is also an UMD build included as `dist/aria.js`.
 
 # Usage
 

package/dist/aria.js

@@ -912,28 +912,20 @@
 		}
 	};
 
-	const _getOwner = function(node, owners) {
+	const _getOwner = function(node) {
 		if (node.nodeType === node.ELEMENT_NODE && node.id) {
-			const selector = '[aria-owns~="' + CSS.escape(node.id) + '"]';
-			if (owners) {
-				for (const owner of owners) {
-					if (owner.matches(selector)) {
-						return owner;
-					}
-				}
-			} else {
-				return document.querySelector(selector);
-			}
+			const selector = `[aria-owns~="${CSS.escape(node.id)}"]`;
+			return node.getRootNode().querySelector(selector);
 		}
 	};
 
-	const _getParentNode = function(node, owners) {
-		return _getOwner(node, owners) || node.parentNode;
+	const _getParentNode = function(node) {
+		return _getOwner(node) || node.parentNode || node.host;
 	};
 
-	const detectLoop = function(node, owners) {
+	const detectLoop = function(node) {
 		const seen = [node];
-		while ((node = _getParentNode(node, owners))) {
+		while ((node = _getParentNode(node))) {
 			if (seen.includes(node)) {
 				return true;
 			}
@@ -941,27 +933,36 @@
 		}
 	};
 
-	const getOwner = function(node, owners) {
-		const owner = _getOwner(node, owners);
-		if (owner && !detectLoop(node, owners)) {
+	const getOwner = function(node) {
+		const owner = _getOwner(node);
+		if (owner && !detectLoop(node)) {
 			return owner;
 		}
 	};
 
-	const getParentNode = function(node, owners) {
-		return getOwner(node, owners) || node.parentNode;
+	const getParentNode = function(node) {
+		return getOwner(node) || node.parentNode || node.host;
 	};
 
 	const isHidden = function(node) {
 		return node.nodeType === node.ELEMENT_NODE && getAttribute(node, 'hidden');
 	};
 
-	const getChildNodes = function(node, owners) {
+	const getChildNodes = function(node) {
 		const childNodes = [];
+		let rawChildNodes = [];
 
-		for (let i = 0; i < node.childNodes.length; i++) {
-			const child = node.childNodes[i];
-			if (!getOwner(child, owners) && !isHidden(child)) {
+		if (node.shadowRoot) {
+			rawChildNodes = node.shadowRoot.childNodes;
+		} else if (node.assignedNodes) {
+			rawChildNodes = node.assignedNodes();
+		} else {
+			rawChildNodes = node.childNodes;
+		}
+
+		for (let i = 0; i < rawChildNodes.length; i++) {
+			const child = rawChildNodes[i];
+			if (!getOwner(child) && !isHidden(child)) {
 				childNodes.push(child);
 			}
 		}
@@ -969,9 +970,9 @@
 		if (node.nodeType === node.ELEMENT_NODE) {
 			const owns = getAttribute(node, 'owns') || [];
 			for (let i = 0; i < owns.length; i++) {
-				const child = document.getElementById(owns[i]);
+				const child = node.getRootNode().getElementById(owns[i]);
 				// double check with getOwner for consistency
-				if (child && getOwner(child, owners) === node && !isHidden(child)) {
+				if (child && getOwner(child) === node && !isHidden(child)) {
 					childNodes.push(child);
 				}
 			}
@@ -981,12 +982,11 @@
 	};
 
 	const walk = function(root, fn) {
-		const owners = document.querySelectorAll('[aria-owns]');
 		let queue = [root];
 		while (queue.length) {
 			const item = queue.shift();
 			fn(item);
-			queue = getChildNodes(item, owners).concat(queue);
+			queue = getChildNodes(item).concat(queue);
 		}
 	};
 
@@ -1093,13 +1093,17 @@
 		for (let i = 0; i < children.length; i++) {
 			const node = children[i];
 			if (node.nodeType === node.TEXT_NODE) {
-				const styles = window.getComputedStyle(node.parentElement);
-				if (styles.textTransform === 'uppercase') {
-					ret += node.textContent.toUpperCase();
-				} else if (styles.textTransform === 'lowercase') {
-					ret += node.textContent.toLowerCase();
-				} else if (styles.textTransform === 'capitalize') {
-					ret += node.textContent.replace(/\b\w/g, c => c.toUpperCase());
+				if (node.parentElement) {
+					const styles = window.getComputedStyle(node.parentElement);
+					if (styles.textTransform === 'uppercase') {
+						ret += node.textContent.toUpperCase();
+					} else if (styles.textTransform === 'lowercase') {
+						ret += node.textContent.toLowerCase();
+					} else if (styles.textTransform === 'capitalize') {
+						ret += node.textContent.replace(/\b\w/g, c => c.toUpperCase());
+					} else {
+						ret += node.textContent;
+					}
 				} else {
 					ret += node.textContent;
 				}
@@ -1141,7 +1145,7 @@
 		if (!ongoingLabelledBy && el.matches('[aria-labelledby]')) {
 			const ids = el.getAttribute('aria-labelledby').split(/\s+/);
 			const strings = ids.map(id => {
-				const label = document.getElementById(id);
+				const label = el.getRootNode().getElementById(id);
 				return label ? getNameRaw(label, true, true, visited, true) : '';
 			});
 			ret = strings.join(' ');
@@ -1252,7 +1256,7 @@
 		if (el.matches('[aria-describedby]')) {
 			const ids = el.getAttribute('aria-describedby').split(/\s+/);
 			const strings = ids.map(id => {
-				const label = document.getElementById(id);
+				const label = el.getRootNode().getElementById(id);
 				return label ? getNameRaw(label, true, true) : '';
 			});
 			ret = strings.join(' ');

package/lib/atree.js

@@ -1,27 +1,19 @@
 import * as attrs from './attrs';
 
-const _getOwner = function(node, owners) {
+const _getOwner = function(node) {
 	if (node.nodeType === node.ELEMENT_NODE && node.id) {
-		const selector = '[aria-owns~="' + CSS.escape(node.id) + '"]';
-		if (owners) {
-			for (const owner of owners) {
-				if (owner.matches(selector)) {
-					return owner;
-				}
-			}
-		} else {
-			return document.querySelector(selector);
-		}
+		const selector = `[aria-owns~="${CSS.escape(node.id)}"]`;
+		return node.getRootNode().querySelector(selector);
 	}
 };
 
-const _getParentNode = function(node, owners) {
-	return _getOwner(node, owners) || node.parentNode;
+const _getParentNode = function(node) {
+	return _getOwner(node) || node.parentNode || node.host;
 };
 
-const detectLoop = function(node, owners) {
+const detectLoop = function(node) {
 	const seen = [node];
-	while ((node = _getParentNode(node, owners))) {
+	while ((node = _getParentNode(node))) {
 		if (seen.includes(node)) {
 			return true;
 		}
@@ -29,27 +21,36 @@ const detectLoop = function(node, owners) {
 	}
 };
 
-const getOwner = function(node, owners) {
-	const owner = _getOwner(node, owners);
-	if (owner && !detectLoop(node, owners)) {
+const getOwner = function(node) {
+	const owner = _getOwner(node);
+	if (owner && !detectLoop(node)) {
 		return owner;
 	}
 };
 
-export const getParentNode = function(node, owners) {
-	return getOwner(node, owners) || node.parentNode;
+export const getParentNode = function(node) {
+	return getOwner(node) || node.parentNode || node.host;
 };
 
 const isHidden = function(node) {
 	return node.nodeType === node.ELEMENT_NODE && attrs.getAttribute(node, 'hidden');
 };
 
-export const getChildNodes = function(node, owners) {
+export const getChildNodes = function(node) {
 	const childNodes = [];
+	let rawChildNodes = [];
+
+	if (node.shadowRoot) {
+		rawChildNodes = node.shadowRoot.childNodes;
+	} else if (node.assignedNodes) {
+		rawChildNodes = node.assignedNodes();
+	} else {
+		rawChildNodes = node.childNodes;
+	}
 
-	for (let i = 0; i < node.childNodes.length; i++) {
-		const child = node.childNodes[i];
-		if (!getOwner(child, owners) && !isHidden(child)) {
+	for (let i = 0; i < rawChildNodes.length; i++) {
+		const child = rawChildNodes[i];
+		if (!getOwner(child) && !isHidden(child)) {
 			childNodes.push(child);
 		}
 	}
@@ -57,9 +58,9 @@ export const getChildNodes = function(node, owners) {
 	if (node.nodeType === node.ELEMENT_NODE) {
 		const owns = attrs.getAttribute(node, 'owns') || [];
 		for (let i = 0; i < owns.length; i++) {
-			const child = document.getElementById(owns[i]);
+			const child = node.getRootNode().getElementById(owns[i]);
 			// double check with getOwner for consistency
-			if (child && getOwner(child, owners) === node && !isHidden(child)) {
+			if (child && getOwner(child) === node && !isHidden(child)) {
 				childNodes.push(child);
 			}
 		}
@@ -69,12 +70,11 @@ export const getChildNodes = function(node, owners) {
 };
 
 export const walk = function(root, fn) {
-	const owners = document.querySelectorAll('[aria-owns]');
 	let queue = [root];
 	while (queue.length) {
 		const item = queue.shift();
 		fn(item);
-		queue = getChildNodes(item, owners).concat(queue);
+		queue = getChildNodes(item).concat(queue);
 	}
 };
 

package/lib/name.js

@@ -46,13 +46,17 @@ const getContent = function(root, ongoingLabelledBy, visited) {
 	for (let i = 0; i < children.length; i++) {
 		const node = children[i];
 		if (node.nodeType === node.TEXT_NODE) {
-			const styles = window.getComputedStyle(node.parentElement);
-			if (styles.textTransform === 'uppercase') {
-				ret += node.textContent.toUpperCase();
-			} else if (styles.textTransform === 'lowercase') {
-				ret += node.textContent.toLowerCase();
-			} else if (styles.textTransform === 'capitalize') {
-				ret += node.textContent.replace(/\b\w/g, c => c.toUpperCase());
+			if (node.parentElement) {
+				const styles = window.getComputedStyle(node.parentElement);
+				if (styles.textTransform === 'uppercase') {
+					ret += node.textContent.toUpperCase();
+				} else if (styles.textTransform === 'lowercase') {
+					ret += node.textContent.toLowerCase();
+				} else if (styles.textTransform === 'capitalize') {
+					ret += node.textContent.replace(/\b\w/g, c => c.toUpperCase());
+				} else {
+					ret += node.textContent;
+				}
 			} else {
 				ret += node.textContent;
 			}
@@ -94,7 +98,7 @@ const getNameRaw = function(el, recursive, ongoingLabelledBy, visited, directRef
 	if (!ongoingLabelledBy && el.matches('[aria-labelledby]')) {
 		const ids = el.getAttribute('aria-labelledby').split(/\s+/);
 		const strings = ids.map(id => {
-			const label = document.getElementById(id);
+			const label = el.getRootNode().getElementById(id);
 			return label ? getNameRaw(label, true, true, visited, true) : '';
 		});
 		ret = strings.join(' ');
@@ -205,7 +209,7 @@ export const getDescription = function(el) {
 	if (el.matches('[aria-describedby]')) {
 		const ids = el.getAttribute('aria-describedby').split(/\s+/);
 		const strings = ids.map(id => {
-			const label = document.getElementById(id);
+			const label = el.getRootNode().getElementById(id);
 			return label ? getNameRaw(label, true, true) : '';
 		});
 		ret = strings.join(' ');

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "aria-api",
-  "version": "0.8.0",
+  "version": "0.9.1",
   "description": "Access ARIA information from JavaScript",
+  "main": "dist/aria.js",
   "module": "index.js",
   "keywords": [
     "aria",
@@ -12,9 +13,9 @@
   "license": "MIT",
   "devDependencies": {
     "expect": "^1.20.2",
-    "mocha": "^10.2.0",
-    "mocha-headless-chrome": "^4.0.0",
-    "rollup": "^4.24.3"
+    "mocha": "^11.7.5",
+    "mocha-headless-chrome": "^5.1.0",
+    "rollup": "^4.57.1"
   },
   "files": [
     "index.js",