Update toggle button and focus state

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 && (

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;
       }