From 2799668fdfa3fadeabaf97a497783140e9fc9d7d Mon Sep 17 00:00:00 2001
From: Julie Wongbandue <juliewongbandue@gmail.com>
Date: Wed, 16 Nov 2022 17:32:24 -0500
Subject: [PATCH] Update :focus to :focus-visible

Update syntax
---
 src/components/Menu/Menu.minors.tsx |  6 +++---
 src/utils/css.ts                    | 19 +++++++++++++++----
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/components/Menu/Menu.minors.tsx b/src/components/Menu/Menu.minors.tsx
index e6595eb5d..410a25e55 100755
--- a/src/components/Menu/Menu.minors.tsx
+++ b/src/components/Menu/Menu.minors.tsx
@@ -90,19 +90,19 @@ export function Item({
         {action && (
           <Action onClick={doAction}>
             {action.icon}
-            <Focus parent={Action} />
+            <Focus parent={Action} isKeyboardOnly />
           </Action>
         )}
 
         {icon && icon}
         {simpleKids}
-        <Focus parent={ItemStyled} />
+        <Focus parent={ItemStyled} isKeyboardOnly />
       </ItemStyled>
 
       {toggle && (
         <Toggle open={open}>
           <ChevronDown />
-          <Focus parent={Toggle} />
+          <Focus parent={Toggle} isKeyboardOnly />
         </Toggle>
       )}
       {open && complexKids && (
diff --git a/src/utils/css.ts b/src/utils/css.ts
index 6a7c6ac6d..d2a45cf43 100644
--- a/src/utils/css.ts
+++ b/src/utils/css.ts
@@ -20,7 +20,14 @@ export const hidden = {
 };
 
 export const Focus = styled.div<any>`
-  ${({ parent, focused, variant, radius = 6, distance = 4 }) => {
+  ${({
+    parent,
+    focused,
+    variant,
+    radius = 6,
+    distance = 4,
+    isKeyboardOnly = false,
+  }) => {
     const underline =
       variant === 'underline' &&
       css`
@@ -30,6 +37,10 @@ export const Focus = styled.div<any>`
         border-right-color: rgba(0, 0, 0, 0) !important;
       `;
 
+    const focusPseudoSelector = isKeyboardOnly
+      ? ':focus-visible'
+      : ':focus';
+
     return css`
       z-index: 1;
       top: ${rem(distance * -1)};
@@ -43,9 +54,9 @@ export const Focus = styled.div<any>`
       opacity: 0;
       transition: 150ms ease-in-out;
 
-      ${parent}:focus > &,
-      ${parent}:focus ~ &,
-      ${parent}:focus ~ div > & {
+      ${parent}${focusPseudoSelector} > &,
+      ${parent}${focusPseudoSelector} ~ &,
+      ${parent}${focusPseudoSelector} ~ div > & {
         opacity: 1;
       }