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

dequelabs · Jun 6, 2019 · 69a9c3b · 69a9c3b
1 parent 73d5273
commit 69a9c3b
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 0 deletions.
diff --git a/doc/rule-descriptions.md b/doc/rule-descriptions.md
@@ -12,6 +12,7 @@
 | aria-required-children              | Ensures elements with an ARIA role that require child roles contain them                                                   | Critical           | cat.aria, wcag2a, wcag131                                                    | true               |
 | aria-required-parent                | Ensures elements with an ARIA role that require parent roles are contained by them                                         | Critical           | cat.aria, wcag2a, wcag131                                                    | true               |
 | aria-roles                          | Ensures all elements with a role attribute use a valid value                                                               | Serious, Critical  | cat.aria, wcag2a, wcag412                                                    | true               |
+| aria-toggle-field-label             | Ensures every ARIA toggle field has an accessible name                                                                     | Moderate, Serious  | wcag2a, wcag412                                                              | true               |
 | aria-valid-attr-value               | Ensures all ARIA attributes have valid values                                                                              | Critical           | cat.aria, wcag2a, wcag412                                                    | true               |
 | aria-valid-attr                     | Ensures attributes that begin with aria- are valid ARIA attributes                                                         | Critical           | cat.aria, wcag2a, wcag412                                                    | true               |
 | audio-caption                       | Ensures &lt;audio&gt; elements have captions                                                                               | Critical           | cat.time-and-media, wcag2a, wcag121, section508, section508.22.a             | false              |

diff --git a/lib/rules/aria-toggle-field-label.json b/lib/rules/aria-toggle-field-label.json
@@ -0,0 +1,18 @@
+{
+	"id": "aria-toggle-field-label",
+	"selector": "[role=\"checkbox\"], [role=\"menuitemcheckbox\"], [role=\"menuitemradio\"], [role=\"radio\"], [role=\"switch\"]",
+	"matches": "aria-form-field-label-matches.js",
+	"tags": ["wcag2a", "wcag412"],
+	"metadata": {
+		"description": "Ensures every ARIA toggle field has an accessible name",
+		"help": "ARIA toggle fields have an accessible name"
+	},
+	"all": [],
+	"any": [
+		"aria-label",
+		"aria-labelledby",
+		"non-empty-title",
+		"has-visible-text"
+	],
+	"none": ["no-implicit-explicit-label"]
+}
diff --git a/test/integration/rules/aria-toggle-field-label/aria-toggle-field-label.html b/test/integration/rules/aria-toggle-field-label/aria-toggle-field-label.html
@@ -0,0 +1,80 @@
+<!-- PASS -->
+<!-- checkbox -->
+<div id="pass1" role="checkbox">Newspaper</div>
+<!-- menuitemcheckbox -->
+<ul role="menu">
+	<li
+		id="pass2"
+		role="menuitemcheckbox"
+		aria-label="Word wrap"
+		aria-checked="true"
+	></li>
+</ul>
+<!-- menuitemradio -->
+<p id="pass3Label">Sans-serif</p>
+<ul role="menu">
+	<li
+		id="pass3"
+		role="menuitemradio"
+		aria-labelledby="pass3Label"
+		aria-checked="true"
+	></li>
+</ul>
+<!-- radio -->
+<div role="radiogroup">
+	<div
+		id="pass4"
+		role="radio"
+		aria-checked="false"
+		tabindex="0"
+		title="Regular Crust"
+	></div>
+</div>
+<!-- switch -->
+<div
+	id="pass5"
+	role="switch"
+	aria-checked="true"
+	aria-label="Toggle blue light:"
+>
+	<span>off</span>
+	<span>on</span>
+</div>
+
+<!-- FAIL -->
+<!-- checkbox -->
+<div id="fail1" role="checkbox" aria-labelledby="does-not-exist"></div>
+<!-- menuitemcheckbox -->
+<ul role="menu">
+	<li id="fail2" role="menuitemcheckbox" aria-checked="true"></li>
+</ul>
+<!-- menuitemradio -->
+<ul role="menu">
+	<li id="fail3" role="menuitemradio" aria-checked="true"></li>
+</ul>
+<!-- radio -->
+<div role="radiogroup">
+	<div id="fail4" role="radio" aria-checked="false" tabindex="0"></div>
+</div>
+<!-- switch -->
+<div id="fail5" role="switch" aria-checked="true">
+	<span></span>
+	<span></span>
+</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 -->
+<label>
+	first name
+	<div id="canttell1" role="checkbox" aria-label="name"></div>
+</label>
+<label for="canttell2">first name</label>
+<div role="checkbox" id="canttell2" aria-label="name"></div>
diff --git a/test/integration/rules/aria-toggle-field-label/aria-toggle-field-label.json b/test/integration/rules/aria-toggle-field-label/aria-toggle-field-label.json
@@ -0,0 +1,7 @@
+{
+	"description": "aria-toggle-field-label test",
+	"rule": "aria-toggle-field-label",
+	"passes": [["#pass1"], ["#pass2"], ["#pass3"], ["#pass4"], ["#pass5"]],
+	"violations": [["#fail1"], ["#fail2"], ["#fail3"], ["#fail4"], ["#fail5"]],
+	"incomplete": [["#canttell1"], ["#canttell2"]]
+}