From 08f30717add1ea35087ca166ea984ee8cd803c36 Mon Sep 17 00:00:00 2001
From: yyh <92089059+lyzno1@users.noreply.github.com>
Date: Mon, 10 Aug 2026 11:13:31 +0800
Subject: [PATCH] fix(web): make verification back actions keyboard accessible
 (#40196)

---
 oxlint-suppressions.json                      | 30 -------------------
 .../webapp-reset-password/check-code/page.tsx | 13 ++++----
 .../webapp-signin/check-code/page.tsx         | 13 ++++----
 web/app/reset-password/check-code/page.tsx    | 13 ++++----
 .../signin/check-code/__tests__/page.spec.tsx | 21 +++++++++++++
 web/app/signin/check-code/page.tsx            | 13 ++++----
 web/app/signup/check-code/page.tsx            | 13 ++++----
 7 files changed, 56 insertions(+), 60 deletions(-)

diff --git a/oxlint-suppressions.json b/oxlint-suppressions.json
index 0548cba730f..b90834169ee 100644
--- a/oxlint-suppressions.json
+++ b/oxlint-suppressions.json
@@ -97,12 +97,6 @@
     }
   },
   "web/app/(shareLayout)/webapp-reset-password/check-code/page.tsx": {
-    "jsx_a11y/click-events-have-key-events": {
-      "count": 1
-    },
-    "jsx_a11y/no-static-element-interactions": {
-      "count": 1
-    },
     "no-restricted-imports": {
       "count": 1
     }
@@ -123,12 +117,6 @@
     }
   },
   "web/app/(shareLayout)/webapp-signin/check-code/page.tsx": {
-    "jsx_a11y/click-events-have-key-events": {
-      "count": 1
-    },
-    "jsx_a11y/no-static-element-interactions": {
-      "count": 1
-    },
     "no-restricted-imports": {
       "count": 1
     }
@@ -5503,12 +5491,6 @@
     }
   },
   "web/app/reset-password/check-code/page.tsx": {
-    "jsx_a11y/click-events-have-key-events": {
-      "count": 1
-    },
-    "jsx_a11y/no-static-element-interactions": {
-      "count": 1
-    },
     "no-restricted-imports": {
       "count": 1
     }
@@ -5529,12 +5511,6 @@
     }
   },
   "web/app/signin/check-code/page.tsx": {
-    "jsx_a11y/click-events-have-key-events": {
-      "count": 1
-    },
-    "jsx_a11y/no-static-element-interactions": {
-      "count": 1
-    },
     "no-restricted-imports": {
       "count": 1
     }
@@ -5550,12 +5526,6 @@
     }
   },
   "web/app/signup/check-code/page.tsx": {
-    "jsx_a11y/click-events-have-key-events": {
-      "count": 1
-    },
-    "jsx_a11y/no-static-element-interactions": {
-      "count": 1
-    },
     "no-restricted-imports": {
       "count": 1
     }
diff --git a/web/app/(shareLayout)/webapp-reset-password/check-code/page.tsx b/web/app/(shareLayout)/webapp-reset-password/check-code/page.tsx
index 409e2458afd..46eeafa7828 100644
--- a/web/app/(shareLayout)/webapp-reset-password/check-code/page.tsx
+++ b/web/app/(shareLayout)/webapp-reset-password/check-code/page.tsx
@@ -102,15 +102,16 @@ export default function CheckCode() {
       <div className="py-2">
         <div className="h-px bg-linear-to-r from-background-gradient-mask-transparent via-divider-regular to-background-gradient-mask-transparent"></div>
       </div>
-      <div
+      <button
+        type="button"
         onClick={() => router.back()}
-        className="flex h-9 cursor-pointer items-center justify-center text-text-tertiary"
+        className="flex h-9 cursor-pointer appearance-none items-center justify-center text-text-tertiary focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden"
       >
-        <div className="bg-background-default-dimm inline-block rounded-full p-1">
-          <RiArrowLeftLine size={12} />
-        </div>
+        <span className="bg-background-default-dimm inline-block rounded-full p-1">
+          <RiArrowLeftLine aria-hidden size={12} />
+        </span>
         <span className="ml-2 system-xs-regular">{t(($) => $.back, { ns: 'login' })}</span>
-      </div>
+      </button>
     </div>
   )
 }
diff --git a/web/app/(shareLayout)/webapp-signin/check-code/page.tsx b/web/app/(shareLayout)/webapp-signin/check-code/page.tsx
index f0d9e122856..3d71ec510f1 100644
--- a/web/app/(shareLayout)/webapp-signin/check-code/page.tsx
+++ b/web/app/(shareLayout)/webapp-signin/check-code/page.tsx
@@ -150,15 +150,16 @@ export default function CheckCode() {
       <div className="py-2">
         <div className="h-px bg-linear-to-r from-background-gradient-mask-transparent via-divider-regular to-background-gradient-mask-transparent"></div>
       </div>
-      <div
+      <button
+        type="button"
         onClick={() => router.back()}
-        className="flex h-9 cursor-pointer items-center justify-center text-text-tertiary"
+        className="flex h-9 cursor-pointer appearance-none items-center justify-center text-text-tertiary focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden"
       >
-        <div className="bg-background-default-dimm inline-block rounded-full p-1">
-          <RiArrowLeftLine size={12} />
-        </div>
+        <span className="bg-background-default-dimm inline-block rounded-full p-1">
+          <RiArrowLeftLine aria-hidden size={12} />
+        </span>
         <span className="ml-2 system-xs-regular">{t(($) => $.back, { ns: 'login' })}</span>
-      </div>
+      </button>
     </div>
   )
 }
