check noninteractive roles on interactive elements

src/compiler/compile/nodes/Element.ts

@@ -98,6 +98,14 @@ const react_attributes = new Map([
 	['htmlFor', 'for']
 ]);
 
+const interactive_elements = new Set([
+	'a', 'button', 'input', 'select', 'textarea'
+]);
+
+const noninteractive_roles = new Set([
+	'article', 'banner', 'complementary', 'img', 'listitem', 'main', 'region', 'tooltip'
+]);
+
 function get_namespace(parent: Element, element: Element, explicit_namespace: string) {
 	const parent_element = parent.find_nearest(/^Element/);
 
@@ -596,6 +604,18 @@ export default class Element extends Node {
 				});
 			}
 		}
+
+		if (interactive_elements.has(this.name)) {
+			if (attribute_map.has('role')) {
+				const roleValue = this.attributes.find(a => a.name === 'role').get_static_value().toString();
+				if (noninteractive_roles.has(roleValue)) {
+					component.warn(this, {
+						code: 'a11y-no-interactive-element-to-noninteractive-role',
+						message: `A11y: <${this.name}> cannot have role ${roleValue}`
+					});
+				}
+			}
+		}
 	}
 
 	validate_bindings_foreign() {

test/validator/samples/a11y-no-interactive-element-to-noninteractive-role/input.svelte

@@ -0,0 +1,54 @@
+<!-- a -->
+<a href="test" role="article">link</a>
+<a href="test" role="banner">link</a>
+<a href="test" role="complementary">link</a>
+<a href="test" role="img">link</a>
+<a href="test" role="listitem">link</a>
+<a href="test" role="main">link</a>
+<a href="test" role="region">link</a>
+<a href="test" role="tooltip">link</a>
+<a href="test" role="button">link</a>
+
+<!-- button -->
+<button role="article">button</button>
+<button role="banner">button</button>
+<button role="complementary">button</button>
+<button role="img">button</button>
+<button role="listitem">button</button>
+<button role="main">button</button>
+<button role="region">button</button>
+<button role="tooltip">button</button>
+<button role="button">button</button>
+
+<!-- input -->
+<input role="article"/>
+<input role="banner"/>
+<input role="complementary"/>
+<input role="img"/>
+<input role="listitem"/>
+<input role="main"/>
+<input role="region"/>
+<input role="tooltip"/>
+<input role="button"/>
+
+<!-- select -->
+<select role="article"/>
+<select role="banner"/>
+<select role="complementary"/>
+<select role="img"/>
+<select role="listitem"/>
+<select role="main"/>
+<select role="region"/>
+<select role="tooltip"/>
+<select role="button"/>
+
+<!-- textarea -->
+<textarea role="article"/>
+<textarea role="banner"/>
+<textarea role="complementary"/>
+<textarea role="img"/>
+<textarea role="listitem"/>
+<textarea role="main"/>
+<textarea role="region"/>
+<textarea role="tooltip"/>
+<textarea role="button"/>