fix(intro-screen-native): fix talkback/voiceover for pagination

Author: MxKevinBeqo

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

packages/pluggableWidgets/intro-screen-native/package.json

@@ -1,7 +1,7 @@
 {
   "name": "intro-screen-native",
   "widgetName": "IntroScreen",
-  "version": "4.3.0",
+  "version": "4.3.1",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",

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>

packages/pluggableWidgets/intro-screen-native/src/package.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="IntroScreen" version="4.3.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="IntroScreen" version="4.3.1" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="IntroScreen.xml" />
         </widgetFiles>