From f0d1dfc8afddd5b11064c2224074dd53a32e8709 Mon Sep 17 00:00:00 2001
From: MxKevinBeqo <kevin.beqo@mendix.com>
Date: Tue, 14 Apr 2026 16:17:58 +0200
Subject: [PATCH] fix(intro-screen-native): fix talkback/voiceover for
 pagination

---
 .../intro-screen-native/CHANGELOG.md          |  4 ++++
 .../src/SwipeableContainer.tsx                | 21 +++++++++++++++----
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/packages/pluggableWidgets/intro-screen-native/CHANGELOG.md b/packages/pluggableWidgets/intro-screen-native/CHANGELOG.md
index 8280a1a6e..c1f97ef43 100644
--- a/packages/pluggableWidgets/intro-screen-native/CHANGELOG.md
+++ b/packages/pluggableWidgets/intro-screen-native/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+-   We fixed an issue with the TalkBack/VoiceOver traversal in the IntroScreen widget, where the order was not correct.
+
 ## [4.3.0] - 2026-4-9
 
 ### Changed
diff --git a/packages/pluggableWidgets/intro-screen-native/src/SwipeableContainer.tsx b/packages/pluggableWidgets/intro-screen-native/src/SwipeableContainer.tsx
index c0be8b0a3..5fdf975ec 100644
--- a/packages/pluggableWidgets/intro-screen-native/src/SwipeableContainer.tsx
+++ b/packages/pluggableWidgets/intro-screen-native/src/SwipeableContainer.tsx
@@ -124,10 +124,19 @@ export const SwipeableContainer = (props: SwipeableContainerProps): ReactElement
     };
 
     const renderItem = useCallback(
-        ({ item }: any): ReactElement => {
-            return <View style={[{ width }, { height }]}>{item.content}</View>;
+        ({ item, index }: any): ReactElement => {
+            const isActive = index === activeIndex;
+            return (
+                <View
+                    style={[{ width, flex: 1 }]}
+                    importantForAccessibility={isActive ? "auto" : "no-hide-descendants"}
+                    accessibilityElementsHidden={!isActive}
+                >
+                    {item.content}
+                </View>
+            );
         },
-        [width, height]
+        [width, height, activeIndex]
     );
 
     const renderButton = (
@@ -284,6 +293,9 @@ export const SwipeableContainer = (props: SwipeableContainerProps): ReactElement
                                         : props.styles.dotStyle
                                 ]}
                                 onPress={() => onPaginationPress(i)}
+                                accessibilityRole="button"
+                                accessibilityLabel={`Go to slide ${i + 1}`}
+                                accessibilityState={{ selected: rtlSafeIndex(i) === activeIndex }}
                             />
                         ))}
                     {!hidePagination && paginationOverflow && (
@@ -356,9 +368,10 @@ export const SwipeableContainer = (props: SwipeableContainerProps): ReactElement
                 renderItem={renderItem}
                 onMomentumScrollEnd={onMomentumScrollEnd}
                 scrollEventThrottle={50}
-                extraData={width}
+                extraData={[width, activeIndex]}
                 onLayout={onLayout}
                 keyExtractor={(_: any, index: number) => "screen_key_" + index}
+                importantForAccessibility="no"
             />
             {renderPagination()}
         </View>