a11y: check if mouse events are accompanied by key events (#5938)

Author: anthonylegoas

src/compiler/compile/nodes/Element.ts

@@ -599,6 +599,20 @@ export default class Element extends Node {
 				});
 			}
 		}
+
+		if (handlers_map.has('mouseover') && !handlers_map.has('focus')) {
+			component.warn(this, {
+				code: 'a11y-mouse-events-have-key-events',
+				message: 'A11y: on:mouseover must be accompanied by on:focus'
+			});
+		}
+
+		if (handlers_map.has('mouseout') && !handlers_map.has('blur')) {
+			component.warn(this, {
+				code: 'a11y-mouse-events-have-key-events',
+				message: 'A11y: on:mouseout must be accompanied by on:blur'
+			});
+		}
 	}
 
 	validate_bindings_foreign() {

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

@@ -0,0 +1,15 @@
+<script>
+	// Even if otherProps contains onBlur and/or onFocus, the rule will still fail.
+	// Props should be passed down explicitly for rule to pass.
+	const otherProps = {
+		onBlur: () => void 0,
+		onFocus: () => void 0,
+	};
+</script>
+
+<div on:mouseover={() => void 0} />
+<div on:mouseover={() => void 0} on:focus={() => void 0} />
+<div on:mouseover={() => void 0} {...otherProps} />
+<div on:mouseout={() => void 0} />
+<div on:mouseout={() => void 0} on:blur={() => void 0} />
+<div on:mouseout={() => void 0} {...otherProps} />

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

@@ -0,0 +1,62 @@
+[
+    {
+        "code": "a11y-mouse-events-have-key-events",
+        "end": {
+            "character": 272,
+            "column": 35,
+            "line": 10
+        },
+        "message": "A11y: on:mouseover must be accompanied by on:focus",
+        "pos": 237,
+        "start": {
+            "character": 237,
+            "column": 0,
+            "line": 10
+        }
+    },
+    {
+        "code": "a11y-mouse-events-have-key-events",
+        "end": {
+            "character": 384,
+            "column": 51,
+            "line": 12
+        },
+        "message": "A11y: on:mouseover must be accompanied by on:focus",
+        "pos": 333,
+        "start": {
+            "character": 333,
+            "column": 0,
+            "line": 12
+        }
+    },
+    {
+        "code": "a11y-mouse-events-have-key-events",
+        "end": {
+            "character": 419,
+            "column": 34,
+            "line": 13
+        },
+        "message": "A11y: on:mouseout must be accompanied by on:blur",
+        "pos": 385,
+        "start": {
+            "character": 385,
+            "column": 0,
+            "line": 13
+        }
+    },
+    {
+        "code": "a11y-mouse-events-have-key-events",
+        "end": {
+            "character": 528,
+            "column": 50,
+            "line": 15
+        },
+        "message": "A11y: on:mouseout must be accompanied by on:blur",
+        "pos": 478,
+        "start": {
+            "character": 478,
+            "column": 0,
+            "line": 15
+        }
+    }
+]