fix(button-name,input-button-name,input-img-alt): allow label to give…

… accessible name (#4607)

I'm not sure if this should close #4472 as that also deals with buttons
with a different role running `button-name`. For sure this closes #3696

Closes: #3696

---------

Co-authored-by: Wilco Fiers <WilcoFiers@users.noreply.github.com>

lib/checks/label/explicit.json

@@ -4,8 +4,8 @@
   "metadata": {
     "impact": "critical",
     "messages": {
-      "pass": "Form element has an explicit <label>",
-      "fail": "Form element does not have an explicit <label>",
+      "pass": "Element has an explicit <label>",
+      "fail": "Element does not have an explicit <label>",
       "incomplete": "Unable to determine if form element has an explicit <label>"
     }
   }

lib/checks/label/implicit.json

@@ -4,8 +4,8 @@
   "metadata": {
     "impact": "critical",
     "messages": {
-      "pass": "Form element has an implicit (wrapped) <label>",
-      "fail": "Form element does not have an implicit (wrapped) <label>",
+      "pass": "Element has an implicit (wrapped) <label>",
+      "fail": "Element does not have an implicit (wrapped) <label>",
       "incomplete": "Unable to determine if form element has an implicit (wrapped) <label>"
     }
   }

lib/commons/text/native-text-methods.js

@@ -16,15 +16,14 @@ const nativeTextMethods = {
    * @param {VirtualNode} element
    * @return {String} value text
    */
-  valueText: ({ actualNode }) => actualNode.value || '',
+  valueText: vNode => vNode.props.value || '',
 
   /**
    * Return default value of a button
    * @param {VirtualNode} element
    * @return {String} default button text
    */
-  buttonDefaultText: ({ actualNode }) =>
-    defaultButtonValues[actualNode.type] || '',
+  buttonDefaultText: vNode => defaultButtonValues[vNode.props.type] || '',
 
   /**
    * Return caption text of an HTML table element

lib/rules/button-name.json

@@ -26,6 +26,8 @@
     "aria-label",
     "aria-labelledby",
     "non-empty-title",
+    "implicit-label",
+    "explicit-label",
     "presentational-role"
   ],
   "none": []

lib/rules/input-button-name.json

@@ -27,6 +27,8 @@
     "aria-label",
     "aria-labelledby",
     "non-empty-title",
+    "implicit-label",
+    "explicit-label",
     "presentational-role"
   ],
   "none": []

lib/rules/input-image-alt.json

@@ -23,6 +23,13 @@
     "help": "Image buttons must have alternative text"
   },
   "all": [],
-  "any": ["non-empty-alt", "aria-label", "aria-labelledby", "non-empty-title"],
+  "any": [
+    "non-empty-alt",
+    "aria-label",
+    "aria-labelledby",
+    "non-empty-title",
+    "implicit-label",
+    "explicit-label"
+  ],
   "none": []
 }

locales/_template.json

@@ -771,8 +771,8 @@
       "fail": "Element contains <img> element with alt text that duplicates existing text"
     },
     "explicit-label": {
-      "pass": "Form element has an explicit <label>",
-      "fail": "Form element does not have an explicit <label>",
+      "pass": "Element has an explicit <label>",
+      "fail": "Element does not have an explicit <label>",
       "incomplete": "Unable to determine if form element has an explicit <label>"
     },
     "help-same-as-label": {
@@ -785,8 +785,8 @@
       "incomplete": "Unable to determine if form element has explicit <label> that is hidden"
     },
     "implicit-label": {
-      "pass": "Form element has an implicit (wrapped) <label>",
-      "fail": "Form element does not have an implicit (wrapped) <label>",
+      "pass": "Element has an implicit (wrapped) <label>",
+      "fail": "Element does not have an implicit (wrapped) <label>",
       "incomplete": "Unable to determine if form element has an implicit (wrapped) <label>"
     },
     "label-content-name-mismatch": {

test/commons/text/native-text-methods.js

@@ -39,6 +39,20 @@ describe('text.nativeTextMethods', () => {
       const input = axe.utils.querySelectorAll(axe._tree[0], 'input')[0];
       assert.equal(buttonDefaultText(input), '');
     });
+
+    it('returns the default button text with mixed-case types', () => {
+      fixtureSetup(
+        '<input type="SUBMIT" />' +
+          '<input type="ImAGE" />' +
+          '<input type="ResET" />' +
+          '<input type="buTTON" />'
+      );
+      const inputs = axe.utils.querySelectorAll(axe._tree[0], 'input');
+      assert.equal(buttonDefaultText(inputs[0]), 'Submit');
+      assert.equal(buttonDefaultText(inputs[1]), 'Submit');
+      assert.equal(buttonDefaultText(inputs[2]), 'Reset');
+      assert.equal(buttonDefaultText(inputs[3]), '');
+    });
   });
 
   describe('altText', () => {

test/integration/rules/button-name/button-name.html

@@ -20,6 +20,10 @@
 <button id="pass1" role="presentation" disabled></button>
 <button id="pass2" role="none" disabled></button>
 
+<label>Name<button id="pass3"></button></label>
+<label for="pass4">Name</label>
+<button id="pass4"></button>
+
 <span id="inapplicable1" role="button">Does not apply</span>
 <input type="submit" value="submit" role="button" id="inapplicable2" />
 <button id="inapplicable2" role="gridcell" disabled></button>

test/integration/rules/button-name/button-name.json

@@ -20,6 +20,8 @@
     ["#combo"],
     ["#buttonTitle"],
     ["#pass1"],
-    ["#pass2"]
+    ["#pass2"],
+    ["#pass3"],
+    ["#pass4"]
   ]
 }

test/integration/rules/input-button-name/input-button-name.html

@@ -24,6 +24,10 @@
   <input type="button" role="none" id="pass12" disabled />
   <input type="button" role="presentation" id="pass13" disabled />
 
+  <label>Name<input type="button" id="pass14" /></label>
+  <label for="pass15">Name</label>
+  <input type="button" id="pass15" />
+
   <input type="button" id="fail9" role="img" disabled />
   <input type="button" id="fail10" role="gridcell" />
   <input type="button" id="inapplicable1" role="gridcell" disabled />

test/integration/rules/input-button-name/input-button-name.json

@@ -26,6 +26,8 @@
     ["#pass10"],
     ["#pass11"],
     ["#pass12"],
-    ["#pass13"]
+    ["#pass13"],
+    ["#pass14"],
+    ["#pass15"]
   ]
 }

test/integration/rules/input-image-alt/input-image-alt.html

@@ -15,6 +15,10 @@
   <input type="image" src="img.jpg" id="pass4" title="monkeys" />
   <input type="image" src="img.jpg" id="violation5" alt="" />
 
+  <label>Name<input type="image" src="img.jpg" id="pass5" /></label>
+  <label for="pass6">Name</label>
+  <input type="image" src="img.jpg" id="pass6" />
+
   <input type="image" src="img.jpg" id="violation6" role="img" disabled />
   <input type="image" src="img.jpg" id="violation7" role="gridcell" />
   <input

test/integration/rules/input-image-alt/input-image-alt.json

@@ -10,5 +10,12 @@
     ["#violation6"],
     ["#violation7"]
   ],
-  "passes": [["#pass1"], ["#pass2"], ["#pass3"], ["#pass4"]]
+  "passes": [
+    ["#pass1"],
+    ["#pass2"],
+    ["#pass3"],
+    ["#pass4"],
+    ["#pass5"],
+    ["#pass6"]
+  ]
 }