[Due for payment soon] [$250][Accessibility][Tracking] Remove Duplicate Focusable Elements

[rushatgabhane]

Overview

This issue tracks elements that are incorrectly focusable multiple times, causing duplicate announcements.

Context

Part of the accessibility improvement effort tracked in https://github.com/Expensify/Expensify/issues/575078

Issues to Fix

• Screen Readers: Sign in: All links in the footer are focused and announed twice #77418 - All links in footer focused and announced twice
• Screen Reader: Many Pages: The text field is focused and announced twice #77329 - Text field focused and announced twice

Instructions

Suggested Fix: Remove duplicate focusable elements

Note: Discuss on Slack if you are unsure whether a sub-issue should be fixed or if you are unsure about the right fix / expected result. Ideally, create a single PR that will fix all the issues listed to minimize review time (more PRs only if necessary).

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022009703281328645610
• Upwork Job ID: 2009703281328645610
• Last Price Increase: 2026-01-21

Issue Owner

Current Issue Owner: @mallenexpensify

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~022009703281328645610

[melvin-bot]

Current assignee @mallenexpensify is eligible for the Bug assigner, not assigning anyone new.

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @Ollyws (External)

[melvin-bot]

⚠️ This issue has had its price increased by 4x or more. Please review the issue and ensure the price is correct.

[melvin-bot]

Upwork job price has been updated to $250

[abbasifaizan70]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Screen readers are announcing elements multiple times due to duplicate focusable elements in the component hierarchy:

1. Footer Links Issue (Screen Readers: Sign in: All links in the footer are focused and announed twice #77418): All links in the sign-in page footer are focused and announced twice because each TextLink is wrapped in an unnecessary <View> element inside <Hoverable>.

2. Text Field Issue (Screen Reader: Many Pages: The text field is focused and announced twice #77329): Text fields are focused and announced twice because the BaseTextInput component has a PressableWithoutFeedback wrapper with accessibilityLabel={label}, and the actual TextInput inside also has its own accessibility label.

---

What is the root cause of that problem?

Footer Links (#77418)

Looking at src/pages/signin/SignInPageLayout/Footer.tsx (lines 181-202):

{column.rows.map(({href, onPress, translationPath}) => (
    <Hoverable key={translationPath}>
        {(hovered) => (
            <View>
                {onPress ? (
                    <TextLink
                        style={getTextLinkStyle(hovered)}
                        onPress={onPress}
                    >
                        {translate(translationPath)}
                    </TextLink>
                ) : (
                    <TextLink
                        style={getTextLinkStyle(hovered)}
                        href={href}
                    >
                        {translate(translationPath)}
                    </TextLink>
                )}
            </View>
        )}
    </Hoverable>
))}

The <View> wrapper around each TextLink is creating a duplicate focusable element. The Hoverable component already handles cloning the child element with mouse event handlers, so this intermediate View is unnecessary and causes screen readers to navigate to both elements.

Text Field (#77329)

Looking at src/components/TextInput/BaseTextInput/implementation/index.tsx (lines 299-303):

<PressableWithoutFeedback
    role={CONST.ROLE.PRESENTATION}
    onPress={onPress}
    tabIndex={-1}
    accessibilityLabel={label}

While the wrapper has role={CONST.ROLE.PRESENTATION} (which semantically indicates it should be hidden from assistive technologies) and tabIndex={-1} (preventing keyboard focus), the presence of accessibilityLabel={label} causes screen readers to still announce this wrapper element. The actual TextInput inside also receives accessibility labeling, resulting in duplicate announcements.

---

What changes do you think we should make in order to solve the problem?

Fix 1 - Footer Links

File: src/pages/signin/SignInPageLayout/Footer.tsx

Remove the unnecessary <View> wrapper around TextLink components. The TextLink should be the direct child of Hoverable:

{column.rows.map(({href, onPress, translationPath}) => (
    <Hoverable key={translationPath}>
        {(hovered) =>
            onPress ? (
                <TextLink
                    style={getTextLinkStyle(hovered)}
                    onPress={onPress}
                >
                    {translate(translationPath)}
                </TextLink>
            ) : (
                <TextLink
                    style={getTextLinkStyle(hovered)}
                    href={href}
                >
                    {translate(translationPath)}
                </TextLink>
            )
        }
    </Hoverable>
))}

Fix 2 - TextInput

Files:

• src/components/TextInput/BaseTextInput/implementation/index.tsx
• src/components/TextInput/BaseTextInput/implementation/index.native.tsx

Remove the accessibilityLabel prop from the PressableWithoutFeedback wrapper. Since it has role={CONST.ROLE.PRESENTATION}, it should not have an accessibility label. The actual input already has proper accessibility labeling:

<PressableWithoutFeedback
    role={CONST.ROLE.PRESENTATION}
    onPress={onPress}
    tabIndex={-1}
    // accessibilityLabel removed - the actual input already has proper labeling
    onLayout={onLayout}
    ...
>