fix(aria-prohibited-attr): allow aria-label/ledby on decendants of widget

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

@@ -1,6 +1,7 @@
-import { getRole } from '../../commons/aria';
+import { getRole, getRoleType } from '../../commons/aria';
 import { sanitize, subtreeText } from '../../commons/text';
 import standards from '../../standards';
+import memoize from '../../core/utils/memoize';
 
 /**
  * Check that an element does not use any prohibited ARIA attributes.
@@ -36,6 +37,7 @@ export default function ariaProhibitedAttrEvaluate(
   const role = getRole(virtualNode, { chromium: true });
 
   const prohibitedList = listProhibitedAttrs(
+    virtualNode,
     role,
     nodeName,
     elementsAllowedAriaLabel
@@ -64,13 +66,32 @@ export default function ariaProhibitedAttrEvaluate(
   return true;
 }
 
-function listProhibitedAttrs(role, nodeName, elementsAllowedAriaLabel) {
+function listProhibitedAttrs(vNode, role, nodeName, elementsAllowedAriaLabel) {
   const roleSpec = standards.ariaRoles[role];
   if (roleSpec) {
     return roleSpec.prohibitedAttrs || [];
   }
-  if (!!role || elementsAllowedAriaLabel.includes(nodeName)) {
+  if (
+    !!role ||
+    elementsAllowedAriaLabel.includes(nodeName) ||
+    getClosestAncestorRoleType(vNode) === 'widget'
+  ) {
     return [];
   }
   return ['aria-label', 'aria-labelledby'];
 }
+
+const getClosestAncestorRoleType = memoize(
+  function getClosestAncestorRoleTypeMemoized(vNode) {
+    if (!vNode) {
+      return;
+    }
+
+    const role = getRole(vNode, { noPresentational: true, chromium: true });
+    if (role) {
+      return getRoleType(role);
+    }
+
+    return getClosestAncestorRoleType(vNode.parent);
+  }
+);

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

@@ -138,4 +138,85 @@ describe('aria-prohibited-attr', function () {
     var params = checkSetup('<svg id="target" aria-label="hello world"></svg>');
     assert.isFalse(checkEvaluate.apply(checkContext, params));
   });
+
+  describe('widget ancestor', () => {
+    it('should allow aria-label', () => {
+      var params = checkSetup(`
+        <button>
+          <span>
+            <span id="target" aria-label="hello world"></span>
+          </span>
+        </button>
+      `);
+      assert.isFalse(checkEvaluate.apply(checkContext, params));
+    });
+
+    it('should allow aria-labelledby', () => {
+      var params = checkSetup(`
+        <div id="foo">hello world</div>
+        <button>
+          <span>
+            <span id="target" aria-labelledby="foo"></span>
+          </span>
+        </button>
+      `);
+      assert.isFalse(checkEvaluate.apply(checkContext, params));
+    });
+
+    it('should skip "role=none" roles in between ancestor', () => {
+      var params = checkSetup(`
+        <button>
+          <h1 role="none">
+            <span id="target" aria-label="hello world"></span>
+          </h1>
+        </button>
+      `);
+      assert.isFalse(checkEvaluate.apply(checkContext, params));
+    });
+
+    it('should skip "role=presentation" roles in between ancestor', () => {
+      var params = checkSetup(`
+        <button>
+          <h1 role="presentation">
+            <span id="target" aria-label="hello world"></span>
+          </h1>
+        </button>
+      `);
+      assert.isFalse(checkEvaluate.apply(checkContext, params));
+    });
+
+    it('should not allow aria-label on descendant of non-widget', () => {
+      var params = checkSetup(`
+        <div role="grid">
+          <span>
+            <span id="target" aria-label="foo"></span>
+          </span>
+        </div>
+      `);
+      assert.isTrue(checkEvaluate.apply(checkContext, params));
+    });
+
+    it('should not allow aria-labelledby on descendant of non-widget', () => {
+      var params = checkSetup(`
+        <div id="foo">hello world</div>
+        <div role="grid">
+          <span>
+            <span id="target" aria-labelledby="foo"></span>
+          </span>
+        </div>
+      `);
+      assert.isTrue(checkEvaluate.apply(checkContext, params));
+    });
+
+    it('should use closet non-presentational ancestor', () => {
+      var params = checkSetup(`
+        <button>
+          <span role="grid">
+            <span id="target" aria-label="foo"></span>
+          </span>
+        </button>
+      `);
+      assert.isTrue(checkEvaluate.apply(checkContext, params));
+    });
+  });
 });

test/integration/rules/aria-prohibited-attr/aria-prohibited-attr.html

@@ -3,6 +3,8 @@
 <div id="pass3" aria-labelledby="  ">Foo</div>
 <div role="alert" aria-selected="true" id="pass4"></div>
 <div role="row" aria-colcount="value" id="pass5"></div>
+<div role="button"><span id="pass6" aria-label="value"></span></div>
+<div role="button"><span id="pass7" aria-labelledby="value"></span></div>
 
 <div role="caption" aria-label="value" id="fail1"></div>
 <div role="caption" aria-labelledby="value" id="fail2"></div>
@@ -35,6 +37,8 @@
 <div role="mark" aria-labelledby="value" id="fail27"></div>
 <div role="suggestion" aria-label="value" id="fail28"></div>
 <div role="suggestion" aria-labelledby="value" id="fail29"></div>
+<div role="grid"><span id="fail30" aria-label="value"></span></div>
+<div role="grid"><span id="fail31" aria-labelledby="value"></span></div>
 
 <div id="incomplete1" aria-label="foo">Foo</div>
 <div id="incomplete2" aria-labelledby="missing">Foo</div>

test/integration/rules/aria-prohibited-attr/aria-prohibited-attr.json

@@ -1,7 +1,15 @@
 {
   "description": "aria-prohibited-attr tests",
   "rule": "aria-prohibited-attr",
-  "passes": [["#pass1"], ["#pass2"], ["#pass3"], ["#pass4"], ["#pass5"]],
+  "passes": [
+    ["#pass1"],
+    ["#pass2"],
+    ["#pass3"],
+    ["#pass4"],
+    ["#pass5"],
+    ["#pass6"],
+    ["#pass7"]
+  ],
   "incomplete": [["#incomplete1"], ["#incomplete2"], ["#incomplete3"]],
   "violations": [
     ["#fail1"],
@@ -32,6 +40,8 @@
     ["#fail26"],
     ["#fail27"],
     ["#fail28"],
-    ["#fail29"]
+    ["#fail29"],
+    ["#fail30"],
+    ["#fail31"]
   ]
 }