From 7bb14168c3e74ed4fec8c0a86870658624e6f91e Mon Sep 17 00:00:00 2001
From: cheton <cheton@gmail.com>
Date: Tue, 29 Aug 2023 17:15:28 +0800
Subject: [PATCH] feat: implement `:focus-visible` for the Menu component with
 targeted focus style for non-pointer devices

---
 .../__tests__/__snapshots__/Menu.test.js.snap | 15 +++------
 packages/react/src/menu/styles.js             | 31 ++++++++-----------
 2 files changed, 17 insertions(+), 29 deletions(-)

diff --git a/packages/react/src/menu/__tests__/__snapshots__/Menu.test.js.snap b/packages/react/src/menu/__tests__/__snapshots__/Menu.test.js.snap
index 4121c87829..2fc2f47dcb 100644
--- a/packages/react/src/menu/__tests__/__snapshots__/Menu.test.js.snap
+++ b/packages/react/src/menu/__tests__/__snapshots__/Menu.test.js.snap
@@ -200,22 +200,15 @@ exports[`Menu should render correctly 1`] = `
   width: 100%;
 }
 
+.emotion-16:focus-visible {
+  box-shadow: inset 0 0 0 .125rem #1e5ede;
+}
+
 .emotion-16[aria-selected=true],
 .emotion-16[data-selected] {
   background-color: rgba(255, 255, 255, 0.08);
 }
 
-.emotion-16:focus,
-.emotion-16[data-focus] {
-  border-color: var(--tonic-colors-blue-60);
-  border-style: solid;
-  border-width: var(--tonic-sizes-1h);
-  padding-left: calc(.75rem - .125rem);
-  padding-right: calc(.75rem - .125rem);
-  padding-top: calc(.5rem - .125rem);
-  padding-bottom: calc(.5rem - .125rem);
-}
-
 .emotion-16:hover,
 .emotion-16[data-hover] {
   background-color: rgba(255, 255, 255, 0.12);
diff --git a/packages/react/src/menu/styles.js b/packages/react/src/menu/styles.js
index 1338cc17db..ad734e8ccd 100644
--- a/packages/react/src/menu/styles.js
+++ b/packages/react/src/menu/styles.js
@@ -62,14 +62,14 @@ const useMenuListStyle = () => {
   const [colorMode] = useColorMode();
   const [colorStyle] = useColorStyle({ colorMode });
   const colorModeStyle = {
-    light: {
-      backgroundColor: 'white',
-      boxShadow: colorStyle?.shadow?.medium,
-    },
     dark: {
       backgroundColor: 'gray:80',
       boxShadow: colorStyle?.shadow?.medium,
     },
+    light: {
+      backgroundColor: 'white',
+      boxShadow: colorStyle?.shadow?.medium,
+    },
   }[colorMode];
 
   return {
@@ -96,28 +96,27 @@ const useMenuGroupStyle = () => {
 };
 
 const useMenuItemStyle = ({ tabIndex }) => {
-  const theme = useTheme();
-  const { sizes } = theme;
+  const { colors, sizes } = useTheme();
   const [colorMode] = useColorMode();
   const color = {
-    light: 'black:primary',
     dark: 'white:primary',
+    light: 'black:primary',
   }[colorMode];
   const hoverBackgroundColor = {
-    light: 'rgba(0, 0, 0, 0.12)',
     dark: 'rgba(255, 255, 255, 0.12)',
+    light: 'rgba(0, 0, 0, 0.12)',
   }[colorMode];
-  const focusBorderColor = {
-    light: 'blue:60',
+  const focusBoxShadowColor = {
     dark: 'blue:60',
+    light: 'blue:60',
   }[colorMode];
   const disabledColor = {
-    light: 'black:disabled',
     dark: 'white:disabled',
+    light: 'black:disabled',
   }[colorMode];
   const selectedBackgroundColor = {
-    light: 'rgba(0, 0, 0, 0.08)',
     dark: 'rgba(255, 255, 255, 0.08)',
+    light: 'rgba(0, 0, 0, 0.08)',
   }[colorMode];
 
   return {
@@ -134,12 +133,8 @@ const useMenuItemStyle = ({ tabIndex }) => {
     py: '2x',
     userSelect: 'none',
     width: '100%',
-    _focus: {
-      borderColor: focusBorderColor,
-      borderStyle: 'solid',
-      borderWidth: '1h',
-      px: `calc(${sizes['3x']} - ${sizes['1h']})`,
-      py: `calc(${sizes['2x']} - ${sizes['1h']})`,
+    _focusVisible: {
+      boxShadow: `inset 0 0 0 ${sizes?.['1h']} ${colors?.[focusBoxShadowColor]}`,
     },
     _hover: {
       backgroundColor: hoverBackgroundColor,