Check required props for ARIA roles

Author: melnary

src/compiler/compile/nodes/Element.ts

@@ -39,6 +39,20 @@ const a11y_required_attributes = {
 	object: ['title', 'aria-label', 'aria-labelledby']
 };
 
+const a11y_required_role_props = {
+	checkbox: ['aria-checked'],
+	combobox: ['aria-controls', 'aria-expanded'],
+	heading: ['aria-level'],
+	menuitemcheckbox: ['aria-checked'],
+	menuitemradio: ['aria-checked'],
+	meter: ['aria-valuemax', 'aria-valuemin', 'aria-valuenow'],
+	option: ['aria-selected'],
+	radio: ['aria-checked'],
+	scrollbar: ['aria-controls', 'aria-valuenow'],
+	slider: ['aria-valuenow'],
+	switch: ['aria-checked']
+};
+
 const a11y_distracting_elements = new Set([
 	'blink',
 	'marquee'
@@ -304,11 +318,11 @@ export default class Element extends Node {
 	}
 
 	validate_attributes() {
-		const { component, parent } = this;
+		const { component, parent, attributes } = this;
 
 		const attribute_map = new Map();
 
-		this.attributes.forEach(attribute => {
+		attributes.forEach(attribute => {
 			if (attribute.is_spread) return;
 
 			const name = attribute.name.toLowerCase();
@@ -365,6 +379,21 @@ export default class Element extends Node {
 						code: 'a11y-unknown-role',
 						message
 					});
+				} else {
+					// @ts-ignore
+					const required_role_props = a11y_required_role_props[value];
+
+					// role-has-required-aria-props
+					if (required_role_props) {
+						const has_missing_props = required_role_props.some(prop => !attributes.find(a => a.name === prop));
+
+						if (has_missing_props) {
+							component.warn(attribute, {
+								code: 'a11y-role-has-required-aria-props',
+								message: `A11y: Elements with the ARIA role "${value}" must have the following attributes defined: ${String(required_role_props)}`
+							});
+						}
+					}
 				}
 			}