docs: apply :focus-visible style to icon button components

trendmicro-frontend · Oct 10, 2023 · 2e93b3b · 2e93b3b
1 parent 50f8aea
commit 2e93b3b
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 51 deletions.
diff --git a/packages/react-docs/components/Header.js b/packages/react-docs/components/Header.js
@@ -1,6 +1,7 @@
 import {
   Box,
   Button,
+  ButtonBase,
   Icon,
   Image,
   Link,
@@ -103,6 +104,10 @@ const Header = forwardRef((
     light: 'rgba(0, 0, 0, 0.12)',
     dark: 'rgba(255, 255, 255, 0.12)',
   }[colorMode];
+  const focusVisibleOutlineColor = {
+    dark: 'blue:60',
+    light: 'blue:60',
+  }[colorMode];
 
   return (
     <Box
@@ -236,58 +241,80 @@ const Header = forwardRef((
               </MenuList>
             </Menu>
           </Box>
-          <Box
+          <ButtonBase
             data-track={`Header|click_codesandbox`}
-            as="a"
-            color={colorStyle.color.secondary}
-            _hover={{
-              color: colorStyle.color.primary,
-              cursor: 'pointer',
-            }}
             onClick={() => handleClickOpenInCodeSandbox()}
-            display="inline-flex"
-            textDecoration="none"
             title="Open in CodeSandbox"
+            sx={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              color: colorStyle.color.secondary,
+              width: '8x',
+              height: '8x',
+              _hover: {
+                color: colorStyle.color.primary,
+                cursor: 'pointer',
+              },
+              _focusVisible: {
+                outlineColor: focusVisibleOutlineColor,
+                outlineStyle: 'solid',
+                outlineWidth: '1h',
+              },
+            }}
           >
             <CodeSandboxIcon size={24} />
-          </Box>
-          <Box
+          </ButtonBase>
+          <ButtonBase
             data-track={`Header|click_toggle_color_mode|${colorMode === 'light' ? 'dark' : 'light'}`}
-            as="a"
-            color={colorStyle.color.secondary}
-            _hover={{
-              color: colorStyle.color.primary,
-              cursor: 'pointer',
-            }}
-            _visited={{
-              color: colorStyle.color.secondary,
-            }}
             onClick={() => toggleColorMode()}
-            display="inline-flex"
             title="Toggle color mode"
+            sx={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              color: colorStyle.color.secondary,
+              width: '8x',
+              height: '8x',
+              _hover: {
+                color: colorStyle.color.primary,
+                cursor: 'pointer',
+              },
+              _focusVisible: {
+                outlineColor: focusVisibleOutlineColor,
+                outlineStyle: 'solid',
+                outlineWidth: '1h',
+              },
+            }}
           >
             {colorMode === 'light' && (
               <Icon icon="moon" size={24} />
             )}
             {colorMode === 'dark' && (
               <Icon icon="sun" size={24} />
             )}
-          </Box>
-          <Box
+          </ButtonBase>
+          <ButtonBase
             data-track={`Header|click_github_repo_url|${GITHUB_REPO_URL}`}
-            as="a"
-            href={GITHUB_REPO_URL}
-            target="_blank"
-            color={colorStyle.color.secondary}
-            display="inline-flex"
-            _hover={{
-              color: colorStyle.color.primary,
-              cursor: 'pointer',
-            }}
-            _visited={{
+            onClick={() => window.open(GITHUB_REPO_URL, '_blank')}
+            title="GitHub repository"
+            sx={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              justifyContent: 'center',
               color: colorStyle.color.secondary,
+              width: '8x',
+              height: '8x',
+              _hover: {
+                color: colorStyle.color.primary,
+                cursor: 'pointer',
+              },
+              _focusVisible: {
+                outlineColor: focusVisibleOutlineColor,
+                outlineStyle: 'solid',
+                outlineWidth: '1h',
+              },
             }}
-            title="GitHub repository"
           >
             <FontAwesomeIcon
               icon={['fab', 'github']}
@@ -296,7 +323,7 @@ const Header = forwardRef((
                 height: 24,
               }}
             />
-          </Box>
+          </ButtonBase>
         </Box>
       </Box>
     </Box>

diff --git a/packages/react-docs/components/IconButton.js b/packages/react-docs/components/IconButton.js
@@ -14,34 +14,27 @@ const IconButton = forwardRef((props, ref) => {
     dark: 'white:primary',
     light: 'black:primary',
   }[colorMode];
-  const activeColor = color;
-  const focusColor = color;
-  const focusHoverColor = hoverColor;
-  const focusActiveColor = activeColor;
+  const focusVisibleOutlineColor = {
+    dark: 'blue:60',
+    light: 'blue:60',
+  }[colorMode];
 
   return (
     <ButtonBase
       ref={ref}
       border={1}
       borderColor="transparent"
       color={color}
-      transition="all .2s"
       height="8x"
       width="8x"
       _hover={{
         color: hoverColor,
       }}
-      _active={{
-        color: activeColor,
-      }}
-      _focus={{
-        color: focusColor,
-      }}
-      _focusHover={{
-        color: focusHoverColor,
-      }}
-      _focusActive={{
-        color: focusActiveColor,
+      _focusVisible={{
+        outlineColor: focusVisibleOutlineColor,
+        outlineOffset: '-1h',
+        outlineStyle: 'solid',
+        outlineWidth: '1h',
       }}
       {...props}
     />

diff --git a/packages/react-docs/components/NavLink.js b/packages/react-docs/components/NavLink.js
@@ -22,6 +22,10 @@ const NavLink = forwardRef((
     dark: 'rgba(255, 255, 255, 0.1)',
   }[colorMode];
   const activeColor = colorStyle.color.primary;
+  const focusVisibleOutlineColor = {
+    dark: 'blue:60',
+    light: 'blue:60',
+  }[colorMode];
   const hoverBackgroundColor = {
     light: 'rgba(0, 0, 0, 0.12)',
     dark: 'rgba(255, 255, 255, 0.12)',
@@ -48,6 +52,12 @@ const NavLink = forwardRef((
           backgroundColor: activeBackgroundColor,
           color: activeColor,
         }}
+        _focusVisible={{
+          outlineColor: focusVisibleOutlineColor,
+          outlineOffset: '-1h',
+          outlineStyle: 'solid',
+          outlineWidth: '1h',
+        }}
         _hover={{
           backgroundColor: hoverBackgroundColor,
         }}

diff --git a/packages/react-docs/public/styles/app.css b/packages/react-docs/public/styles/app.css
@@ -157,6 +157,18 @@ dd {
   align-items: center;
   padding: var(--tonic-sizes-1x) var(--tonic-sizes-2x);
 }
+:where(html[data-color-scheme="dark"]) #toc .toc-link:focus-visible {
+  outline-color: var(--tonic-colors-blue-60);
+  outline-offset: calc(var(--tonic-sizes-1h) * -1);
+  outline-style: solid;
+  outline-width: var(--tonic-sizes-1h);
+}
+:where(html[data-color-scheme="light"]) #toc .toc-link:focus-visible {
+  outline-color: var(--tonic-colors-blue-60);
+  outline-offset: calc(var(--tonic-sizes-1h) * -1);
+  outline-style: solid;
+  outline-width: var(--tonic-sizes-1h);
+}
 :where(html[data-color-scheme="dark"]) #toc .toc-link:hover {
   border-left-color: var(--tonic-colors-gray-60);
   color: var(--tonic-colors-white-primary);