feat(new-rule): ARIA links, buttons, menuitems have an accessible name

doc/rule-descriptions.md

@@ -17,6 +17,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 | wcag2a, wcag412                                                                       | failure, needs review |
+| [aria-menuitem-name](https://dequeuniversity.com/rules/axe/4.0/aria-menuitem-name?application=RuleDescription)                   | Ensures every ARIA menuitem node has an accessible name                                                       | Serious           | wcag2a, wcag412                                                                       | 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-menuitem-name.json

@@ -0,0 +1,18 @@
+{
+	"id": "aria-menuitem-name",
+	"selector": "[role=\"menuitem\"]",
+	"matches": "aria-form-field-name-matches",
+	"tags": ["wcag2a", "wcag412"],
+	"metadata": {
+		"description": "Ensures every ARIA menuitem node has an accessible name",
+		"help": "ARIA menuitem nodes must have an accessible name"
+	},
+	"all": [],
+	"any": [
+		"aria-label",
+		"aria-labelledby",
+		"non-empty-title",
+		"has-visible-text"
+	],
+	"none": []
+}

lib/rules/aria-tooltip-name.json

@@ -5,7 +5,7 @@
 	"tags": ["wcag2a", "wcag412"],
 	"metadata": {
 		"description": "Ensures every ARIA tooltip node has an accessible name",
-		"help": "ARIA tooltip ndoes must have an accessible name"
+		"help": "ARIA tooltip nodes must have an accessible name"
 	},
 	"all": [],
 	"any": [

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

@@ -0,0 +1,32 @@
+<!-- PASS -->
+<div role="menu">
+	<div id="pass1" role="menuitem">New</div>
+	<div id="pass2" role="menuitem" title="Open"></div>
+	<div id="pass3" role="menuitem" aria-label="Save"></div>
+	<div id="pass4" role="menuitem" aria-labelledby="print"></div>
+</div>
+
+<div id="print">print file</div>
+
+<!-- FAIL -->
+<div role="menu">
+	<div id="fail1" role="menuitem"></div>
+	<div id="fail2" role="menuitem" aria-labelledby="print-non-existant"></div>
+	<div id="fail3" role="menuitem" aria-labelledby="print-empty"></div>
+</div>
+
+<div id="print-empty"></div>
+
+<!-- INAPPLICABLE -->
+<div role="menu">
+	<img role="menuitem" alt="Label" id="inapplicable1" />
+	<input role="menuitem" title="Label" id="inapplicable2" />
+	<button role="menuitem" title="Label" id="inapplicable3"></button>
+	<a href="#" role="menuitem" title="Label" id="inapplicable4"></a>
+	<select role="menuitem" title="Label" id="inapplicable5">
+		<option value="volvo">Volvo</option>
+		<option value="saab">Saab</option>
+		<option value="opel">Opel</option>
+	</select>
+	<textarea role="menuitem" id="inapplicable6" title="Label"></textarea>
+</div>

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

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

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

@@ -0,0 +1,89 @@
+describe('aria-menuitem-name', function() {
+	it('should pass for aria-label', function() {
+		var node = new axe.SerialVirtualNode({
+			nodeName: 'div',
+			attributes: {
+				role: 'menuitem',
+				'aria-label': 'foobar'
+			}
+		});
+		node.parent = null;
+
+		var results = axe.runVirtualRule('aria-menuitem-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: 'menuitem',
+				'aria-labelledby': 'foobar'
+			}
+		});
+		node.parent = null;
+
+		var results = axe.runVirtualRule('aria-menuitem-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: 'menuitem',
+				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-menuitem-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: 'menuitem',
+				'aria-label': ' \t   \n   '
+			}
+		});
+		node.children = [];
+
+		var results = axe.runVirtualRule('aria-menuitem-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: 'menuitem',
+				title: ''
+			}
+		});
+		node.children = [];
+
+		var results = axe.runVirtualRule('aria-menuitem-name', node);
+
+		assert.lengthOf(results.passes, 0);
+		assert.lengthOf(results.violations, 1);
+		assert.lengthOf(results.incomplete, 0);
+	});
+});

test/integration/virtual-rules/index.html

@@ -21,21 +21,24 @@
 	</head>
 	<body>
 		<div id="mocha"></div>
+		<script src="area-alt.js"></script>
+		<script src="aria-input-field-name.js"></script>
+		<script src="aria-menuitem-name.js"></script>
+		<script src="aria-progressbar-name.js"></script>
+		<script src="aria-toggle-field-name.js"></script>
+		<script src="aria-tooltip-name.js"></script>
 		<script src="autocomplete-valid.js"></script>
-		<script src="image-alt.js"></script>
+		<script src="button-name.js"></script>
 		<script src="frame-title.js"></script>
+		<script src="image-alt.js"></script>
+		<script src="input-button-name.js"></script>
 		<script src="input-image-alt.js"></script>
-		<script src="object-alt.js"></script>
 		<script src="label.js"></script>
-		<script src="button-name.js"></script>
-		<script src="input-button-name.js"></script>
-		<script src="aria-toggle-field-name.js"></script>
-		<script src="aria-input-field-name.js"></script>
-		<script src="area-alt.js"></script>
-		<script src="svg-img-alt.js"></script>
-		<script src="role-img-alt.js"></script>
 		<script src="link-name.js"></script>
+		<script src="object-alt.js"></script>
+		<script src="role-img-alt.js"></script>
 		<script src="select-name.js"></script>
+		<script src="svg-img-alt.js"></script>
 		<script src="/test/integration/adapter.js"></script>
 	</body>
 </html>