From 85b4578c8207d6f1ca67372bac7eb08d1c649fcb Mon Sep 17 00:00:00 2001
From: OtavioStasiak <otaviostasiakmusic@outlook.com>
Date: Thu, 12 Dec 2024 18:44:35 -0300
Subject: [PATCH] chore: updated textInput

---
 app/containers/TextInput/FormTextInput.tsx | 188 +++++++++++----------
 ios/Podfile.lock                           |   8 +
 package.json                               |   1 +
 yarn.lock                                  |   5 +
 4 files changed, 114 insertions(+), 88 deletions(-)

diff --git a/app/containers/TextInput/FormTextInput.tsx b/app/containers/TextInput/FormTextInput.tsx
index 4de684eff9..1b127e5952 100644
--- a/app/containers/TextInput/FormTextInput.tsx
+++ b/app/containers/TextInput/FormTextInput.tsx
@@ -1,7 +1,8 @@
-import { BottomSheetTextInput } from '@discord/bottom-sheet';
 import React, { useState } from 'react';
 import { StyleProp, StyleSheet, Text, TextInput as RNTextInput, TextInputProps, TextStyle, View, ViewStyle } from 'react-native';
+import { BottomSheetTextInput } from '@discord/bottom-sheet';
 import Touchable from 'react-native-platform-touchable';
+import { A11y } from 'react-native-a11y-order';
 
 import i18n from '../../i18n';
 import { useTheme } from '../../theme';
@@ -9,6 +10,7 @@ import sharedStyles from '../../views/Styles';
 import ActivityIndicator from '../ActivityIndicator';
 import { CustomIcon, TIconsName } from '../CustomIcon';
 import { TextInput } from './TextInput';
