fix(aria-valid-attr-value): report when aria-labelledby ref is not in…

… DOM (#2723)
dequelabs · Jan 4, 2021 · 116eb06 · 116eb06
1 parent 93a765c
commit 116eb06
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 3 deletions.
diff --git a/lib/checks/aria/aria-valid-attr-value-evaluate.js b/lib/checks/aria/aria-valid-attr-value-evaluate.js
@@ -74,6 +74,17 @@ function ariaValidAttrValueEvaluate(node, options) {
       }
 
       return;
+    },
+    // aria-labelledby should not mark missing element as violation but
+    // instead as needs review
+    // @see https://github.com/dequelabs/axe-core/issues/2621
+    'aria-labelledby': () => {
+      if (!validateAttrValue(node, 'aria-labelledby')) {
+        needsReview = `aria-labelledby="${node.getAttribute(
+          'aria-labelledby'
+        )}"`;
+        messageKey = 'noId';
+      }
     }
   };
 

diff --git a/test/checks/aria/valid-attr-value.js b/test/checks/aria/valid-attr-value.js
@@ -232,6 +232,16 @@ describe('aria-valid-attr-value', function() {
     );
   });
 
+  it('should return undefined on aria-labelledby when the element is not in the DOM', function() {
+    fixtureSetup('<button aria-labelledby="test">Button</button>');
+    var undefined1 = fixture.querySelector('button');
+    assert.isUndefined(
+      axe.testUtils
+        .getCheckEvaluate('aria-valid-attr-value')
+        .call(checkContext, undefined1)
+    );
+  });
+
   it('should return undefined on aria-current with invalid value', function() {
     fixtureSetup('<button aria-current="test">Button</button>');
     var undefined1 = fixture.querySelector('button');

diff --git a/test/integration/rules/aria-valid-attr-value/aria-valid-attr-value.html b/test/integration/rules/aria-valid-attr-value/aria-valid-attr-value.html
@@ -19,7 +19,6 @@ <h2>Violations</h2>
   <div aria-haspopup="stuff" id="violation15">hi</div>
   <div aria-hidden="stuff" id="violation16">hi</div>
   <div aria-invalid="stuff" id="violation17">hi</div>
-  <div aria-labelledby="stuff" id="violation18">hi</div>
   <div aria-level="stuff" id="violation19">hi</div>
   <div aria-live="stuff" id="violation20">hi</div>
   <div aria-multiline="stuff" id="violation21">hi</div>
@@ -284,4 +283,5 @@ <h2>Possible False Positives</h2>
 
   <div aria-describedby="stuff" id="incomplete1">hi</div>
   <div aria-current="stage" id="incomplete2">hi</div>
+  <div aria-labelledby="stuff" id="incomplete3">hi</div>
 </div>
diff --git a/test/integration/rules/aria-valid-attr-value/aria-valid-attr-value.json b/test/integration/rules/aria-valid-attr-value/aria-valid-attr-value.json
@@ -17,7 +17,6 @@
     ["#violation15"],
     ["#violation16"],
     ["#violation17"],
-    ["#violation18"],
     ["#violation19"],
     ["#violation20"],
     ["#violation21"],
@@ -225,5 +224,5 @@
     ["#pass185"],
     ["#pass186"]
   ],
-  "incomplete": [["#incomplete1"], ["#incomplete2"]]
+  "incomplete": [["#incomplete1"], ["#incomplete2"], ["#incomplete3"]]
 }