feat(rule): New aria-toggle-field-label rule

doc/rule-descriptions.md

@@ -5,6 +5,7 @@
 | aria-allowed-attr                   | Ensures ARIA attributes are allowed for an element's role                                                             | Critical           | cat.aria, wcag2a, wcag412                                                    | true               |
 | aria-allowed-role                   | Ensures role attribute has an appropriate value for the element                                                            | Minor              | cat.aria, best-practice                                                      | true               |
 | aria-dpub-role-fallback             | Ensures unsupported DPUB roles are only used on elements with implicit fallback roles                                      | Moderate           | cat.aria, wcag2a, wcag131                                                    | true               |
+| aria-form-field-label               | Ensures every ARIA form field has an accessible name                                                                       | Moderate, Serious  | wcag2a, wcag412                                                              | true               |
 | aria-hidden-body                    | Ensures aria-hidden='true' is not present on the document body.                                                  | Critical           | cat.aria, wcag2a, wcag412                                                    | true               |
 | aria-hidden-focus                   | Ensures aria-hidden elements do not contain focusable elements                                                             | Serious            | cat.name-role-value, wcag2a, wcag412, wcag131                                | true               |
 | aria-required-attr                  | Ensures elements with ARIA roles have all required ARIA attributes                                                         | Critical           | cat.aria, wcag2a, wcag412                                                    | true               |

lib/checks/aria/no-implicit-explicit-label.js

@@ -0,0 +1,17 @@
+const { aria, text } = axe.commons;
+
+const role = aria.getRole(node, { noImplicit: true });
+this.data(role);
+
+const labelText = text.sanitize(text.labelText(virtualNode)).toLowerCase();
+const accText = text.sanitize(text.accessibleText(node)).toLowerCase();
+
+if (!accText && labelText) {
+	return undefined;
+}
+
+if (!accText.includes(labelText)) {
+	return undefined;
+}
+
+return false;

lib/checks/aria/no-implicit-explicit-label.json

@@ -0,0 +1,11 @@
+{
+	"id": "no-implicit-explicit-label",
+	"evaluate": "no-implicit-explicit-label.js",
+	"metadata": {
+		"impact": "moderate",
+		"messages": {
+			"fail": "Fix at least one of the following: `aria-labelledby`, `aria-label`, `non-empty title`",
+			"incomplete": "Check that the <label> does not need be part of the ARIA {{=it.data}} field's name"
+		}
+	}
+}

lib/rules/aria-form-field-label-matches.js

@@ -0,0 +1,56 @@
+/**
+ * Note:
+ * This rule filters elements with `role` attribute via `selector`
+ */
+const { aria } = axe.commons;
+
+const nodeName = node.nodeName.toUpperCase();
+const role = aria.getRole(node, { noImplicit: true });
+
+/**
+ * Ignore elements from rule -> `area-alt`
+ */
+if (nodeName === `AREA` && !!node.getAttribute(`href`)) {
+	return false;
+}
+
+/**
+ * Ignore elements from rule -> `label`
+ */
+if ([`INPUT`, `SELECT`, `TEXTAREA`].includes(nodeName)) {
+	return false;
+}
+
+/**
+ * Ignore elements from rule -> `image-alt`
+ */
+if (nodeName === `IMG` || (role === `img` && nodeName !== 'SVG')) {
+	return false;
+}
+
+/**
+ * Ignore elements from rule -> `button-name`
+ */
+if (nodeName === `BUTTON` || role === `button`) {
+	return false;
+}
+
+const allowedRoles = [
+	'checkbox',
+	'combobox',
+	'listbox',
+	'menuitemcheckbox',
+	'menuitemradio',
+	'radio',
+	'searchbox',
+	'slider',
+	'spinbutton',
+	'switch',
+	'textbox'
+];
+
+if (allowedRoles.includes(role)) {
+	return true;
+}
+
+return false;

lib/rules/aria-form-field-label.json

@@ -0,0 +1,13 @@
+{
+	"id": "aria-form-field-label",
+	"selector": "[role]",
+	"matches": "aria-form-field-label-matches.js",
+	"tags": ["wcag2a", "wcag412"],
+	"metadata": {
+		"description": "Ensures every ARIA form field has an accessible name",
+		"help": "ARIA form fields have an accessible name"
+	},
+	"all": [],
+	"any": ["aria-label", "aria-labelledby", "non-empty-title"],
+	"none": ["no-implicit-explicit-label"]
+}

test/integration/rules/aria-form-field-label/aria-form-field-label.html

