feat(SegmentedSwitch): refactor component for improved accessibility

Author: DSil

packages/orbit-components/src/SegmentedSwitch/SegmentedSwitch.ct.tsx

@@ -17,7 +17,7 @@ test.describe("visual SegmentedSwitch", () => {
 
   test("error focused", async ({ mount }) => {
     const component = await mount(<SegmentedSwitchErrorStory />);
-    await component.getByTestId("switch-error").focus();
+    await component.getByLabel("Male", { exact: true }).focus();
 
     await expect(component).toHaveScreenshot();
   });

packages/orbit-components/src/SegmentedSwitch/SwitchSegment/index.tsx

@@ -29,9 +29,7 @@ const SwitchSegment = ({
         name={name || "switch-segment"}
         defaultChecked={defaultChecked}
         type="radio"
-        role="switch"
         ref={ref}
-        aria-checked={Boolean(value)}
         onChange={onChange}
         onFocus={onFocus}
         disabled={disabled}

packages/orbit-components/src/SegmentedSwitch/index.tsx

@@ -36,16 +36,18 @@ const SegmentedSwitch = ({
   }, [showTooltip, hasTooltip, setTooltipShown]);
 
   return (
-    <label
+    <div
       data-test={dataTest}
       ref={labelRef}
       className={cx(
         "gap-50 relative flex w-full flex-col",
         spaceAfter && spaceAfterClasses[spaceAfter],
-        "[&_.orbit-switch-segment-label:nth-child(odd)_.orbit-switch-segment-text]:rounded-s-[5px]",
-        "[&_.orbit-switch-segment-label:nth-child(even)_.orbit-switch-segment-text]:rounded-e-[5px]",
+        "[&_.orbit-switch-segment-label:first-child_.orbit-switch-segment-text]:rounded-s-[5px]",
+        "[&_.orbit-switch-segment-label:last-child_.orbit-switch-segment-text]:rounded-e-[5px]",
       )}
       style={{ maxWidth }}
+      role="group"
+      aria-label={label}
     >
       {label && (
         <FormLabel
@@ -79,7 +81,7 @@ const SegmentedSwitch = ({
           referenceElement={labelRef}
         />
       )}
-    </label>
+    </div>
   );
 };