fixed TextInput eslint errors

ojasjadhav2 · Jun 23, 2023 · 804b5be · 804b5be
1 parent 704fb2c
commit 804b5be
Show file tree

Hide file tree

Showing 45 changed files with 153 additions and 5 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -28,13 +28,13 @@ module.exports = {
                     },
                     {
                         name: 'react-native',
-                        importNames: ['TouchableOpacity', 'TouchableWithoutFeedback', 'TouchableNativeFeedback', 'TouchableHighlight', 'Pressable'],
-                        message: 'Please use PressableWithFeedback and/or PressableWithoutFeedback from src/components/Pressable instead',
+                        importNames: ['StatusBar'],
+                        message: 'Please use StatusBar from src/libs/StatusBar instead',
                     },
                     {
                         name: 'react-native',
-                        importNames: ['StatusBar'],
-                        message: 'Please use StatusBar from src/libs/StatusBar instead',
+                        importNames: ['TouchableOpacity', 'TouchableWithoutFeedback', 'TouchableNativeFeedback', 'TouchableHighlight', 'Pressable'],
+                        message: 'Please use PressableWithFeedback and/or PressableWithoutFeedback from src/components/Pressable instead',
                     },
                 ],
             },

diff --git a/src/components/AmountTextInput.js b/src/components/AmountTextInput.js
@@ -49,6 +49,7 @@ function AmountTextInput(props) {
             blurOnSubmit={false}
             selection={props.selection}
             onSelectionChange={props.onSelectionChange}
+            accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
         />
     );
 }

