Handle dynamic roles

Author: timmcca-be

src/compiler/compile/nodes/Element.ts

@@ -602,10 +602,11 @@ export default class Element extends Node {
 			}
 		}
 
+		const has_dynamic_role = attribute_map.get('role') && !attribute_map.get('role').is_static;
+
 		// no-static-element-interactions
-		// TODO: investigate footer
-		// TODO: investigate dynamic roles
 		if (
+			!has_dynamic_role &&
 			!is_hidden_from_screen_reader(this.name, attribute_map) &&
 			!is_presentation_role(role) &&
 			!is_interactive_element(this.name, attribute_map) &&

test/validator/samples/a11y-no-static-element-interactions/input.svelte

@@ -1,9 +1,14 @@
+<script>
+	const dynamicRole = "button";
+</script>
+
 <!-- valid -->
 <button on:click={() => {}} />
 <div on:keydown={() => {}} role="button" />
 <input type="text" on:click={() => {}} />
 <div on:copy={() => {}} />
 <a href="/foo" on:click={() => {}}>link</a>
+<div role={dynamicRole} on:click={() => {}} />
 <!-- invalid -->
 <div on:keydown={() => {}} />
 <!-- svelte-ignore a11y-missing-attribute -->

test/validator/samples/a11y-no-static-element-interactions/warnings.json

@@ -2,31 +2,31 @@
 	{
 		"code": "a11y-no-static-element-interactions",
 		"end": {
-			"character": 249,
+			"character": 347,
 			"column": 29,
-			"line": 8
+			"line": 13
 		},
 		"message": "A11y: <div> with keydown handler must have an ARIA role",
-		"pos": 220,
+		"pos": 318,
 		"start": {
-			"character": 220,
+			"character": 318,
 			"column": 0,
-			"line": 8
+			"line": 13
 		}
 	},
 	{
 		"code": "a11y-no-static-element-interactions",
 		"end": {
-			"character": 372,
+			"character": 470,
 			"column": 76,
-			"line": 10
+			"line": 15
 		},
 		"message": "A11y: <a> with mousedown, mouseup handlers must have an ARIA role",
-		"pos": 296,
+		"pos": 394,
 		"start": {
-			"character": 296,
+			"character": 394,
 			"column": 0,
-			"line": 10
+			"line": 15
 		}
 	}
 ]