fix(web): restore the signup email focus order (#40230)

oxlint-suppressions.json

@@ -5670,9 +5670,6 @@
     }
   },
   "web/app/signup/components/input-mail.tsx": {
-    "jsx_a11y/tabindex-no-positive": {
-      "count": 2
-    },
     "no-restricted-imports": {
       "count": 1
     }

web/app/signup/components/input-mail.spec.tsx

@@ -1,5 +1,6 @@
 import type { MockedFunction } from 'vitest'
 import { fireEvent, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import * as React from 'react'
 import { useLocale } from '@/context/i18n'
 import { useSearchParams } from '@/next/navigation'
@@ -79,8 +80,16 @@ describe('InputMail Form', () => {
     it('should render email input and submit button', () => {
       renderForm()
 
-      expect(screen.getByLabelText('login.email')).toBeInTheDocument()
-      expect(screen.getByRole('button', { name: 'login.signup.verifyMail' })).toBeInTheDocument()
+      const emailInput = screen.getByRole('textbox', { name: 'login.email' })
+      const submitButton = screen.getByRole('button', { name: 'login.signup.verifyMail' })
+
+      expect(emailInput).toHaveAttribute('name', 'email')
+      expect(emailInput).toHaveAttribute('type', 'email')
+      expect(emailInput).toHaveAttribute('autocomplete', 'email')
+      expect(emailInput).toHaveAttribute('spellcheck', 'false')
+      expect(emailInput).toHaveProperty('tabIndex', 0)
+      expect(submitButton).toHaveAttribute('type', 'submit')
+      expect(submitButton).toHaveProperty('tabIndex', 0)
       expect(screen.getByRole('link', { name: 'login.signup.signIn' })).toBeInTheDocument()
     })
   })
@@ -105,17 +114,17 @@ describe('InputMail Form', () => {
   // Submission flow and mutation integration.
   describe('User Interactions', () => {
     it('should submit email and call onSuccess when mutation succeeds', async () => {
+      const user = userEvent.setup()
       renderForm()
-      const input = screen.getByLabelText('login.email')
-      const button = screen.getByRole('button', { name: 'login.signup.verifyMail' })
+      const input = screen.getByRole('textbox', { name: 'login.email' })
 
-      fireEvent.change(input, { target: { value: 'test@example.com' } })
-      fireEvent.click(button)
+      await user.type(input, 'test@example.com{Enter}')
 
       expect(mockSubmitMail).toHaveBeenCalledWith({
         email: 'test@example.com',
         language: 'en-US',
       })
+      expect(mockSubmitMail).toHaveBeenCalledTimes(1)
 
       await waitFor(() => {
         expect(mockOnSuccess).toHaveBeenCalledWith('test@example.com', 'token')

web/app/signup/components/input-mail.tsx

@@ -60,21 +60,16 @@ export default function Form({ onSuccess }: Props) {
             value={email}
             onChange={(e) => setEmail(e.target.value)}
             id="email"
+            name="email"
             type="email"
             autoComplete="email"
+            spellCheck={false}
             placeholder={t(($) => $.emailPlaceholder, { ns: 'login' }) || ''}
-            tabIndex={1}
           />
         </div>
       </div>
       <div className="mb-2">
-        <Button
-          tabIndex={2}
-          variant="primary"
-          type="submit"
-          disabled={isPending || !email}
-          className="w-full"
-        >
+        <Button variant="primary" type="submit" disabled={isPending || !email} className="w-full">
           {t(($) => $['signup.verifyMail'], { ns: 'login' })}
         </Button>
       </div>