Skip to content

Commit 3a9707b

Browse files
chiragsalianchiragsalian
authored
Merge pull request Expensify#80214 from ChavdaSachin/Accessibility/Add-autocomplete-attributes
Accessibility/ add autoComplete attributes
2 parents 2f40572 + ca8ba88 commit 3a9707b

20 files changed

Lines changed: 45 additions & 2 deletions

File tree

‎src/components/AddPaymentCard/PaymentCardChangeCurrencyForm.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,7 @@ function PaymentCardChangeCurrencyForm({changeBillingCurrency, isSecurityCodeReq
114114
role={CONST.ROLE.PRESENTATION}
115115
containerStyles={[styles.mt5]}
116116
inputMode={CONST.INPUT_MODE.NUMERIC}
117+
autoComplete="cc-csc"
117118
/>
118119
</>
119120
<PaymentCardCurrencyModal

‎src/components/AddPaymentCard/PaymentCardForm.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -272,6 +272,7 @@ function PaymentCardForm({
272272
onChangeText={onChangeCardNumber}
273273
value={cardNumber}
274274
forwardedFSClass={CONST.FULLSTORY.CLASS.MASK}
275+
autoComplete="cc-number"
275276
/>
276277
<InputWrapper
277278
InputComponent={TextInput}
@@ -283,6 +284,7 @@ function PaymentCardForm({
283284
containerStyles={[styles.mt5]}
284285
spellCheck={false}
285286
forwardedFSClass={CONST.FULLSTORY.CLASS.MASK}
287+
autoComplete="cc-name"
286288
/>
287289
<View style={[styles.flexRow, styles.mt5]}>
288290
<View style={[styles.mr2, styles.flex1]}>
@@ -300,6 +302,7 @@ function PaymentCardForm({
300302
inputMode={CONST.INPUT_MODE.NUMERIC}
301303
maxLength={5}
302304
forwardedFSClass={CONST.FULLSTORY.CLASS.MASK}
305+
autoComplete="cc-exp"
303306
/>
304307
</View>
305308
<View style={styles.flex1}>
@@ -313,6 +316,7 @@ function PaymentCardForm({
313316
maxLength={4}
314317
inputMode={CONST.INPUT_MODE.NUMERIC}
315318
forwardedFSClass={CONST.FULLSTORY.CLASS.MASK}
319+
autoComplete="cc-csc"
316320
/>
317321
</View>
318322
</View>
@@ -328,6 +332,7 @@ function PaymentCardForm({
328332
// Limit the address search only to the USA until we fully can support international debit cards
329333
limitSearchesToCountry={CONST.COUNTRY.US}
330334
forwardedFSClass={CONST.FULLSTORY.CLASS.MASK}
335+
autoComplete="street-address"
331336
/>
332337
</View>
333338
)}
@@ -339,6 +344,7 @@ function PaymentCardForm({
339344
aria-label={translate('common.zipPostCode')}
340345
role={CONST.ROLE.PRESENTATION}
341346
containerStyles={[styles.mt5]}
347+
autoComplete="postal-code"
342348
/>
343349
{!!showStateSelector && (
344350
<View style={[styles.mt4, styles.mhn5]}>

‎src/components/AddressForm.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -176,6 +176,7 @@ function AddressForm({
176176
country: INPUT_IDS.COUNTRY as Country,
177177
}}
178178
shouldSaveDraft={shouldSaveDraft}
179+
autoComplete="address-line1"
179180
/>
180181
</View>
181182
<View style={styles.formSpaceVertical} />
@@ -188,6 +189,7 @@ function AddressForm({
188189
defaultValue={street2}
189190
spellCheck={false}
190191
shouldSaveDraft={shouldSaveDraft}
192+
autoComplete="address-line2"
191193
/>
192194
<View style={styles.formSpaceVertical} />
193195
<View style={styles.mhn5}>
@@ -247,6 +249,7 @@ function AddressForm({
247249
hint={zipFormat}
248250
onValueChange={onAddressChanged}
249251
shouldSaveDraft={shouldSaveDraft}
252+
autoComplete="postal-code"
250253
/>
251254
</FormProvider>
252255
);

‎src/components/AddressSearch/index.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,7 @@ function AddressSearch({
7272
lat: 'addressLat',
7373
lng: 'addressLng',
7474
},
75+
autoComplete = 'off',
7576
resultTypes = 'address',
7677
shouldSaveDraft = false,
7778
value,
@@ -419,7 +420,7 @@ function AddressSearch({
419420
}
420421
onBlur?.();
421422
},
422-
autoComplete: CONST.AUTO_COMPLETE_VARIANTS.OFF,
423+
autoComplete,
423424
onInputChange: (text: string) => {
424425
setSearchValue(text);
425426
setIsTyping(true);

‎src/components/AddressSearch/types.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type {ForwardedRef, RefObject} from 'react';
2-
import type {BlurEvent, StyleProp, View, ViewStyle} from 'react-native';
2+
import type {BlurEvent, StyleProp, TextInputProps, View, ViewStyle} from 'react-native';
33
import type {Place} from 'react-native-google-places-autocomplete';
44
import type {ForwardedFSClassProps} from '@libs/Fullstory/types';
55
import type {Country} from '@src/CONST';
@@ -77,6 +77,9 @@ type AddressSearchProps = ForwardedFSClassProps & {
7777
/** A map of inputID key names */
7878
renamedInputKeys?: Record<string, string>;
7979

80+
/** Auto complete attribute for the input field */
81+
autoComplete?: TextInputProps['autoComplete'];
82+
8083
/** Maximum number of characters allowed in search input */
8184
maxInputLength?: number;
8285

‎src/components/DatePicker/index.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ function DatePicker({
3232
formID,
3333
autoFocus = false,
3434
shouldHideClearButton = false,
35+
autoComplete = 'off',
3536
forwardedFSClass,
3637
}: DateInputWithPickerProps) {
3738
const icons = useMemoizedLazyExpensifyIcons(['Calendar']);
@@ -153,6 +154,7 @@ function DatePicker({
153154
shouldHideClearButton={shouldHideClearButton}
154155
onClearInput={handleClear}
155156
forwardedFSClass={forwardedFSClass}
157+
autoComplete={autoComplete}
156158
disableKeyboard
157159
/>
158160
</View>

‎src/components/SubStepForms/DateOfBirthStep.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,7 @@ function DateOfBirthStep<TFormID extends keyof OnyxFormValuesMapping>({
106106
shouldSaveDraft={!isEditing}
107107
autoFocus
108108
forwardedFSClass={forwardedFSClass}
109+
autoComplete="birthdate-full"
109110
/>
110111
{footerComponent}
111112
{shouldShowPatriotActLink && <PatriotActLink containerStyles={[styles.mt2]} />}

‎src/components/SubStepForms/FullNameStep.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -139,6 +139,7 @@ function FullNameStep<TFormID extends keyof OnyxFormValuesMapping>({
139139
shouldSaveDraft={!isEditing}
140140
containerStyles={[styles.mb6]}
141141
forwardedFSClass={forwardedFSClass}
142+
autoComplete="given-name"
142143
/>
143144
<InputWrapper
144145
InputComponent={TextInput}
@@ -150,6 +151,7 @@ function FullNameStep<TFormID extends keyof OnyxFormValuesMapping>({
150151
shouldSaveDraft={!isEditing}
151152
containerStyles={[styles.mb6]}
152153
forwardedFSClass={forwardedFSClass}
154+
autoComplete="family-name"
153155
/>
154156
{shouldShowHelpLinks && (
155157
<>

‎src/pages/MissingPersonalDetails/subPages/Address.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -147,6 +147,7 @@ function AddressStep({isEditing, onNext, personalDetailsValues}: CustomSubPagePr
147147
country: INPUT_IDS.COUNTRY as Country,
148148
}}
149149
maxInputLength={CONST.FORM_CHARACTER_LIMIT}
150+
autoComplete="address-line1"
150151
/>
151152
</View>
152153
<InputWrapper
@@ -158,6 +159,7 @@ function AddressStep({isEditing, onNext, personalDetailsValues}: CustomSubPagePr
158159
defaultValue={personalDetailsValues[INPUT_IDS.ADDRESS_LINE_2]}
159160
spellCheck={false}
160161
containerStyles={styles.mt5}
162+
autoComplete="address-line2"
161163
/>
162164
<View style={[styles.mt2, styles.mhn5]}>
163165
<InputWrapper
@@ -211,6 +213,7 @@ function AddressStep({isEditing, onNext, personalDetailsValues}: CustomSubPagePr
211213
hint={zipFormat}
212214
onValueChange={handleAddressChange}
213215
containerStyles={styles.mt5}
216+
autoComplete="postal-code"
214217
/>
215218
</View>
216219
</FormProvider>

‎src/pages/OnboardingPersonalDetails/BaseOnboardingPersonalDetails.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -240,6 +240,7 @@ function BaseOnboardingPersonalDetails({currentUserPersonalDetails, shouldUseNat
240240
{...(currentUserPersonalDetails?.firstName && {defaultValue: currentUserPersonalDetails.firstName})}
241241
shouldSaveDraft
242242
spellCheck={false}
243+
autoComplete="given-name"
243244
/>
244245
</View>
245246
<View>
@@ -255,6 +256,7 @@ function BaseOnboardingPersonalDetails({currentUserPersonalDetails, shouldUseNat
255256
{...(currentUserPersonalDetails?.lastName && {defaultValue: currentUserPersonalDetails.lastName})}
256257
shouldSaveDraft
257258
spellCheck={false}
259+
autoComplete="family-name"
258260
/>
259261
</View>
260262
</FormProvider>

0 commit comments

Comments
 (0)