fix(web): use a button for unauthorized logout (#40198)

oxlint-suppressions.json

@@ -96,14 +96,6 @@
       "count": 1
     }
   },
-  "web/app/(shareLayout)/components/authenticated-layout.tsx": {
-    "jsx_a11y/click-events-have-key-events": {
-      "count": 1
-    },
-    "jsx_a11y/no-static-element-interactions": {
-      "count": 1
-    }
-  },
   "web/app/(shareLayout)/webapp-reset-password/check-code/page.tsx": {
     "jsx_a11y/click-events-have-key-events": {
       "count": 1

web/app/(shareLayout)/components/__tests__/authenticated-layout.spec.tsx

@@ -1,5 +1,7 @@
 import type { AppData, AppMeta } from '@/models/share'
 import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { webAppLogout } from '@/service/webapp-auth'
 import AuthenticatedLayout from '../authenticated-layout'
 
 type QueryState<TData> = {
@@ -17,6 +19,7 @@ const updateAppInfo = vi.fn()
 const updateAppParams = vi.fn()
 const updateWebAppMeta = vi.fn()
 const updateUserCanAccessApp = vi.fn()
+const replace = vi.fn()
 
 const mockWebAppState = {
   shareCode: 'share-code',
@@ -74,7 +77,7 @@ vi.mock('@/context/web-app-context', () => ({
 vi.mock('@/next/navigation', () => ({
   usePathname: () => '/workflow/share-code',
   useRouter: () => ({
-    replace: vi.fn(),
+    replace,
   }),
   useSearchParams: () => new URLSearchParams(),
 }))
@@ -161,4 +164,16 @@ describe('AuthenticatedLayout', () => {
       expect(screen.queryByText('Workflow form content')).not.toBeInTheDocument()
     })
   })
+
+  it('should expose the unauthorized logout action as a button', async () => {
+    const user = userEvent.setup()
+    userCanAccessAppQueryState.data = { result: false }
+
+    renderLayout()
+
+    await user.click(screen.getByRole('button', { name: 'common.userProfile.logout' }))
+
+    expect(webAppLogout).toHaveBeenCalledWith('share-code')
+    expect(replace).toHaveBeenCalledWith('/webapp-signin?redirect_url=%2Fworkflow%2Fshare-code')
+  })
 })

web/app/(shareLayout)/components/authenticated-layout.tsx

@@ -96,9 +96,13 @@ const AuthenticatedLayout = ({ children }: { children: React.ReactNode }) => {
     return (
       <div className="flex h-full flex-col items-center justify-center gap-y-2">
         <AppUnavailable className="size-auto" code={403} unknownReason="no permission." />
-        <span className="cursor-pointer system-sm-regular text-text-tertiary" onClick={backToHome}>
+        <button
+          type="button"
+          className="cursor-pointer appearance-none system-sm-regular text-text-tertiary focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden"
+          onClick={backToHome}
+        >
           {t(($) => $['userProfile.logout'], { ns: 'common' })}
-        </span>
+        </button>
       </div>
     )
   }