fix(a11y): remove duplicate focusable elements

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

@@ -79,6 +79,7 @@ function BaseTextInput({
     iconContainerStyle,
     shouldUseDefaultLineHeightForPrefix = true,
     ref,
+    sentryLabel,
     ...props
 }: BaseTextInputProps) {
     const InputComponent = InputComponentMap.get(type) ?? RNTextInput;
@@ -289,10 +290,11 @@ function BaseTextInput({
                     role={CONST.ROLE.PRESENTATION}
                     onPress={onPress}
                     tabIndex={-1}
+                    accessible={false}
+                    sentryLabel={sentryLabel}
                     // When autoGrowHeight is true we calculate the width for the text input, so it will break lines properly
                     // or if multiline is not supplied we calculate the text input height, using onLayout.
                     onLayout={onLayout}
-                    accessibilityLabel={accessibilityLabel}
                     style={[
                         autoGrowHeight &&
                             !isAutoGrowHeightMarkdown &&

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

@@ -297,11 +297,7 @@ function BaseTextInput({
                 // eslint-disable-next-line react/jsx-props-no-spreading
                 {...(shouldInterceptSwipe && SwipeInterceptPanResponder.panHandlers)}
             >
-                <PressableWithoutFeedback
-                    role={CONST.ROLE.PRESENTATION}
-                    onPress={onPress}
-                    tabIndex={-1}
-                    accessibilityLabel={accessibilityLabel}
+                <View
                     // When autoGrowHeight is true we calculate the width for the text input, so it will break lines properly
                     // or if multiline is not supplied we calculate the text input height, using onLayout.
                     onLayout={onLayout}
@@ -317,9 +313,20 @@ function BaseTextInput({
                         !isMultiline && styles.componentHeightLarge,
                         touchableInputWrapperStyle,
                     ]}
-                    sentryLabel={sentryLabel}
                 >
+                    <PressableWithoutFeedback
+                        role={CONST.ROLE.PRESENTATION}
+                        onPress={onPress}
+                        tabIndex={-1}
+                        accessible={false}
+                        accessibilityElementsHidden
+                        importantForAccessibility="no"
+                        aria-hidden
+                        style={[StyleSheet.absoluteFillObject]}
+                        sentryLabel={sentryLabel}
+                    />
                     <View
+                        pointerEvents="box-none"
                         style={[
                             newTextInputContainerStyles,
 
@@ -448,7 +455,8 @@ function BaseTextInput({
                                 readOnly={isReadOnly}
                                 defaultValue={defaultValue}
                                 markdownStyle={markdownStyle}
-                                accessibilityLabel={inputProps.accessibilityLabel}
+                                accessibilityLabel={inputProps.accessibilityLabel ?? accessibilityLabel}
+                                keyboardType={inputProps.keyboardType}
                             />
                             {!!suffixCharacter && (
                                 <View style={[styles.textInputSuffixWrapper, suffixContainerStyle]}>
@@ -518,7 +526,7 @@ function BaseTextInput({
                             )}
                         </View>
                     </View>
-                </PressableWithoutFeedback>
+                </View>
                 {!!inputHelpText && (
                     <FormHelpMessage
                         isError={!!errorText}

src/components/TextInput/TextInputLabel/index.native.tsx

@@ -12,6 +12,9 @@ function TextInputLabel({label, labelScale, labelTranslateY, isMultiline}: TextI
     return (
         <Animated.View style={[styles.textInputLabelContainer, animatedStyle]}>
             <Animated.Text
+                accessible={false}
+                accessibilityElementsHidden
+                importantForAccessibility="no"
                 numberOfLines={!isMultiline ? 1 : undefined}
                 ellipsizeMode={!isMultiline ? 'tail' : undefined}
                 allowFontScaling={false}

src/components/TextInput/TextInputLabel/index.tsx

@@ -27,6 +27,10 @@ function TextInputLabel({for: inputId = '', label, labelTranslateY, labelScale,
             ellipsizeMode={!isMultiline ? 'tail' : undefined}
             ref={textRef(labelRef)}
             role={CONST.ROLE.PRESENTATION}
+            accessible={false}
+            accessibilityElementsHidden
+            importantForAccessibility="no"
+            aria-hidden
             style={[styles.textInputLabelContainer, styles.textInputLabel, animatedStyle, styles.pointerEventsNone]}
         >
             {label}

src/components/TextInput/TextInputMeasurement/index.tsx

@@ -35,13 +35,21 @@ function TextInputMeasurement({
                         onSetTextInputWidth(e.nativeEvent.layout.width);
                         onSetTextInputHeight(e.nativeEvent.layout.height);
                     }}
+                    accessible={false}
+                    accessibilityElementsHidden
+                    importantForAccessibility="no"
+                    aria-hidden
                 >
                     <Text
                         style={[
                             inputStyle,
                             autoGrowHeight && styles.autoGrowHeightHiddenInput(width ?? 0, typeof maxAutoGrowHeight === 'number' ? maxAutoGrowHeight : undefined),
                             {width: contentWidth},
                         ]}
+                        accessible={false}
+                        accessibilityElementsHidden
+                        importantForAccessibility="no"
+                        aria-hidden
                     >
                         {/* \u200B added to solve the issue of not expanding the text input enough when the value ends with '\n' (https://github.com/Expensify/App/issues/21271) */}
                         {value ? `${value}${value.endsWith('\n') ? '\u200B' : ''}` : placeholder}
@@ -66,6 +74,10 @@ function TextInputMeasurement({
                         styles.hiddenElementOutsideOfWindow,
                         styles.visibilityHidden,
                     ]}
+                    accessible={false}
+                    accessibilityElementsHidden
+                    importantForAccessibility="no"
+                    aria-hidden
                     onLayout={(e) => {
                         if (e.nativeEvent.layout.width === 0 && e.nativeEvent.layout.height === 0) {
                             return;

src/pages/signin/SignInPageLayout/Footer.tsx

@@ -5,8 +5,6 @@ import SignInGradient from '@assets/images/home-fade-gradient--mobile.svg';
 import Hoverable from '@components/Hoverable';
 import ImageSVG from '@components/ImageSVG';
 import Text from '@components/Text';
-import type {LinkProps, PressProps} from '@components/TextLink';
-import TextLink from '@components/TextLink';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
@@ -18,14 +16,11 @@ import Socials from '@pages/signin/Socials';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
-import type {SignInPageLayoutProps} from './types';
+import FooterRow from './FooterRow';
+import type {FooterColumnRow, SignInPageLayoutProps} from './types';
 
 type FooterProps = Pick<SignInPageLayoutProps, 'navigateFocus'>;
 
-type FooterColumnRow = (LinkProps | PressProps) & {
-    translationPath: TranslationPaths;
-};
-
 type FooterColumnData = {
     translationPath: TranslationPaths;
     rows: FooterColumnRow[];
@@ -178,27 +173,25 @@ function Footer({navigateFocus}: FooterProps) {
                             >
                                 <Text style={[styles.textHeadline, styles.footerTitle]}>{translate(column.translationPath)}</Text>
                                 <View style={[styles.footerRow]}>
-                                    {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>
-                                            )}
+                                    {column.rows.map((row) => (
+                                        <Hoverable key={row.translationPath}>
+                                            {(hovered) =>
+                                                row.onPress ? (
+                                                    <FooterRow
+                                                        onPress={row.onPress}
+                                                        translationPath={row.translationPath}
+                                                        text={translate(row.translationPath)}
+                                                        style={getTextLinkStyle(hovered)}
+                                                    />
+                                                ) : (
+                                                    <FooterRow
+                                                        href={row.href}
+                                                        translationPath={row.translationPath}
+                                                        text={translate(row.translationPath)}
+                                                        style={getTextLinkStyle(hovered)}
+                                                    />
+                                                )
+                                            }
                                         </Hoverable>
                                     ))}
                                     {i === 2 && (

src/pages/signin/SignInPageLayout/FooterRow/index.native.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import type {GestureResponderEvent, StyleProp, TextStyle} from 'react-native';
+import {PressableWithoutFeedback} from '@components/Pressable';
+import Text from '@components/Text';
+import useEnvironment from '@hooks/useEnvironment';
+import useThemeStyles from '@hooks/useThemeStyles';
+import type {FooterColumnRow} from '@pages/signin/SignInPageLayout/types';
+import {openLink as openLinkUtil} from '@userActions/Link';
+import CONST from '@src/CONST';
+
+type FooterRowProps = FooterColumnRow & {
+    text: string;
+    style: StyleProp<TextStyle>;
+};
+
+function FooterRow({href, onPress, translationPath, text, style}: FooterRowProps) {
+    const styles = useThemeStyles();
+    const {environmentURL} = useEnvironment();
+
+    return (
+        <PressableWithoutFeedback
+            accessible
+            accessibilityRole={CONST.ROLE.LINK}
+            accessibilityLabel={text}
+            sentryLabel={translationPath}
+            onPress={() => {
+                if (onPress) {
+                    onPress({} as GestureResponderEvent);
+                    return;
+                }
+                if (href) {
+                    openLinkUtil(href, environmentURL);
+                }
+            }}
+        >
+            <Text
+                accessible={false}
+                suppressHighlighting
+                style={[styles.link, style]}
+            >
+                {text}
+            </Text>
+        </PressableWithoutFeedback>
+    );
+}
+
+export default FooterRow;

src/pages/signin/SignInPageLayout/FooterRow/index.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import type {StyleProp, TextStyle} from 'react-native';
+import TextLink from '@components/TextLink';
+import type {FooterColumnRow} from '@pages/signin/SignInPageLayout/types';
+
+type FooterRowProps = FooterColumnRow & {
+    text: string;
+    style: StyleProp<TextStyle>;
+};
+
+function FooterRow({href, onPress, text, style}: FooterRowProps) {
+    if (onPress) {
+        return (
+            <TextLink
+                style={style}
+                onPress={onPress}
+            >
+                {text}
+            </TextLink>
+        );
+    }
+
+    return (
+        <TextLink
+            style={style}
+            href={href}
+        >
+            {text}
+        </TextLink>
+    );
+}
+
+export default FooterRow;

src/pages/signin/SignInPageLayout/types.ts

@@ -1,5 +1,7 @@
 import type React from 'react';
 import type {ForwardedRef} from 'react';
+import type {LinkProps, PressProps} from '@components/TextLink';
+import type {TranslationPaths} from '@src/languages/types';
 
 type SignInPageLayoutProps = {
     /** The children to show inside the layout */
@@ -35,4 +37,8 @@ type SignInPageLayoutRef = {
     scrollPageToTop: (animated?: boolean) => void;
 };
 
-export type {SignInPageLayoutRef, SignInPageLayoutProps};
+type FooterColumnRow = (LinkProps | PressProps) & {
+    translationPath: TranslationPaths;
+};
+
+export type {SignInPageLayoutRef, SignInPageLayoutProps, FooterColumnRow};

tests/ui/AddressPageTest.tsx

@@ -74,12 +74,13 @@ describe('AddressPageTest', () => {
         renderPage(SCREENS.SETTINGS.PROFILE.ADDRESS);
 
         await waitForBatchedUpdatesWithAct();
-        const state = screen.getAllByLabelText('State / Province');
-        expect(state.at(1)?.props.value).toEqual('Test');
+        const stateInput = screen.getByLabelText('State / Province');
+        expect(stateInput.props.value).toEqual('Test');
         Navigation.setParams({
             country: 'VN',
         });
         await waitForBatchedUpdatesWithAct();
-        expect(state?.at(1)?.props.value).toEqual('Test');
+        const stateInputAfterParams = screen.getByLabelText('State / Province');
+        expect(stateInputAfterParams.props.value).toEqual('Test');
     });
 });

tests/ui/components/TextInputLabel.tsx

@@ -26,7 +26,7 @@ describe('TextInputLabel', () => {
             labelScale,
         });
         // Find the Animated.Text component by its text content
-        const labelElement = screen.getByText(longLabel);
+        const labelElement = screen.getByText(longLabel, {includeHiddenElements: true});
         // Verify the component renders the correct text
         expect(labelElement).toBeTruthy();
         // Verify the props for shortening behavior
@@ -44,7 +44,7 @@ describe('TextInputLabel', () => {
             labelScale,
         });
         // Find the Animated.Text component by its text content
-        const labelElement = screen.getByText(label);
+        const labelElement = screen.getByText(label, {includeHiddenElements: true});
         // Verify the component renders the correct text
         expect(labelElement).toBeTruthy();
         // Verify that numberOfLines and ellipsizeMode are undefined