fix(aria-valid-attr-value): aria-controls & aria-haspopup incomplete

if an element has both aria-controls and aria-haspopup mark it incomplete as we are unsure if the DOM element will be added dynamically later

Refs: #4363

Author: gaiety-deque

lib/checks/aria/aria-valid-attr-value-evaluate.js

@@ -36,12 +36,23 @@ export default function ariaValidAttrValueEvaluate(node, options, virtualNode) {
 
   const preChecks = {
     // aria-controls should only check if element exists if the element
-    // doesn't have aria-expanded=false or aria-selected=false (tabs)
+    // doesn't have aria-expanded=false, aria-selected=false (tabs),
+    // or aria-haspopup (may load later)
     // @see https://github.com/dequelabs/axe-core/issues/1463
+    // @see https://github.com/dequelabs/axe-core/issues/4363
     'aria-controls': () => {
+      const hasPopup =
+        ['false', null].includes(virtualNode.attr('aria-haspopup')) === false;
+
+      if (hasPopup) {
+        needsReview = `aria-controls="${virtualNode.attr('aria-controls')}"`;
+        messageKey = 'controlsWithinPopup';
+      }
+
       return (
         virtualNode.attr('aria-expanded') !== 'false' &&
-        virtualNode.attr('aria-selected') !== 'false'
+        virtualNode.attr('aria-selected') !== 'false' &&
+        hasPopup === false
       );
     },
     // aria-current should mark as needs review if any value is used that is

lib/checks/aria/aria-valid-attr-value.json

@@ -15,7 +15,8 @@
         "noIdShadow": "ARIA attribute element ID does not exist on the page or is a descendant of a different shadow DOM tree: ${data.needsReview}",
         "ariaCurrent": "ARIA attribute value is invalid and will be treated as \"aria-current=true\": ${data.needsReview}",
         "idrefs": "Unable to determine if ARIA attribute element ID exists on the page: ${data.needsReview}",
-        "empty": "ARIA attribute value is ignored while empty: ${data.needsReview}"
+        "empty": "ARIA attribute value is ignored while empty: ${data.needsReview}",
+        "controlsWithinPopup": "Unable to determine if aria-controls referenced ID exists on the page while using aria-haspopup: ${data.needsReview}"
       }
     }
   }

locales/_template.json

@@ -538,7 +538,8 @@
         "noIdShadow": "ARIA attribute element ID does not exist on the page or is a descendant of a different shadow DOM tree: ${data.needsReview}",
         "ariaCurrent": "ARIA attribute value is invalid and will be treated as \"aria-current=true\": ${data.needsReview}",
         "idrefs": "Unable to determine if ARIA attribute element ID exists on the page: ${data.needsReview}",
-        "empty": "ARIA attribute value is ignored while empty: ${data.needsReview}"
+        "empty": "ARIA attribute value is ignored while empty: ${data.needsReview}",
+        "controlsWithinPopup": "Unable to determine if aria-controls referenced ID exists on the page while using aria-haspopup: ${data.needsReview}"
       }
     },
     "aria-valid-attr": {

test/checks/aria/valid-attr-value.js

@@ -110,6 +110,15 @@ describe('aria-valid-attr-value', function () {
     assert.isFalse(validAttrValueCheck.call(checkContext, null, null, vNode));
   });
 
+  it('should return undefined on aria-controls with aria-haspopup as we cannot determine if it is in the DOM later', function () {
+    var vNode = queryFixture(
+      '<button id="target" aria-controls="test" aria-haspopup="true">Button</button>'
+    );
+    assert.isUndefined(
+      validAttrValueCheck.call(checkContext, null, null, vNode)
+    );
+  });
+
   it('should pass on aria-owns and aria-expanded=false when the element is not in the DOM', function () {
     var vNode = queryFixture(
       '<button id="target" aria-owns="test" aria-expanded="false">Button</button>'