aria-role

src/validate/html/a11y.ts

@@ -6,7 +6,10 @@ import { Validator } from '../index';
 import { Node } from '../../interfaces';
 
 const ariaAttributes = 'activedescendant atomic autocomplete busy checked controls describedby disabled dropeffect expanded flowto grabbed haspopup hidden invalid label labelledby level live multiline multiselectable orientation owns posinset pressed readonly relevant required selected setsize sort valuemax valuemin valuenow valuetext'.split(' ');
-const ariaSet = new Set(ariaAttributes);
+const ariaAttributeSet = new Set(ariaAttributes);
+
+const ariaRoles = 'alert alertdialog application article banner button checkbox columnheader combobox command complementary composite contentinfo definition dialog directory document form grid gridcell group heading img input landmark link list listbox listitem log main marquee math menu menubar menuitem menuitemcheckbox menuitemradio navigation note option presentation progressbar radio radiogroup range region roletype row rowgroup rowheader scrollbar search section sectionhead select separator slider spinbutton status structure tab tablist tabpanel textbox timer toolbar tooltip tree treegrid treeitem widget window'.split(' ');
+const ariaRoleSet = new Set(ariaRoles);
 
 export default function a11y(
 	validator: Validator,
@@ -22,9 +25,10 @@ export default function a11y(
 
 	const attributeMap = new Map();
 	node.attributes.forEach((attribute: Node) => {
+		// aria-props
 		if (attribute.name.startsWith('aria-')) {
 			const name = attribute.name.slice(5);
-			if (!ariaSet.has(name)) {
+			if (!ariaAttributeSet.has(name)) {
 				const match = fuzzymatch(name, ariaAttributes);
 				let message = `A11y: Unknown aria attribute 'aria-${name}'`;
 				if (match) message += ` (did you mean '${match}'?)`;
@@ -33,6 +37,18 @@ export default function a11y(
 			}
 		}
 
+		// aria-role
+		if (attribute.name === 'role') {
+			const value = getStaticAttributeValue(node, 'role');
+			if (value && !ariaRoleSet.has(value)) {
+				const match = fuzzymatch(value, ariaRoles);
+				let message = `A11y: Unknown role '${value}'`;
+				if (match) message += ` (did you mean '${match}'?)`;
+
+				validator.warn(message, attribute.start);
+			}
+		}
+
 		attributeMap.set(attribute.name, attribute);
 	});
 

test/validator/samples/a11y-aria-role/input.html

@@ -0,0 +1 @@
+<div role="toooltip"></div>

test/validator/samples/a11y-aria-role/warnings.json

@@ -0,0 +1,10 @@
+[
+	{
+		"message": "A11y: Unknown role 'toooltip' (did you mean 'tooltip'?)",
+		"loc": {
+			"line": 1,
+			"column": 5
+		},
+		"pos": 5
+	}
+]