+import { isIOS } from '../../lib/methods/helpers';
 
 const styles = StyleSheet.create({
 	error: {
@@ -97,99 +99,109 @@ export const FormTextInput = ({
 	const [showPassword, setShowPassword] = useState(false);
 	const showClearInput = onClearInput && value && value.length > 0;
 	const Input = bottomSheet ? BottomSheetTextInput : TextInput;
+	const accessibilityLabelRequired = required ? `, ${i18n.t('Required')}` : '';
+	const accessibilityInputValue = (!secureTextEntry && value && isIOS) || showPassword ? `, ${value}` : '';
 	return (
-		<View
-			accessible
-			accessibilityLabel={`${label} - ${required ? i18n.t('Required') : ''}`}
-			style={[styles.inputContainer, containerStyle]}>
-			{label ? (
-				<Text style={[styles.label, { color: colors.fontTitlesLabels }, error?.error && { color: colors.fontDanger }]}>
-					{label}{' '}
-					{required && <Text style={[styles.required, { color: colors.fontSecondaryInfo }]}>{`(${i18n.t('Required')})`}</Text>}
-				</Text>
-			) : null}
+		<A11y.Order>
+			<A11y.Index index={1}>
+				<View
+					accessible
+					accessibilityLabel={accessibilityLabel ?? `${label}${accessibilityLabelRequired}${accessibilityInputValue}`}
+					style={[styles.inputContainer, containerStyle]}>
+					{label ? (
+						<Text style={[styles.label, { color: colors.fontTitlesLabels }, error?.error && { color: colors.fontDanger }]}>
+							{label}{' '}
+							{required && (
+								<Text style={[styles.required, { color: colors.fontSecondaryInfo }]}>{`(${i18n.t('Required')})`}</Text>
+							)}
+						</Text>
+					) : null}
 
-			<View style={styles.wrap}>
-				<Input
-					style={[
-						styles.input,
-						iconLeft && styles.inputIconLeft,
-						(secureTextEntry || iconRight || showClearInput) && styles.inputIconRight,
-						{
-							backgroundColor: colors.surfaceRoom,
-							borderColor: colors.strokeLight,
-							color: colors.fontTitlesLabels
-						},
-						error?.error && {
-							color: colors.buttonBackgroundDangerDefault,
-							borderColor: colors.buttonBackgroundDangerDefault
-						},
-						inputStyle
-					]}
-					// @ts-ignore ref error
-					ref={inputRef}
-					autoCorrect={false}
-					autoCapitalize='none'
-					underlineColorAndroid='transparent'
-					secureTextEntry={secureTextEntry && !showPassword}
-					testID={testID}
-					placeholder={placeholder}
-					value={value}
-					placeholderTextColor={colors.fontAnnotation}
-					{...inputProps}
-				/>
+					<View accessible style={styles.wrap}>
+						<Input
+							style={[
+								styles.input,
+								iconLeft && styles.inputIconLeft,
+								(secureTextEntry || iconRight || showClearInput) && styles.inputIconRight,
+								{
+									backgroundColor: colors.surfaceRoom,
+									borderColor: colors.strokeLight,
+									color: colors.fontTitlesLabels
+								},
+								error?.error && {
+									color: colors.buttonBackgroundDangerDefault,
+									borderColor: colors.buttonBackgroundDangerDefault
+								},
+								inputStyle
+							]}
+							// @ts-ignore ref error
+							ref={inputRef}
+							autoCorrect={false}
+							autoCapitalize='none'
+							underlineColorAndroid='transparent'
+							secureTextEntry={secureTextEntry && !showPassword}
+							testID={testID}
+							placeholder={placeholder}
+							value={value}
+							placeholderTextColor={colors.fontAnnotation}
+							{...inputProps}
+						/>
 
-				{iconLeft ? (
-					<CustomIcon
-						name={iconLeft}
-						testID={testID ? `${testID}-icon-left` : undefined}
-						size={20}
-						color={colors.fontSecondaryInfo}
-						style={[styles.iconContainer, styles.iconLeft]}
-					/>
-				) : null}
+						{iconLeft ? (
+							<CustomIcon
+								name={iconLeft}
+								testID={testID ? `${testID}-icon-left` : undefined}
+								size={20}
+								color={colors.fontSecondaryInfo}
+								style={[styles.iconContainer, styles.iconLeft]}
+							/>
+						) : null}
 
-				{showClearInput ? (
-					<Touchable onPress={onClearInput} style={[styles.iconContainer, styles.iconRight]} testID='clear-text-input'>
-						<CustomIcon name='input-clear' size={20} color={colors.fontDefault} />
-					</Touchable>
-				) : null}
+						{showClearInput ? (
+							<Touchable onPress={onClearInput} style={[styles.iconContainer, styles.iconRight]} testID='clear-text-input'>
+								<CustomIcon name='input-clear' size={20} color={colors.fontDefault} />
+							</Touchable>
+						) : null}
 
-				{iconRight && !showClearInput ? (
-					<CustomIcon
-						name={iconRight}
-						testID={testID ? `${testID}-icon-right` : undefined}
-						size={20}
-						color={colors.fontDefault}
-						style={[styles.iconContainer, styles.iconRight]}
-						accessible={false}
-					/>
-				) : null}
+						{iconRight && !showClearInput ? (
+							<CustomIcon
+								name={iconRight}
+								testID={testID ? `${testID}-icon-right` : undefined}
+								size={20}
+								color={colors.fontDefault}
+								style={[styles.iconContainer, styles.iconRight]}
+								accessible={false}
+							/>
+						) : null}
 
-				{secureTextEntry ? (
-					<Touchable
-						accessibilityLabel={showPassword ? i18n.t('Hide-Password') : i18n.t('Show-Password')}
-						onPress={() => setShowPassword(!showPassword)}
-						style={[styles.iconContainer, styles.iconRight]}>
-						<CustomIcon
-							name={showPassword ? 'unread-on-top' : 'unread-on-top-disabled'}
-							testID={testID ? `${testID}-icon-password` : undefined}
-							size={20}
-							color={colors.fontDefault}
-						/>
-					</Touchable>
-				) : null}
+						{secureTextEntry ? (
+							<A11y.Index style={[styles.iconContainer, styles.iconRight]} index={2}>
+								<Touchable
+									accessible
+									accessibilityLabel={showPassword ? i18n.t('Hide_Password') : i18n.t('Show_Password')}
+									onPress={() => setShowPassword(!showPassword)}>
+									<CustomIcon
+										name={showPassword ? 'unread-on-top' : 'unread-on-top-disabled'}
+										testID={testID ? `${testID}-icon-password` : undefined}
+										size={20}
+										color={colors.fontDefault}
+									/>
+								</Touchable>
+							</A11y.Index>
+						) : null}
 
-				{loading ? (
-					<ActivityIndicator
-						style={[styles.iconContainer, styles.iconRight]}
-						color={colors.fontDefault}
-						testID={testID ? `${testID}-loading` : undefined}
-					/>
-				) : null}
-				{left}
-			</View>
-			{error && error.reason ? <Text style={[styles.error, { color: colors.fontDanger }]}>{error.reason}</Text> : null}
-		</View>
+						{loading ? (
+							<ActivityIndicator
+								style={[styles.iconContainer, styles.iconRight]}
+								color={colors.fontDefault}
+								testID={testID ? `${testID}-loading` : undefined}
+							/>
+						) : null}
+						{left}
+					</View>
+					{error && error.reason ? <Text style={[styles.error, { color: colors.fontDanger }]}>{error.reason}</Text> : null}
+				</View>
+			</A11y.Index>
+		</A11y.Order>
 	);
 };
diff --git a/ios/Podfile.lock b/ios/Podfile.lock
index 64b622c73b..d84bc803c1 100644
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -1032,6 +1032,10 @@ PODS:
   - React-Mapbuffer (0.73.6):
     - glog
     - React-debug
+  - react-native-a11y-order (0.2.2):
+    - glog
+    - RCT-Folly (= 2022.05.16.00)
+    - React-Core
   - react-native-background-timer (2.4.1):
     - React-Core
   - react-native-cameraroll (7.5.0):
@@ -1364,6 +1368,7 @@ DEPENDENCIES:
   - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector-modern`)
   - React-logger (from `../node_modules/react-native/ReactCommon/logger`)
   - React-Mapbuffer (from `../node_modules/react-native/ReactCommon`)
+  - react-native-a11y-order (from `../node_modules/react-native-a11y-order`)
   - react-native-background-timer (from `../node_modules/react-native-background-timer`)
   - "react-native-cameraroll (from `../node_modules/@react-native-camera-roll/camera-roll`)"
   - "react-native-cookies (from `../node_modules/@react-native-cookies/cookies`)"
@@ -1536,6 +1541,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/logger"
   React-Mapbuffer:
     :path: "../node_modules/react-native/ReactCommon"
+  react-native-a11y-order:
+    :path: "../node_modules/react-native-a11y-order"
   react-native-background-timer:
     :path: "../node_modules/react-native-background-timer"
   react-native-cameraroll:
@@ -1716,6 +1723,7 @@ SPEC CHECKSUMS:
   React-jsinspector: 85583ef014ce53d731a98c66a0e24496f7a83066
   React-logger: 3eb80a977f0d9669468ef641a5e1fabbc50a09ec
   React-Mapbuffer: 84ea43c6c6232049135b1550b8c60b2faac19fab
+  react-native-a11y-order: 0ba9ed33996f29c07c75169b54a68c28fd2dc1dd
   react-native-background-timer: 17ea5e06803401a379ebf1f20505b793ac44d0fe
   react-native-cameraroll: 4593ffad9e619781aed27dda64739387d55ed402
   react-native-cookies: f54fcded06bb0cda05c11d86788020b43528a26c
diff --git a/package.json b/package.json
index 97a562efde..1d3275968d 100644
--- a/package.json
+++ b/package.json
@@ -86,6 +86,7 @@
 		"react": "18.2.0",
 		"react-hook-form": "7.34.2",
 		"react-native": "0.73.6",
+		"react-native-a11y-order": "^0.2.2",
 		"react-native-animatable": "1.3.3",
 		"react-native-background-timer": "2.4.1",
 		"react-native-bootsplash": "4.6.0",
diff --git a/yarn.lock b/yarn.lock
index c18900cf33..affcc7ab79 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11892,6 +11892,11 @@ react-is@^17.0.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
+react-native-a11y-order@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/react-native-a11y-order/-/react-native-a11y-order-0.2.2.tgz#cefefa851acb06c35708dfa44159a9ca6541b3ae"
+  integrity sha512-njUSURENgSqIcH6T6bZ1NWngb3lsqHCgkS8cUQqid7cGw6JwurMiHuuSRyRAiZZKubKUF5nML099F4mUHGeX+Q==
+
 react-native-animatable@1.3.3:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/react-native-animatable/-/react-native-animatable-1.3.3.tgz#a13a4af8258e3bb14d0a9d839917e9bb9274ec8a"