feat: implement :focus-visible for the Menu component with targeted…

… focus style for non-pointer devices
trendmicro-frontend · Sep 8, 2023 · 947354e · 947354e
1 parent 341591a
commit 947354e
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 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
@@ -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
@@ -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,