From c53605371a6da410ce62b3b8aa8f767e1ad53918 Mon Sep 17 00:00:00 2001
From: dukenv0307 <dukenv0307@gmail.com>
Date: Wed, 8 Nov 2023 15:23:16 +0700
Subject: [PATCH] clean function

---
 src/components/AmountTextInput.js             |  1 +
 src/components/MagicCodeInput.js              |  1 +
 .../ReportActionItem/MoneyRequestPreview.js   | 11 +------
 .../BankAccountManualStep.js                  |  2 ++
 .../ReimbursementAccount/IdentityForm.js      |  3 ++
 .../ReimbursementAccount/ValidationStep.js    |  3 ++
 .../Profile/PersonalDetails/AddressPage.js    |  4 +++
 src/pages/settings/Wallet/AddDebitCardPage.js |  5 +++
 .../reimburse/WorkspaceRateAndUnitPage.js     |  1 +
 src/styles/StyleUtils.ts                      | 31 +++++++++----------
 10 files changed, 36 insertions(+), 26 deletions(-)

diff --git a/src/components/AmountTextInput.js b/src/components/AmountTextInput.js
index 43fd5e6a1b98..18d883c0be0e 100644
--- a/src/components/AmountTextInput.js
+++ b/src/components/AmountTextInput.js
@@ -41,6 +41,7 @@ const defaultProps = {
 function AmountTextInput(props) {
     return (
         <TextInput
+            accessibilityLabel="Text input field"
             disableKeyboard
             autoGrow
             hideFocusedState
diff --git a/src/components/MagicCodeInput.js b/src/components/MagicCodeInput.js
index 978b101a6cce..3dcde09a3e15 100644
--- a/src/components/MagicCodeInput.js
+++ b/src/components/MagicCodeInput.js
@@ -303,6 +303,7 @@ function MagicCodeInput(props) {
                         {/* Hide the input above the text. Cannot set opacity to 0 as it would break pasting on iOS Safari. */}
                         <View style={[StyleSheet.absoluteFillObject, styles.w100, styles.bgTransparent]}>
                             <TextInput
+                                accessibilityLabel="Text input field"
                                 ref={(ref) => {
                                     inputRefs.current[index] = ref;
                                     // Setting attribute type to "search" to prevent Password Manager from appearing in Mobile Chrome
diff --git a/src/components/ReportActionItem/MoneyRequestPreview.js b/src/components/ReportActionItem/MoneyRequestPreview.js
index cb21ed179cc4..aa9d9d5c0070 100644
--- a/src/components/ReportActionItem/MoneyRequestPreview.js
+++ b/src/components/ReportActionItem/MoneyRequestPreview.js
@@ -31,7 +31,6 @@ import reportActionPropTypes from '@pages/home/report/reportActionPropTypes';
 import styles from '@styles/styles';
 import * as StyleUtils from '@styles/StyleUtils';
 import themeColors from '@styles/themes/default';
-import variables from '@styles/variables';
 import * as PaymentMethods from '@userActions/PaymentMethods';
 import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
@@ -293,15 +292,7 @@ function MoneyRequestPreview(props) {
                                     <Text
                                         style={[
                                             styles.textHeadline,
-                                            props.isBillSplit &&
-                                                StyleUtils.getAmountFontSizeAndLineHeight(
-                                                    variables.fontSizeXLarge,
-                                                    variables.lineHeightXXLarge,
-                                                    isSmallScreenWidth,
-                                                    windowWidth,
-                                                    displayAmount.length,
-                                                    participantAvatars.length,
-                                                ),
+                                            props.isBillSplit && StyleUtils.getAmountFontSizeAndLineHeight(isSmallScreenWidth, windowWidth, displayAmount.length, participantAvatars.length),
                                             isDeleted && styles.lineThrough,
                                         ]}
                                         numberOfLines={1}
diff --git a/src/pages/ReimbursementAccount/BankAccountManualStep.js b/src/pages/ReimbursementAccount/BankAccountManualStep.js
index 1612238ed8d9..efc930c6bb06 100644
--- a/src/pages/ReimbursementAccount/BankAccountManualStep.js
+++ b/src/pages/ReimbursementAccount/BankAccountManualStep.js
@@ -98,6 +98,7 @@ function BankAccountManualStep(props) {
                     source={exampleCheckImage(preferredLocale)}
                 />
                 <TextInput
+                    accessibilityLabel="Text input field"
                     autoFocus
                     shouldDelayFocus={shouldDelayFocus}
                     inputID="routingNumber"
@@ -111,6 +112,7 @@ function BankAccountManualStep(props) {
                     shouldUseDefaultValue={shouldDisableInputs}
                 />
                 <TextInput
+                    accessibilityLabel="Text input field"
                     inputID="accountNumber"
                     containerStyles={[styles.mt4]}
                     label={translate('bankAccount.accountNumber')}
diff --git a/src/pages/ReimbursementAccount/IdentityForm.js b/src/pages/ReimbursementAccount/IdentityForm.js
index f584ca3f665a..16fee134a689 100644
--- a/src/pages/ReimbursementAccount/IdentityForm.js
+++ b/src/pages/ReimbursementAccount/IdentityForm.js
@@ -142,6 +142,7 @@ function IdentityForm(props) {
             <View style={[styles.flexRow]}>
                 <View style={[styles.flex2, styles.mr2]}>
                     <TextInput
+                        accessibilityLabel="Text input field"
                         inputID={props.inputKeys.firstName}
                         shouldSaveDraft={props.shouldSaveDraft}
                         label={`${props.translate('common.firstName')}`}
@@ -155,6 +156,7 @@ function IdentityForm(props) {
                 </View>
                 <View style={[styles.flex2]}>
                     <TextInput
+                        accessibilityLabel="Text input field"
                         inputID={props.inputKeys.lastName}
                         shouldSaveDraft={props.shouldSaveDraft}
                         label={`${props.translate('common.lastName')}`}
@@ -180,6 +182,7 @@ function IdentityForm(props) {
                 maxDate={maxDate}
             />
             <TextInput
+                accessibilityLabel="Text input field"
                 inputID={props.inputKeys.ssnLast4}
                 shouldSaveDraft={props.shouldSaveDraft}
                 label={`${props.translate('common.ssnLast4')}`}
diff --git a/src/pages/ReimbursementAccount/ValidationStep.js b/src/pages/ReimbursementAccount/ValidationStep.js
index 343f98644766..c1f13ccced08 100644
--- a/src/pages/ReimbursementAccount/ValidationStep.js
+++ b/src/pages/ReimbursementAccount/ValidationStep.js
@@ -153,6 +153,7 @@ function ValidationStep({reimbursementAccount, translate, onBackButtonPress, acc
                     </View>
                     <View style={[styles.mv5]}>
                         <TextInput
+                            accessibilityLabel="Text input field"
                             inputID="amount1"
                             shouldSaveDraft
                             containerStyles={[styles.mb1]}
@@ -161,6 +162,7 @@ function ValidationStep({reimbursementAccount, translate, onBackButtonPress, acc
                             role={CONST.ACCESSIBILITY_ROLE.TEXT}
                         />
                         <TextInput
+                            accessibilityLabel="Text input field"
                             inputID="amount2"
                             shouldSaveDraft
                             containerStyles={[styles.mb1]}
@@ -169,6 +171,7 @@ function ValidationStep({reimbursementAccount, translate, onBackButtonPress, acc
                             role={CONST.ACCESSIBILITY_ROLE.TEXT}
                         />
                         <TextInput
+                            accessibilityLabel="Text input field"
                             shouldSaveDraft
                             inputID="amount3"
                             containerStyles={[styles.mb1]}
diff --git a/src/pages/settings/Profile/PersonalDetails/AddressPage.js b/src/pages/settings/Profile/PersonalDetails/AddressPage.js
index b86d646794bd..a90cf42f0283 100644
--- a/src/pages/settings/Profile/PersonalDetails/AddressPage.js
+++ b/src/pages/settings/Profile/PersonalDetails/AddressPage.js
@@ -210,6 +210,7 @@ function AddressPage({privatePersonalDetails, route}) {
                     </View>
                     <View style={styles.formSpaceVertical} />
                     <TextInput
+                        accessibilityLabel="Text input field"
                         inputID="addressLine2"
                         label={translate('common.addressLine', {lineNumber: 2})}
                         aria-label={translate('common.addressLine', {lineNumber: 2})}
@@ -236,6 +237,7 @@ function AddressPage({privatePersonalDetails, route}) {
                         </View>
                     ) : (
                         <TextInput
+                            accessibilityLabel="Text input field"
                             inputID="state"
                             label={translate('common.stateOrProvince')}
                             aria-label={translate('common.stateOrProvince')}
@@ -248,6 +250,7 @@ function AddressPage({privatePersonalDetails, route}) {
                     )}
                     <View style={styles.formSpaceVertical} />
                     <TextInput
+                        accessibilityLabel="Text input field"
                         inputID="city"
                         label={translate('common.city')}
                         aria-label={translate('common.city')}
@@ -259,6 +262,7 @@ function AddressPage({privatePersonalDetails, route}) {
                     />
                     <View style={styles.formSpaceVertical} />
                     <TextInput
+                        accessibilityLabel="Text input field"
                         inputID="zipPostCode"
                         label={translate('common.zipPostCode')}
                         aria-label={translate('common.zipPostCode')}
diff --git a/src/pages/settings/Wallet/AddDebitCardPage.js b/src/pages/settings/Wallet/AddDebitCardPage.js
index 09d43afc4bf4..aaaef2514dd2 100644
--- a/src/pages/settings/Wallet/AddDebitCardPage.js
+++ b/src/pages/settings/Wallet/AddDebitCardPage.js
@@ -126,6 +126,7 @@ function DebitCardPage(props) {
                 style={[styles.mh5, styles.flexGrow1]}
             >
                 <TextInput
+                    accessibilityLabel="Text input field"
                     inputID="nameOnCard"
                     label={translate('addDebitCardPage.nameOnCard')}
                     aria-label={translate('addDebitCardPage.nameOnCard')}
@@ -134,6 +135,7 @@ function DebitCardPage(props) {
                     spellCheck={false}
                 />
                 <TextInput
+                    accessibilityLabel="Text input field"
                     inputID="cardNumber"
                     label={translate('addDebitCardPage.debitCardNumber')}
                     aria-label={translate('addDebitCardPage.debitCardNumber')}
@@ -144,6 +146,7 @@ function DebitCardPage(props) {
                 <View style={[styles.flexRow, styles.mt4]}>
                     <View style={[styles.flex1, styles.mr2]}>
                         <TextInput
+                            accessibilityLabel="Text input field"
                             inputID="expirationDate"
                             label={translate('addDebitCardPage.expiration')}
                             aria-label={translate('addDebitCardPage.expiration')}
@@ -155,6 +158,7 @@ function DebitCardPage(props) {
                     </View>
                     <View style={[styles.flex1]}>
                         <TextInput
+                            accessibilityLabel="Text input field"
                             inputID="securityCode"
                             label={translate('addDebitCardPage.cvv')}
                             aria-label={translate('addDebitCardPage.cvv')}
@@ -175,6 +179,7 @@ function DebitCardPage(props) {
                     />
                 </View>
                 <TextInput
+                    accessibilityLabel="Text input field"
                     inputID="addressZipCode"
                     label={translate('common.zip')}
                     aria-label={translate('common.zip')}
diff --git a/src/pages/workspace/reimburse/WorkspaceRateAndUnitPage.js b/src/pages/workspace/reimburse/WorkspaceRateAndUnitPage.js
index 6d455401fe65..20adc473f160 100644
--- a/src/pages/workspace/reimburse/WorkspaceRateAndUnitPage.js
+++ b/src/pages/workspace/reimburse/WorkspaceRateAndUnitPage.js
@@ -176,6 +176,7 @@ class WorkspaceRateAndUnitPage extends React.Component {
                             }
                         >
                             <TextInput
+                                accessibilityLabel="Text input field"
                                 role={CONST.ACCESSIBILITY_ROLE.TEXT}
                                 inputID="rate"
                                 containerStyles={[styles.mt4]}
diff --git a/src/styles/StyleUtils.ts b/src/styles/StyleUtils.ts
index eed4e7b5806b..05d4e4acceb5 100644
--- a/src/styles/StyleUtils.ts
+++ b/src/styles/StyleUtils.ts
@@ -1257,43 +1257,42 @@ function getDropDownButtonHeight(buttonSize: ButtonSizeValue): ViewStyle {
 /**
  * Returns fitting fontSize and lineHeight values in order to prevent large amounts from being cut off on small screen widths.
  */
-function getAmountFontSizeAndLineHeight(
-    baseFontSize: number,
-    baseLineHeight: number,
-    isSmallScreenWidth: boolean,
-    windowWidth: number,
-    displayAmountLength: number,
-    numberOfParticipant: number,
-): TextStyle {
+function getAmountFontSizeAndLineHeight(isSmallScreenWidth: boolean, windowWidth: number, displayAmountLength: number, numberOfParticipant: number): TextStyle {
     let toSubtract = 0;
+    const baseFontSize = variables.fontSizeXLarge;
+    const baseLineHeight = variables.lineHeightXXLarge;
+
     const numberOfAvatar = numberOfParticipant < 4 ? numberOfParticipant : 4;
-    if (isSmallScreenWidth && windowWidth <= 410) {
-        const widthDifferent = 410 - windowWidth;
+
+    // with a window width is more than 420px the maximum amount will not be cut off with the maximum avatar displays
+    if (isSmallScreenWidth && windowWidth < 420) {
+        const widthDifference = 420 - windowWidth;
         switch (true) {
-            case widthDifferent > 60:
+            // It is very rare for native devices to have a width smaller than 350px so add a constant subtract here
+            case widthDifference > 70:
                 toSubtract = 11;
                 break;
-            case widthDifferent > 50:
+            case widthDifference > 60:
                 if (18 - numberOfAvatar * 2 < displayAmountLength) {
                     toSubtract = numberOfAvatar * 2;
                 }
                 break;
-            case widthDifferent > 40:
+            case widthDifference > 50:
                 if (18 - numberOfAvatar * 2 < displayAmountLength) {
                     toSubtract = (numberOfAvatar - 1) * 2 + 1;
                 }
                 break;
-            case widthDifferent > 30:
+            case widthDifference > 40:
                 if (20 - numberOfAvatar * 2 < displayAmountLength) {
                     toSubtract = (numberOfAvatar - 1) * 2;
                 }
                 break;
-            case widthDifferent > 20:
+            case widthDifference > 30:
                 if (20 - numberOfAvatar * 2 < displayAmountLength) {
                     toSubtract = (numberOfAvatar - 1) * 2 - 1;
                 }
                 break;
-            case widthDifferent > 10:
+            case widthDifference > 20:
                 if (20 - numberOfAvatar * 2 < displayAmountLength) {
                     toSubtract = (numberOfAvatar - 2) * 2;
                 }