feat(nested-interactive): new rule to flag nested interactive elements (

#2691)

* feat(nested-interactive): new rule to flag nested interactive elements

* Update lib/rules/nested-interactive.json

Co-authored-by: Wilco Fiers <WilcoFiers@users.noreply.github.com>

* Update lib/rules/nested-interactive.json

Co-authored-by: Wilco Fiers <WilcoFiers@users.noreply.github.com>

* fixes

* remove only

* remove log

Co-authored-by: Wilco Fiers <WilcoFiers@users.noreply.github.com>

doc/rule-descriptions.md

@@ -100,6 +100,7 @@ Rules that do not necessarily conform to WCAG success criterion but are industry
 | [landmark-unique](https://dequeuniversity.com/rules/axe/4.1/landmark-unique?application=RuleDescription) | Landmarks must have a unique role or role/label/title (i.e. accessible name) combination | Moderate | cat.semantics, best-practice | failure |
 | [meta-viewport-large](https://dequeuniversity.com/rules/axe/4.1/meta-viewport-large?application=RuleDescription) | Ensures <meta name="viewport"> can scale a significant amount | Minor | cat.sensory-and-visual-cues, best-practice | failure |
 | [meta-viewport](https://dequeuniversity.com/rules/axe/4.1/meta-viewport?application=RuleDescription) | Ensures <meta name="viewport"> does not disable text scaling and zooming | Critical | cat.sensory-and-visual-cues, best-practice, ACT | failure |
+| [nested-interactive](https://dequeuniversity.com/rules/axe/4.1/nested-interactive?application=RuleDescription) | Ensure interactive controls are not nested | Serious | cat.keyboard, best-practice | failure, needs review |
 | [page-has-heading-one](https://dequeuniversity.com/rules/axe/4.1/page-has-heading-one?application=RuleDescription) | Ensure that the page, or at least one of its frames contains a level-one heading | Moderate | cat.semantics, best-practice | failure |
 | [presentation-role-conflict](https://dequeuniversity.com/rules/axe/4.1/presentation-role-conflict?application=RuleDescription) | Flags elements whose role is none or presentation and which cause the role conflict resolution to trigger. | Minor | cat.aria, best-practice | failure |
 | [region](https://dequeuniversity.com/rules/axe/4.1/region?application=RuleDescription) | Ensures all page content is contained by landmarks | Moderate | cat.keyboard, best-practice | failure |

lib/checks/keyboard/no-focusable-content-evaluate.js

@@ -0,0 +1,35 @@
+import isFocusable from '../../commons/dom/is-focusable';
+
+function focusableDescendants(vNode) {
+ if (isFocusable(vNode)) {
+ return true;
+ }
+
+ if (!vNode.children) {
+ if (vNode.props.nodeType === 1) {
+ throw new Error('Cannot determine children');
+ }
+
+ return false;
+ }
+
+ return vNode.children.some(child => {
+ return focusableDescendants(child);
+ });
+}
+
+function noFocusbleContentEvaluate(node, options, virtualNode) {
+ if (!virtualNode.children) {
+ return undefined;
+ }
+
+ try {
+ return !virtualNode.children.some(child => {
+ return focusableDescendants(child);
+ });
+ } catch (e) {
+ return undefined;
+ }
+}
+
+export default noFocusbleContentEvaluate;

lib/checks/keyboard/no-focusable-content.json

@@ -0,0 +1,12 @@
+{
+ "id": "no-focusable-content",
+ "evaluate": "no-focusable-content-evaluate",
+ "metadata": {
+ "impact": "serious",
+ "messages": {
+ "pass": "Element does not have focusable descendants",
+ "fail": "Element has focusable descendants",
+ "incomplete": "Could not determine if element has descendants"
+ }
+ }
+}

lib/commons/dom/is-focusable.js

@@ -15,6 +15,10 @@ import { getNodeFromTree } from '../../core/utils';
 function isFocusable(el) {
  const vNode = el instanceof AbstractVirtualNode ? el : getNodeFromTree(el);
 
+ if (vNode.props.nodeType !== 1) {
+ return false;
+ }
+
  if (focusDisabled(vNode)) {
  return false;
  } else if (isNativelyFocusable(vNode)) {

lib/core/base/metadata-function-map.js

@@ -92,6 +92,7 @@ import focusableModalOpenEvaluate from '../../checks/keyboard/focusable-modal-op
 import focusableNoNameEvaluate from '../../checks/keyboard/focusable-no-name-evaluate';
 import focusableNotTabbableEvaluate from '../../checks/keyboard/focusable-not-tabbable-evaluate';
 import landmarkIsTopLevelEvaluate from '../../checks/keyboard/landmark-is-top-level-evaluate';
+import noFocusableContentEvaluate from '../../checks/keyboard/no-focusable-content-evaluate';
 import tabindexEvaluate from '../../checks/keyboard/tabindex-evaluate';
 
 // label
@@ -151,6 +152,7 @@ import landmarkHasBodyContextMatches from '../../rules/landmark-has-body-context
 import landmarkUniqueMatches from '../../rules/landmark-unique-matches';
 import layoutTableMatches from '../../rules/layout-table-matches';
 import linkInTextBlockMatches from '../../rules/link-in-text-block-matches';
+import nestedInteractiveMatches from '../../rules/nested-interactive-matches';
 import noAutoplayAudioMatches from '../../rules/no-autoplay-audio-matches';
 import noEmptyRoleMatches from '../../rules/no-empty-role-matches';
 import noExplicitNameRequiredMatches from '../../rules/no-explicit-name-required-matches';
@@ -259,6 +261,7 @@ const metadataFunctionMap = {
  'focusable-no-name-evaluate': focusableNoNameEvaluate,
  'focusable-not-tabbable-evaluate': focusableNotTabbableEvaluate,
  'landmark-is-top-level-evaluate': landmarkIsTopLevelEvaluate,
+ 'no-focusable-content-evaluate': noFocusableContentEvaluate,
  'tabindex-evaluate': tabindexEvaluate,
 
  // label
@@ -320,6 +323,7 @@ const metadataFunctionMap = {
  'landmark-unique-matches': landmarkUniqueMatches,
  'layout-table-matches': layoutTableMatches,
  'link-in-text-block-matches': linkInTextBlockMatches,
+ 'nested-interactive-matches': nestedInteractiveMatches,
  'no-autoplay-audio-matches': noAutoplayAudioMatches,
  'no-empty-role-matches': noEmptyRoleMatches,
  'no-explicit-name-required-matches': noExplicitNameRequiredMatches,

lib/rules/nested-interactive-matches.js

@@ -0,0 +1,13 @@
+import { getRole } from '../commons/aria';
+import standards from '../standards';
+
+function nestedInteractiveMatches(node, virtualNode) {
+ const role = getRole(virtualNode);
+ if (!role) {
+ return false;
+ }
+
+ return !!standards.ariaRoles[role].childrenPresentational;
+}
+
+export default nestedInteractiveMatches;

lib/rules/nested-interactive.json

@@ -0,0 +1,12 @@
+{
+ "id": "nested-interactive",
+ "matches": "nested-interactive-matches",
+ "tags": ["cat.keyboard", "wcag2a", "wcag412"],
+ "metadata": {
+ "description": "Nested interactive controls are not announced by screen readers",
+ "help": "Ensure interactive controls are not nested"
+ },
+ "all": [],
+ "any": ["no-focusable-content"],
+ "none": []
+}

test/checks/keyboard/no-focusable-content.js

@@ -0,0 +1,40 @@
+describe('no-focusable-content tests', function() {
+ var fixture = document.querySelector('#fixture');
+ var queryFixture = axe.testUtils.queryFixture;
+ var noFocusableContent = axe.testUtils.getCheckEvaluate(
+ 'no-focusable-content'
+ );
+
+ afterEach(function() {
+ fixture.innerHTML = '';
+ });
+
+ it('should return true if element has no focusable content', function() {
+ var vNode = queryFixture('<button id="target"><span>Hello</span></button>');
+ assert.isTrue(noFocusableContent(null, null, vNode));
+ });
+
+ it('should return true if element is empty', function() {
+ var vNode = queryFixture('<button id="target"></button>');
+ assert.isTrue(noFocusableContent(null, null, vNode));
+ });
+
+ it('should return true if element only has text content', function() {
+ var vNode = queryFixture('<button id="target">Hello</button>');
+ assert.isTrue(noFocusableContent(null, null, vNode));
+ });
+
+ it('should return false if element has focusable content', function() {
+ var vNode = queryFixture(
+ '<button id="target"><span tabindex="0">Hello</span></button>'
+ );
+ assert.isFalse(noFocusableContent(null, null, vNode));
+ });
+
+ it('should return false if element has natively focusable content', function() {
+ var vNode = queryFixture(
+ '<button id="target"><a href="foo.html">Hello</a></button>'
+ );
+ assert.isFalse(noFocusableContent(null, null, vNode));
+ });
+});

test/commons/dom/is-focusable.js

@@ -60,6 +60,14 @@ describe('is-focusable', function() {
  assert.isTrue(axe.commons.dom.isFocusable(el));
  });
 
+ it('should return false for non-element nodes', function() {
+ fixture.innerHTML = '<span id="target">Hello World</span>';
+ flatTreeSetup(fixture);
+ var el = document.getElementById('target').childNodes[0];
+
+ assert.isFalse(axe.commons.dom.isFocusable(el));
+ });
+
  it('should return false for disabled elements', function() {
  fixture.innerHTML = '<input type="text" id="target" disabled>';
  var el = document.getElementById('target');

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

@@ -0,0 +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="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="checkbox" id="fail4"><a href="foo.html">fail</a></div>
+<div role="radio" id="fail5"><span tabindex="0">fail</span></div>
+
+<a id="ignored1" href="foo.html">ignored</a>
+<span id="ignored2">ignored</span>

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

@@ -0,0 +1,13 @@
+{
+ "description": "nested-interactive tests",
+ "rule": "nested-interactive",
+ "violations": [["#fail1"], ["#fail2"], ["#fail3"], ["#fail4"], ["#fail5"]],
+ "passes": [
+ ["#pass1"],
+ ["#pass2"],
+ ["#pass3"],
+ ["#pass4"],
+ ["#pass5"],
+ ["#pass6"]
+ ]
+}

test/integration/virtual-rules/nested-interactive.js

@@ -0,0 +1,124 @@
+describe('nested-interactive virtual-rule', function() {
+ it('should pass for element without focusable content', function() {
+ var node = new axe.SerialVirtualNode({
+ nodeName: 'button'
+ });
+ var child = new axe.SerialVirtualNode({
+ nodeName: '#text',
+ nodeType: 3,
+ nodeValue: 'Hello World'
+ });
+ 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 aria element without focusable content', function() {
+ var node = new axe.SerialVirtualNode({
+ nodeName: 'div',
+ attributes: {
+ role: 'button'
+ }
+ });
+ var child = new axe.SerialVirtualNode({
+ nodeName: '#text',
+ nodeType: 3,
+ nodeValue: 'Hello World'
+ });
+ 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',
+ attributes: {
+ role: 'button'
+ }
+ });
+ node.children = [];
+
+ var results = axe.runVirtualRule('nested-interactive', node);
+
+ assert.lengthOf(results.passes, 1);
+ assert.lengthOf(results.violations, 0);
+ assert.lengthOf(results.incomplete, 0);
+ });
+
+ it('should fail for element with focusable content', 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, 0);
+ assert.lengthOf(results.violations, 1);
+ assert.lengthOf(results.incomplete, 0);
+ });
+
+ it('should fail for element with natively focusable content', function() {
+ var node = new axe.SerialVirtualNode({
+ nodeName: 'div',
+ attributes: {
+ role: 'button'
+ }
+ });
+ var child = new axe.SerialVirtualNode({
+ nodeName: 'button'
+ });
+ child.children = [];
+ node.children = [child];
+
+ var results = axe.runVirtualRule('nested-interactive', node);
+
+ assert.lengthOf(results.passes, 0);
+ assert.lengthOf(results.violations, 1);
+ assert.lengthOf(results.incomplete, 0);
+ });
+
+ it('should return incomplete if element has undefined children', function() {
+ var node = new axe.SerialVirtualNode({
+ nodeName: 'button'
+ });
+
+ var results = axe.runVirtualRule('nested-interactive', node);
+
+ assert.lengthOf(results.passes, 0);
+ assert.lengthOf(results.violations, 0);
+ assert.lengthOf(results.incomplete, 1);
+ });
+
+ it('should return incomplete if descendant has undefined children', function() {
+ var node = new axe.SerialVirtualNode({
+ nodeName: 'button'
+ });
+ var child = new axe.SerialVirtualNode({
+ nodeName: 'span'
+ });
+ node.children = [child];
+
+ var results = axe.runVirtualRule('nested-interactive', node);
+
+ assert.lengthOf(results.passes, 0);
+ assert.lengthOf(results.violations, 0);
+ assert.lengthOf(results.incomplete, 1);
+ });
+});

test/rule-matches/nested-interactive-matches.js

@@ -0,0 +1,35 @@
+describe('nested-interactive-matches', function() {
+ var fixture = document.querySelector('#fixture');
+ var queryFixture = axe.testUtils.queryFixture;
+ var rule;
+
+ beforeEach(function() {
+ rule = axe._audit.rules.find(function(rule) {
+ return rule.id === 'nested-interactive';
+ });
+ });
+
+ afterEach(function() {
+ fixture.innerHTML = '';
+ });
+
+ it('should match if element has children presentational', function() {
+ var vNode = queryFixture('<button id="target"></button>');
+ assert.isTrue(rule.matches(null, vNode));
+ });
+
+ it('should match if aria element has children presentational', function() {
+ var vNode = queryFixture('<div role="button" id="target"></div>');
+ assert.isTrue(rule.matches(null, vNode));
+ });
+
+ it('should not match if element does not have children presentational', function() {
+ var vNode = queryFixture('<a href="foo.html" id="target"></a>');
+ assert.isFalse(rule.matches(null, vNode));
+ });
+
+ it('should not match if element has no role', function() {
+ var vNode = queryFixture('<span id="target"></span>');
+ assert.isFalse(rule.matches(null, vNode));
+ });
+});