fix(aria-hidden-focusable): report incomplete with onfocus (#3407)

dequelabs · May 12, 2022 · 6755e89 · 6755e89
1 parent a459075
commit 6755e89
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 11 deletions.
diff --git a/lib/checks/keyboard/focusable-disabled-evaluate.js b/lib/checks/keyboard/focusable-disabled-evaluate.js
@@ -26,11 +26,10 @@ function focusableDisabledEvaluate(node, options, virtualNode) {
 
   this.relatedNodes(relatedNodes);
 
-  if (relatedNodes.length && isModalOpen()) {
+  if (relatedNodes.length === 0 || isModalOpen()) {
     return true;
   }
-
-  return relatedNodes.length === 0;
+  return relatedNodes.every(related => related.onfocus) ? undefined : false
 }
 
 export default focusableDisabledEvaluate;
diff --git a/lib/checks/keyboard/focusable-disabled.json b/lib/checks/keyboard/focusable-disabled.json
@@ -5,6 +5,7 @@
     "impact": "serious",
     "messages": {
       "pass": "No focusable elements contained within element",
+      "incomplete": "Check if the focusable elements immediately move the focus indicator",
       "fail": "Focusable content should be disabled or be removed from the DOM"
     }
   }

diff --git a/lib/checks/keyboard/focusable-not-tabbable-evaluate.js b/lib/checks/keyboard/focusable-not-tabbable-evaluate.js
@@ -26,11 +26,10 @@ function focusableNotTabbableEvaluate(node, options, virtualNode) {
 
   this.relatedNodes(relatedNodes);
 
-  if (relatedNodes.length > 0 && isModalOpen()) {
+  if (relatedNodes.length === 0 || isModalOpen()) {
     return true;
   }
-
-  return relatedNodes.length === 0;
+  return relatedNodes.every(related => related.onfocus) ? undefined : false
 }
 
 export default focusableNotTabbableEvaluate;
diff --git a/lib/checks/keyboard/focusable-not-tabbable.json b/lib/checks/keyboard/focusable-not-tabbable.json
@@ -5,6 +5,7 @@
     "impact": "serious",
     "messages": {
       "pass": "No focusable elements contained within element",
+      "incomplete": "Check if the focusable elements immediately move the focus indicator",
       "fail": "Focusable content should have tabindex='-1' or be removed from the DOM"
     }
   }

diff --git a/test/act-mapping/aria-hidden-is-focusable.json b/test/act-mapping/aria-hidden-is-focusable.json
diff --git a/test/checks/keyboard/focusable-disabled.js b/test/checks/keyboard/focusable-disabled.js
@@ -185,4 +185,28 @@ describe('focusable-disabled', function() {
     var actual = check.evaluate.apply(checkContext, params);
     assert.isTrue(actual);
   });
+
+  it('returns undefined when the control has onfocus', function () {
+    var params = checkSetup(
+      '<button aria-hidden="true" id="target" onfocus="redirectFocus()">Button</button>'
+    );
+    assert.isUndefined(check.evaluate.apply(checkContext, params));
+  });
+
+  it('returns undefined when all focusable controls have onfocus events', function () {
+    var params = checkSetup('<div aria-hidden="true" id="target">' +
+      '  <button onfocus="redirectFocus()">button</button>' +
+      '</div>'
+    );
+    assert.isUndefined(check.evaluate.apply(checkContext, params));
+  });
+
+  it('returns false when some, but not all focusable controls have onfocus events', function () {
+    var params = checkSetup('<div aria-hidden="true" id="target">' +
+      '  <button onfocus="redirectFocus()">button</button>' +
+      '  <button>button</button>' +
+      '</div>'
+    );
+    assert.isFalse(check.evaluate.apply(checkContext, params));
+  });
 });
diff --git a/test/checks/keyboard/focusable-not-tabbable.js b/test/checks/keyboard/focusable-not-tabbable.js
@@ -144,4 +144,29 @@ describe('focusable-not-tabbable', function() {
     var actual = check.evaluate.apply(checkContext, params);
     assert.isTrue(actual);
   });
+
+  it('returns undefined when the control has onfocus', function () {
+    var params = checkSetup(
+      '<a href="/" aria-hidden="true" id="target" onfocus="redirectFocus()">Link</a>'
+    );
+    assert.isUndefined(check.evaluate.apply(checkContext, params));
+  });
+
+  it('returns undefined when all focusable controls have onfocus events', function () {
+    var params = checkSetup('<div aria-hidden="true" id="target">' +
+      '  <a href="/" onfocus="redirectFocus()">First link</a>' +
+      '  <a href="/" onfocus="redirectFocus()">Second link</a>' +
+      '</div>'
+    );
+    assert.isUndefined(check.evaluate.apply(checkContext, params));
+  });
+
+  it('returns false when some, but not all focusable controls have onfocus events', function () {
+    var params = checkSetup('<div aria-hidden="true" id="target">' +
+      '  <a href="/" onfocus="redirectFocus()">First link</a>' +
+      '  <a href="/"">Second link</a>' +
+      '</div>'
+    );
+    assert.isFalse(check.evaluate.apply(checkContext, params));
+  });
 });