fix(rule): allow "tabindex=-1" for rules "aria-text" and "nested-interactive"

dan-tripp · dan-tripp · commit 30f0e0150697 · 2021-09-23T21:12:17.000-04:00
Closes issue #2934
diff --git a/lib/checks/keyboard/no-focusable-content-evaluate.js b/lib/checks/keyboard/no-focusable-content-evaluate.js
@@ -1,7 +1,11 @@
 import isFocusable from '../../commons/dom/is-focusable';
 
 function focusableDescendants(vNode) {
-  if (isFocusable(vNode)) {
+  const isNodeFocusable = isFocusable(vNode);
+  let tabIndex = parseInt(vNode.attr('tabindex'), 10);
+  tabIndex = !isNaN(tabIndex) ? tabIndex : null;
+
+  if(tabIndex ? isNodeFocusable && tabIndex >= 0 : isNodeFocusable) {
     return true;
   }
 
diff --git a/test/checks/keyboard/no-focusable-content.js b/test/checks/keyboard/no-focusable-content.js
@@ -37,4 +37,26 @@ describe('no-focusable-content tests', function() {
     );
     assert.isFalse(noFocusableContent(null, null, vNode));
   });
+
+  it('should return true on span with tabindex=-1', function() {
+    var vNode = queryFixture('<span id="target" role="text"> some text '
+        +'<span tabIndex="-1">JavaScript is able to focus this</span> '
+        +'</span>');
+    assert.isTrue(noFocusableContent(null, null, vNode));
+  });
+
+  it('should return true on aria-hidden span with tabindex=-1', function() {
+    var vNode = queryFixture('<span id="target" role="text"> some text '
+        +'<span tabIndex="-1" aria-hidden="true">JavaScript is able to focus this</span> '
+        +'</span>');
+    assert.isTrue(noFocusableContent(null, null, vNode));
+  });
+
+  it('should return false on span with tabindex=0', function() {
+    var vNode = queryFixture('<span id="target" role="text"> some text '
+        +'<span tabIndex="0">anyone is able to focus this</span> '
+        +'</span>');
+    assert.isFalse(noFocusableContent(null, null, vNode));
+  });
+
 });
diff --git a/test/integration/rules/aria-text/aria-text.html b/test/integration/rules/aria-text/aria-text.html
@@ -15,8 +15,8 @@ <h1>
 <div role="text" id="fail2">
   <a href="#" role="none">Flattened text</a> because of the explicit role.
 </div>
-<div role="text" id="fail3">
+<div role="text" id="pass4">
   <a href="#" tabindex="-1" role="none">Flattened text</a> because of the
-  explicit role.
+  explicit role.  Considered non-focusable because of tabindex=-1...
 </div>
-<p role="text" id="fail4"><button>Hello</button></p>
+<p role="text" id="fail3"><button>Hello</button></p>
diff --git a/test/integration/rules/aria-text/aria-text.json b/test/integration/rules/aria-text/aria-text.json
@@ -1,6 +1,6 @@
 {
   "description": "aria-text tests",
   "rule": "aria-text",
-  "violations": [["#fail1"], ["#fail2"], ["#fail3"], ["#fail4"]],
-  "passes": [["#pass1"], ["#pass2"], ["#pass3"]]
+  "violations": [["#fail1"], ["#fail2"], ["#fail3"]],
+  "passes": [["#pass1"], ["#pass2"], ["#pass3"], ["#pass4"]]
 }
diff --git a/test/integration/rules/nested-interactive/nested-interactive.html b/test/integration/rules/nested-interactive/nested-interactive.html
@@ -1,12 +1,14 @@
 <button id="pass1">pass</button>
-<div role="button" id="pass2">pass</div>
-<div role="tab" id="pass3">pass</div>
-<div role="checkbox" id="pass4">pass</div>
-<div role="radio" id="pass5"><span>pass</span></div>
+<button id="pass2"><span tabindex="-1">pass</span></button>
+<div role="button" id="pass3">pass</div>
+<div role="tab" id="pass4">pass</div>
+<div role="checkbox" id="pass5">pass</div>
+<div role="radio" id="pass6"><span>pass</span></div>
+<div role="radio" id="pass7"><span tabindex="-1">pass</span></div>
 
 <button id="fail1"><span tabindex="0">fail</span></button>
 <div role="button" id="fail2"><input /></div>
-<div role="tab" id="fail3"><button id="pass6">fail</button></div>
+<div role="tab" id="fail3"><button id="pass8">fail</button></div>
 <div role="checkbox" id="fail4"><a href="foo.html">fail</a></div>
 <div role="radio" id="fail5"><span tabindex="0">fail</span></div>
 
diff --git a/test/integration/rules/nested-interactive/nested-interactive.json b/test/integration/rules/nested-interactive/nested-interactive.json
@@ -8,6 +8,8 @@
     ["#pass3"],
     ["#pass4"],
     ["#pass5"],
-    ["#pass6"]
+    ["#pass6"],
+    ["#pass7"],
+    ["#pass8"]
   ]
 }
diff --git a/test/integration/virtual-rules/nested-interactive.js b/test/integration/virtual-rules/nested-interactive.js
@@ -38,6 +38,26 @@ describe('nested-interactive virtual-rule', function() {
     assert.lengthOf(results.incomplete, 0);
   });
 
+  it('should pass for element with content with tabindex=-1', function() {
+    var node = new axe.SerialVirtualNode({
+      nodeName: 'button'
+    });
+    var child = new axe.SerialVirtualNode({
+      nodeName: 'span',
+      attributes: {
+        tabindex: -1
+      }
+    });
+    child.children = [];
+    node.children = [child];
+
+    var results = axe.runVirtualRule('nested-interactive', node);
+
+    assert.lengthOf(results.passes, 1);
+    assert.lengthOf(results.violations, 0);
+    assert.lengthOf(results.incomplete, 0);
+  });
+
   it('should pass for empty element without', function() {
     var node = new axe.SerialVirtualNode({
       nodeName: 'div',

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"description": "aria-text tests",`
`3`	`3`	`"rule": "aria-text",`
`4`		`- "violations": [["#fail1"], ["#fail2"], ["#fail3"], ["#fail4"]],`
`5`		`- "passes": [["#pass1"], ["#pass2"], ["#pass3"]]`
	`4`	`+ "violations": [["#fail1"], ["#fail2"], ["#fail3"]],`
	`5`	`+ "passes": [["#pass1"], ["#pass2"], ["#pass3"], ["#pass4"]]`
`6`	`6`	`}`
Original file line number	Diff line number	Diff line change
`@@ -8,6 +8,8 @@`
`8`	`8`	`["#pass3"],`
`9`	`9`	`["#pass4"],`
`10`	`10`	`["#pass5"],`
`11`		`- ["#pass6"]`
	`11`	`+ ["#pass6"],`
	`12`	`+ ["#pass7"],`
	`13`	`+ ["#pass8"]`
`12`	`14`	`]`
`13`	`15`	`}`