feat(components): update RadioButton supported state (#17290)

* feat(components): update RadioButton supported state
Opentrons · Jan 17, 2025 · 2b75afa · 2b75afa
1 parent b2a4c56
commit 2b75afa
Showing 1 changed file with 31 additions and 20 deletions.
diff --git a/components/src/atoms/buttons/RadioButton.tsx b/components/src/atoms/buttons/RadioButton.tsx
@@ -3,11 +3,11 @@ import { Flex } from '../../primitives'
 import { COLORS, BORDERS } from '../../helix-design-system'
 import { RESPONSIVENESS, SPACING } from '../../ui-style-constants'
 import {
+  ALIGN_CENTER,
   CURSOR_DEFAULT,
-  CURSOR_POINTER,
   CURSOR_NOT_ALLOWED,
+  CURSOR_POINTER,
   DIRECTION_ROW,
-  ALIGN_CENTER,
   Icon,
   StyledText,
 } from '../../index'
@@ -36,21 +36,21 @@ interface RadioButtonProps extends StyleProps {
   error?: string | null
 }
 
-//  used for ODD and helix
+// used for ODD and helix
 export function RadioButton(props: RadioButtonProps): JSX.Element {
   const {
     buttonLabel,
     buttonValue,
+    onChange,
     disabled = false,
+    iconName,
     isSelected = false,
-    onChange,
+    largeDesktopBorderRadius = false,
     radioButtonType = 'large',
     subButtonLabel,
     id = typeof buttonLabel === 'string'
       ? buttonLabel
       : `RadioButtonId_${buttonValue}`,
-    largeDesktopBorderRadius = false,
-    iconName,
     maxLines = 1,
     setHovered,
     setNoHover,
@@ -70,7 +70,6 @@ export function RadioButton(props: RadioButtonProps): JSX.Element {
     background: ${COLORS.blue50};
     color: ${COLORS.white};
 
-    &:hover,
     &:active {
       background-color: ${disabled ? COLORS.grey35 : COLORS.blue60};
     }
@@ -94,15 +93,7 @@ export function RadioButton(props: RadioButtonProps): JSX.Element {
   }
 
   return (
-    <Flex
-      css={css`
-        width: ${props.width ?? 'auto'};
-
-        @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-          width: 100%;
-        }
-      `}
-    >
+    <RadioButtonWrapper>
       <SettingButton
         checked={isSelected}
         disabled={disabled}
@@ -123,6 +114,7 @@ export function RadioButton(props: RadioButtonProps): JSX.Element {
         onMouseEnter={setHovered}
         onMouseLeave={setNoHover}
         css={getButtonStyle(isSelected, disabled)}
+        aria-selected={isSelected}
       >
         <Flex
           flexDirection={DIRECTION_ROW}
@@ -132,8 +124,7 @@ export function RadioButton(props: RadioButtonProps): JSX.Element {
           {iconName != null ? (
             <Icon
               name={iconName}
-              width="1rem"
-              height="1rem"
+              size="1rem"
               data-testid={`icon_${iconName}`}
             />
           ) : null}
@@ -161,7 +152,7 @@ export function RadioButton(props: RadioButtonProps): JSX.Element {
           </Flex>
         ) : null}
       </SettingButtonLabel>
-    </Flex>
+    </RadioButtonWrapper>
   )
 }
 
@@ -179,6 +170,18 @@ const DISABLED_BUTTON_STYLE = css`
   }
 `
 
+interface RadioButtonWrapperProps {
+  width?: string
+}
+
+const RadioButtonWrapper = styled(Flex)<RadioButtonWrapperProps>`
+  width: ${({ width }) => width ?? 'auto'};
+
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    width: 100%;
+  }
+`
+
 const SettingButton = styled.input`
   display: none;
 `
@@ -199,8 +202,16 @@ const SettingButtonLabel = styled.label<SettingsButtonLabelProps>`
   width: 100%;
 
   ${({ disabled }) => disabled && DISABLED_BUTTON_STYLE}
-  &:focus-visible {
+
+  /* note this is to disable the black outline that is the browser’s default focus ring  */
+  &:focus {
+    outline: none;
+  }
+  &:focus-visible:not([aria-selected='true']) {
+    /* outline: 2px solid ${COLORS.blue55}; */
+    color: ${COLORS.blue55};
     outline: 2px solid ${COLORS.blue55};
+    outline-offset: 0.12rem;
   }
 
   @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {