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

…ractive"

Closes issue dequelabs#2934

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;
   }
 

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));
+  });
+
 });

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>

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"]]
 }

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>
 

test/integration/rules/nested-interactive/nested-interactive.json

@@ -8,6 +8,8 @@
     ["#pass3"],
     ["#pass4"],
     ["#pass5"],
-    ["#pass6"]
+    ["#pass6"],
+    ["#pass7"],
+    ["#pass8"]
   ]
 }

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',