fix: avoid redundant segmented group tab stop

Author: nrps9909

src/index.tsx

@@ -308,7 +308,6 @@ const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>(
       <div
         role="radiogroup"
         aria-label="segmented control"
-        tabIndex={disabled ? undefined : 0}
         aria-orientation={vertical ? 'vertical' : 'horizontal'}
         style={style}
         {...divProps}

tests/__snapshots__/index.test.tsx.snap

@@ -6,7 +6,6 @@ exports[`rc-segmented render empty segmented 1`] = `
   aria-orientation="horizontal"
   class="rc-segmented"
   role="radiogroup"
-  tabindex="0"
 >
   <div
     class="rc-segmented-group"
@@ -20,7 +19,6 @@ exports[`rc-segmented render label with ReactNode 1`] = `
   aria-orientation="horizontal"
   class="rc-segmented"
   role="radiogroup"
-  tabindex="0"
 >
   <div
     class="rc-segmented-group"
@@ -82,7 +80,6 @@ exports[`rc-segmented render segmented ok 1`] = `
   aria-orientation="horizontal"
   class="rc-segmented"
   role="radiogroup"
-  tabindex="0"
 >
   <div
     class="rc-segmented-group"
@@ -140,7 +137,6 @@ exports[`rc-segmented render segmented with CSSMotion basic 1`] = `
   aria-orientation="horizontal"
   class="rc-segmented"
   role="radiogroup"
-  tabindex="0"
 >
   <div
     class="rc-segmented-group"
@@ -198,7 +194,6 @@ exports[`rc-segmented render segmented with options 1`] = `
   aria-orientation="horizontal"
   class="rc-segmented"
   role="radiogroup"
-  tabindex="0"
 >
   <div
     class="rc-segmented-group"
@@ -308,7 +303,6 @@ exports[`rc-segmented render segmented with options: 1 1`] = `
   aria-orientation="horizontal"
   class="rc-segmented"
   role="radiogroup"
-  tabindex="0"
 >
   <div
     class="rc-segmented-group"
@@ -394,7 +388,6 @@ exports[`rc-segmented render segmented with options: 2 1`] = `
   aria-orientation="horizontal"
   class="rc-segmented"
   role="radiogroup"
-  tabindex="0"
 >
   <div
     class="rc-segmented-group"
@@ -452,7 +445,6 @@ exports[`rc-segmented render segmented with options: disabled 1`] = `
   aria-orientation="horizontal"
   class="rc-segmented"
   role="radiogroup"
-  tabindex="0"
 >
   <div
     class="rc-segmented-group"
@@ -511,7 +503,6 @@ exports[`rc-segmented render segmented with title 1`] = `
   aria-orientation="horizontal"
   class="rc-segmented"
   role="radiogroup"
-  tabindex="0"
 >
   <div
     class="rc-segmented-group"
@@ -658,7 +649,6 @@ exports[`rc-segmented should render vertical segmented 1`] = `
   aria-orientation="vertical"
   class="rc-segmented rc-segmented-vertical"
   role="radiogroup"
-  tabindex="0"
 >
   <div
     class="rc-segmented-group"
@@ -716,7 +706,6 @@ exports[`rc-segmented should render vertical segmented and handle thumb animatio
   aria-orientation="vertical"
   class="rc-segmented rc-segmented-vertical"
   role="radiogroup"
-  tabindex="0"
 >
   <div
     class="rc-segmented-group"

tests/index.test.tsx

@@ -687,22 +687,26 @@ describe('Segmented keyboard navigation', () => {
     const firstInput = inputs[0];
 
     await user.tab();
-    // segmented container should be focused
-    expect(segmentedContainer).toHaveFocus();
-    await user.tab();
-    // first segmented item should be focused
+    // The radio group should not add an empty stop before its native radios.
+    expect(segmentedContainer).not.toHaveAttribute('tabindex');
     expect(firstInput).toHaveFocus();
   });
 
+  it('should honor an explicit group tabIndex', () => {
+    const { getByRole } = render(
+      <Segmented options={['Daily', 'Weekly', 'Monthly']} tabIndex={0} />,
+    );
+
+    expect(getByRole('radiogroup')).toHaveAttribute('tabindex', '0');
+  });
+
   it('should handle circular navigation with arrow keys', async () => {
     const user = userEvent.setup();
     const onChange = jest.fn();
     render(
       <Segmented options={['iOS', 'Android', 'Web']} onChange={onChange} />,
     );
 
-    // focus on segmented
-    await user.tab();
     // focus on first item
     await user.tab();
 
@@ -751,7 +755,6 @@ describe('Segmented keyboard navigation', () => {
       />,
     );
 
-    await user.tab();
     await user.tab();
 
     await user.keyboard('{ArrowRight}');
@@ -777,7 +780,6 @@ describe('Segmented keyboard navigation', () => {
       />,
     );
 
-    await user.tab();
     await user.tab();
     await user.keyboard('{ArrowRight}');