aria-api 0.5.0 → 0.7.0

package/lib/name.js

@@ -1,42 +1,56 @@
-var constants = require('./constants.js');
-var atree = require('./atree.js');
-var query = require('./query.js');
-
-var getPseudoContent = function(node, selector) {
-	var styles = window.getComputedStyle(node, selector);
-	var ret = styles.getPropertyValue('content');
-	var inline = styles.display.substr(0, 6) === 'inline';
-	if (!ret) {
-		return '';
-	}
-	if (ret.substr(0, 1) !== '"') {
-		return '';
-	} else {
-		if (inline) {
-			return ret.slice(1, -1);
+const constants = require('./constants.js');
+const atree = require('./atree.js');
+const query = require('./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);
 };
 
-var getContent = function(root, visited) {
-	var children = atree.getChildNodes(root);
+const getContent = function(root, ongoingLabelledBy, visited) {
+	const children = atree.getChildNodes(root);
 
-	var ret = '';
-	for (var i = 0; i < children.length; i++) {
-		var node = children[i];
+	let ret = '';
+	for (let i = 0; i < children.length; i++) {
+		const node = children[i];
 		if (node.nodeType === node.TEXT_NODE) {
 			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 += getName(node, true, ongoingLabelledBy, visited);
 			}
 		}
 	}
@@ -44,18 +58,15 @@ var getContent = function(root, visited) {
 	return ret;
 };
 
-var allowNameFromContent = function(el) {
-	var role = query.getRole(el);
-	return (constants.roles[role] || {}).nameFromContents;
-};
-
-var isInLabelForOtherWidget = function(el) {
-	var label = el.parentElement.closest('label');
-	return label && (!el.labels || !Array.prototype.includes.call(el.labels, label));
+const allowNameFromContent = function(el) {
+	const role = query.getRole(el);
+	if (role) {
+		return constants.roles[role].nameFromContents;
+	}
 };
 
-var getName = function(el, recursive, visited, directReference) {
-	var ret = '';
+const getName = function(el, recursive, ongoingLabelledBy, visited, directReference) {
+	let ret = '';
 
 	visited = visited || [];
 	if (visited.includes(el)) {
@@ -70,15 +81,31 @@ var getName = function(el, recursive, visited, directReference) {
 	// handled in atree
 
 	// B
-	if (!recursive && el.matches('[aria-labelledby]')) {
-		var ids = el.getAttribute('aria-labelledby').split(/\s+/);
-		var strings = ids.map(id => {
-			var label = document.getElementById(id);
-			return label ? getName(label, true, visited, true) : '';
+	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, 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')) {
+			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, ongoingLabelledBy, visited);
+			} else {
+				ret = el.value || '';
+			}
+		} else if (query.matches(el, 'range')) {
+			ret = '' + (query.getAttribute(el, 'valuetext') || query.getAttribute(el, 'valuenow') || el.value);
+		}
+	}
+
 	// C
 	if (!ret.trim() && el.matches('[aria-label]')) {
 		// FIXME: may skip to 2E
@@ -87,14 +114,11 @@ var getName = function(el, recursive, visited, directReference) {
 
 	// D
 	if (!ret.trim() && !recursive && el.labels) {
-		var strings = Array.prototype.map.call(el.labels, label => {
-			return getName(label, true, visited);
+		const strings = Array.prototype.map.call(el.labels, label => {
+			return getName(label, true, ongoingLabelledBy, visited);
 		});
 		ret = strings.join(' ');
 	}
-	if (!ret.trim()) {
-		ret = el.placeholder || '';
-	}
 	if (!ret.trim()) {
 		ret = el.alt || '';
 	}
@@ -102,48 +126,37 @@ var getName = function(el, recursive, visited, directReference) {
 		ret = el.title;
 	}
 	if (!ret.trim()) {
-		for (var selector in constants.nameFromDescendant) {
+		for (const selector in constants.nameFromDescendant) {
 			if (el.matches(selector)) {
-				var descendant = el.querySelector(constants.nameFromDescendant[selector]);
+				const descendant = el.querySelector(constants.nameFromDescendant[selector]);
 				if (descendant) {
-					ret = getName(descendant, true, visited);
+					ret = getName(descendant, true, ongoingLabelledBy, visited);
 				}
 			}
 		}
 	}
 	if (!ret.trim() && el.matches('svg *')) {
-		var svgTitle = el.querySelector('title');
+		const svgTitle = el.querySelector('title');
 		if (svgTitle && svgTitle.parentElement === el) {
 			ret = svgTitle.textContent;
 		}
 	}
-
-	// E
-	if (!ret.trim() && (recursive || isInLabelForOtherWidget(el) || query.matches(el, 'button'))) {
-		if (query.matches(el, 'textbox,button,combobox,listbox,range')) {
-			if (query.matches(el, 'textbox,button')) {
-				ret = el.value || el.textContent;
-			} else if (query.matches(el, 'combobox,listbox')) {
-				var selected = query.querySelector(el, ':selected') || query.querySelector(el, 'option');
-				if (selected) {
-					ret = getName(selected, recursive, visited);
-				} else {
-					ret = el.value || '';
-				}
-			} else if (query.matches(el, 'range')) {
-				ret = '' + (query.getAttribute(el, 'valuetext') || query.getAttribute(el, 'valuenow') || el.value);
-			}
-		}
+	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')) {
+		ret = el.value || '';
 	}
 
 	if (!ret.trim()) {
-		for (var selector in constants.nameDefaults) {
+		for (const selector in constants.nameDefaults) {
 			if (el.matches(selector)) {
 				ret = constants.nameDefaults[selector];
 			}
@@ -154,9 +167,8 @@ var 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
@@ -165,35 +177,41 @@ var getName = function(el, recursive, visited, directReference) {
 		ret = ' ';
 	}
 
-	var before = getPseudoContent(el, ':before');
-	var after = getPseudoContent(el, ':after');
-	return before + ret + after;
+	const before = getPseudoContent(el, ':before');
+	const after = getPseudoContent(el, ':after');
+	return addSpaces(before + ret + after, el);
 };
 
-var getNameTrimmed = function(el) {
-	return getName(el).replace(/\s+/g, ' ').trim();
+const getNameTrimmed = function(el) {
+	return getName(el)
+		.replace(/[ \n\r\t\f]+/g, ' ')
+		.replace(/^ /, '')
+		.replace(/ $/, '');
 };
 
-var getDescription = function(el) {
-	var ret = '';
+const getDescription = function(el) {
+	let ret = '';
 
 	if (el.matches('[aria-describedby]')) {
-		var ids = el.getAttribute('aria-describedby').split(/\s+/);
-		var strings = ids.map(id => {
-			var label = document.getElementById(id);
-			return label ? getName(label, true) : '';
+		const ids = el.getAttribute('aria-describedby').split(/\s+/);
+		const strings = ids.map(id => {
+			const label = document.getElementById(id);
+			return label ? getName(label, true, true) : '';
 		});
 		ret = strings.join(' ');
 	} else if (el.matches('[aria-description]')) {
 		ret = el.getAttribute('aria-description');
 	} else if (el.matches('svg *')) {
-		var svgDesc = el.querySelector('desc');
+		const svgDesc = el.querySelector('desc');
 		if (svgDesc && svgDesc.parentElement === el) {
 			ret = svgDesc.textContent;
 		}
 	} else if (el.title) {
 		ret = el.title;
 	}
+	if (!ret.trim() && el.matches('a')) {
+		ret = el.getAttribute('xlink:title') || '';
+	}
 
 	ret = (ret || '').trim().replace(/\s+/g, ' ');
 

package/lib/query.js

@@ -1,31 +1,29 @@
-var attrs = require('./attrs.js');
-var atree = require('./atree.js');
+const attrs = require('./attrs.js');
+const atree = require('./atree.js');
 
 
-var matches = function(el, selector) {
-	var actual;
-
+const matches = function(el, selector) {
 	if (selector.substr(0, 1) === ':') {
-		var attr = selector.substr(1);
+		const attr = selector.substr(1);
 		return attrs.getAttribute(el, attr);
 	} else if (selector.substr(0, 1) === '[') {
-		var match = /\[([a-z]+)="(.*)"\]/.exec(selector);
-		actual = attrs.getAttribute(el, match[1]);
-		var rawValue = match[2];
+		const match = /\[([a-z]+)="(.*)"\]/.exec(selector);
+		const actual = attrs.getAttribute(el, match[1]);
+		const rawValue = match[2];
 		return actual.toString() === rawValue;
 	} else {
 		return attrs.hasRole(el, selector.split(','));
 	}
 };
 
-var _querySelector = function(all) {
-	return function(root, role) {
-		var results = [];
+const _querySelector = function(all) {
+	return function(root, selector) {
+		const results = [];
 		try {
 			atree.walk(root, node => {
 				if (node.nodeType === node.ELEMENT_NODE) {
 					// FIXME: skip hidden elements
-					if (matches(node, role)) {
+					if (matches(node, selector)) {
 						results.push(node);
 						if (!all) {
 							throw 'StopIteration';
@@ -42,7 +40,7 @@ var _querySelector = function(all) {
 	};
 };
 
-var closest = function(el, selector) {
+const closest = function(el, selector) {
 	return atree.searchUp(el, candidate => {
 		if (candidate.nodeType === candidate.ELEMENT_NODE) {
 			return matches(candidate, selector);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aria-api",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "Access ARIA information from JavaScript",
   "main": "index.js",
   "keywords": [