refactor: remove unneeded tabIndex. Create border helper

remove unneeded tabIndex. Create accessible border helper
chanzuckerberg · Nov 29, 2023 · 29fcbd9 · 29fcbd9
1 parent 022ffd9
commit 29fcbd9
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 9 deletions.
diff --git a/packages/components/src/core/Button/style.ts b/packages/components/src/core/Button/style.ts
@@ -7,6 +7,7 @@ import {
   getCorners,
   getSpaces,
 } from "../styles";
+import { focusVisibleA11yStyle } from "../styles/common/mixins/a11y";
 
 const sdsPropNames = ["isAllCaps", "isRounded", "sdsStyle", "sdsType"];
 
@@ -32,6 +33,7 @@ const ButtonBase = styled(Button, {
 
     return `
       ${outlineBorder}
+      ${focusVisibleA11yStyle()}
       padding: ${padding};
       min-width: 120px;
       height: 34px;
@@ -40,10 +42,6 @@ const ButtonBase = styled(Button, {
         background-color: ${colors?.primary[500]};
         box-shadow: none;
       }
-      &:focus-visible {
-        outline: 5px auto Highlight;
-        outline: 5px auto -webkit-focus-ring-color;
-      }
       &:active {
         color: white;
         background-color: ${colors?.primary[600]};

diff --git a/packages/components/src/core/InputCheckbox/index.tsx b/packages/components/src/core/InputCheckbox/index.tsx
@@ -67,7 +67,6 @@ const InputCheckbox = (props: CheckboxProps): JSX.Element => {
       caption={caption}
       control={
         <StyledCheckbox
-          tabIndex={0}
           disabled={disabled}
           checkedIcon={
             <SvgIcon

diff --git a/packages/components/src/core/InputCheckbox/styles.ts b/packages/components/src/core/InputCheckbox/styles.ts
@@ -4,6 +4,7 @@ import {
 } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import { fontBodyXxs } from "../styles";
+import { focusVisibleA11yStyle } from "../styles/common/mixins/a11y";
 import {
   CommonThemeProps,
   getColors,
@@ -69,10 +70,7 @@ export const StyledCheckbox = styled(RawCheckbox)`
       }
 
       &.MuiCheckbox-root {
-        &.Mui-focusVisible {
-          outline: 5px auto Highlight;
-          outline: 5px auto -webkit-focus-ring-color;
-        }
+        ${focusVisibleA11yStyle()}
         border-radius: ${corners?.s}px;        
         padding: ${spaces?.xxs}px;
         margin: 3px;