Shield 794 explore a better way to indicate focused state in checkbox…

… and radiofield components (#2832) * chore: update radio option focus styles The focus styles now apply only when the option has been keyboard-focused * chore: update checkbox input focus styles The focus styles now apply only when the checkbox has been keyboard-focused. --------- Co-authored-by: Douglas Egiemeh <[email protected]>
commercetools · May 31, 2024 · 42fd117 · 42fd117
1 parent e790eab
commit 42fd117
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 2 deletions.
diff --git a/.changeset/neat-ligers-burn.md b/.changeset/neat-ligers-burn.md
@@ -0,0 +1,6 @@
+---
+'@commercetools-uikit/checkbox-input': patch
+'@commercetools-uikit/radio-input': patch
+---
+
+The focus outline for checkbox and radio labels is now only visible to keyboard users.
diff --git a/packages/components/inputs/checkbox-input/src/checkbox-input.tsx b/packages/components/inputs/checkbox-input/src/checkbox-input.tsx
@@ -210,7 +210,7 @@ const Label = styled.label<TLabelProps>`
   }};
   position: relative;
 
-  &:focus-within ${LabelTextWrapper} {
+  &:focus-within:has(:focus-visible) ${LabelTextWrapper} {
     box-shadow: 0 0 0 2px ${designTokens.borderColorForInputWhenFocused};
   }
 

diff --git a/packages/components/inputs/radio-input/src/radio-option.styles.ts b/packages/components/inputs/radio-input/src/radio-option.styles.ts
@@ -155,7 +155,7 @@ const RadioOptionLabel = styled.label<TStylesProps>`
 
   ${(props) =>
     !props.isReadOnly
-      ? `:focus-within ${LabelTextWrapper} {
+      ? `:focus-within:has(:focus-visible) ${LabelTextWrapper} {
       outline: auto 2px ${designTokens.borderColorForInputWhenFocused};
       outline-offset: 2px;
       width: fit-content;