feat: check aria attribute types

src/compiler/compile/compiler_warnings.ts

@@ -6,7 +6,7 @@
 export default {
 	custom_element_no_tag: {
 		code: 'custom-element-no-tag',
-		message: 'No custom element \'tag\' option was specified. To automatically register a custom element, specify a name with a hyphen in it, e.g. <svelte:options tag="my-thing"/>. To hide this warning, use <svelte:options tag={null}/>'			
+		message: 'No custom element \'tag\' option was specified. To automatically register a custom element, specify a name with a hyphen in it, e.g. <svelte:options tag="my-thing"/>. To hide this warning, use <svelte:options tag={null}/>'
 	},
 	unused_export_let: (component: string, property: string) => ({
 		code: 'unused-export-let',
@@ -60,6 +60,38 @@ export default {
 		code: 'a11y-aria-attributes',
 		message: `A11y: <${name}> should not have aria-* attributes`
 	}),
+	a11y_incorrect_attribute_type: (schema: any, attribute: string) => {
+		let message;
+		switch (schema.type) {
+			case 'boolean':
+				message = `The value of '${attribute}' must be exactly one of true or false`;
+				break;
+			case 'boolean_or_undefined':
+				message = `The value of '${attribute}' must be exactly one of true, false, or undefined`;
+				break;
+			case 'id':
+				message = `The value of '${attribute}' must be a string that represents a DOM element ID`;
+				break;
+			case 'idlist':
+				message = `The value of '${attribute}' must be a space-separated list of strings that represent DOM element IDs`;
+				break;
+			case 'tristate':
+				message = `The value of '${attribute}' must be exactly one of true, false, or mixed`;
+				break;
+			case 'token':
+				message = `The value of '${attribute}' must be exactly one of ${schema.whitelist.join(', ')}`;
+				break;
+			case 'tokenlist':
+				message = `The value of '${attribute}' must be a space-separated list of one or more of ${schema.whitelist.join(', ')}`;
+				break;
+			default:
+				message = `The value of '${attribute}' must be of type ${schema.type}`;
+		}
+		return {
+			code: 'a11y-incorrect-aria-attribute-type',
+			message: `A11y: ${message}`
+		};
+	},
 	a11y_unknown_aria_attribute: (attribute: string, suggestion?: string) => ({
 		code: 'a11y-unknown-aria-attribute',
 		message: `A11y: Unknown aria attribute 'aria-${attribute}'` + (suggestion ? ` (did you mean '${suggestion}'?)` : '')

src/compiler/compile/nodes/Element.ts

@@ -194,6 +194,35 @@ function get_namespace(parent: Element, element: Element, explicit_namespace: st
 	return parent_element.namespace;
 }
 
+function is_valid_aria_attribute_value(schema: any, value: any): boolean {
+	switch (schema.type) {
+		case 'boolean':
+		case 'boolean_or_undefined':
+			return typeof value === 'boolean';
+		case 'string':
+			return typeof value === 'string';
+		case 'id':
+			return typeof value === 'string';
+		case 'tristate':
+			return typeof value === 'boolean' || value === 'mixed';
+		case 'integer':
+			return typeof value !== 'boolean' && isNaN(Number(value)) === false;
+		case 'number':
+			return typeof value !== 'boolean' && isNaN(Number(value)) === false;
+		case 'token': // single token
+			return schema.whitelist
+				.indexOf(typeof value === 'string' ? value.toLowerCase() : value) > -1;
+		case 'idlist': // if list of ids, split each
+			return typeof value === 'string'
+				&& value.split(' ').every((id) => typeof id === 'string');
+		case 'tokenlist': // if list of tokens, split each
+			return typeof value === 'string'
+				&& value.split(' ').every((token) => schema.whitelist.indexOf(token.toLowerCase()) > -1);
+		default:
+			return false;
+	}
+}
+
 export default class Element extends Node {
 	type: 'Element';
 	name: string;
@@ -414,6 +443,18 @@ export default class Element extends Node {
 				if (name === 'aria-hidden' && /^h[1-6]$/.test(this.name)) {
 					component.warn(attribute, compiler_warnings.a11y_hidden(this.name));
 				}
+
+				// aria-proptypes
+				let value = attribute.get_static_value();
+				if (value === 'true') value = true;
+				if (value === 'false') value = false;
+
+				if (value !== null && value !== undefined && a11y_attribute_types.has(type)) {
+					const schema = a11y_attribute_types.get(type);
+					if (!is_valid_aria_attribute_value(schema, value)) {
+						component.warn(attribute, compiler_warnings.a11y_incorrect_attribute_type(schema, name));
+					}
+				}
 			}
 
 			// aria-role