fix: accept `onfocusin`/`onfocusout` in `a11y_mouse_events_have_key_events` (#18689)

Fixes #8089

focusin/focusout are the bubble variants of focus/blur

---------

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>

.changeset/large-schools-smell.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: accept `onfocusin`/`onfocusout` in `a11y_mouse_events_have_key_events`

documentation/docs/98-reference/.generated/compile-warnings.md

@@ -360,7 +360,7 @@ Enforce that heading elements (`h1`, `h2`, etc.) and anchors have content and th
 '%event%' event must be accompanied by '%accompanied_by%' event
 ```
 
-Enforce that `onmouseover` and `onmouseout` are accompanied by `onfocus` and `onblur`, respectively. This helps to ensure that any functionality triggered by these mouse events is also accessible to keyboard users.
+Enforce that `onmouseover` and `onmouseout` are accompanied by `onfocus` (or `onfocusin`) and `onblur` (or `onfocusout`), respectively. This helps to ensure that any functionality triggered by these mouse events is also accessible to keyboard users.
 
 ```svelte
 <!-- A11y: onmouseover must be accompanied by onfocus -->

packages/svelte/messages/compile-warnings/a11y.md

@@ -300,7 +300,7 @@ Enforce that heading elements (`h1`, `h2`, etc.) and anchors have content and th
 
 > '%event%' event must be accompanied by '%accompanied_by%' event
 
-Enforce that `onmouseover` and `onmouseout` are accompanied by `onfocus` and `onblur`, respectively. This helps to ensure that any functionality triggered by these mouse events is also accessible to keyboard users.
+Enforce that `onmouseover` and `onmouseout` are accompanied by `onfocus` (or `onfocusin`) and `onblur` (or `onfocusout`), respectively. This helps to ensure that any functionality triggered by these mouse events is also accessible to keyboard users.
 
 ```svelte
 <!-- A11y: onmouseover must be accompanied by onfocus -->

packages/svelte/src/compiler/phases/2-analyze/visitors/shared/a11y/index.js

@@ -373,11 +373,23 @@ export function check_element(node, context) {
 		}
 	}
 
-	if (!has_spread && handlers.has('mouseover') && !handlers.has('focus')) {
+	// `focus`/`blur` don't bubble, so an element that isn't focusable itself can only be notified
+	// about focus changes inside it through `focusin`/`focusout` — accept those as well
+	if (
+		!has_spread &&
+		handlers.has('mouseover') &&
+		!handlers.has('focus') &&
+		!handlers.has('focusin')
+	) {
 		w.a11y_mouse_events_have_key_events(node, 'mouseover', 'focus');
 	}
 
-	if (!has_spread && handlers.has('mouseout') && !handlers.has('blur')) {
+	if (
+		!has_spread &&
+		handlers.has('mouseout') &&
+		!handlers.has('blur') &&
+		!handlers.has('focusout')
+	) {
 		w.a11y_mouse_events_have_key_events(node, 'mouseout', 'blur');
 	}
 

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

@@ -17,3 +17,7 @@
 <div onmouseout={() => {}} onblur={() => {}}></div>
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div onmouseout={() => {}} {...otherProps}></div>
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div onmouseover={() => {}} onfocusin={() => {}}></div>
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div onmouseout={() => {}} onfocusout={() => {}}></div>