feat(new-rule): check that meter role has an accessible name (#2607)

doc/rule-descriptions.md

@@ -18,6 +18,7 @@
 | [aria-hidden-body](https://dequeuniversity.com/rules/axe/4.0/aria-hidden-body?application=RuleDescription)                       | Ensures aria-hidden='true' is not present on the document body.                                     | Critical          | cat.aria, wcag2a, wcag412                                                             | failure                    |
 | [aria-hidden-focus](https://dequeuniversity.com/rules/axe/4.0/aria-hidden-focus?application=RuleDescription)                     | Ensures aria-hidden elements do not contain focusable elements                                                | Serious           | cat.name-role-value, wcag2a, wcag412, wcag131                                         | failure, needs review |
 | [aria-input-field-name](https://dequeuniversity.com/rules/axe/4.0/aria-input-field-name?application=RuleDescription)             | Ensures every ARIA input field has an accessible name                                                         | Moderate, Serious | cat.aria, wcag2a, wcag412                                                             | failure, needs review |
+| [aria-meter-name](https://dequeuniversity.com/rules/axe/4.0/aria-meter-name?application=RuleDescription)                         | Ensures every ARIA meter node has an accessible name                                                          | Serious           | cat.aria, wcag2a, wcag111                                                             | failure, needs review |
 | [aria-progressbar-name](https://dequeuniversity.com/rules/axe/4.0/aria-progressbar-name?application=RuleDescription)             | Ensures every ARIA progressbar node has an accessible name                                                    | Serious           | cat.aria, wcag2a, wcag111                                                             | failure, needs review |
 | [aria-required-attr](https://dequeuniversity.com/rules/axe/4.0/aria-required-attr?application=RuleDescription)                   | Ensures elements with ARIA roles have all required ARIA attributes                                            | Critical          | cat.aria, wcag2a, wcag412                                                             | failure                    |
 | [aria-required-children](https://dequeuniversity.com/rules/axe/4.0/aria-required-children?application=RuleDescription)           | Ensures elements with an ARIA role that require child roles contain them                                      | Critical          | cat.aria, wcag2a, wcag131                                                             | failure, needs review |

lib/rules/aria-meter-name.json

@@ -0,0 +1,13 @@
+{
+	"id": "aria-meter-name",
+	"selector": "[role=\"meter\"]",
+	"matches": "no-naming-method-matches",
+	"tags": ["cat.aria", "wcag2a", "wcag111"],
+	"metadata": {
+		"description": "Ensures every ARIA meter node has an accessible name",
+		"help": "ARIA meter nodes must have an accessible name"
+	},
+	"all": [],
+	"any": ["aria-label", "aria-labelledby", "non-empty-title"],
+	"none": []
+}

test/integration/rules/aria-meter-name/aria-meter-name.html

@@ -0,0 +1,26 @@
+<!-- PASS -->
+<div id="pass1" role="meter" title="CPU usage"></div>
+<div id="pass2" role="meter" aria-label="CPU usage"></div>
+<div id="pass3" role="meter" aria-labelledby="usage"></div>
+
+<div id="usage">CPU usage</div>
+
+<!-- FAIL -->
+<div id="fail1" role="meter">CPU usage</div>
+<div id="fail2" role="meter"></div>
+<div id="fail3" role="meter" aria-labelledby="usage-non-existant"></div>
+<div id="fail4" role="meter" aria-labelledby="usage-empty"></div>
+
+<div id="usage-empty"></div>
+
+<!-- INAPPLICABLE -->
+<img role="meter" alt="Label" id="inapplicable1" />
+<input role="meter" title="Label" id="inapplicable2" />
+<button role="meter" title="Label" id="inapplicable3"></button>
+<a href="#" role="meter" title="Label" id="inapplicable4"></a>
+<select role="meter" title="Label" id="inapplicable5">
+	<option value="volvo">Volvo</option>
+	<option value="saab">Saab</option>
+	<option value="opel">Opel</option>
+</select>
+<textarea role="meter" id="inapplicable6" title="Label"></textarea>

test/integration/rules/aria-meter-name/aria-meter-name.json

@@ -0,0 +1,6 @@
+{
+	"description": "aria-meter-name test",
+	"rule": "aria-meter-name",
+	"passes": [["#pass1"], ["#pass2"], ["#pass3"]],
+	"violations": [["#fail1"], ["#fail2"], ["#fail3"], ["#fail4"]]
+}

test/integration/virtual-rules/aria-meter-name.js

@@ -0,0 +1,89 @@
+describe('aria-meter-name', function() {
+	it('should pass for aria-label', function() {
+		var node = new axe.SerialVirtualNode({
+			nodeName: 'div',
+			attributes: {
+				role: 'meter',
+				'aria-label': 'foobar'
+			}
+		});
+		node.parent = null;
+
+		var results = axe.runVirtualRule('aria-meter-name', node);
+
+		assert.lengthOf(results.passes, 1);
+		assert.lengthOf(results.violations, 0);
+		assert.lengthOf(results.incomplete, 0);
+	});
+
+	it('should incomplete for aria-labelledby', function() {
+		var node = new axe.SerialVirtualNode({
+			nodeName: 'div',
+			attributes: {
+				role: 'meter',
+				'aria-labelledby': 'foobar'
+			}
+		});
+		node.parent = null;
+
+		var results = axe.runVirtualRule('aria-meter-name', node);
+
+		assert.lengthOf(results.passes, 0);
+		assert.lengthOf(results.violations, 0);
+		assert.lengthOf(results.incomplete, 1);
+	});
+
+	it('should pass for title', function() {
+		var node = new axe.SerialVirtualNode({
+			nodeName: 'div',
+			attributes: {
+				role: 'meter',
+				title: 'foobar'
+			}
+		});
+		// children are required since titleText comes after subtree text
+		// in accessible name calculation
+		node.children = [];
+		node.parent = null;
+
+		var results = axe.runVirtualRule('aria-meter-name', node);
+
+		assert.lengthOf(results.passes, 1);
+		assert.lengthOf(results.violations, 0);
+		assert.lengthOf(results.incomplete, 0);
+	});
+
+	it('should fail when aria-label contains only whitespace', function() {
+		var node = new axe.SerialVirtualNode({
+			nodeName: 'div',
+			attributes: {
+				role: 'meter',
+				'aria-label': ' \t   \n   '
+			}
+		});
+		node.children = [];
+
+		var results = axe.runVirtualRule('aria-meter-name', node);
+
+		assert.lengthOf(results.passes, 0);
+		assert.lengthOf(results.violations, 1);
+		assert.lengthOf(results.incomplete, 0);
+	});
+
+	it('should fail when title is empty', function() {
+		var node = new axe.SerialVirtualNode({
+			nodeName: 'div',
+			attributes: {
+				role: 'meter',
+				title: ''
+			}
+		});
+		node.children = [];
+
+		var results = axe.runVirtualRule('aria-meter-name', node);
+
+		assert.lengthOf(results.passes, 0);
+		assert.lengthOf(results.violations, 1);
+		assert.lengthOf(results.incomplete, 0);
+	});
+});