diff --git a/src/compiler/compile/compiler_warnings.ts b/src/compiler/compile/compiler_warnings.ts
index 833722c3b9..db7714d9f6 100644
--- a/src/compiler/compile/compiler_warnings.ts
+++ b/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. . To hide this warning, use '
+ message: 'No custom element \'tag\' option was specified. To automatically register a custom element, specify a name with a hyphen in it, e.g. . To hide this warning, use '
},
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}'?)` : '')
diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts
index 061de3c01d..41e5514ffc 100644
--- a/src/compiler/compile/nodes/Element.ts
+++ b/src/compiler/compile/nodes/Element.ts
@@ -256,6 +256,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;
@@ -510,6 +539,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