diff --git a/src/components/DatePicker/index.android.js b/src/components/DatePicker/index.android.js
@@ -45,6 +45,8 @@ class DatePicker extends React.Component {
             <>
                 <TextInput
                     label={this.props.label}
+                    accessibilityLabel={this.props.label}
+                    accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
                     value={dateAsText}
                     forceActiveLabel
                     placeholder={this.props.placeholder}

diff --git a/src/components/DatePicker/index.ios.js b/src/components/DatePicker/index.ios.js
@@ -83,6 +83,8 @@ class DatePicker extends React.Component {
                 <TextInput
                     forceActiveLabel
                     label={this.props.label}
+                    accessibilityLabel={this.props.label}
+                    accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
                     value={dateAsText}
                     placeholder={this.props.placeholder}
                     errorText={this.props.errorText}

diff --git a/src/components/DatePicker/index.js b/src/components/DatePicker/index.js
@@ -72,6 +72,8 @@ class DatePicker extends React.Component {
                 }}
                 onFocus={this.showDatepicker}
                 label={this.props.label}
+                accessibilityLabel={this.props.label}
+                accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
                 onInputChange={this.setDate}
                 value={this.props.value}
                 defaultValue={this.defaultValue}

diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.js b/src/components/EmojiPicker/EmojiPickerMenu/index.js
@@ -495,6 +495,8 @@ class EmojiPickerMenu extends Component {
                 <View style={[styles.ph4, styles.pb3, styles.pt2]}>
                     <TextInput
                         label={this.props.translate('common.search')}
+                        accessibilityLabel={this.props.translate('common.search')}
+                        accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
                         onChangeText={this.filterEmojis}
                         defaultValue=""
                         ref={(el) => (this.searchInput = el)}

diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.native.js b/src/components/EmojiPicker/EmojiPickerMenu/index.native.js
@@ -192,6 +192,8 @@ class EmojiPickerMenu extends Component {
                 <View style={[styles.ph4, styles.pb1, styles.pt2]}>
                     <TextInput
                         label={this.props.translate('common.search')}
+                        accessibilityLabel={this.props.translate('common.search')}
+                        accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
                         onChangeText={this.filterEmojis}
                     />
                 </View>

diff --git a/src/components/MagicCodeInput.js b/src/components/MagicCodeInput.js
@@ -346,6 +346,7 @@ function MagicCodeInput(props) {
                                 onFocus={onFocus}
                                 caretHidden={isMobileSafari}
                                 inputStyle={[isMobileSafari ? styles.magicCodeInputTransparent : undefined]}
+                                accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
                             />
                         </View>
                     </View>

diff --git a/src/components/NewDatePicker/index.js b/src/components/NewDatePicker/index.js
@@ -64,6 +64,8 @@ class NewDatePicker extends React.Component {
                         forceActiveLabel
                         icon={Expensicons.Calendar}
                         label={this.props.label}
+                        accessibilityLabel={this.props.label}
+                        accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
                         value={this.props.value || ''}
                         defaultValue={this.defaultValue}
                         placeholder={this.props.placeholder || this.props.translate('common.dateFormat')}

diff --git a/src/components/OptionsSelector/BaseOptionsSelector.js b/src/components/OptionsSelector/BaseOptionsSelector.js
@@ -296,6 +296,8 @@ class BaseOptionsSelector extends Component {
                 ref={(el) => (this.textInput = el)}
                 value={this.props.value}
                 label={this.props.textInputLabel}
+                accessibilityLabel={this.props.textInputLabel}
+                accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
                 onChangeText={this.props.onChangeText}
                 placeholder={this.props.placeholderText}
                 maxLength={this.props.maxLength}

diff --git a/src/components/PDFView/PDFPasswordForm.js b/src/components/PDFView/PDFPasswordForm.js
@@ -106,6 +106,8 @@ class PDFPasswordForm extends Component {
                         </View>
                         <TextInput
                             label={this.props.translate('common.password')}
+                            accessibilityLabel={this.props.translate('common.password')}
+                            accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
                             /**
                              * This is a workaround to bypass Safari's autofill odd behaviour.
                              * This tricks the browser not to fill the username somewhere else and still fill the password correctly.

diff --git a/src/components/PasswordPopover/BasePasswordPopover.js b/src/components/PasswordPopover/BasePasswordPopover.js
@@ -12,6 +12,7 @@ import KeyboardSpacer from '../KeyboardSpacer';
 import {propTypes as passwordPopoverPropTypes, defaultProps as passwordPopoverDefaultProps} from './passwordPopoverPropTypes';
 import Button from '../Button';
 import withViewportOffsetTop from '../withViewportOffsetTop';
+import CONST from '../../CONST';
 
 const propTypes = {
     /** Whether we should wait before focusing the TextInput, useful when using transitions on Android */
@@ -62,6 +63,8 @@ class BasePasswordPopover extends Component {
                     <Text style={[styles.mb3]}>{this.props.translate('passwordForm.pleaseFillPassword')}</Text>
                     <TextInput
                         label={this.props.translate('common.password')}
+                        accessibilityLabel={this.props.translate('common.password')}
+                        accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
                         ref={(el) => (this.passwordInput = el)}
                         secureTextEntry
                         autoCompleteType="password"

diff --git a/src/components/RoomNameInput/index.js b/src/components/RoomNameInput/index.js
@@ -63,6 +63,8 @@ class RoomNameInput extends Component {
                 ref={this.props.forwardedRef}
                 disabled={this.props.disabled}
                 label={this.props.translate('newRoomPage.roomName')}
+                accessibilityLabel={this.props.translate('newRoomPage.roomName')}
+                accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
                 prefixCharacter={CONST.POLICY.ROOM_PREFIX}
                 placeholder={this.props.translate('newRoomPage.social')}
                 onChange={this.setModifiedRoomName}

diff --git a/src/components/RoomNameInput/index.native.js b/src/components/RoomNameInput/index.native.js
@@ -36,6 +36,8 @@ class RoomNameInput extends Component {
                 ref={this.props.forwardedRef}
                 disabled={this.props.disabled}
                 label={this.props.translate('newRoomPage.roomName')}
+                accessibilityLabel={this.props.translate('newRoomPage.roomName')}
+                accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
                 prefixCharacter={CONST.POLICY.ROOM_PREFIX}
                 placeholder={this.props.translate('newRoomPage.social')}
                 onChange={this.setModifiedRoomName}

diff --git a/src/components/TextInput/TextInputLabel/index.js b/src/components/TextInput/TextInputLabel/index.js
@@ -15,7 +15,6 @@ class TextInputLabel extends PureComponent {
         return (
             <Animated.Text
                 pointerEvents="none"
-                accessibilityRole="label"
                 ref={(el) => (this.label = el)}
                 style={[styles.textInputLabel, styles.textInputLabelDesktop, styles.textInputLabelTransformation(this.props.labelTranslateY, 0, this.props.labelScale)]}
             >

diff --git a/src/pages/EditRequestDescriptionPage.js b/src/pages/EditRequestDescriptionPage.js
@@ -9,6 +9,7 @@ import Form from '../components/Form';
 import ONYXKEYS from '../ONYXKEYS';
 import styles from '../styles/styles';
 import Navigation from '../libs/Navigation/Navigation';
+import CONST from '../CONST';
 
 const propTypes = {
     ...withLocalizePropTypes,
@@ -45,6 +46,8 @@ function EditRequestDescriptionPage(props) {
                         name="modifiedComment"
                         defaultValue={props.defaultDescription}
                         label={props.translate('moneyRequestConfirmationList.whatsItFor')}
+                        accessibilityLabel={props.translate('moneyRequestConfirmationList.whatsItFor')}
+                        accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
                         ref={descriptionInputRef}
                     />
                 </View>

diff --git a/src/pages/EnablePayments/AdditionalDetailsStep.js b/src/pages/EnablePayments/AdditionalDetailsStep.js
@@ -234,13 +234,17 @@ class AdditionalDetailsStep extends React.Component {
                             inputID={INPUT_IDS.LEGAL_FIRST_NAME}
                             containerStyles={[styles.mt4]}
                             label={this.props.translate(this.fieldNameTranslationKeys.legalFirstName)}
+                            accessibilityLabel={this.props.translate(this.fieldNameTranslationKeys.legalFirstName)}
+                            accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
                             defaultValue={PersonalDetails.extractFirstAndLastNameFromAvailableDetails(this.props.currentUserPersonalDetails).firstName}
                             shouldSaveDraft
                         />
                         <TextInput
                             inputID={INPUT_IDS.LEGAL_LAST_NAME}
                             containerStyles={[styles.mt4]}
                             label={this.props.translate(this.fieldNameTranslationKeys.legalLastName)}
+                            accessibilityLabel={this.props.translate(this.fieldNameTranslationKeys.legalLastName)}
+                            accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
                             defaultValue={PersonalDetails.extractFirstAndLastNameFromAvailableDetails(this.props.currentUserPersonalDetails).lastName}
                             shouldSaveDraft
                         />
@@ -255,6 +259,8 @@ class AdditionalDetailsStep extends React.Component {
                             containerStyles={[styles.mt4]}
                             keyboardType={CONST.KEYBOARD_TYPE.PHONE_PAD}
                             label={this.props.translate(this.fieldNameTranslationKeys.phoneNumber)}
+                            accessibilityLabel={this.props.translate(this.fieldNameTranslationKeys.phoneNumber)}
+                            accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
                             defaultValue={this.props.currentUserPersonalDetails.phoneNumber}
                             placeholder={this.props.translate('common.phoneNumberPlaceholder')}
                             shouldSaveDraft
@@ -272,6 +278,8 @@ class AdditionalDetailsStep extends React.Component {
                             inputID={INPUT_IDS.SSN}
                             containerStyles={[styles.mt4]}
                             label={this.props.translate(this.fieldNameTranslationKeys[shouldAskForFullSSN ? 'ssnFull9' : 'ssn'])}
+                            accessibilityLabel={this.props.translate(this.fieldNameTranslationKeys[shouldAskForFullSSN ? 'ssnFull9' : 'ssn'])}
+                            accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
                             maxLength={shouldAskForFullSSN ? 9 : 4}
                             keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}
                         />

diff --git a/src/pages/ReimbursementAccount/AddressForm.js b/src/pages/ReimbursementAccount/AddressForm.js
@@ -113,6 +113,8 @@ function AddressForm(props) {
                 inputID={props.inputKeys.city}
                 shouldSaveDraft={props.shouldSaveDraft}
                 label={props.translate('common.city')}
+                accessibilityLabel={props.translate('common.city')}
+                accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
                 value={props.values.city}
                 defaultValue={props.defaultValues.city}
                 onChangeText={(value) => props.onFieldChange({city: value})}
@@ -133,6 +135,8 @@ function AddressForm(props) {
                 inputID={props.inputKeys.zipCode}
                 shouldSaveDraft={props.shouldSaveDraft}
                 label={props.translate('common.zip')}
+                accessibilityLabel={props.translate('common.zip')}
+                accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
                 containerStyles={[styles.mt4]}
                 keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}
                 value={props.values.zipCode}

diff --git a/src/pages/ReimbursementAccount/BankAccountManualStep.js b/src/pages/ReimbursementAccount/BankAccountManualStep.js
@@ -94,6 +94,8 @@ class BankAccountManualStep extends React.Component {
                         shouldDelayFocus={shouldDelayFocus}
                         inputID="routingNumber"
                         label={this.props.translate('bankAccount.routingNumber')}
+                        accessibilityLabel={this.props.translate('bankAccount.routingNumber')}
+                        accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
                         defaultValue={this.props.getDefaultStateForField('routingNumber', '')}
                         keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}
                         disabled={shouldDisableInputs}
@@ -104,6 +106,8 @@ class BankAccountManualStep extends React.Component {
                         inputID="accountNumber"
                         containerStyles={[styles.mt4]}
                         label={this.props.translate('bankAccount.accountNumber')}
+                        accessibilityLabel={this.props.translate('bankAccount.accountNumber')}
+                        accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
                         defaultValue={this.props.getDefaultStateForField('accountNumber', '')}
                         keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}
                         disabled={shouldDisableInputs}

diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js
@@ -176,6 +176,8 @@ class CompanyStep extends React.Component {
                     <Text>{this.props.translate('companyStep.subtitle')}</Text>
                     <TextInput
                         label={this.props.translate('companyStep.legalBusinessName')}
+                        accessibilityLabel={this.props.translate('companyStep.legalBusinessName')}
+                        accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
                         inputID="companyName"
                         containerStyles={[styles.mt4]}
                         disabled={shouldDisableCompanyName}
@@ -203,6 +205,8 @@ class CompanyStep extends React.Component {
                     <TextInput
                         inputID="companyPhone"
                         label={this.props.translate('common.phoneNumber')}
+                        accessibilityLabel={this.props.translate('common.phoneNumber')}
+                        accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
                         containerStyles={[styles.mt4]}
                         keyboardType={CONST.KEYBOARD_TYPE.PHONE_PAD}
                         placeholder={this.props.translate('common.phoneNumberPlaceholder')}
@@ -212,6 +216,8 @@ class CompanyStep extends React.Component {
                     <TextInput
                         inputID="website"
                         label={this.props.translate('companyStep.companyWebsite')}
+                        accessibilityLabel={this.props.translate('companyStep.companyWebsite')}
+                        accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
                         containerStyles={[styles.mt4]}
                         defaultValue={this.props.getDefaultStateForField('website', this.defaultWebsite)}
                         shouldSaveDraft
@@ -221,6 +227,8 @@ class CompanyStep extends React.Component {
                     <TextInput
                         inputID="companyTaxID"
                         label={this.props.translate('companyStep.taxIDNumber')}
+                        accessibilityLabel={this.props.translate('companyStep.taxIDNumber')}
+                        accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
                         containerStyles={[styles.mt4]}
                         keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}
                         disabled={shouldDisableCompanyTaxID}

diff --git a/src/pages/ReimbursementAccount/IdentityForm.js b/src/pages/ReimbursementAccount/IdentityForm.js
@@ -145,6 +145,8 @@ function IdentityForm(props) {
                         inputID={props.inputKeys.firstName}
                         shouldSaveDraft={props.shouldSaveDraft}
                         label={`${props.translate('common.firstName')}`}
+                        accessibilityLabel={props.translate('common.firstName')}
+                        accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
                         value={props.values.firstName}
                         defaultValue={props.defaultValues.firstName}
                         onChangeText={(value) => props.onFieldChange({firstName: value})}
@@ -156,6 +158,8 @@ function IdentityForm(props) {
                         inputID={props.inputKeys.lastName}
                         shouldSaveDraft={props.shouldSaveDraft}
                         label={`${props.translate('common.lastName')}`}
+                        accessibilityLabel={props.translate('common.lastName')}
+                        accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
                         value={props.values.lastName}
                         defaultValue={props.defaultValues.lastName}
                         onChangeText={(value) => props.onFieldChange({lastName: value})}
@@ -179,6 +183,8 @@ function IdentityForm(props) {
                 inputID={props.inputKeys.ssnLast4}
                 shouldSaveDraft={props.shouldSaveDraft}
                 label={`${props.translate('common.ssnLast4')}`}
+                accessibilityLabel={props.translate('common.ssnLast4')}
+                accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
                 containerStyles={[styles.mt4]}
                 keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}
                 defaultValue={props.defaultValues.ssnLast4}

diff --git a/src/pages/ReimbursementAccount/ValidationStep.js b/src/pages/ReimbursementAccount/ValidationStep.js
@@ -167,20 +167,23 @@ class ValidationStep extends React.Component {
                                 containerStyles={[styles.mb1]}
                                 placeholder="1.52"
                                 keyboardType="decimal-pad"
+                                accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
                             />
                             <TextInput
                                 inputID="amount2"
                                 shouldSaveDraft
                                 containerStyles={[styles.mb1]}
                                 placeholder="1.53"
                                 keyboardType="decimal-pad"
+                                accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
                             />
                             <TextInput
                                 shouldSaveDraft
                                 inputID="amount3"
                                 containerStyles={[styles.mb1]}
                                 placeholder="1.54"
                                 keyboardType="decimal-pad"
+                                accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
                             />
                         </View>
                         {!requiresTwoFactorAuth && (