TabController - Screen reader page auto focus

[nitzanyiz]

Description

When a Tab is selected the screen reader should jump the focus to the page.

Changelog

TabController - Screen reader autofocus on selected page

Additional info

MADS-4737

[Copilot]

Pull Request Overview

This PR implements an auto-focus behavior for the screen reader whenever a Tab is selected. Key changes include adding a new active state (isActive) managed via a ref and useEffect hook, updating the animated reaction callback to trigger lazy loading and state updates, and modifying the accessible property in the Reanimated.View.

Comments suppressed due to low confidence (3)

src/components/tabController/TabPage.tsx:101

• The variable 'isActive' declared within the useAnimatedStyle callback shadows the state variable 'isActive'. Consider renaming the local variable (e.g., 'isCurrentlyActive') for improved clarity.

const animatedPageStyle = useAnimatedStyle(() => { const isActive = Math.round(currentPage.value) === index; ...

src/components/tabController/TabPage.tsx:85

• The hard-coded 100ms delay for setting accessibility focus may be fragile on some devices. Consider extracting this value to a configurable constant or adding a comment to clarify the rationale behind its selection.

timeoutId = setTimeout(() => { ... }, 100);

src/components/tabController/TabPage.tsx:122

• Setting accessible={false} may prevent the element from receiving screen reader focus even after calling AccessibilityInfo.setAccessibilityFocus. Verify if this attribute should instead be set to true or adjusted to support the auto-focus behavior.

<Reanimated.View ref={pageRef} style={_style} testID={testID} accessible={false}>