feat(a11y): apply the autocomplete attribute to input fields(#115)

jwplayer · Feb 29, 2024 · ab4e6f5 · ab4e6f5
1 parent f621ef7
commit ab4e6f5
Show file tree

Hide file tree

Showing 25 changed files with 79 additions and 1 deletion.
diff --git a/packages/ui-react/src/components/Account/Account.tsx b/packages/ui-react/src/components/Account/Account.tsx
@@ -242,6 +242,7 @@ const Account = ({ panelClassName, panelHeaderClassName, canUpdateEmail = true }
                   helperText={section.errors?.firstName}
                   disabled={section.isBusy}
                   editing={section.isEditing}
+                  autoComplete="given-name"
                   lang={htmlLang}
                 />
                 <TextField
@@ -253,6 +254,7 @@ const Account = ({ panelClassName, panelHeaderClassName, canUpdateEmail = true }
                   helperText={section.errors?.lastName}
                   disabled={section.isBusy}
                   editing={section.isEditing}
+                  autoComplete="family-name"
                   lang={htmlLang}
                 />
               </>
@@ -284,6 +286,7 @@ const Account = ({ panelClassName, panelHeaderClassName, canUpdateEmail = true }
                   helperText={section.errors?.email}
                   disabled={section.isBusy}
                   editing={section.isEditing}
+                  autoComplete="email"
                   required
                 />
                 {section.isEditing && (
@@ -296,6 +299,7 @@ const Account = ({ panelClassName, panelHeaderClassName, canUpdateEmail = true }
                     helperText={section.errors?.confirmationPassword}
                     type={viewPassword ? 'text' : 'password'}
                     disabled={section.isBusy}
+                    autoComplete="current-password"
                     rightControl={
                       <IconButton aria-label={viewPassword ? t('account.hide_password') : t('account.view_password')} onClick={() => toggleViewPassword()}>
                         <Icon icon={viewPassword ? Visibility : VisibilityOff} />

diff --git a/packages/ui-react/src/components/Account/__snapshots__/Account.test.tsx.snap b/packages/ui-react/src/components/Account/__snapshots__/Account.test.tsx.snap
@@ -37,6 +37,7 @@ exports[`<Account> > renders and matches snapshot 1`] = `
           aria-describedby="helper_text_1235_firstname"
           aria-invalid="false"
           aria-required="false"
+          autocomplete="given-name"
           class="_input_e16c1b"
           id="text-field_1235_firstname"
           lang="en"
@@ -59,6 +60,7 @@ exports[`<Account> > renders and matches snapshot 1`] = `
           aria-describedby="helper_text_1235_lastname"
           aria-invalid="false"
           aria-required="false"
+          autocomplete="family-name"
           class="_input_e16c1b"
           id="text-field_1235_lastname"
           lang="en"
@@ -112,6 +114,7 @@ exports[`<Account> > renders and matches snapshot 1`] = `
           aria-describedby="helper_text_1235_email"
           aria-invalid="false"
           aria-required="true"
+          autocomplete="email"
           class="_input_e16c1b"
           id="text-field_1235_email"
           name="email"

diff --git a/packages/ui-react/src/components/CheckoutForm/__snapshots__/CheckoutForm.test.tsx.snap b/packages/ui-react/src/components/CheckoutForm/__snapshots__/CheckoutForm.test.tsx.snap
@@ -100,6 +100,7 @@ exports[`<CheckoutForm> > renders and matches snapshot 1`] = `
                   aria-describedby="helper_text_1235_cardholdername"
                   aria-invalid="false"
                   aria-required="true"
+                  autocomplete="cc-name"
                   class="_input_e16c1b"
                   id="text-field_1235_cardholdername"
                   name="cardholderName"
@@ -128,6 +129,7 @@ exports[`<CheckoutForm> > renders and matches snapshot 1`] = `
                   aria-describedby="helper_text_1235_cardnumber"
                   aria-invalid="false"
                   aria-required="true"
+                  autocomplete="cc-number"
                   class="_input_e16c1b"
                   id="text-field_1235_cardnumber"
                   name="cardNumber"
@@ -160,6 +162,7 @@ exports[`<CheckoutForm> > renders and matches snapshot 1`] = `
                     aria-describedby="helper_text_1235_cardexpiry"
                     aria-invalid="false"
                     aria-required="true"
+                    autocomplete="cc-exp"
                     class="_input_e16c1b"
                     id="text-field_1235_cardexpiry"
                     name="cardExpiry"
@@ -190,6 +193,7 @@ exports[`<CheckoutForm> > renders and matches snapshot 1`] = `
                     aria-invalid="false"
                     aria-label="payment.security_code"
                     aria-required="true"
+                    autocomplete="cc-csc"
                     class="_input_e16c1b"
                     id="text-field_1235_cardcvc"
                     name="cardCVC"

diff --git a/packages/ui-react/src/components/CreditCardCVCField/CreditCardCVCField.tsx b/packages/ui-react/src/components/CreditCardCVCField/CreditCardCVCField.tsx
@@ -33,6 +33,7 @@ const CreditCardCVCField: React.FC<Props> = ({ value, onChange, error, ...props
       onChange={formatCVC}
       pattern="\d*"
       placeholder="###"
+      autoComplete="cc-csc"
       required
     />
   );

diff --git a/...ui-react/src/components/CreditCardCVCField/__snapshots__/CreditCardCVCField.test.tsx.snap b/...ui-react/src/components/CreditCardCVCField/__snapshots__/CreditCardCVCField.test.tsx.snap
@@ -19,6 +19,7 @@ exports[`<CreditCardCVCField> > renders and matches snapshot 1`] = `
         aria-invalid="false"
         aria-label="payment.security_code"
         aria-required="true"
+        autocomplete="cc-csc"
         class="_input_e16c1b"
         id="text-field_1235_cardcvc"
         name="cardCVC"

diff --git a/packages/ui-react/src/components/CreditCardExpiryField/CreditCardExpiryField.tsx b/packages/ui-react/src/components/CreditCardExpiryField/CreditCardExpiryField.tsx
@@ -45,6 +45,7 @@ const CreditCardExpiryField: React.FC<Props> = ({ value, onChange, error, ...pro
       type="text"
       pattern="\d*"
       placeholder="MM/YY"
+      autoComplete="cc-exp"
       required
     />
   );

diff --git a/...ct/src/components/CreditCardExpiryField/__snapshots__/CreditCardExpiryField.test.tsx.snap b/...ct/src/components/CreditCardExpiryField/__snapshots__/CreditCardExpiryField.test.tsx.snap
@@ -18,6 +18,7 @@ exports[`<CreditCardExpiryField> > renders and matches snapshot 1`] = `
         aria-describedby="helper_text_1235_cardexpiry"
         aria-invalid="false"
         aria-required="true"
+        autocomplete="cc-exp"
         class="_input_e16c1b"
         id="text-field_1235_cardexpiry"
         name="cardExpiry"

diff --git a/packages/ui-react/src/components/CreditCardNumberField/CreditCardNumberField.tsx b/packages/ui-react/src/components/CreditCardNumberField/CreditCardNumberField.tsx
@@ -73,6 +73,7 @@ const CreditCardNumberField: React.FC<Props> = ({ value, error, onChange, onBlur
       type="text"
       placeholder="1234 5678 9012 3456"
       rightControl={cardIssuer}
+      autoComplete="cc-number"
       required
     />
   );

diff --git a/...ct/src/components/CreditCardNumberField/__snapshots__/CreditCardNumberField.test.tsx.snap b/...ct/src/components/CreditCardNumberField/__snapshots__/CreditCardNumberField.test.tsx.snap
@@ -18,6 +18,7 @@ exports[`<CreditCardNumberField> > renders and matches snapshot 1`] = `
         aria-describedby="helper_text_1235_cardnumber"
         aria-invalid="false"
         aria-required="true"
+        autocomplete="cc-number"
         class="_input_e16c1b"
         id="text-field_1235_cardnumber"
         name="cardNumber"

diff --git a/...-react/src/components/CustomRegisterField/__snapshots__/CustomRegisterField.test.tsx.snap b/...-react/src/components/CustomRegisterField/__snapshots__/CustomRegisterField.test.tsx.snap
@@ -101,6 +101,7 @@ exports[`<CustomRegisterField> > renders and matches snapshot <Dropdown type="da
         name="name"
       />
       <input
+        autocomplete="bday-day"
         class="_input_eb6974"
         id="text-field_1235_name-date"
         maxlength="2"
@@ -111,6 +112,7 @@ exports[`<CustomRegisterField> > renders and matches snapshot <Dropdown type="da
       />
        / 
       <input
+        autocomplete="bday-month"
         class="_input_eb6974"
         id="text-field_1235_name-month"
         maxlength="2"
@@ -121,6 +123,7 @@ exports[`<CustomRegisterField> > renders and matches snapshot <Dropdown type="da
       />
        / 
       <input
+        autocomplete="bday-year"
         class="_input_eb6974"
         id="text-field_1235_name-year"
         maxlength="4"

diff --git a/packages/ui-react/src/components/DateField/DateField.tsx b/packages/ui-react/src/components/DateField/DateField.tsx
@@ -170,6 +170,7 @@ const DateField: React.FC<Props> = ({
           maxLength={2}
           type="number"
           id={`${id}-date`}
+          autoComplete="bday-day"
         />
         {' / '}
         <input
@@ -184,6 +185,7 @@ const DateField: React.FC<Props> = ({
           maxLength={2}
           type="number"
           id={`${id}-month`}
+          autoComplete="bday-month"
         />
         {' / '}
         <input
@@ -198,6 +200,7 @@ const DateField: React.FC<Props> = ({
           maxLength={4}
           type="number"
           id={`${id}-year`}
+          autoComplete="bday-year"
         />
       </div>
       <HelperText id={helperTextId} error={error}>

diff --git a/packages/ui-react/src/components/EditCardPaymentForm/EditCardPaymentForm.tsx b/packages/ui-react/src/components/EditCardPaymentForm/EditCardPaymentForm.tsx
@@ -109,6 +109,7 @@ const EditCardPaymentForm: React.FC<Props> = ({ onCancel, setUpdatingCardDetails
           onChange={paymentData?.handleChange}
           onBlur={paymentData?.handleBlur}
           placeholder={t('checkout.credit_card_name')}
+          autoComplete="cc-name"
           required
         />
       </div>

diff --git a/packages/ui-react/src/components/EditPasswordForm/EditPasswordForm.tsx b/packages/ui-react/src/components/EditPasswordForm/EditPasswordForm.tsx
@@ -76,6 +76,7 @@ const EditPasswordForm: React.FC<Props> = ({
           placeholder={t('reset.reset_password_token')}
           name="resetPasswordToken"
           type="text"
+          autoComplete=""
           required
         />
       )}

diff --git a/packages/ui-react/src/components/ForgotPasswordForm/ForgotPasswordForm.tsx b/packages/ui-react/src/components/ForgotPasswordForm/ForgotPasswordForm.tsx
@@ -36,9 +36,10 @@ const ForgotPasswordForm: React.FC<Props> = ({ onSubmit, onChange, value, errors
         placeholder={t('reset.email')}
         error={!!errors.email || !!errors.form}
         helperText={errors.email}
-        required
         name="email"
         type="email"
+        autoComplete="email"
+        required
       />
       <Button type="submit" className={styles.button} fullWidth color="primary" disabled={submitting} label={t('reset.email_me')} />
     </form>

diff --git a/...ui-react/src/components/ForgotPasswordForm/__snapshots__/ForgotPasswordForm.test.tsx.snap b/...ui-react/src/components/ForgotPasswordForm/__snapshots__/ForgotPasswordForm.test.tsx.snap
@@ -32,6 +32,7 @@ exports[`<ForgotPasswordForm> > renders and matches snapshot type forgot 1`] = `
           aria-describedby="helper_text_1235_email"
           aria-invalid="false"
           aria-required="true"
+          autocomplete="email"
           class="_input_e16c1b"
           id="text-field_1235_email"
           name="email"

diff --git a/packages/ui-react/src/components/LoginForm/LoginForm.tsx b/packages/ui-react/src/components/LoginForm/LoginForm.tsx
@@ -69,6 +69,7 @@ const LoginForm: React.FC<Props> = ({ onSubmit, onChange, socialLoginURLs, value
         type="email"
         required
         testId="login-email-input"
+        autoComplete="email"
       />
       <TextField
         value={values.password}
@@ -86,6 +87,7 @@ const LoginForm: React.FC<Props> = ({ onSubmit, onChange, socialLoginURLs, value
         }
         required
         testId="login-password-input"
+        autoComplete="current-password"
       />
       {submitting && <LoadingOverlay transparentBackground inline />}
       <Link className={styles.link} to={modalURLFromLocation(location, 'forgot-password')}>

diff --git a/packages/ui-react/src/components/LoginForm/__snapshots__/LoginForm.test.tsx.snap b/packages/ui-react/src/components/LoginForm/__snapshots__/LoginForm.test.tsx.snap
@@ -47,6 +47,7 @@ exports[`<LoginForm> > renders and matches snapshot 1`] = `
           aria-describedby="helper_text_1235_email"
           aria-invalid="false"
           aria-required="true"
+          autocomplete="email"
           class="_input_e16c1b"
           id="text-field_1235_email"
           name="email"
@@ -74,6 +75,7 @@ exports[`<LoginForm> > renders and matches snapshot 1`] = `
           aria-describedby="helper_text_1235_password"
           aria-invalid="false"
           aria-required="true"
+          autocomplete="current-password"
           class="_input_e16c1b"
           id="text-field_1235_password"
           name="password"

diff --git a/packages/ui-react/src/components/Payment/Payment.tsx b/packages/ui-react/src/components/Payment/Payment.tsx
@@ -296,20 +296,23 @@ const Payment = ({
                 value={`•••• •••• •••• ${activePaymentDetail.paymentMethodSpecificParams.lastCardFourDigits || ''}`}
                 aria-label={t('user:payment.card_number_hidden', { number: activePaymentDetail.paymentMethodSpecificParams.lastCardFourDigits })}
                 editing={false}
+                autoComplete="cc-number"
               />
               <div className={styles.cardDetails}>
                 <TextField
                   label={t('user:payment.expiry_date')}
                   name="cardExpiry"
                   value={activePaymentDetail.paymentMethodSpecificParams.cardExpirationDate}
                   editing={false}
+                  autoComplete="cc-exp"
                 />
                 <TextField
                   label={t('user:payment.security_code')}
                   name="cardSecurityCode"
                   value={'******'}
                   editing={false}
                   aria-label={t('user:payment.security_code_hidden')}
+                  autoComplete="cc-csc"
                 />
               </div>
               <Button label={t('account:payment.edit_card')} variant="outlined" onClick={onEditCardDetailsClick} />

diff --git a/packages/ui-react/src/components/Payment/__snapshots__/Payment.test.tsx.snap b/packages/ui-react/src/components/Payment/__snapshots__/Payment.test.tsx.snap
@@ -32,6 +32,7 @@ exports[`<Payment> > renders and matches snapshot 1`] = `
           aria-invalid="false"
           aria-label="user:payment.card_number_hidden"
           aria-required="false"
+          autocomplete="cc-number"
           class="_input_e16c1b"
           id="text-field_1235_cardnumber"
           name="cardNumber"
@@ -56,6 +57,7 @@ exports[`<Payment> > renders and matches snapshot 1`] = `
             aria-describedby="helper_text_1235_cardexpiry"
             aria-invalid="false"
             aria-required="false"
+            autocomplete="cc-exp"
             class="_input_e16c1b"
             id="text-field_1235_cardexpiry"
             name="cardExpiry"
@@ -78,6 +80,7 @@ exports[`<Payment> > renders and matches snapshot 1`] = `
             aria-invalid="false"
             aria-label="user:payment.security_code_hidden"
             aria-required="false"
+            autocomplete="cc-csc"
             class="_input_e16c1b"
             id="text-field_1235_cardsecuritycode"
             name="cardSecurityCode"

diff --git a/packages/ui-react/src/components/PaymentForm/PaymentForm.tsx b/packages/ui-react/src/components/PaymentForm/PaymentForm.tsx
@@ -85,6 +85,7 @@ const PaymentForm: React.FC<Props> = ({ onPaymentFormSubmit }) => {
             onChange={handleChange}
             onBlur={handleBlur}
             placeholder={t('checkout.credit_card_name')}
+            autoComplete="cc-name"
             required
           />
         </div>

diff --git a/packages/ui-react/src/components/PersonalDetailsForm/PersonalDetailsForm.tsx b/packages/ui-react/src/components/PersonalDetailsForm/PersonalDetailsForm.tsx
@@ -98,6 +98,7 @@ const PersonalDetailsForm: React.FC<Props> = ({
             helperText={errors.firstName}
             required={fields.firstNameLastName.required}
             name="firstName"
+            autoComplete="given-name"
           />
           <TextField
             value={values.lastName}
@@ -108,6 +109,7 @@ const PersonalDetailsForm: React.FC<Props> = ({
             helperText={errors.lastName}
             required={fields.firstNameLastName.required}
             name="lastName"
+            autoComplete="family-name"
           />
         </React.Fragment>
       ) : null}
@@ -121,6 +123,7 @@ const PersonalDetailsForm: React.FC<Props> = ({
           helperText={errors.companyName}
           required={fields.companyName.required}
           name="companyName"
+          autoComplete="organization"
         />
       ) : null}
       {fields.address?.enabled ? (
@@ -134,6 +137,7 @@ const PersonalDetailsForm: React.FC<Props> = ({
             helperText={errors.address}
             required={fields.address.required}
             name="address"
+            autoComplete="address-line1"
           />
           <TextField
             value={values.address2}
@@ -143,6 +147,7 @@ const PersonalDetailsForm: React.FC<Props> = ({
             error={!!errors.address2 || !!errors.form}
             helperText={errors.address2}
             name="address2"
+            autoComplete="address-line2"
           />
           <TextField
             value={values.city}
@@ -153,6 +158,7 @@ const PersonalDetailsForm: React.FC<Props> = ({
             helperText={errors.city}
             required={fields.address.required}
             name="city"
+            autoComplete="address-level2"
           />
           <TextField
             value={values.state}
@@ -163,6 +169,7 @@ const PersonalDetailsForm: React.FC<Props> = ({
             helperText={errors.state}
             required={fields.address.required}
             name="state"
+            autoComplete="address-level1"
           />
           <TextField
             value={values.postCode}
@@ -173,6 +180,7 @@ const PersonalDetailsForm: React.FC<Props> = ({
             helperText={errors.postCode}
             required={fields.address.required}
             name="postCode"
+            autoComplete="postal-code"
           />
         </React.Fragment>
       ) : null}