feat(react): improve accessibility with targeted :focus-visible foc…

…us styles for non-pointer devices (#796) * feat: implement `:focus-visible` for the Tree component with targeted focus style for non-pointer devices * feat: implement `:focus-visible` for the Menu component with targeted focus style for non-pointer devices * feat: implement `:focus-visible` for the Switch component with targeted focus style for non-pointer devices * feat: remove the `type` attribute from `SwitchControlBox` * feat: implement `:focus-visible` for the Checkbox component with targeted focus style for non-pointer devices * feat: implement `:focus-visible` for the Radio component with targeted focus style for non-pointer devices * chore: code prettify * feat: implement `:focus-visible` for the Tabs component with targeted focus style for non-pointer devices * feat: utilize `outline` instead of `box-shadow` for `:focus-visible` pseudo-style rendering * feat: implement `:focus-visible` for close button components with targeted focus style for non-pointer devices * feat: implement `:focus-visible` for the Button component with targeted focus style for non-pointer devices * docs: update examples in button, button-group, and button-link * feat: only use `aria-selected` with these roles: `option`, `tab`, `menuitemradio`, `treeitem`, `gridcell`, `row`, `rowheader`, and `columnheader` * feat: implement `:focus-visible` for the Pagination component with targeted focus style for non-pointer devices * feat: apply same `:focus-visible` style to secondary variant button for consistency * docs: apply :focus-visible style to icon button components
trendmicro-frontend · Oct 23, 2023 · 95a6f7c · 95a6f7c
1 parent d5089ed
commit 95a6f7c
Show file tree

Hide file tree

Showing 61 changed files with 2,584 additions and 2,074 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,
         }}