From d4230a8e18b9787b0aa1f95b3fb8de36bb8282bc Mon Sep 17 00:00:00 2001
From: Brandy Carney <6577830+brandyscarney@users.noreply.github.com>
Date: Tue, 7 Jan 2025 13:47:50 -0500
Subject: [PATCH] fix(utils): update focus visible to remove keydown approach

---
 core/src/utils/focus-visible.ts | 41 ++++++---------------------------
 1 file changed, 7 insertions(+), 34 deletions(-)

diff --git a/core/src/utils/focus-visible.ts b/core/src/utils/focus-visible.ts
index b5473c9e680..851e32f1ab2 100644
--- a/core/src/utils/focus-visible.ts
+++ b/core/src/utils/focus-visible.ts
@@ -1,19 +1,5 @@
 const ION_FOCUSED = 'ion-focused';
 const ION_FOCUSABLE = 'ion-focusable';
-const FOCUS_KEYS = [
-  'Tab',
-  'ArrowDown',
-  'Space',
-  'Escape',
-  ' ',
-  'Shift',
-  'Enter',
-  'ArrowLeft',
-  'ArrowRight',
-  'ArrowUp',
-  'Home',
-  'End',
-];
 
 export interface FocusVisibleUtility {
   destroy: () => void;
@@ -22,7 +8,6 @@ export interface FocusVisibleUtility {
 
 export const startFocusVisible = (rootEl?: HTMLElement): FocusVisibleUtility => {
   let currentFocus: Element[] = [];
-  let keyboardMode = true;
 
   const ref = rootEl ? rootEl.shadowRoot! : document;
   const root = rootEl ? rootEl : document.body;
@@ -32,43 +17,31 @@ export const startFocusVisible = (rootEl?: HTMLElement): FocusVisibleUtility =>
     elements.forEach((el) => el.classList.add(ION_FOCUSED));
     currentFocus = elements;
   };
+
   const pointerDown = () => {
-    keyboardMode = false;
     setFocus([]);
   };
 
-  const onKeydown = (ev: Event) => {
-    keyboardMode = FOCUS_KEYS.includes((ev as KeyboardEvent).key);
-    if (!keyboardMode) {
-      setFocus([]);
-    }
-  };
   const onFocusin = (ev: Event) => {
-    if (keyboardMode && ev.composedPath !== undefined) {
-      const toFocus = ev.composedPath().filter((el: any) => {
-        // TODO(FW-2832): type
-        if (el.classList) {
-          return el.classList.contains(ION_FOCUSABLE);
-        }
-        return false;
-      }) as Element[];
-      setFocus(toFocus);
-    }
+    const toFocus = ev.composedPath().filter((el): el is HTMLElement => {
+      return el instanceof HTMLElement && el.classList.contains(ION_FOCUSABLE);
+    });
+
+    setFocus(toFocus);
   };
+
   const onFocusout = () => {
     if (ref.activeElement === root) {
       setFocus([]);
     }
   };
 
-  ref.addEventListener('keydown', onKeydown);
   ref.addEventListener('focusin', onFocusin);
   ref.addEventListener('focusout', onFocusout);
   ref.addEventListener('touchstart', pointerDown, { passive: true });
   ref.addEventListener('mousedown', pointerDown);
 
   const destroy = () => {
-    ref.removeEventListener('keydown', onKeydown);
     ref.removeEventListener('focusin', onFocusin);
     ref.removeEventListener('focusout', onFocusout);
     ref.removeEventListener('touchstart', pointerDown);