fix(aria-errormessage): adds support for aria-errormessage

dequelabs · Sep 12, 2017 · 0d1c7d5 · 0d1c7d5
1 parent f5b5299
commit 0d1c7d5
Show file tree

Hide file tree

Showing 7 changed files with 125 additions and 9 deletions.
diff --git a/lib/commons/aria/attributes.js b/lib/commons/aria/attributes.js
@@ -36,6 +36,24 @@ aria.validateAttr = function (att) {
 	return !!lookupTables.attributes[att];
 };
 
+/**
+ * Validate the value of an ARIA attribute with an idref
+ * @param  {HTMLElement} doc Root element
+ * @param  {HTMLElement} node The element to check
+ * @param  {String} attr The name of the attribute
+ * @param  {String} value The value of the attribute
+ * @return {Boolean}
+ */
+aria.validateIdrefType = function (doc, node, attr, value) {
+	var idref = value && doc.getElementById(value);
+	if (idref && attr === 'aria-errormessage') {
+		return idref.getAttribute('role') === 'alert' ||
+			idref.getAttribute('aria-live') === 'assertive' ||
+			axe.utils.tokenList(node.getAttribute('aria-describedby') || '').indexOf(value) > -1;
+	}
+	return !!idref;
+};
+
 /**
  * Validate the value of an ARIA attribute
  * @param  {HTMLElement} node The element to check
@@ -60,7 +78,7 @@ aria.validateAttrValue = function (node, attr) {
 	case 'nmtoken':
 		return (typeof value === 'string' && attrInfo.values.indexOf(value.toLowerCase()) !== -1);
 
-	case 'nmtokens': 
+	case 'nmtokens':
 		list = axe.utils.tokenList(value);
 		// Check if any value isn't in the list of values
 		return list.reduce(function (result, token) {
@@ -69,7 +87,7 @@ aria.validateAttrValue = function (node, attr) {
 		}, list.length !== 0);
 
 	case 'idref':
-		return !!(value && doc.getElementById(value));
+		return aria.validateIdrefType(doc, node, attr, value);
 
 	case 'idrefs':
 		list = axe.utils.tokenList(value);

diff --git a/lib/commons/aria/index.js b/lib/commons/aria/index.js
@@ -48,6 +48,9 @@ lookupTables.attributes = {
 		type: 'nmtokens',
 		values: ['copy', 'move', 'reference', 'execute', 'popup', 'none']
 	},
+	'aria-errormessage': {
+		type: 'idref'
+	},
 	'aria-expanded': {
 		type: 'nmtoken',
 		values: ['true', 'false', 'undefined']
@@ -250,7 +253,7 @@ lookupTables.role = {
 	'columnheader': {
 		type: 'structure',
 		attributes: {
-			allowed: ['aria-colindex', 'aria-colspan', 'aria-expanded', 'aria-rowindex', 'aria-rowspan', 
+			allowed: ['aria-colindex', 'aria-colspan', 'aria-expanded', 'aria-rowindex', 'aria-rowspan',
 				'aria-required', 'aria-readonly', 'aria-selected', 'aria-sort']
 		},
 		owned: null,
@@ -341,7 +344,7 @@ lookupTables.role = {
 		attributes: {
 			allowed: ['aria-expanded']
 		},
-		owned: { 
+		owned: {
 			one: ['article']
 		},
 		nameFrom: ['author'],
@@ -372,7 +375,7 @@ lookupTables.role = {
 	'gridcell': {
 		type: 'widget',
 		attributes: {
-			allowed: ['aria-colindex', 'aria-colspan', 'aria-expanded', 'aria-rowindex', 
+			allowed: ['aria-colindex', 'aria-colspan', 'aria-expanded', 'aria-rowindex',
 				'aria-rowspan', 'aria-selected', 'aria-readonly', 'aria-required']
 		},
 		owned: null,
@@ -669,7 +672,7 @@ lookupTables.role = {
 	'rowheader': {
 		type: 'structure',
 		attributes: {
-			allowed: ['aria-colindex', 'aria-colspan', 'aria-expanded', 'aria-rowindex', 'aria-rowspan', 
+			allowed: ['aria-colindex', 'aria-colspan', 'aria-expanded', 'aria-rowindex', 'aria-rowspan',
 				'aria-required', 'aria-readonly', 'aria-selected', 'aria-sort']
 		},
 		owned: null,

diff --git a/test/checks/aria/valid-attr-value.js b/test/checks/aria/valid-attr-value.js
@@ -60,6 +60,23 @@ describe('aria-valid-attr-value', function () {
 		assert.isNull(checkContext._data);
 	});
 
+	it('should return true if aria-errormessage id is alert or aria-describedby', function () {
+		var testHTML = '<div></div>';
+		testHTML += '<div id="plain"></div>';
+		testHTML += '<div id="live" aria-live="assertive"></div>';
+		testHTML += '<div id="alert" role="alert"></div>';
+		fixture.innerHTML = testHTML;
+		var target = fixture.children[0];
+		target.setAttribute('aria-errormessage', 'plain');
+		assert.isFalse(checks['aria-valid-attr-value'].evaluate.call(checkContext, target));
+		target.setAttribute('aria-errormessage', 'live');
+		assert.isTrue(checks['aria-valid-attr-value'].evaluate.call(checkContext, target));
+		target.setAttribute('aria-errormessage', 'alert');
+		assert.isTrue(checks['aria-valid-attr-value'].evaluate.call(checkContext, target));
+		target.setAttribute('aria-describedby', 'plain');
+		assert.isTrue(checks['aria-valid-attr-value'].evaluate.call(checkContext, target));
+	});
+
 	it('should return false if any values are invalid', function () {
 		var node = document.createElement('div');
 		node.id = 'test';

diff --git a/test/integration/rules/aria-allowed-attr/failures.html b/test/integration/rules/aria-allowed-attr/failures.html
@@ -1,3 +1,4 @@
 
 <div role="alert" aria-selected="true" id="fail1">fail</div>
 <div role="link" aria-selected="true" id="fail2">fail</div>
+<input type="text" id="fail3" aria-errormessage="fail3-error"/><p id="fail3-error"></p>
diff --git a/test/integration/rules/aria-allowed-attr/failures.json b/test/integration/rules/aria-allowed-attr/failures.json
@@ -2,6 +2,6 @@
 	"description": "aria-allowed-attr failing tests",
 	"rule": "aria-allowed-attr",
 	"violations": [
-		["#fail1"], ["#fail2"]
+		["#fail1"], ["#fail2"], ["#fail3"]
 	]
-}
+}