[MOO-2224]: Intro Screen TalkBack/VoiceOver fix

packages/pluggableWidgets/intro-screen-native/CHANGELOG.md

@@ -6,10 +6,15 @@ 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.1.1] - 2026-1-19
 
 ### Fixed
-- We fixed an issue where using the conditional visibility on the IntroScreen would cause the widget not to render.
+
+-   We fixed an issue where using the conditional visibility on the IntroScreen would cause the widget not to render.
 
 ## [4.1.0] - 2025-9-9
 

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

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

packages/pluggableWidgets/intro-screen-native/src/SwipeableContainer.tsx

@@ -111,8 +111,17 @@ export const SwipeableContainer = (props: SwipeableContainerProps): ReactElement
         onSlideChange(index, activeIndexBeforeChange);
     };
 
-    const renderItem = ({ item }: any): ReactElement => {
-        return <View style={[{ width, flex: 1 }]}>{item.content}</View>;
+    const renderItem = ({ 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>
+        );
     };
 
     const renderButton = (
@@ -269,6 +278,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 && (
@@ -331,9 +343,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.1.1" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="IntroScreen" version="4.1.2" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="IntroScreen.xml" />
         </widgetFiles>