fix(accessibility improvement for inputcheckbox): inputCheckbox has f…

…ocus border for keyboard nav fix #690
chanzuckerberg · Nov 29, 2023 · 26441e7 · 26441e7
1 parent 0314183
commit 26441e7
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 0 deletions.
diff --git a/packages/components/src/core/InputCheckbox/index.tsx b/packages/components/src/core/InputCheckbox/index.tsx
@@ -67,6 +67,7 @@ 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
@@ -64,6 +64,16 @@ export const StyledCheckbox = styled(RawCheckbox)`
         }
       }
 
+      &.MuiCheckbox-root {
+        &.Mui-focusVisible {
+          outline: 5px auto Highlight;
+          outline: 5px auto -webkit-focus-ring-color;
+        }
+        border-radius: 2px;
+        padding: 4px;
+        margin: 3px;
+      }
+
       .MuiSvgIcon-root {
         height: ${iconSizes?.input.height}px;
         width: ${iconSizes?.input.width}px;