feat(account-center): auto-focus first input (#8107)

Author: wangsijie

packages/account-center/src/components/PasswordVerification/index.tsx

@@ -58,6 +58,8 @@ const PasswordVerification = ({ onBack, onSwitchMethod, hasAlternativeMethod }:
     >
       <form noValidate className={styles.form} onSubmit={handleVerify}>
         <PasswordInputField
+          // eslint-disable-next-line jsx-a11y/no-autofocus
+          autoFocus
           autoComplete="current-password"
           label={t('input.password')}
           value={password}

packages/account-center/src/pages/CodeFlow/IdentifierSendStep.tsx

@@ -94,6 +94,8 @@ const IdentifierSendStep = ({
     <SecondaryPageLayout title={titleKey} description={descriptionKey}>
       <form className={styles.container} onSubmit={handleSend}>
         <SmartInputField
+          // eslint-disable-next-line jsx-a11y/no-autofocus
+          autoFocus
           className={styles.identifierInput}
           name={name}
           label={t(labelKey)}

packages/account-center/src/pages/PasskeyView/index.tsx

@@ -299,6 +299,8 @@ const PasskeyView = () => {
         <div className={styles.editModalContent}>
           <DynamicT forKey="account_center.passkey.rename_description" />
           <InputField
+            // eslint-disable-next-line jsx-a11y/no-autofocus
+            autoFocus
             name="passkeyName"
             value={editName}
             required={false}

packages/account-center/src/pages/Password/index.tsx

@@ -126,8 +126,10 @@ const Password = () => {
     <SecondaryPageLayout title="account_center.password.title" description={description}>
       <div className={styles.container}>
         <SetPassword
-          errorMessage={errorMessage}
+          // eslint-disable-next-line jsx-a11y/no-autofocus
+          autoFocus
           clearErrorMessage={clearErrorMessage}
+          errorMessage={errorMessage}
           maxLength={passwordPolicy.length.max}
           onSubmit={async (value) => handleSubmit(value)}
         />

packages/account-center/src/pages/Username/index.tsx

@@ -109,6 +109,8 @@ const Username = () => {
       <form className={styles.container} onSubmit={handleSubmit}>
         <SmartInputField
           key={inputKey}
+          // eslint-disable-next-line jsx-a11y/no-autofocus
+          autoFocus
           className={styles.identifierInput}
           name="username"
           label={t('input.username')}