diff --git a/web/app/reset-password/check-code/page.tsx b/web/app/reset-password/check-code/page.tsx
index 89ac8de8fef..0a9542385a6 100644
--- a/web/app/reset-password/check-code/page.tsx
+++ b/web/app/reset-password/check-code/page.tsx
@@ -104,15 +104,16 @@ export default function CheckCode() {
       <div className="py-2">
         <div className="h-px bg-linear-to-r from-background-gradient-mask-transparent via-divider-regular to-background-gradient-mask-transparent"></div>
       </div>
-      <div
+      <button
+        type="button"
         onClick={() => router.back()}
-        className="flex h-9 cursor-pointer items-center justify-center text-text-tertiary"
+        className="flex h-9 cursor-pointer appearance-none items-center justify-center text-text-tertiary focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden"
       >
-        <div className="inline-block rounded-full bg-background-default-dimmed p-1">
-          <RiArrowLeftLine size={12} />
-        </div>
+        <span className="inline-block rounded-full bg-background-default-dimmed p-1">
+          <RiArrowLeftLine aria-hidden size={12} />
+        </span>
         <span className="ml-2 system-xs-regular">{t(($) => $.back, { ns: 'login' })}</span>
-      </div>
+      </button>
     </div>
   )
 }
diff --git a/web/app/signin/check-code/__tests__/page.spec.tsx b/web/app/signin/check-code/__tests__/page.spec.tsx
index 45ef48a8ad5..811ad074c1e 100644
--- a/web/app/signin/check-code/__tests__/page.spec.tsx
+++ b/web/app/signin/check-code/__tests__/page.spec.tsx
@@ -98,6 +98,27 @@ describe('CheckCode', () => {
     expect(screen.getByRole('heading', { level: 1 })).toBeInTheDocument()
   })
 
+  it.each([
+    ['Enter', '{Enter}'],
+    ['Space', ' '],
+  ])('supports going back with the %s key', async (_, key) => {
+    const user = userEvent.setup()
+    const queryClient = createQueryClient()
+    render(
+      <QueryClientProvider client={queryClient}>
+        <CheckCode />
+      </QueryClientProvider>,
+    )
+
+    const backButton = screen.getByRole('button', { name: 'login.back' })
+    expect(backButton).toHaveProperty('tabIndex', 0)
+    backButton.focus()
+    expect(backButton).toHaveFocus()
+    await user.keyboard(key)
+
+    expect(navigationMocks.back).toHaveBeenCalledOnce()
+  })
+
   describe('Post-login profile bootstrap', () => {
     it('should resolve an inactive profile query before navigating to the console home', async () => {
       const user = userEvent.setup()
diff --git a/web/app/signin/check-code/page.tsx b/web/app/signin/check-code/page.tsx
index 09a548e42a6..3e3ac74675b 100644
--- a/web/app/signin/check-code/page.tsx
+++ b/web/app/signin/check-code/page.tsx
@@ -144,15 +144,16 @@ export default function CheckCode() {
       <div className="py-2">
         <div className="h-px bg-linear-to-r from-background-gradient-mask-transparent via-divider-regular to-background-gradient-mask-transparent"></div>
       </div>
-      <div
+      <button
+        type="button"
         onClick={() => router.back()}
-        className="flex h-9 cursor-pointer items-center justify-center text-text-tertiary"
+        className="flex h-9 cursor-pointer appearance-none items-center justify-center text-text-tertiary focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden"
       >
-        <div className="inline-block rounded-full bg-background-default-dimmed p-1">
-          <RiArrowLeftLine size={12} />
-        </div>
+        <span className="inline-block rounded-full bg-background-default-dimmed p-1">
+          <RiArrowLeftLine aria-hidden size={12} />
+        </span>
         <span className="ml-2 system-xs-regular">{t(($) => $.back, { ns: 'login' })}</span>
-      </div>
+      </button>
     </div>
   )
 }
diff --git a/web/app/signup/check-code/page.tsx b/web/app/signup/check-code/page.tsx
index d5ec8a3808f..568e9776217 100644
--- a/web/app/signup/check-code/page.tsx
+++ b/web/app/signup/check-code/page.tsx
@@ -110,15 +110,16 @@ export default function CheckCode() {
       <div className="py-2">
         <div className="h-px bg-linear-to-r from-background-gradient-mask-transparent via-divider-regular to-background-gradient-mask-transparent"></div>
       </div>
-      <div
+      <button
+        type="button"
         onClick={() => router.back()}
-        className="flex h-9 cursor-pointer items-center justify-center text-text-tertiary"
+        className="flex h-9 cursor-pointer appearance-none items-center justify-center text-text-tertiary focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden"
       >
-        <div className="bg-background-default-dimm inline-block rounded-full p-1">
-          <RiArrowLeftLine size={12} />
-        </div>
+        <span className="bg-background-default-dimm inline-block rounded-full p-1">
+          <RiArrowLeftLine aria-hidden size={12} />
+        </span>
         <span className="ml-2 system-xs-regular">{t(($) => $.back, { ns: 'login' })}</span>
-      </div>
+      </button>
     </div>
   )
 }