feat(aria-toggle-field-name): add option role (#2605)

dequelabs · Oct 29, 2020 · 0af0551 · 0af0551
1 parent b188911
commit 0af0551
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 5 deletions.
diff --git a/lib/rules/aria-toggle-field-name.json b/lib/rules/aria-toggle-field-name.json
@@ -1,6 +1,6 @@
 {
 	"id": "aria-toggle-field-name",
-	"selector": "[role=\"checkbox\"], [role=\"menuitemcheckbox\"], [role=\"menuitemradio\"], [role=\"radio\"], [role=\"switch\"]",
+	"selector": "[role=\"checkbox\"], [role=\"menuitemcheckbox\"], [role=\"menuitemradio\"], [role=\"radio\"], [role=\"switch\"], [role=\"option\"]",
 	"matches": "no-naming-method-matches",
 	"tags": ["cat.aria", "wcag2a", "wcag412"],
 	"metadata": {

diff --git a/package-lock.json b/package-lock.json
diff --git a/test/integration/rules/aria-toggle-field-name/aria-toggle-field-name.html b/test/integration/rules/aria-toggle-field-name/aria-toggle-field-name.html
@@ -40,6 +40,9 @@
 	<span>off</span>
 	<span>on</span>
 </div>
+<div role="listbox" aria-label="Greeting">
+	<div role="option" id="pass6">Hello world</div>
+</div>
 
 <!-- FAIL -->
 <!-- checkbox -->
@@ -61,6 +64,15 @@
 	<span></span>
 	<span></span>
 </div>
+<div role="listbox" aria-label="Greeting">
+	<div
+		role="option"
+		id="fail6"
+		title=""
+		aria-label=""
+		aria-labelledby="fake"
+	></div>
+</div>
 
 <!-- INAPPLICABLE -->
 <input id="inapplicable1" />

diff --git a/test/integration/rules/aria-toggle-field-name/aria-toggle-field-name.json b/test/integration/rules/aria-toggle-field-name/aria-toggle-field-name.json
@@ -1,7 +1,21 @@
 {
 	"description": "aria-toggle-field-name test",
 	"rule": "aria-toggle-field-name",
-	"passes": [["#pass1"], ["#pass2"], ["#pass3"], ["#pass4"], ["#pass5"]],
-	"violations": [["#fail1"], ["#fail2"], ["#fail3"], ["#fail4"], ["#fail5"]],
+	"passes": [
+		["#pass1"],
+		["#pass2"],
+		["#pass3"],
+		["#pass4"],
+		["#pass5"],
+		["#pass6"]
+	],
+	"violations": [
+		["#fail1"],
+		["#fail2"],
+		["#fail3"],
+		["#fail4"],
+		["#fail5"],
+		["#fail6"]
+	],
 	"incomplete": [["#canttell1"], ["#canttell2"]]
 }
diff --git a/test/integration/virtual-rules/aria-toggle-field-name.js b/test/integration/virtual-rules/aria-toggle-field-name.js
@@ -89,7 +89,7 @@ describe('aria-toggle-field-name', function() {
 		var node = new axe.SerialVirtualNode({
 			nodeName: 'div',
 			attributes: {
-				role: 'menuitemcheckbox'
+				role: 'option'
 			}
 		});
 		node.children = [];