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

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);

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,

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';

test/integration/rules/aria-allowed-attr/failures.json

@@ -4,4 +4,4 @@
 	"violations": [
 		["#fail1"], ["#fail2"]
 	]
-}
+}

test/integration/rules/aria-allowed-attr/passes.json

@@ -11,6 +11,6 @@
 		["#pass43"], ["#pass44"], ["#pass45"], ["#pass46"], ["#pass47"], ["#pass48"], ["#pass49"],
 		["#pass50"], ["#pass51"], ["#pass52"], ["#pass53"], ["#pass54"], ["#pass55"], ["#pass56"],
 		["#pass57"], ["#pass58"], ["#pass59"], ["#pass60"], ["#pass61"], ["#pass62"], ["#pass63"],
-		["#pass64"], ["#pass65"], ["#pass66"], ["#pass67"], ["#pass68"]
+    ["#pass64"], ["#pass65"], ["#pass66"], ["#pass67"], ["#pass68"]
 	]
-}
+}

test/integration/rules/aria-valid-attr-value/aria-valid-attr-value.html

@@ -40,6 +40,7 @@ <h2>Violations</h2>
 	<div aria-valuemax="stuff" id="violation32">hi</div>
 	<div aria-valuemin="stuff" id="violation33">hi</div>
 	<div aria-valuenow="stuff" id="violation34">hi</div>
+	<div aria-errormessage="violation35-ref" id="violation35">hi</div><div id="violation35-ref"></div>
 </div>
 <h2>Possible False Positives</h2>
 <div>
@@ -245,6 +246,10 @@ <h2>Possible False Positives</h2>
 	<div aria-valuenow="-.1" id="pass165">hi</div>
 	<div aria-valuenow="-412" id="pass166">hi</div>
 	<div aria-valuetext="stuff" id="pass167">hi</div>
+	<div aria-errormessage="pass168-ref" id="pass168">hi</div><div id="pass168-ref" role="alert"></div>
+	<div aria-errormessage="pass169-ref" id="pass169">hi</div><div id="pass169-ref" aria-live="assertive"></div>
+	<div aria-errormessage="ref" aria-describedby="ref" id="pass170">hi</div>
+
 
 	<div id="ref">Hi</div>
 	<div id="ref2">Hi2</div>

test/integration/rules/aria-valid-attr-value/aria-valid-attr-value.json

@@ -7,7 +7,7 @@
 		["#violation12"], ["#violation13"], ["#violation14"], ["#violation15"], ["#violation16"], ["#violation17"],
 		["#violation18"], ["#violation19"], ["#violation20"], ["#violation21"], ["#violation22"], ["#violation23"],
 		["#violation24"], ["#violation25"], ["#violation26"], ["#violation27"], ["#violation28"], ["#violation29"],
-		["#violation30"], ["#violation31"], ["#violation32"], ["#violation33"], ["#violation34"]
+		["#violation30"], ["#violation31"], ["#violation32"], ["#violation33"], ["#violation34"],["#violation35"]
 	],
 	"passes":  [
 		["#pass1"], ["#pass2"], ["#pass3"], ["#pass4"], ["#pass5"], ["#pass6"], ["#pass7"], ["#pass8"], ["#pass9"],
@@ -31,6 +31,7 @@
 		["#pass140"], ["#pass141"], ["#pass142"], ["#pass143"], ["#pass144"], ["#pass145"], ["#pass146"],
 		["#pass147"], ["#pass148"], ["#pass149"], ["#pass150"], ["#pass151"], ["#pass152"], ["#pass153"],
 		["#pass154"], ["#pass155"], ["#pass156"], ["#pass157"], ["#pass158"], ["#pass159"], ["#pass160"],
-		["#pass161"], ["#pass162"], ["#pass163"], ["#pass164"], ["#pass165"], ["#pass166"], ["#pass167"]
+    ["#pass161"], ["#pass162"], ["#pass163"], ["#pass164"], ["#pass165"], ["#pass166"], ["#pass167"],
+    ["#pass168"], ["#pass169"], ["#pass170"]
 	]
 }