fix(choice-group): segmented item borders and focus behaviour #101 (#513)

Author: airikej

src/tedi/components/form/choice-group/choice-group.tsx

@@ -67,7 +67,7 @@ export const ChoiceGroup = (props: ChoiceGroupProps): React.ReactElement => {
     indeterminateCheck,
     indeterminateCheckProps = {},
     color,
-    layout,
+    layout = 'separated',
     showIndicator,
     ...rest
   } = getCurrentBreakpointProps(props);
@@ -188,8 +188,8 @@ export const ChoiceGroup = (props: ChoiceGroupProps): React.ReactElement => {
                 )}
                 <Row
                   direction={direction}
-                  gutterX={direction === 'row' && layout === 'segmented' ? 0 : 2}
-                  gutterY={direction === 'row' && layout === 'segmented' ? 0 : 1}
+                  gutterX={layout === 'segmented' ? 0 : 2}
+                  gutterY={layout === 'segmented' ? 0 : 1}
                   gap={
                     variant === 'default'
                       ? isBreakpointBelow(currentBreakpoint, 'md')

src/tedi/components/form/choice-group/components/choice-group-item/choice-group-item.module.scss

@@ -21,10 +21,6 @@
       cursor: unset;
     }
 
-    .tedi-choice-group-item__input {
-      @include mixins.visually-hidden;
-    }
-
     &__label {
       box-sizing: border-box;
       display: block;
@@ -51,7 +47,7 @@
       }
     }
 
-    &:has(:focus-visible) {
+    &:focus-visible {
       z-index: 5;
       outline: 2px solid var(--form-checkbox-radio-default-border-selected);
       outline-offset: 2px;
@@ -63,10 +59,6 @@
   background-color: var(--form-checkbox-radio-card-primary-default-background);
   border: 1px solid var(--form-checkbox-radio-card-primary-default-border-group);
 
-  &.tedi-choice-group-item--checkbox {
-    border-color: var(--filter-primary-inactive-background);
-  }
-
   &.tedi-choice-group-item--checked {
     background-color: var(--form-checkbox-radio-card-primary-selected-background);
     border-color: var(--form-checkbox-radio-card-primary-hover-border);
@@ -142,12 +134,6 @@
     }
   }
 
-  &:has(:focus-visible) {
-    z-index: 5;
-    outline: 2px solid var(--form-checkbox-radio-default-border-selected);
-    outline-offset: 2px;
-  }
-
   &.tedi-choice-group-item--disabled {
     color: var(--form-checkbox-radio-card-primary-disabled-default-text);
     background-color: var(--form-checkbox-radio-card-secondary-disabled-default-background);
@@ -164,19 +150,44 @@
       margin-top: -1px;
     }
 
+    &:first-of-type .tedi-choice-group-item {
+      border-top-left-radius: var(--border-radius-default);
+      border-top-right-radius: var(--border-radius-default);
+    }
+
+    &:last-of-type .tedi-choice-group-item {
+      border-bottom-right-radius: var(--border-radius-default);
+      border-bottom-left-radius: var(--border-radius-default);
+    }
+
     &:not(:first-of-type) .tedi-choice-group-item--disabled {
       margin-top: 1px;
       border-top-color: var(--form-checkbox-radio-card-secondary-disabled-default-border);
     }
+  }
+
+  &.tedi-choice-group-item--column-reverse {
+    &:not(:first-of-type, :disabled) {
+      margin-bottom: -1px;
+    }
+
+    &:last-of-type:disabled {
+      margin-bottom: 0;
+    }
 
     &:first-of-type .tedi-choice-group-item {
+      border-bottom-right-radius: var(--border-radius-default);
+      border-bottom-left-radius: var(--border-radius-default);
+    }
+
+    &:last-of-type .tedi-choice-group-item {
       border-top-left-radius: var(--border-radius-default);
       border-top-right-radius: var(--border-radius-default);
     }
 
-    &:last-of-type .tedi-choice-group-item {
-      border-bottom-right-radius: var(--border-radius-default);
-      border-bottom-left-radius: var(--border-radius-default);
+    &:not(:first-of-type) .tedi-choice-group-item--disabled {
+      margin-bottom: 1px;
+      border-bottom-color: var(--form-checkbox-radio-card-secondary-disabled-default-border);
     }
   }
 
@@ -213,6 +224,39 @@
     }
   }
 
+  &.tedi-choice-group-item--row-reverse {
+    &:not(:first-of-type) .tedi-choice-group-item {
+      margin-right: -1px;
+    }
+
+    &:not(:first-of-type) .tedi-choice-group-item--disabled {
+      margin-right: 0;
+
+      &.tedi-choice-group-item--card-primary {
+        border-right-color: var(--form-checkbox-radio-card-secondary-disabled-default-border);
+      }
+
+      &.tedi-choice-group-item--card-secondary {
+        border-right-color: var(--form-checkbox-radio-card-secondary-default-background);
+      }
+    }
+
+    &:first-of-type .tedi-choice-group-item {
+      border-top-right-radius: var(--border-radius-default);
+      border-bottom-right-radius: var(--border-radius-default);
+    }
+
+    &:last-of-type .tedi-choice-group-item {
+      border-top-left-radius: var(--border-radius-default);
+      border-bottom-left-radius: var(--border-radius-default);
+    }
+
+    .tedi-choice-group-item--disabled.tedi-choice-group-item--card-secondary {
+      color: var(--form-checkbox-radio-card-primary-disabled-default-text);
+      background-color: var(--form-checkbox-radio-card-secondary-disabled-default-background);
+    }
+  }
+
   .tedi-choice-group-item--card-primary:not(.tedi-choice-group-item--disabled):hover {
     background-color: var(--form-checkbox-radio-card-primary-hover-background);
     border-color: var(--form-checkbox-radio-card-primary-hover-border);

src/tedi/components/form/choice-group/components/choice-group-item/choice-group-item.tsx

@@ -93,7 +93,13 @@ export const ChoiceGroupItem = (props: ExtendedChoiceGroupItemProps): React.Reac
   };
   return (
     <Col {...colProps} className={ColumnBEM}>
-      <div className={ChoiceGroupItemBEM} onClick={handleClick} role={type} aria-checked={isChecked}>
+      <div
+        className={ChoiceGroupItemBEM}
+        tabIndex={disabled ? -1 : 0}
+        onClick={handleClick}
+        role={type}
+        aria-checked={isChecked}
+      >
         {variant === 'default' || showIndicator ? (
           <InputComponent
             id={id}
@@ -128,9 +134,10 @@ export const ChoiceGroupItem = (props: ExtendedChoiceGroupItemProps): React.Reac
               onChange={(e) => {
                 onChangeHandler(value, e.target.checked);
               }}
-              className={styles['tedi-choice-group-item__input']}
+              className="visually-hidden"
               role={type === 'radio' ? 'radio' : undefined}
               aria-checked={isChecked}
+              tabIndex={-1}
             />
             <label htmlFor={id} className={styles['tedi-choice-group-item__label']}>
               {label}