[v4] Add focus to segmented control radios

src/segmented-control/src/SegmentedControl.js

@@ -80,6 +80,7 @@ export default class SegmentedControl extends PureComponent {
 
   render() {
     const {
+      value: filterOutValue, // Filter out.
       name,
       height,
       options,
@@ -95,7 +96,8 @@ export default class SegmentedControl extends PureComponent {
         {options.map((option, index) => (
           <SegmentedControlRadio
             key={option.value}
-            name={name}
+            id={this.name + index}
+            name={name || this.name}
             label={option.label}
             value={String(option.value)}
             height={height}

src/segmented-control/src/SegmentedControlRadio.js

@@ -88,6 +88,11 @@ class SegmentedControlRadio extends PureComponent {
      */
     isLastItem: PropTypes.bool,
 
+    /**
+     * The unique id of the radio option.
+     */
+    id: PropTypes.string,
+
     /**
      * Theme provided by ThemeProvider.
      */
@@ -98,6 +103,7 @@ class SegmentedControlRadio extends PureComponent {
     const {
       theme,
 
+      id,
       name,
       label,
       value,
@@ -115,7 +121,6 @@ class SegmentedControlRadio extends PureComponent {
 
     return (
       <Box
-        is="label"
         className={cx(wrapperClass.toString(), themedClassName)}
         data-active={checked}
         {...(isFirstItem
@@ -133,13 +138,21 @@ class SegmentedControlRadio extends PureComponent {
       >
         <input
           type="radio"
+          id={id}
           className={`${offscreenCss}`}
           name={name}
           value={value}
           checked={checked}
           onChange={e => onChange(e.target.value)}
         />
-        <Text fontWeight={500} size={textSize} className={`${labelClass}`}>
+        <Text
+          is="label"
+          cursor="pointer"
+          htmlFor={id}
+          fontWeight={500}
+          size={textSize}
+          className={`${labelClass}`}
+        >
           {label}
         </Text>
       </Box>

src/theme/src/default-theme/component-specific/getSegmentedControlRadioClassName.js

@@ -6,7 +6,8 @@ const defaultAppearance = Themer.createSegmentedControlRadioAppearance({
   base: defaultControlStyles.base,
   disabled: defaultControlStyles.disabled,
   hover: defaultControlStyles.hover,
-  active: defaultControlStyles.active
+  active: defaultControlStyles.active,
+  focus: defaultControlStyles.focus
 })
 
 /**

src/themer/src/createSegmentedControlRadioAppearance.js

@@ -17,6 +17,7 @@ const disabledState = '[disabled="true"], [data-disabled="true"]'
 const hoverState = '&:not([disabled="true"]):not([data-disabled="true"]):hover'
 const activeState =
   '&:not([disabled="true"]):not([data-disabled="true"]):active, &:not([disabled="true"]):not([data-disabled="true"])[data-popover-opened="true"], &:not([disabled="true"]):not([data-disabled="true"])[data-active="true"]'
+const focusState = '& input:focus + label'
 
 /**
  * @param {object} items - object with a set of states.
@@ -25,7 +26,7 @@ const activeState =
 const createSegmentedControlRadioAppearance = (items = {}) => {
   missingStateWarning({
     items,
-    props: ['base', 'hover', 'disabled', 'active'],
+    props: ['base', 'hover', 'disabled', 'active', 'focus'],
     cb: prop => {
       console.error(
         `Themer.createSegmentedControlRadioAppearance() is missing a ${prop} item `,
@@ -42,10 +43,11 @@ const createSegmentedControlRadioAppearance = (items = {}) => {
       ...createAppearance(items.disabled)
     },
     [hoverState]: createAppearance(items.hover),
-    [activeState]: {
+    [focusState]: {
       zIndex: StackingOrder.FOCUSED,
-      ...createAppearance(items.active)
+      ...createAppearance(items.focus)
     },
+    [activeState]: createAppearance(items.active),
     '&[data-active="true"]': {
       cursor: 'default'
     }