feat(presentation-role-conflict): create rule to flag elements with role conflict resolution #2284

doc/rule-descriptions.md

@@ -62,10 +62,11 @@
 
 ## WCAG 2.1 Level A & AA Rules
 
-| Rule ID                                                                                                            | Description                                                                                   | Impact  | Tags                         | Issue Type |
-| :----------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------- | :------ | :--------------------------- | :--------- |
-| [autocomplete-valid](https://dequeuniversity.com/rules/axe/3.5/autocomplete-valid?application=RuleDescription)     | Ensure the autocomplete attribute is correct and suitable for the form field                  | Serious | cat.forms, wcag21aa, wcag135 | failure    |
-| [avoid-inline-spacing](https://dequeuniversity.com/rules/axe/3.5/avoid-inline-spacing?application=RuleDescription) | Ensure that text spacing set through style attributes can be adjusted with custom stylesheets | Serious | wcag21aa, wcag1412           | failure    |
+| Rule ID                                                                                                            | Description                                                                                                | Impact  | Tags                         | Issue Type |
+| :----------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------- | :------ | :--------------------------- | :--------- |
+| [autocomplete-valid](https://dequeuniversity.com/rules/axe/3.5/autocomplete-valid?application=RuleDescription)     | Ensure the autocomplete attribute is correct and suitable for the form field                               | Serious | cat.forms, wcag21aa, wcag135 | failure    |
+| [avoid-inline-spacing](https://dequeuniversity.com/rules/axe/3.5/avoid-inline-spacing?application=RuleDescription) | Ensure that text spacing set through style attributes can be adjusted with custom stylesheets              | Serious | wcag21aa, wcag1412           | failure    |
+| [flag-role](https://dequeuniversity.com/rules/axe/3.5/flag-role?application=RuleDescription)                       | Flags elements whose role is none or presentation and which cause the role conflict resolution to trigger. | Minor   | cat.aria                     | failure    |
 
 ## Best Practices Rules
 

lib/checks/aria/has-global-aria-attribute-evaluate.js

@@ -0,0 +1,7 @@
+import lookupTable from '../../commons/aria/lookup-table';
+
+function hasGlobalAriaAttributeEvaluate(node, options, virtualNode) {
+	return lookupTable.globalAttributes.some(attr => virtualNode.hasAttr(attr));
+}
+
+export default hasGlobalAriaAttributeEvaluate;

lib/checks/aria/has-global-aria-attribute.json

@@ -0,0 +1,11 @@
+{
+	"id": "has-global-aria-attribute",
+	"evaluate": "has-global-aria-attribute-evaluate",
+	"metadata": {
+		"impact": "minor",
+		"messages": {
+			"pass": "Element has global ARIA attribute",
+			"fail": "Element does not have global ARIA attribute"
+		}
+	}
+}

lib/checks/aria/is-element-focusable-evaluate.js

@@ -0,0 +1,7 @@
+import { isFocusable } from '../../commons/dom';
+
+function isElementFocusableEvaluate(node) {
+	return isFocusable(node);
+}
+
+export default isElementFocusableEvaluate;

lib/checks/aria/is-element-focusable.json

@@ -0,0 +1,11 @@
+{
+	"id": "is-element-focusable",
+	"evaluate": "is-element-focusable-evaluate",
+	"metadata": {
+		"impact": "minor",
+		"messages": {
+			"pass": "Element is focusable.",
+			"fail": "Element is not focusable."
+		}
+	}
+}

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

@@ -12,8 +12,10 @@ import ariaUnsupportedAttrEvaluate from '../../checks/aria/aria-unsupported-attr
 import ariaValidAttrEvaluate from '../../checks/aria/aria-valid-attr-evaluate';
 import ariaValidAttrValueEvaluate from '../../checks/aria/aria-valid-attr-value-evaluate';
 import fallbackroleEvaluate from '../../checks/aria/fallbackrole-evaluate';
+import hasGlobalAriaAttributeEvaluate from '../../checks/aria/has-global-aria-attribute-evaluate';
 import hasWidgetRoleEvaluate from '../../checks/aria/has-widget-role-evaluate';
 import invalidroleEvaluate from '../../checks/aria/invalidrole-evaluate';
+import isElementFocusableEvaluate from '../../checks/aria/is-element-focusable-evaluate';
 import noImplicitExplicitLabelEvaluate from '../../checks/aria/no-implicit-explicit-label-evaluate';
 import unsupportedroleEvaluate from '../../checks/aria/unsupportedrole-evaluate';
 import validScrollableSemanticsEvaluate from '../../checks/aria/valid-scrollable-semantics-evaluate';
@@ -174,8 +176,10 @@ const metadataFunctionMap = {
 	'aria-valid-attr-evaluate': ariaValidAttrEvaluate,
 	'aria-valid-attr-value-evaluate': ariaValidAttrValueEvaluate,
 	'fallbackrole-evaluate': fallbackroleEvaluate,
+	'has-global-aria-attribute-evaluate': hasGlobalAriaAttributeEvaluate,
 	'has-widget-role-evaluate': hasWidgetRoleEvaluate,
 	'invalidrole-evaluate': invalidroleEvaluate,
+	'is-element-focusable-evaluate': isElementFocusableEvaluate,
 	'no-implicit-explicit-label-evaluate': noImplicitExplicitLabelEvaluate,
 	'unsupportedrole-evaluate': unsupportedroleEvaluate,
 	'valid-scrollable-semantics-evaluate': validScrollableSemanticsEvaluate,

lib/rules/flag-role.json

@@ -0,0 +1,13 @@
+{
+	"id": "flag-role",
+	"selector": "[role=\"none\"], [role=\"presentation\"]",
+	"tags": ["cat.aria"],
+	"metadata": {
+		"description": "Flags elements whose role is none or presentation and which cause the role conflict resolution to trigger.",
+		"help": "Elements of role none or presentation should be flagged"
+	},
+	"preload": false,
+	"all": ["is-element-focusable", "has-global-aria-attribute"],
+	"any": [],
+	"none": []
+}

test/checks/aria/has-global-aria-attribute.js

@@ -0,0 +1,37 @@
+describe('has-global-aria-attribute', function() {
+	'use strict';
+
+	var fixture = document.getElementById('fixture');
+	var checkSetup = axe.testUtils.checkSetup;
+
+	var checkContext = axe.testUtils.MockCheckContext();
+	var evaluate = axe.testUtils.getCheckEvaluate('has-global-aria-attribute');
+
+	afterEach(function() {
+		fixture.innerHTML = '';
+		axe._tree = undefined;
+		checkContext.reset();
+	});
+
+	afterEach(function() {
+		fixture.innerHTML = '';
+		axe._tree = undefined;
+		checkContext.reset();
+	});
+
+	it('should return true if any global ARIA attributes are found', function() {
+		var node = document.createElement('div');
+		node.id = 'test';
+		node.setAttribute('aria-label', 'hello');
+		var params = checkSetup(node);
+		assert.isTrue(evaluate.apply(checkContext, params));
+	});
+
+	it('should return false if no valid ARIA attributes are found', function() {
+		var node = document.createElement('div');
+		node.id = 'test';
+		node.setAttribute('aria-random', 'hello');
+		var params = checkSetup(node);
+		assert.isFalse(evaluate.apply(checkContext, params));
+	});
+});

test/checks/aria/is-element-focusable.js

@@ -0,0 +1,37 @@
+describe('is-element-focusable', function() {
+	'use strict';
+
+	var fixture = document.getElementById('fixture');
+	var checkContext = axe.testUtils.MockCheckContext();
+
+	afterEach(function() {
+		fixture.innerHTML = '';
+		checkContext.reset();
+	});
+
+	it('should return true for div with a tabindex', function() {
+		var node = document.createElement('div');
+		node.id = 'target';
+		node.tabIndex = 1;
+		fixture.appendChild(node);
+
+		assert.isTrue(
+			axe.testUtils
+				.getCheckEvaluate('is-element-focusable')
+				.call(checkContext, node)
+		);
+	});
+
+	it('should return false for natively unfocusable element', function() {
+		var node = document.createElement('span');
+		node.id = 'target';
+		node.role = 'link';
+		node.href = '#';
+		fixture.appendChild(node);
+		assert.isFalse(
+			axe.testUtils
+				.getCheckEvaluate('is-element-focusable')
+				.call(checkContext, node)
+		);
+	});
+});

test/integration/rules/flag-role/flag-role.html

@@ -0,0 +1,8 @@
+<!-- HTML Snippets-->
+<div role="presentation" id="pass1" tabindex="1">
+	ok
+</div>
+<h1 role="none" id="pass2" aria-label="My Heading"></h1>
+
+<div role="scrollbar" id="violation1">fail</div>
+<div role="slider" id="violation2">fail</div>

test/integration/rules/flag-role/flag-role.json

@@ -0,0 +1,6 @@
+{
+	"description": "flag-role tests",
+	"rule": "flag-role",
+	"violations": [["#violation1"], ["#violation2"]],
+	"passes": [["#pass1"], ["#pass2"]]
+}