fix(web): make verification back actions keyboard accessible (#40196)

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
     }

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>
   )
 }

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>
   )
 }

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>
   )
 }

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()

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>
   )
 }

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>
   )
 }