fix: intro screen

Author: YogendraShelke

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

@@ -9,6 +9,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ### Fixed
 
 -   We fixed an issue where reopening a page containing the intro screen would show the first slide instead of the slide referenced by the active slide attribute, and would report a slide change that the user did not make.
+-   We fixed an issue where the initial slide was scrolled to with an animation, which briefly left the slide content unavailable to screen readers.
 
 ## [4.4.1] - 2026-6-10
 

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

@@ -83,11 +83,12 @@ export const SwipeableContainer = (props: SwipeableContainerProps): ReactElement
     );
 
     const goToSlide = useCallback(
-        (pageNum: number) => {
+        (pageNum: number, animated = true) => {
             setActiveIndex(pageNum);
             if (flashList && flashList.current) {
                 flashList.current.scrollToOffset({
-                    offset: rtlSafeIndex(pageNum) * width
+                    offset: rtlSafeIndex(pageNum) * width,
+                    animated
                 });
             }
         },
@@ -104,7 +105,10 @@ export const SwipeableContainer = (props: SwipeableContainerProps): ReactElement
         // can sit at offset 0 while activeIndex says otherwise.
         if (!hasAppliedInitialScroll.current) {
             hasAppliedInitialScroll.current = true;
-            goToSlide(slide);
+            // Jump without animation: activeIndex is applied immediately, and it drives which
+            // slide is exposed to accessibility. An animated scroll would leave the exposed
+            // slide off-screen until the animation lands.
+            goToSlide(slide, false);
         } else if (slide !== activeIndex) {
             goToSlide(slide);
         }

packages/pluggableWidgets/intro-screen-native/src/__tests__/SwipeableContainer.remount.spec.tsx

@@ -0,0 +1,143 @@
+import { render, fireEvent, act } from "@testing-library/react-native";
+import { View } from "react-native";
+import { EditableValueBuilder } from "@mendix/piw-utils-internal";
+import { EditableValue } from "mendix";
+import { Big } from "big.js";
+import { SwipeableContainer } from "../SwipeableContainer";
+import { defaultWelcomeScreenStyle } from "../ui/Styles";
+
+jest.mock("react-native-device-info", () => ({
+    hasNotch: jest.fn(),
+    getDeviceId: jest.fn().mockReturnValue("")
+}));
+
+const WIDTH = 400;
+
+// Capture the scroll calls the widget issues, while leaving the real FlashList in place so
+// layout and momentum-scroll events still behave normally.
+const scrollCalls: Array<{ offset: number; animated?: boolean }> = [];
+
+jest.mock("@shopify/flash-list", () => {
+    const actual = jest.requireActual("@shopify/flash-list");
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    const react = require("react");
+    const Wrapped = react.forwardRef((props: any, ref: any) => {
+        const inner = react.useRef(null);
+        react.useImperativeHandle(ref, () => ({
+            scrollToOffset: (params: any) => {
+                (globalThis as any).__introScreenScrollCalls.push(params);
+                (inner.current as any)?.scrollToOffset?.(params);
+            }
+        }));
+        return react.createElement(actual.FlashList, { ...props, ref: inner });
+    });
+    return { ...actual, FlashList: Wrapped };
+});
+
+(globalThis as any).__introScreenScrollCalls = scrollCalls;
+
+type Setup = ReturnType<typeof render> & {
+    activeSlide: EditableValue<Big>;
+    onSlideChange: jest.Mock;
+    scrollCalls: Array<{ offset: number; animated?: boolean }>;
+};
+
+function setup(activeSlideValue: number): Setup {
+    const activeSlide = new EditableValueBuilder<Big>().withValue(new Big(activeSlideValue)).build();
+    const onSlideChange = jest.fn();
+    const slides = [1, 2, 3].map(i => ({ name: `Page ${i}`, content: <View /> }));
+
+    scrollCalls.length = 0;
+
+    const utils = render(
+        <SwipeableContainer
+            testID="intro"
+            slides={slides as any}
+            onDone={jest.fn()}
+            onSkip={jest.fn()}
+            onSlideChange={onSlideChange}
+            bottomButton={false}
+            numberOfButtons={2}
+            showSkipButton
+            showNextButton
+            showPreviousButton
+            showDoneButton
+            hidePagination={false}
+            hideIndicatorLastSlide={false}
+            styles={defaultWelcomeScreenStyle}
+            activeSlide={activeSlide}
+        />
+    );
+
+    // Simulate layout so `width` becomes known, exactly as on a real device.
+    act(() => {
+        fireEvent(utils.getByTestId("intro"), "layout", {
+            nativeEvent: { layout: { width: WIDTH, height: 800 } }
+        });
+    });
+
+    return { ...utils, activeSlide, onSlideChange, scrollCalls };
+}
+
+describe("SwipeableContainer remount behaviour", () => {
+    it("positions the initial slide without animation", () => {
+        const { scrollCalls } = setup(2);
+
+        expect(scrollCalls.length).toBeGreaterThan(0);
+        expect(scrollCalls[0]).toEqual({ offset: WIDTH, animated: false });
+    });
+
+    it("writes the next slide when Next is pressed after remounting on slide 2", () => {
+        const { getByTestId, activeSlide } = setup(2);
+
+        fireEvent.press(getByTestId("intro$buttonNext"));
+
+        expect(activeSlide.setValue).toHaveBeenCalledWith(new Big(3));
+    });
+
+    it("does not report a slide change for the programmatic initial scroll", () => {
+        const { getByTestId, onSlideChange, activeSlide } = setup(2);
+
+        // The forced initial scroll settles and reports its resting offset.
+        act(() => {
+            fireEvent(getByTestId("intro"), "momentumScrollEnd", {
+                nativeEvent: { contentOffset: { x: WIDTH } }
+            });
+        });
+
+        expect(onSlideChange).not.toHaveBeenCalled();
+        expect(activeSlide.setValue).not.toHaveBeenCalled();
+    });
+
+    it("still writes the next slide when a stale scroll settles before Next is pressed", () => {
+        const { getByTestId, activeSlide } = setup(2);
+
+        act(() => {
+            fireEvent(getByTestId("intro"), "momentumScrollEnd", {
+                nativeEvent: { contentOffset: { x: WIDTH } }
+            });
+        });
+
+        fireEvent.press(getByTestId("intro$buttonNext"));
+
+        expect(activeSlide.setValue).toHaveBeenCalledWith(new Big(3));
+    });
+
+    it("ignores a stale programmatic scroll that reports the pre-scroll offset", () => {
+        const { getByTestId, activeSlide, onSlideChange } = setup(2);
+
+        // The list reports offset 0 — the position it held before the programmatic scroll to
+        // slide 2 settled. Trusting it would desync activeIndex from what is on screen.
+        act(() => {
+            fireEvent(getByTestId("intro"), "momentumScrollEnd", {
+                nativeEvent: { contentOffset: { x: 0 } }
+            });
+        });
+
+        expect(onSlideChange).not.toHaveBeenCalled();
+
+        fireEvent.press(getByTestId("intro$buttonNext"));
+
+        expect(activeSlide.setValue).toHaveBeenCalledWith(new Big(3));
+    });
+});