@@ -0,0 +1,41 @@
+<!-- PASS -->
+<div id="pass1" aria-label="country" role="combobox">England</div>
+<label id="foo">
+  foo <div id="pass2" role="textbox" aria-labelledby="foo">
+</label>
+
+
+<!-- FAIL -->
+<!-- aria-label with empty text string -->
+<div id="fail1" aria-label=" " role="combobox">England</div>
+<!-- The label does not exist. -->
+<div id="fail2" aria-labelledby="non-existing" role="combobox">England</div>
+<!-- The implicit label is not supported on div elements. -->
+<label>
+  first name
+  <div id="fail3" role="textbox"></div>
+</label>
+<label for="fail4">first name</label>
+<div role="textbox" id="fail4"></div>
+
+
+<!-- INAPPLICABLE -->
+<input id='inapplicable1' />
+<select id="inapplicable2">
+  <option value="volvo">Volvo</option>
+  <option value="saab">Saab</option>
+  <option value="opel">Opel</option>
+</select>
+<textarea id="inapplicable3" title="Label"></textarea>
+
+
+<!-- INCOMPLETE -->
+<!-- Implicit label -->
+<label>
+  first name
+  <div id="canttell1" role="textbox" aria-label="name"></div>
+</label>
+
+<!--  Explicit label -->
+<label for="canttell2">first name</label>
+<div role="textbox" id="canttell2" aria-label="name"></div>

test/integration/rules/aria-form-field-label/aria-form-field-label.json

@@ -0,0 +1,7 @@
+{
+	"description": "aria-form-field-label test",
+	"rule": "aria-form-field-label",
+	"passes": [["#pass1"], ["#pass2"]],
+	"violations": [["#fail1"], ["#fail2"], ["#fail3"], ["#fail4"]],
+	"incomplete": [["#canttell1"], ["#canttell2"]]
+}

test/rule-matches/aria-form-field-label-matches.js

@@ -0,0 +1,91 @@
+describe('aria-form-field-label-matches', function() {
+	'use strict';
+
+	var fixture = document.getElementById('fixture');
+	var queryFixture = axe.testUtils.queryFixture;
+	var rule = axe._audit.rules.find(function(rule) {
+		return rule.id === 'aria-form-field-label';
+	});
+
+	afterEach(function() {
+		fixture.innerHTML = '';
+	});
+
+	it('returns false when node has no role', function() {
+		var vNode = queryFixture('<textarea id="target" title="Label"></textarea>');
+		var actual = rule.matches(vNode.actualNode, vNode);
+		assert.isFalse(actual);
+	});
+
+	it('returns false for node `map area[href]`', function() {
+		var vNode = queryFixture(
+			'<map><area id="target" href="#" role="randomRole"></map>'
+		);
+		var actual = rule.matches(vNode.actualNode, vNode);
+		assert.isFalse(actual);
+	});
+
+	it('returns false when node is either INPUT, SELECT or TEXTAREA', function() {
+		['INPUT', 'SELECT', 'TEXTAREA'].forEach(function(node) {
+			var vNode = queryFixture(
+				'<' + node + 'role="randomRole" id="target"><' + node + '>'
+			);
+			var actual = rule.matches(vNode.actualNode, vNode);
+			assert.isFalse(actual);
+		});
+	});
+
+	it('returns false when node is IMG', function() {
+		var vNode = queryFixture('<img id="target" role="randomRole">');
+		var actual = rule.matches(vNode.actualNode, vNode);
+		assert.isFalse(actual);
+	});
+
+	it('returns false when node is not SVG with role=`img`', function() {
+		var vNode = queryFixture('<div id="target" role="img">');
+		var actual = rule.matches(vNode.actualNode, vNode);
+		assert.isFalse(actual);
+	});
+
+	it('returns false when node is BUTTON', function() {
+		var vNode = queryFixture('<button id="target" role="button"></button>');
+		var actual = rule.matches(vNode.actualNode, vNode);
+		assert.isFalse(actual);
+	});
+
+	it('returns false when role=`button`', function() {
+		var vNode = queryFixture('<div id="target" role="button"></div>');
+		var actual = rule.matches(vNode.actualNode, vNode);
+		assert.isFalse(actual);
+	});
+
+	it('returns false for INPUT of type `BUTTON`, `SUBMIT` or `RESET`', function() {
+		['button', 'submit', 'reset'].forEach(function(type) {
+			var vNode = queryFixture(
+				'<input id="target" role="randomRole" type="' + type + '">'
+			);
+			var actual = rule.matches(vNode.actualNode, vNode);
+			assert.isFalse(actual);
+		});
+	});
+
+	it('returns true when element has any of the allowed roles', function() {
+		[
+			'checkbox',
+			'combobox',
+			'listbox',
+			'menuitemcheckbox',
+			'menuitemradio',
+			'radio',
+			'searchbox',
+			'slider',
+			'spinbutton',
+			'switch',
+			'textbox'
+		].forEach(function(role) {
+			var vNode = queryFixture('<div id="target" role="' + role + '"></div>');
+			var actual = rule.matches(vNode.actualNode, vNode);
+			assert.isTrue(actual);
+		});
+	});
+});