aria-api 0.6.0 → 0.8.0

package/index.js

@@ -1,18 +1,4 @@
-var query = require('./lib/query.js');
-var name = require('./lib/name.js');
-var atree = require('./lib/atree.js');
-
-module.exports = {
-	getRole: query.getRole,
-	getAttribute: query.getAttribute,
-	getName: name.getName,
-	getDescription: name.getDescription,
-
-	matches: query.matches,
-	querySelector: query.querySelector,
-	querySelectorAll: query.querySelectorAll,
-	closest: query.closest,
-
-	getParentNode: atree.getParentNode,
-	getChildNodes: atree.getChildNodes,
-};
+export { getParentNode, getChildNodes } from './lib/atree.js';
+export { getRole, getAttribute } from './lib/attrs.js';
+export { matches, querySelector, querySelectorAll, closest } from './lib/query.js';
+export { getName, getDescription } from './lib/name.js';

package/lib/atree.js

@@ -1,4 +1,4 @@
-const attrs = require('./attrs');
+import * as attrs from './attrs';
 
 const _getOwner = function(node, owners) {
 	if (node.nodeType === node.ELEMENT_NODE && node.id) {
@@ -36,7 +36,7 @@ const getOwner = function(node, owners) {
 	}
 };
 
-const getParentNode = function(node, owners) {
+export const getParentNode = function(node, owners) {
 	return getOwner(node, owners) || node.parentNode;
 };
 
@@ -44,7 +44,7 @@ const isHidden = function(node) {
 	return node.nodeType === node.ELEMENT_NODE && attrs.getAttribute(node, 'hidden');
 };
 
-const getChildNodes = function(node, owners) {
+export const getChildNodes = function(node, owners) {
 	const childNodes = [];
 
 	for (let i = 0; i < node.childNodes.length; i++) {
@@ -68,7 +68,7 @@ const getChildNodes = function(node, owners) {
 	return childNodes;
 };
 
-const walk = function(root, fn) {
+export const walk = function(root, fn) {
 	const owners = document.querySelectorAll('[aria-owns]');
 	let queue = [root];
 	while (queue.length) {
@@ -78,7 +78,7 @@ const walk = function(root, fn) {
 	}
 };
 
-const searchUp = function(node, test) {
+export const searchUp = function(node, test) {
 	const candidate = getParentNode(node);
 	if (candidate) {
 		if (test(candidate)) {
@@ -88,10 +88,3 @@ const searchUp = function(node, test) {
 		}
 	}
 };
-
-module.exports = {
-	'getParentNode': getParentNode,
-	'getChildNodes': getChildNodes,
-	'walk': walk,
-	'searchUp': searchUp,
-};

package/lib/attrs.js

@@ -1,4 +1,4 @@
-const constants = require('./constants.js');
+import * as constants from './constants.js';
 
 var unique = function(arr) {
 	return arr.filter((a, i) => arr.indexOf(a) === i);
@@ -17,7 +17,7 @@ var normalizeRoles = function(roles, includeAbstract) {
 };
 
 // candidates can be passed for performance optimization
-const getRole = function(el, candidates) {
+const getRoleRaw = function(el, candidates) {
 	// TODO: filter out any invalid roles (e.g. name or context required)
 	const roles = normalizeRoles(
 		(el.getAttribute('role') || '').toLowerCase().split(/\s+/)
@@ -41,14 +41,18 @@ const getRole = function(el, candidates) {
 	}
 };
 
-const hasRole = function(el, roles) {
+export const getRole = function(el) {
+	return getRoleRaw(el);
+};
+
+export const hasRole = function(el, roles) {
 	const subRoles = normalizeRoles(roles, true).map(role => {
 		return constants.roles[role].subRoles || [role];
 	});
-	return !!getRole(el, unique(flatten(subRoles)));
+	return !!getRoleRaw(el, unique(flatten(subRoles)));
 };
 
-const getAttribute = function(el, key) {
+export const getAttribute = function(el, key) {
 	if (constants.attributeStrongMapping.hasOwnProperty(key)) {
 		const value = el[constants.attributeStrongMapping[key]];
 		if (value) {
@@ -68,7 +72,7 @@ const getAttribute = function(el, key) {
 			return true;
 		}
 		const style = window.getComputedStyle(el);
-		if (style.display === 'none' || style.visibility === 'hidden') {
+		if (style.display === 'none' || style.visibility === 'hidden' || style.visibility === 'collapse') {
 			return true;
 		}
 	}
@@ -124,9 +128,3 @@ const getAttribute = function(el, key) {
 		return false;
 	}
 };
-
-module.exports = {
-	getRole: getRole,
-	hasRole: hasRole,
-	getAttribute: getAttribute,
-};

package/lib/constants.js

@@ -1,16 +1,20 @@
 // https://www.w3.org/TR/wai-aria/#state_prop_def
-exports.attributes = {
+export const attributes = {
 	'activedescendant': 'id',
 	'atomic': 'bool',
 	'autocomplete': 'token',
+	'braillelabel': 'string',
+	'brailleroledescription': 'string',
 	'busy': 'bool',
 	'checked': 'tristate',
 	'colcount': 'int',
 	'colindex': 'int',
+	'colindextext': 'string',
 	'colspan': 'int',
 	'controls': 'id-list',
 	'current': 'token',
 	'describedby': 'id-list',
+	'description': 'string',
 	'details': 'id',
 	'disabled': 'bool',
 	'dropeffect': 'token-list',
@@ -40,6 +44,7 @@ exports.attributes = {
 	'roledescription': 'string',
 	'rowcount': 'int',
 	'rowindex': 'int',
+	'rowindextext': 'string',
 	'rowspan': 'int',
 	'selected': 'bool-undefined',
 	'setsize': 'int',
@@ -50,14 +55,14 @@ exports.attributes = {
 	'valuetext': 'string',
 };
 
-exports.attributeStrongMapping = {
+export const attributeStrongMapping = {
 	'disabled': 'disabled',
 	'placeholder': 'placeholder',
 	'readonly': 'readOnly',
 	'required': 'required',
 };
 
-exports.attributeWeakMapping = {
+export const attributeWeakMapping = {
 	'checked': 'checked',
 	'colspan': 'colSpan',
 	'expanded': 'open',
@@ -69,9 +74,22 @@ exports.attributeWeakMapping = {
 // https://www.w3.org/TR/html/dom.html#sectioning-content-2
 const scoped = ['article *', 'aside *', 'nav *', 'section *'].join(',');
 
+const svgSelectors = function(selector) {
+	return [
+		// `${selector}:has(> title:not(:empty))`,
+		// `${selector}:has(> desc:not(:empty))`,
+		`${selector}[aria-label]`,
+		`${selector}[aria-roledescription]`,
+		`${selector}[aria-labelledby]`,
+		`${selector}[aria-describedby]`,
+		`${selector}[tabindex]`,
+		`${selector}[role]`,
+	];
+};
+
 // https://www.w3.org/TR/html-aam-1.0/#html-element-role-mappings
 // https://www.w3.org/TR/wai-aria/roles
-exports.roles = {
+export const roles = {
 	alert: {
 		childRoles: ['alertdialog'],
 		defaults: {
@@ -83,6 +101,7 @@ exports.roles = {
 	application: {},
 	article: {
 		selectors: ['article'],
+		childRoles: ['comment'],
 	},
 	banner: {
 		selectors: [`header:not(main *, ${scoped})`],
@@ -145,6 +164,9 @@ exports.roles = {
 		abstract: true,
 		childRoles: ['button', 'link', 'menuitem'],
 	},
+	comment: {
+		nameFromContents: true,
+	},
 	complementary: {
 		selectors: [
 			`aside:not(${scoped})`,
@@ -240,8 +262,8 @@ exports.roles = {
 	},
 	generic: {
 		selectors: [
-			'a:not([href])',
-			'area:not([href])',
+			'a:not([*|href])',
+			'area:not([*|href])',
 			`aside:not(${scoped}):not([aria-label]):not([aria-labelledby]):not([title])`,
 			'b',
 			'bdi',
@@ -265,8 +287,23 @@ exports.roles = {
 	'graphics-document': {
 		selectors: ['svg'],
 	},
-	'graphics-object': {},
-	'graphics-symbol': {},
+	'graphics-object': {
+		selectors: [
+			...svgSelectors('symbol'),
+			...svgSelectors('use'),
+		],
+	},
+	'graphics-symbol': {
+		selectors: [
+			...svgSelectors('circle'),
+			...svgSelectors('ellipse'),
+			...svgSelectors('line'),
+			...svgSelectors('path'),
+			...svgSelectors('polygon'),
+			...svgSelectors('polyline'),
+			...svgSelectors('rect'),
+		],
+	},
 	grid: {
 		childRoles: ['treegrid'],
 	},
@@ -281,7 +318,11 @@ exports.roles = {
 			'fieldset',
 			'hgroup',
 			'optgroup',
+			...svgSelectors('foreignObject'),
+			...svgSelectors('g'),
 			'text',
+			...svgSelectors('textPath'),
+			...svgSelectors('tspan'),
 		],
 		childRoles: ['row', 'select', 'toolbar', 'graphics-object'],
 	},
@@ -292,8 +333,13 @@ exports.roles = {
 			'level': 2,
 		},
 	},
-	img: {
-		selectors: ['img:not([alt=""])', 'graphics-symbol'],
+	image: {
+		selectors: [
+			'img:not([alt=""])',
+			'graphics-symbol',
+			...svgSelectors('image'),
+			...svgSelectors('mesh'),
+		],
 		childRoles: ['doc-cover'],
 	},
 	input: {
@@ -341,7 +387,7 @@ exports.roles = {
 		],
 	},
 	link: {
-		selectors: ['a[href]', 'area[href]'],
+		selectors: ['a[*|href]', 'area[*|href]'],
 		childRoles: ['doc-backlink', 'doc-biblioref', 'doc-glossref', 'doc-noteref'],
 		nameFromContents: true,
 	},
@@ -371,6 +417,9 @@ exports.roles = {
 	main: {
 		selectors: ['main'],
 	},
+	mark: {
+		selectors: ['mark'],
+	},
 	marquee: {},
 	math: {
 		selectors: ['math'],
@@ -394,11 +443,10 @@ exports.roles = {
 		},
 	},
 	menuitem: {
-		childRoles: ['menuitemcheckbox'],
+		childRoles: ['menuitemcheckbox', 'menuitemradio'],
 		nameFromContents: true,
 	},
 	menuitemcheckbox: {
-		childRoles: ['menuitemradio'],
 		nameFromContents: true,
 		defaults: {
 			'checked': 'false',
@@ -505,12 +553,13 @@ exports.roles = {
 			'emphasis',
 			'figure',
 			'group',
-			'img',
+			'image',
 			'insertion',
 			'landmark',
 			'list',
 			'listitem',
 			'log',
+			'mark',
 			'marquee',
 			'math',
 			'note',
@@ -518,6 +567,7 @@ exports.roles = {
 			'status',
 			'strong',
 			'subscript',
+			'suggestion',
 			'superscript',
 			'table',
 			'tabpanel',
@@ -682,7 +732,7 @@ exports.roles = {
 };
 
 const getSubRoles = function(role) {
-	const children = (exports.roles[role]).childRoles || [];
+	const children = (roles[role]).childRoles || [];
 	const descendents = children.map(getSubRoles);
 
 	const result = [role];
@@ -698,29 +748,30 @@ const getSubRoles = function(role) {
 	return result;
 };
 
-exports.attrsWithDefaults = [];
+export const attrsWithDefaults = [];
 
-for (const role in exports.roles) {
-	exports.roles[role].subRoles = getSubRoles(role);
-	for (const key in exports.roles[role].defaults) {
-		if (!exports.attrsWithDefaults.includes(key)) {
-			exports.attrsWithDefaults.push(key);
+for (const role in roles) {
+	roles[role].subRoles = getSubRoles(role);
+	for (const key in roles[role].defaults) {
+		if (!attrsWithDefaults.includes(key)) {
+			attrsWithDefaults.push(key);
 		}
 	}
 }
 
-exports.aliases = {
+export const aliases = {
 	'presentation': 'none',
 	'directory': 'list',
+	'img': 'image',
 };
 
-exports.nameFromDescendant = {
+export const nameFromDescendant = {
 	'figure': 'figcaption',
 	'table': 'caption',
 	'fieldset': 'legend',
 };
 
-exports.nameDefaults = {
+export const nameDefaults = {
 	'input[type="submit"]': 'Submit',
 	'input[type="reset"]': 'Reset',
 	'summary': 'Details',

package/lib/name.js

@@ -1,42 +1,66 @@
-const constants = require('./constants.js');
-const atree = require('./atree.js');
-const query = require('./query.js');
-
-const getPseudoContent = function(node, selector) {
-	const styles = window.getComputedStyle(node, selector);
-	const ret = styles.getPropertyValue('content');
-	const inline = styles.display.substr(0, 6) === 'inline';
-	if (!ret) {
-		return '';
-	}
-	if (ret.substr(0, 1) !== '"') {
-		return '';
-	} else {
-		if (inline) {
-			return ret.slice(1, -1);
+import * as constants from './constants.js';
+import * as atree from './atree.js';
+import * as attrs from './attrs.js';
+import * as query from './query.js';
+
+const addSpaces = function(text, el, pseudoSelector) {
+	// https://github.com/w3c/accname/issues/3
+	const styles = window.getComputedStyle(el, pseudoSelector);
+	const inline = styles.display === 'inline';
+	return inline ? text : ` ${text} `;
+};
+
+const getPseudoContent = function(el, pseudoSelector) {
+	const styles = window.getComputedStyle(el, pseudoSelector);
+	let tail = styles.getPropertyValue('content').trim();
+	let ret = [];
+
+	let match;
+	while (tail.length) {
+		if ((match = tail.match(/^"([^"]*)"/))) {
+			ret.push(match[1]);
+		} else if ((match = tail.match(/^([a-z-]+)\(([^)]*)\)/))) {
+			if (match[1] === 'attr') {
+				ret.push(el.getAttribute(match[2]) || '');
+			}
+		} else if ((match = tail.match(/^([a-z-]+)/))) {
+			if (match[1] === 'open-quote' || match[1] === 'close-quote') {
+				ret.push('"');
+			}
+		} else if ((match = tail.match(/^\//))) {
+			ret = [];
 		} else {
-			return ' ' + ret.slice(1, -1) + ' ';
+			// invalid content, ignore
+			return '';
 		}
+		tail = tail.slice(match[0].length).trim();
 	}
+
+	return addSpaces(ret.join(''), el, pseudoSelector);
 };
 
-const getContent = function(root, visited) {
+const getContent = function(root, ongoingLabelledBy, visited) {
 	const children = atree.getChildNodes(root);
 
 	let ret = '';
 	for (let i = 0; i < children.length; i++) {
 		const node = children[i];
 		if (node.nodeType === node.TEXT_NODE) {
-			ret += node.textContent;
+			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 if (node.nodeType === node.ELEMENT_NODE) {
 			if (node.tagName.toLowerCase() === 'br') {
 				ret += '\n';
-			} else if (window.getComputedStyle(node).display.substr(0, 6) === 'inline' &&
-					node.tagName.toLowerCase() !== 'input' &&
-					node.tagName.toLowerCase() !== 'img') {  // https://github.com/w3c/accname/issues/3
-				ret += getName(node, true, visited);
 			} else {
-				ret += ' ' + getName(node, true, visited) + ' ';
+				ret += getNameRaw(node, true, ongoingLabelledBy, visited);
 			}
 		}
 	}
@@ -45,13 +69,13 @@ const getContent = function(root, visited) {
 };
 
 const allowNameFromContent = function(el) {
-	const role = query.getRole(el);
+	const role = attrs.getRole(el);
 	if (role) {
 		return constants.roles[role].nameFromContents;
 	}
 };
 
-const getName = function(el, recursive, visited, directReference) {
+const getNameRaw = function(el, recursive, ongoingLabelledBy, visited, directReference) {
 	let ret = '';
 
 	visited = visited || [];
@@ -67,28 +91,28 @@ const getName = function(el, recursive, visited, directReference) {
 	// handled in atree
 
 	// B
-	if (!recursive && el.matches('[aria-labelledby]')) {
+	if (!ongoingLabelledBy && el.matches('[aria-labelledby]')) {
 		const ids = el.getAttribute('aria-labelledby').split(/\s+/);
 		const strings = ids.map(id => {
 			const label = document.getElementById(id);
-			return label ? getName(label, true, visited, true) : '';
+			return label ? getNameRaw(label, true, true, visited, true) : '';
 		});
 		ret = strings.join(' ');
 	}
 
 	// E (the current draft has this at this high priority)
 	if (!ret.trim() && recursive) {
-		if (query.matches(el, 'textbox,button')) {
+		if (query.matches(el, 'textbox')) {
 			ret = el.value || el.textContent;
 		} else if (query.matches(el, 'combobox,listbox')) {
 			const selected = query.querySelector(el, ':selected') || query.querySelector(el, 'option');
 			if (selected) {
-				ret = getName(selected, recursive, visited);
+				ret = getNameRaw(selected, recursive, ongoingLabelledBy, visited);
 			} else {
 				ret = el.value || '';
 			}
 		} else if (query.matches(el, 'range')) {
-			ret = '' + (query.getAttribute(el, 'valuetext') || query.getAttribute(el, 'valuenow') || el.value);
+			ret = '' + (attrs.getAttribute(el, 'valuetext') || attrs.getAttribute(el, 'valuenow') || el.value);
 		}
 	}
 
@@ -101,13 +125,10 @@ const getName = function(el, recursive, visited, directReference) {
 	// D
 	if (!ret.trim() && !recursive && el.labels) {
 		const strings = Array.prototype.map.call(el.labels, label => {
-			return getName(label, true, visited);
+			return getNameRaw(label, true, ongoingLabelledBy, visited);
 		});
 		ret = strings.join(' ');
 	}
-	if (!ret.trim()) {
-		ret = el.placeholder || '';
-	}
 	if (!ret.trim()) {
 		ret = el.alt || '';
 	}
@@ -119,7 +140,7 @@ const getName = function(el, recursive, visited, directReference) {
 			if (el.matches(selector)) {
 				const descendant = el.querySelector(constants.nameFromDescendant[selector]);
 				if (descendant) {
-					ret = getName(descendant, true, visited);
+					ret = getNameRaw(descendant, true, ongoingLabelledBy, visited);
 				}
 			}
 		}
@@ -130,11 +151,14 @@ const getName = function(el, recursive, visited, directReference) {
 			ret = svgTitle.textContent;
 		}
 	}
+	if (!ret.trim() && el.matches('a')) {
+		ret = el.getAttribute('xlink:title') || '';
+	}
 
 	// F
 	// FIXME: menu is not mentioned in the spec
 	if (!ret.trim() && (recursive || allowNameFromContent(el) || el.closest('label')) && !query.matches(el, 'menu')) {
-		ret = getContent(el, visited);
+		ret = getContent(el, ongoingLabelledBy, visited);
 	}
 
 	if (!ret.trim() && query.matches(el, 'button')) {
@@ -153,9 +177,8 @@ const getName = function(el, recursive, visited, directReference) {
 	// handled in getContent
 
 	// I
-	// FIXME: presentation not mentioned in the spec
-	if (!ret.trim() && (directReference || !query.matches(el, 'presentation'))) {
-		ret = el.title || '';
+	if (!ret.trim()) {
+		ret = el.title || el.placeholder || '';
 	}
 
 	// FIXME: not exactly sure about this, but it reduces the number of failing
@@ -166,21 +189,24 @@ const getName = function(el, recursive, visited, directReference) {
 
 	const before = getPseudoContent(el, ':before');
 	const after = getPseudoContent(el, ':after');
-	return before + ret + after;
+	return addSpaces(before + ret + after, el);
 };
 
-const getNameTrimmed = function(el) {
-	return getName(el).replace(/\s+/g, ' ').trim();
+export const getName = function(el) {
+	return getNameRaw(el)
+		.replace(/[ \n\r\t\f]+/g, ' ')
+		.replace(/^ /, '')
+		.replace(/ $/, '');
 };
 
-const getDescription = function(el) {
+export const getDescription = function(el) {
 	let ret = '';
 
 	if (el.matches('[aria-describedby]')) {
 		const ids = el.getAttribute('aria-describedby').split(/\s+/);
 		const strings = ids.map(id => {
 			const label = document.getElementById(id);
-			return label ? getName(label, true) : '';
+			return label ? getNameRaw(label, true, true) : '';
 		});
 		ret = strings.join(' ');
 	} else if (el.matches('[aria-description]')) {
@@ -193,17 +219,15 @@ const getDescription = function(el) {
 	} else if (el.title) {
 		ret = el.title;
 	}
+	if (!ret.trim() && el.matches('a')) {
+		ret = el.getAttribute('xlink:title') || '';
+	}
 
 	ret = (ret || '').trim().replace(/\s+/g, ' ');
 
-	if (ret === getNameTrimmed(el)) {
+	if (ret === getName(el)) {
 		ret = '';
 	}
 
 	return ret;
 };
-
-module.exports = {
-	getName: getNameTrimmed,
-	getDescription: getDescription,
-};

package/lib/query.js

@@ -1,8 +1,7 @@
-const attrs = require('./attrs.js');
-const atree = require('./atree.js');
+import * as attrs from './attrs.js';
+import * as atree from './atree.js';
 
-
-const matches = function(el, selector) {
+export const matches = function(el, selector) {
 	if (selector.substr(0, 1) === ':') {
 		const attr = selector.substr(1);
 		return attrs.getAttribute(el, attr);
@@ -40,7 +39,7 @@ const _querySelector = function(all) {
 	};
 };
 
-const closest = function(el, selector) {
+export const closest = function(el, selector) {
 	return atree.searchUp(el, candidate => {
 		if (candidate.nodeType === candidate.ELEMENT_NODE) {
 			return matches(candidate, selector);
@@ -48,11 +47,5 @@ const closest = function(el, selector) {
 	});
 };
 
-module.exports = {
-	getRole: el => attrs.getRole(el),
-	getAttribute: attrs.getAttribute,
-	matches: matches,
-	querySelector: _querySelector(),
-	querySelectorAll: _querySelector(true),
-	closest: closest,
-};
+export const querySelector = _querySelector();
+export const querySelectorAll = _querySelector(true);

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "aria-api",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "description": "Access ARIA information from JavaScript",
-  "main": "index.js",
+  "module": "index.js",
   "keywords": [
     "aria",
     "accessibility",
@@ -11,11 +11,10 @@
   "author": "Tobias Bengfort <tobias.bengfort@posteo.de>",
   "license": "MIT",
   "devDependencies": {
-    "brfs": "^2.0.0",
-    "browserify": "^17.0.0",
     "expect": "^1.20.2",
     "mocha": "^10.2.0",
-    "mocha-headless-chrome": "^4.0.0"
+    "mocha-headless-chrome": "^4.0.0",
+    "rollup": "^4.24.3"
   },
   "files": [
     "index.js",