feat: separate form-field-multiple-label from label rule (#1226)

doc/rule-descriptions.md

@@ -28,6 +28,7 @@
 | duplicate-id | Ensures every id attribute value is unique | Minor | cat.parsing, wcag2a, wcag411 | true |
 | empty-heading | Ensures headings have discernible text | Minor | cat.name-role-value, best-practice | true |
 | focus-order-semantics | Ensures elements in the focus order have an appropriate role | Minor | cat.keyboard, best-practice, experimental | true |
+| form-field-multiple-labels | Ensures form field does not have multiple label elements | Moderate | cat.forms, wcag2a, wcag332 | true |
 | frame-tested | Ensures <iframe> and <frame> elements contain the axe-core script | Critical | cat.structure, review-item | true |
 | frame-title-unique | Ensures <iframe> and <frame> elements contain a unique title attribute | Serious | cat.text-alternatives, best-practice | true |
 | frame-title | Ensures <iframe> and <frame> elements contain a non-empty title attribute | Serious | cat.text-alternatives, wcag2a, wcag241, wcag412, section508, section508.22.i | true |
@@ -40,7 +41,7 @@
 | image-redundant-alt | Ensure button and link text is not repeated as image alternative | Minor | cat.text-alternatives, best-practice | true |
 | input-image-alt | Ensures <input type="image"> elements have alternate text | Critical | cat.text-alternatives, wcag2a, wcag111, section508, section508.22.a | true |
 | label-title-only | Ensures that every form element is not solely labeled using the title or aria-describedby attributes | Serious | cat.forms, best-practice | true |
-| label | Ensures every form element has a label | Minor, Serious, Critical | cat.forms, wcag2a, wcag332, wcag131, section508, section508.22.n | true |
+| label | Ensures every form element has a label | Minor, Critical | cat.forms, wcag2a, wcag332, wcag131, section508, section508.22.n | true |
 | landmark-banner-is-top-level | Ensures the banner landmark is at top level | Moderate | cat.semantics, best-practice | true |
 | landmark-contentinfo-is-top-level | Ensures the contentinfo landmark is at top level | Moderate | cat.semantics, best-practice | true |
 | landmark-main-is-top-level | Ensures the main landmark is at top level | Moderate | cat.semantics, best-practice | true |

lib/checks/label/multiple-label.json

@@ -2,10 +2,10 @@
   "id": "multiple-label",
   "evaluate": "multiple-label.js",
   "metadata": {
-    "impact": "serious",
+    "impact": "moderate",
     "messages": {
-      "pass": "Form element does not have multiple <label> elements",
-      "fail": "Form element has multiple <label> elements"
+      "pass": "Form field does not have multiple label elements",
+      "fail": "Multiple label elements is not widely supported in assistive technologies"
     }
   }
 }

lib/rules/form-field-multiple-labels.json

@@ -0,0 +1,19 @@
+{
+  "id": "form-field-multiple-labels",
+  "selector": "input, select, textarea",
+  "matches": "label-matches.js",
+  "tags": [
+    "cat.forms",
+    "wcag2a",
+    "wcag332"
+  ],
+  "metadata": {
+    "description": "Ensures form field does not have multiple label elements",
+    "help": "Form field must not have multiple label elements"
+  },
+  "all": [],
+  "any": [],
+  "none": [
+    "multiple-label"
+  ]
+}

lib/rules/label.json

@@ -24,7 +24,6 @@
   ],
   "none": [
     "help-same-as-label",
-    "multiple-label",
     "hidden-explicit-label"
   ]
 }

test/integration/rules/label/label.html

@@ -37,7 +37,6 @@
 	<textarea id="pass15" title="Label"></textarea>
 
 	<label><label><input type="text" id="fail22"></label></label>
-	<label for="fail23">Hi</label><label for="fail23">Foo</label><input type="text" id="fail23">
 
 	<div>
 		<label>
@@ -68,4 +67,4 @@
 	</div>
 
 	</div>
-</form>
+</form>

test/integration/rules/label/label.json

@@ -14,7 +14,6 @@
 		["#fail10"],
 		["#fail11"],
 		["#fail22"],
-		["#fail23"],
 		["#fail24"],
 		["#fail25"],
 		["#fail26"]

test/integration/rules/multiple-label/multiple-label.html

@@ -0,0 +1,86 @@
+<!-- Fail -->
+<label for="fail1">Hi</label>
+<label for="fail1">Foo</label>
+<input type="text" id="fail1">
+
+<label for="fail2">label one</label>
+<label for="fail2">label two</label>
+<input type="checkbox" id="fail2">
+
+<label for="fail3" id="l1">label one</label>
+<label for="fail3">label two</label>
+<input type="checkbox" id="fail3" aria-labelledby="l1">
+
+<label for="fail4">First Name:</label>
+<label>First Name:
+	<input type="text" id="fail4">
+</label>
+
+<label for="fail5">Choose an option:</label>
+<label>
+	Choose an option:
+	<select id="fail5">
+			<option selected="selected">Chosen</option>
+			<option>Not Selected</option>
+	</select>
+</label>
+
+<label for="fail6">Enter your comments:</label>
+<label>
+	Enter your comments:
+	<textarea id="fail6"></textarea>
+</label>
+
+<label>
+	Enter your comments:
+	<label>
+		Enter your comments:
+		<textarea id="fail7"></textarea>
+	</label>
+</label>
+
+<label>
+	Enter your comments:
+	<label>
+		Enter your comments:
+		<label>
+			Enter your comments:
+			<textarea id="fail8"></textarea>
+		</label>
+	</label>
+</label>
+
+<label for="fail9">Enter your comments:</label>
+<label>
+	Enter your comments:
+	<label>
+		Enter your comments:
+		<label>
+			Enter your comments:
+			<textarea id="fail9"></textarea>
+		</label>
+	</label>
+</label>
+
+<!-- Pass -->
+<label for="pass1">Label</label>
+<input type="text" id="pass1">
+
+<textarea id="pass2" title="Label"></textarea>
+
+<label>First Name:
+	<input type="text" id="pass3">
+</label>
+
+<label>
+	Choose an option:
+	<select id="pass4">
+			<option selected="selected">Chosen</option>
+			<option>Not Selected</option>
+	</select>
+</label>
+
+<label>
+	Enter your comments:
+	<textarea id="pass5"></textarea>
+</label>

test/integration/rules/multiple-label/multiple-label.json

@@ -0,0 +1,22 @@
+{
+	"description": "form-field-multiple-labels label test",
+	"rule": "form-field-multiple-labels",
+	"violations": [
+    ["#fail1"],
+    ["#fail2"],
+    ["#fail3"],
+    ["#fail4"],
+    ["#fail5"],
+    ["#fail6"],
+    ["#fail7"],
+    ["#fail8"],
+    ["#fail9"]
+	],
+	"passes": [
+    ["#pass1"],
+    ["#pass2"],
+    ["#pass3"],
+    ["#pass4"],
+    ["#pass5"]
+  ]
+}