fix(aria-allowed-attr): restrict br and wbr elements to aria-hidden only

lib/checks/aria/aria-allowed-attr-evaluate.js

@@ -29,7 +29,7 @@ import { isFocusable } from '../../commons/dom';
 export default function ariaAllowedAttrEvaluate(node, options, virtualNode) {
   const invalid = [];
   const role = getRole(virtualNode);
-  let allowed = allowedAttr(role);
+  let allowed = allowedAttr(role, { vNode: virtualNode });
 
   // @deprecated: allowed attr options to pass more attrs.
   // configure the standards spec instead

lib/commons/aria/allowed-attr.js

@@ -7,9 +7,16 @@ import getGlobalAriaAttrs from '../standards/get-global-aria-attrs';
  * @memberof axe.commons.aria
  * @instance
  * @param  {String} role The role to check
+ * @param  {Object} options Optional configuration
+ * @param  {VirtualNode} options.vNode Optional virtual node for element-level restrictions
  * @return {Array}
  */
-function allowedAttr(role) {
+function allowedAttr(role, { vNode } = {}) {
+  // Check for br and wbr elements - only aria-hidden is allowed
+  if (vNode && ['br', 'wbr'].includes(vNode.props.nodeName)) {
+    return ['aria-hidden'];
+  }
+
   const roleDef = standards.ariaRoles[role];
   const attrs = [...getGlobalAriaAttrs()];
 

test/checks/aria/aria-allowed-attr.js

@@ -282,4 +282,46 @@ describe('aria-allowed-attr', () => {
       );
     });
   });
+
+  it('should pass for br with aria-hidden', () => {
+    const vNode = queryFixture('<br aria-hidden="true" id="target">');
+
+    assert.isTrue(
+      axe.testUtils
+        .getCheckEvaluate('aria-allowed-attr')
+        .call(checkContext, null, null, vNode)
+    );
+  });
+
+  it('should fail for br with global aria attribute', () => {
+    const vNode = queryFixture('<br aria-busy="true" id="target">');
+
+    assert.isFalse(
+      axe.testUtils
+        .getCheckEvaluate('aria-allowed-attr')
+        .call(checkContext, null, null, vNode)
+    );
+    assert.deepEqual(checkContext._data, ['aria-busy="true"']);
+  });
+
+  it('should pass for wbr with aria-hidden', () => {
+    const vNode = queryFixture('<wbr aria-hidden="false" id="target">');
+
+    assert.isTrue(
+      axe.testUtils
+        .getCheckEvaluate('aria-allowed-attr')
+        .call(checkContext, null, null, vNode)
+    );
+  });
+
+  it('should fail for wbr with global aria attribute', () => {
+    const vNode = queryFixture('<wbr aria-busy="true" id="target">');
+
+    assert.isFalse(
+      axe.testUtils
+        .getCheckEvaluate('aria-allowed-attr')
+        .call(checkContext, null, null, vNode)
+    );
+    assert.deepEqual(checkContext._data, ['aria-busy="true"']);
+  });
 });

test/commons/aria/allowed-attr.js

@@ -49,4 +49,20 @@ describe('aria.allowedAttr', function () {
   it('should return an array with globally allowed attributes', function () {
     assert.deepEqual(axe.commons.aria.allowedAttr('cats'), globalAttrs);
   });
+
+  it('should return only aria-hidden for br element', function () {
+    const queryFixture = axe.testUtils.queryFixture;
+    const vNode = queryFixture('<br id="target">');
+    assert.deepEqual(axe.commons.aria.allowedAttr(null, { vNode }), [
+      'aria-hidden'
+    ]);
+  });
+
+  it('should return only aria-hidden for wbr element', function () {
+    const queryFixture = axe.testUtils.queryFixture;
+    const vNode = queryFixture('<wbr id="target">');
+    assert.deepEqual(axe.commons.aria.allowedAttr(null, { vNode }), [
+      'aria-hidden'
+    ]);
+  });
 });

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

@@ -13,3 +13,6 @@
 <div id="fail6" role="combobox" aria-multiline="false"></div>
 <div id="fail7" role="combobox" aria-multiline="true" contenteditable></div>
 <div id="fail8" role="combobox" aria-multiline="true"></div>
+
+<br aria-busy="true" id="fail9" />
+<wbr aria-busy="true" id="fail10" />

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

@@ -9,6 +9,8 @@
     ["#fail5"],
     ["#fail6"],
     ["#fail7"],
-    ["#fail8"]
+    ["#fail8"],
+    ["#fail9"],
+    ["#fail10"]
   ]
 }

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

@@ -2173,3 +2173,7 @@
 <!-- Ignored ARIA attributes -->
 <button id="pass101" aria-required="false"></button>
 <div id="pass102" role="combobox" aria-multiline="false" contenteditable></div>
+
+<!-- br and wbr allowed attrs -->
+<br aria-hidden="true" id="pass103" />
+<wbr aria-hidden="true" id="pass104" />

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

@@ -104,6 +104,8 @@
     ["#pass99"],
     ["#pass100"],
     ["#pass101"],
-    ["#pass102"]
+    ["#pass102"],
+    ["#pass103"],
+    ["#pass104"]
   ]
 }