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

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.attr('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/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"]
+ ]
 }