feat: Add aria-dialog-name

doc/rule-descriptions.md

@@ -15,6 +15,7 @@
 | [area-alt](https://dequeuniversity.com/rules/axe/4.0/area-alt?application=RuleDescription)                                       | Ensures <area> elements of image maps have alternate text                                               | Critical          | cat.text-alternatives, wcag2a, wcag111, wcag244, wcag412, section508, section508.22.a | failure, needs review |
 | [aria-allowed-attr](https://dequeuniversity.com/rules/axe/4.0/aria-allowed-attr?application=RuleDescription)                     | Ensures ARIA attributes are allowed for an element's role                                                | Critical          | cat.aria, wcag2a, wcag412                                                             | failure                    |
 | [aria-command-name](https://dequeuniversity.com/rules/axe/4.0/aria-command-name?application=RuleDescription)                     | Ensures every ARIA button, link and menuitem has an accessible name                                           | Serious           | cat.aria, wcag2a, wcag412                                                             | failure, needs review |
+| [aria-dialog-name](https://dequeuniversity.com/rules/axe/4.0/aria-dialog-name?application=RuleDescription)                       | Ensures every ARIA dialog and alertdialog node has an accessible name                                         | Serious           | cat.aria, best-practice                                                       | failure, needs review |
 | [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 |

lib/rules/aria-dialog-name.json

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

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

@@ -0,0 +1,24 @@
+<!-- PASS -->
+<div id="pass1" role="dialog" aria-label="Cookies"></div>
+<div id="pass2" role="dialog" title="Cookies"></div>
+<div id="pass3" role="dialog" aria-labelledby="dialog-div-heading">
+	<h2 id="dialog-div-heading">Cookies</h2>
+</div>
+<dialog id="pass4" open role="alertdialog" aria-label="Cookies"></dialog>
+<dialog id="pass5" open role="alertdialog" title="Cookies"></dialog>
+<dialog id="pass6" open role="alertdialog" aria-labelledby="alertdialog-heading">
+	<h2 id="alertdialog-heading">Cookies</h2>
+</dialog>
+<div id="pass7" role="alertdialog" aria-label="Cookies"></div>
+<div id="pass8" role="alertdialog" title="Cookies"></div>
+<div id="pass9" role="alertdialog" aria-labelledby="alertdialog-div-heading">
+	<h2 id="alertdialog-div-heading">Cookies</h2>
+</div>
+
+<!-- FAIL -->
+<div id="fail1" role="dialog"></div>
+<div id="fail2" role="dialog" aria-labelledby="non-existent"></div>
+<dialog id="fail3" open role="alertdialog"></dialog>
+<dialog id="fail4" open role="alertdialog" aria-labelledby="non-existent"></dialog>
+<div id="fail5" role="alertdialog"></div>
+<div id="fail6" role="alertdialog" aria-labelledby="non-existent"></div>

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

@@ -0,0 +1,23 @@
+{
+	"description": "aria-dialog-name test",
+	"rule": "aria-dialog-name",
+	"passes": [
+		["#pass1"],
+		["#pass2"],
+		["#pass3"],
+		["#pass4"],
+		["#pass5"],
+		["#pass6"],
+		["#pass7"],
+		["#pass8"],
+		["#pass9"]
+	],
+	"violations": [
+		["#fail1"],
+		["#fail2"],
+		["#fail3"],
+		["#fail4"],
+		["#fail5"],
+		["#fail6"]
+	]
+}

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

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

test/integration/virtual-rules/index.html

@@ -23,6 +23,7 @@
 		<div id="mocha"></div>
 		<script src="area-alt.js"></script>
 		<script src="aria-command-name.js"></script>
+		<script src="aria-dialog-name.js"></script>
 		<script src="aria-input-field-name.js"></script>
 		<script src="aria-progressbar-name.js"></script>
 		<script src="aria-toggle-field-name.js"></script>