fix(segment): segment drag would set disabled segment button checked (#31112)

Issue number: resolves internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
- When the first segment is disabled and the last item is selected, if
the user swipes the `segment-view`, the first `segment-button` gets
checked even if it is disabled, and the view is presenting other
`segment-view`.

## What is the new behavior?

- A validation was added to ensure that the `segment-button` can only be
checked if it is not disabled

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->

Author: os-davidlourenco

core/src/components/segment-view/test/basic/index.html

@@ -79,6 +79,22 @@
           <ion-segment-content id="top">Top</ion-segment-content>
         </ion-segment-view>
 
+        <ion-segment id="disabledFirstSegment" value="third">
+          <ion-segment-button value="first" disabled>
+            <ion-label>First</ion-label>
+          </ion-segment-button>
+          <ion-segment-button content-id="second-content" value="second">
+            <ion-label>Second</ion-label>
+          </ion-segment-button>
+          <ion-segment-button content-id="third-content" value="third">
+            <ion-label>Third</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+        <ion-segment-view id="disabledFirstSegmentView">
+          <ion-segment-content id="second-content">Second Content</ion-segment-content>
+          <ion-segment-content id="third-content">Third Content</ion-segment-content>
+        </ion-segment-view>
+
         <ion-segment value="peach" scrollable>
           <ion-segment-button content-id="orange" value="orange">
             <ion-label>Orange</ion-label>

core/src/components/segment-view/test/basic/segment-view.e2e.ts

@@ -169,5 +169,38 @@ configs({ modes: ['md'] }).forEach(({ title, config }) => {
       const segmentContent = page.locator('ion-segment-content[id="top"]');
       await expect(segmentContent).toBeInViewport();
     });
+    test('should not select a disabled first segment button when dragging segment-view from last content', async ({
+      page,
+    }) => {
+      await page.setContent(
+        `
+        <ion-segment id="disabledFirstSegment" scrollable="true" value="third">
+          <ion-segment-button value="first" disabled>
+            <ion-label>First</ion-label>
+          </ion-segment-button>
+          <ion-segment-button content-id="second-content" value="second">
+            <ion-label>Second</ion-label>
+          </ion-segment-button>
+          <ion-segment-button content-id="third-content" value="third">
+            <ion-label>Third</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+        <ion-segment-view id="disabledFirstSegmentView">
+          <ion-segment-content id="second-content">Second Content</ion-segment-content>
+          <ion-segment-content id="third-content">Third Content</ion-segment-content>
+        </ion-segment-view>
+      `,
+        config
+      );
+      await page.waitForChanges();
+
+      await page.locator('ion-segment-view').evaluate((el: HTMLElement) => {
+        const max = el.scrollWidth - el.clientWidth;
+        el.scrollLeft = max;
+      });
+      await page.waitForChanges();
+
+      await expect(page.locator('ion-segment-button[value="first"]')).not.toHaveClass(/segment-button-checked/);
+    });
   });
 });

core/src/components/segment/segment.tsx

@@ -400,6 +400,10 @@ export class Segment implements ComponentInterface {
 
       const nextIndex = Math.round(scrollRatio * (buttons.length - 1));
 
+      if (buttons[nextIndex]?.disabled) {
+        return;
+      }
+
       if (this.lastNextIndex === undefined || this.lastNextIndex !== nextIndex) {
         this.lastNextIndex = nextIndex;
         this.triggerScrollOnValueChange = false;