bug: Swipeable Segments won't work with dir=RTL

[emnawer]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v8.x

Current Behavior

• Swipeable Segments (IonSegment and IonSegmentView) do not work if dir="rtl" add to body tag. If click on button, it won't slide content of the next segment.
• Under Firefox's Responsive Design Mode (mobile): if try to swipe instead of clicking the button, it will through an error:_

TypeError: button is undefined
    getIndicator ion-segment.js:262
    checkButton ion-segment.js:267
    handleSegmentViewScroll ion-segment.js:333
    hostListenerProxy index.js:2925
    emitEvent index.js:804
    emit index.js:793
    handleScroll ion-segment-view.js:27
    hostListenerProxy index.js:2925
    ael index.js:131
 undefined [index.js:52:61](http://localhost:8100/node_modules/@stencil/core/internal/client/index.js)
    consoleError index.js:52
    hostListenerProxy index.js:2928
    emitEvent index.js:804
    emit index.js:793
    handleScroll ion-segment-view.js:27
    hostListenerProxy index.js:2925
    (Async: EventListener.handleEvent)
    ael index.js:131
    addHostEventListeners index.js:2910
    addHostEventListeners index.js:2906
    connectedCallback index.js:2647
    React 105
    (Async: VoidFunction)
        ensureRootIsScheduled
        scheduleUpdateOnFiber
        enqueueSetState
        setState
    handleHistoryChange IonRouter.tsx:204
    handleHistoryChange IonReactRouter.tsx:37
    listener history.js:155
    notifyListeners history.js:173
    notifyListeners history.js:172
    setState history.js:288
    replace history.js:402
    confirmTransitionTo history.js:145
    replace history.js:385
    handleNavigate IonRouter.tsx:243
    handleNavigateBack IonRouter.tsx:292
    goBack NavManager.tsx:96
    clickButton IonBackButton.tsx:37
    React 23
    (Async: EventListener.handleEvent)
        addEventBubbleListener
        addTrappedEventListener
        listenToNativeEvent
        listenToAllSupportedEvents
        listenToAllSupportedEvents
        createRoot
        createRoot$1
        createRoot
    <anonymous> index.jsx:13

​

Expected Behavior

Both IonSegment and IonSegmentView obey the RTL direction.

Steps to Reproduce

1. Copy ReactJS code from (https://ionicframework.com/docs/api/segment#swipeable-segments), add dir="rtl" to body tag or to both IonSegment and IonSegmentView
2. If click on any IonSegmentButton no feedback (segment wont auto-slide), if swipe the console with through an error.
3. Look at console error log the following: TypeError: button is undefined

Code Reproduction URL

https://ionicframework.com/docs/api/segment#swipeable-segments

Ionic Info

Ionic:

Ionic CLI : 7.2.0
Ionic Framework : @ionic/react 8.4.1

Capacitor:

Capacitor CLI : 6.2.0
@capacitor/android : not installed
@capacitor/core : 6.2.0
@capacitor/ios : not installed

Utility:

cordova-res : not installed globally
native-run : 2.0.1

System:

NodeJS : v20.18.1
npm : 10.8.2
OS : Linux 5.15

Additional Information

Temporary solution: hard-code dir="ltr" to IonSegmentView tag and hope the user won't notice the wrong slide direction.