fix(rule): Allow empty aria-labelledby values (#829)

Closes #372
dequelabs · Apr 11, 2018 · d280c5f · d280c5f
1 parent 688f427
commit d280c5f
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 2 deletions.
diff --git a/lib/commons/aria/attributes.js b/lib/commons/aria/attributes.js
@@ -55,7 +55,7 @@ aria.validateAttr = function (att) {
  * @return {Boolean}
  */
 aria.validateAttrValue = function (node, attr) {
-	/*eslint complexity: ["error",15]*/
+	/*eslint complexity: ["error",17]*/
 	'use strict';
 	var matches, list,
 		value = node.getAttribute(attr),
@@ -84,6 +84,10 @@ aria.validateAttrValue = function (node, attr) {
 		return !!(value && doc.getElementById(value));
 
 	case 'idrefs':
+		// exempt attributes that allow empty strings
+		if ((attrInfo.values && attrInfo.values.indexOf('') !== -1) && value.trim().length === 0) {
+			return true;
+		}
 		list = axe.utils.tokenList(value);
 		// Check if any value isn't in the list of values
 		return list.reduce(function (result, token) {

diff --git a/lib/commons/aria/index.js b/lib/commons/aria/index.js
@@ -87,7 +87,8 @@ lookupTable.attributes = {
 		type: 'string'
 	},
 	'aria-labelledby': {
-		type: 'idrefs'
+		type: 'idrefs',
+		values: ['']
 	},
 	'aria-level': {
 		type: 'int'

diff --git a/test/checks/aria/valid-attr-value.js b/test/checks/aria/valid-attr-value.js
@@ -3,6 +3,7 @@ describe('aria-valid-attr-value', function () {
 
 	var fixture = document.getElementById('fixture');
 	var checkContext = axe.testUtils.MockCheckContext();
+	var fixtureSetup = axe.testUtils.fixtureSetup;
 
 	afterEach(function () {
 		fixture.innerHTML = '';
@@ -89,6 +90,17 @@ describe('aria-valid-attr-value', function () {
 		axe.commons.aria.validateAttrValue = orig;
 	});
 
+	it('should allow empty strings rather than idrefs for specific attributes', function () {
+		fixtureSetup(
+			'<button aria-labelledby="">Button</button>' +
+			'<div aria-owns=""></div>'
+		);
+		var passing = fixture.querySelector('button');
+		var failing = fixture.querySelector('div');
+		assert.isTrue(checks['aria-valid-attr-value'].evaluate.call(checkContext, passing));
+		assert.isFalse(checks['aria-valid-attr-value'].evaluate.call(checkContext, failing));
+	});
+
 	describe('options', function () {
 		it('should exclude supplied attributes', function () {
 			fixture.innerHTML = '<div id="target" aria-live="nope" aria-describedby="no exist k thx"></div>';