feat(new-rule): aria-tooltip-name, check that tooltips have an accessible name

doc/rule-descriptions.md

@@ -23,6 +23,7 @@
 | [aria-roledescription](https://dequeuniversity.com/rules/axe/4.0/aria-roledescription?application=RuleDescription)               | Ensure aria-roledescription is only used on elements with an implicit or explicit role                        | Serious           | cat.aria, wcag2a, wcag412                                                             | failure, needs review |
 | [aria-roles](https://dequeuniversity.com/rules/axe/4.0/aria-roles?application=RuleDescription)                                   | Ensures all elements with a role attribute use a valid value                                                  | Serious, Critical | cat.aria, wcag2a, wcag412                                                             | failure                    |
 | [aria-toggle-field-name](https://dequeuniversity.com/rules/axe/4.0/aria-toggle-field-name?application=RuleDescription)           | Ensures every ARIA toggle field has an accessible name                                                        | Moderate, Serious | wcag2a, wcag412                                                                       | failure, needs review |
+| [aria-tooltip-name](https://dequeuniversity.com/rules/axe/4.0/aria-tooltip-name?application=RuleDescription)                     | Ensures every ARIA tooltip node has an accessible name                                                        | Serious           | wcag2a, wcag412                                                                       | failure, needs review |
 | [aria-valid-attr-value](https://dequeuniversity.com/rules/axe/4.0/aria-valid-attr-value?application=RuleDescription)             | Ensures all ARIA attributes have valid values                                                                 | Critical          | cat.aria, wcag2a, wcag412                                                             | failure, needs review |
 | [aria-valid-attr](https://dequeuniversity.com/rules/axe/4.0/aria-valid-attr?application=RuleDescription)                         | Ensures attributes that begin with aria- are valid ARIA attributes                                            | Critical          | cat.aria, wcag2a, wcag412                                                             | failure                    |
 | [audio-caption](https://dequeuniversity.com/rules/axe/4.0/audio-caption?application=RuleDescription)                             | Ensures <audio> elements have captions                                                                  | Critical          | cat.time-and-media, wcag2a, wcag121, section508, section508.22.a                      | needs review          |

lib/rules/aria-form-field-name-matches.js

@@ -9,11 +9,19 @@ function ariaFormFieldNameMatches(node, virtualNode) {
 	 */
 	const nodeName = virtualNode.props.nodeName;
 	const role = getExplicitRole(virtualNode);
+	const hasHrefAttr = !!virtualNode.attr('href');
+
+	/**
+	 * Ignore elements from rule -> 'link-name'
+	 */
+	if (nodeName === 'a' && hasHrefAttr) {
+		return false;
+	}
 
 	/**
 	 * Ignore elements from rule -> 'area-alt'
 	 */
-	if (nodeName === 'area' && !!virtualNode.attr('href')) {
+	if (nodeName === 'area' && hasHrefAttr) {
 		return false;
 	}
 

lib/rules/aria-tooltip-name.json

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

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

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

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

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

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

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

test/rule-matches/aria-form-field-name-matches.js

@@ -14,6 +14,12 @@ describe('aria-form-field-name-matches', function() {
 		fixture.innerHTML = '';
 	});
 
+	it('returns false for node `a[href]`', function() {
+		var vNode = queryFixture('<a href="# role="checkbox" id="target"></a>');
+		var actual = rule.matches(null, vNode);
+		assert.isFalse(actual);
+	});
+
 	it('returns false for node `map area[href]`', function() {
 		var vNode = queryFixture(
 			'<map><area id="target" href="#" role="checkbox"></map>'