feat(a11y): add click-events-have-key-events rule

Signed-off-by: mhatvan <markus_hatvan@aon.at>

src/compiler/compile/nodes/Element.ts

@@ -434,12 +434,17 @@ export default class Element extends Node {
 	}
 
 	validate_attributes_a11y() {
-		const { component, attributes } = this;
+		const { component, attributes, handlers } = this;
 
 		const attribute_map = new Map<string, Attribute>();
+		const handlers_map = new Map();
+
 		attributes.forEach(attribute => (
 			attribute_map.set(attribute.name, attribute)
 		));
+		handlers.forEach(handler => (
+			handlers_map.set(handler.name, handler)
+		));
 
 		attributes.forEach(attribute => {
 			if (attribute.is_spread) return;
@@ -550,6 +555,21 @@ export default class Element extends Node {
 			}
 		});
 
+		// click-events-have-key-events
+		if (handlers_map.has("click")) {
+		  const hasKeyEvent =
+		    handlers_map.has("keydown") ||
+		    handlers_map.has("keyup") ||
+		    handlers_map.has("keypress");
+		    
+		  if (!hasKeyEvent) {
+		    component.warn(this, {
+		      code: `a11y-click-events-have-key-events`,
+		      message: `A11y: on:click event must be accompanied by on:keydown, on:keyup or on:keypress event`
+		    });
+		  }
+		}
+
 		// no-noninteractive-tabindex
 		if (!is_interactive_element(this.name, attribute_map) && !is_interactive_roles(attribute_map.get('role')?.get_static_value() as ARIARoleDefintionKey)) {
 			const tab_index = attribute_map.get('tabindex');

test/validator/samples/a11y-click-events-have-key-events/input.svelte

@@ -0,0 +1,15 @@
+<script>
+  function noop() {}
+</script>
+
+<!-- should warn -->
+<div on:click={noop} />
+
+<!-- should not warn -->
+<div on:click={noop} on:keydown={noop} />
+<div on:click={noop} on:keyup={noop} />
+<div on:click={noop} on:keypress={noop} />
+<div on:click={noop} on:keydown={noop} on:keyup={noop} />
+<div on:click={noop} on:keyup={noop} on:keypress={noop} />
+<div on:click={noop} on:keypress={noop} on:keydown={noop} />
+<div on:click={noop} on:keydown={noop} on:keyup={noop} on:keypress={noop}  />

test/validator/samples/a11y-click-events-have-key-events/warnings.json

@@ -0,0 +1,17 @@
+[
+	{
+		"code": "a11y-click-events-have-key-events",
+		"message": "A11y: on:click event must be accompanied by on:keydown, on:keyup or on:keypress event",
+		"end": {
+			"character": 85,
+			"column": 23,
+			"line": 6
+		},
+		"start": {
+			"character": 62,
+			"column": 0,
+			"line": 6
+		},
+		"pos": 62
+	}
+]