fix(web): use button for publisher access (#40361)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

oxlint-suppressions.json

@@ -284,14 +284,6 @@
       "count": 1
     }
   },
-  "web/app/components/app/app-publisher/sections.tsx": {
-    "jsx_a11y/click-events-have-key-events": {
-      "count": 1
-    },
-    "jsx_a11y/no-static-element-interactions": {
-      "count": 1
-    }
-  },
   "web/app/components/app/configuration/config-prompt/__tests__/index.spec.tsx": {
     "jsx_a11y/click-events-have-key-events": {
       "count": 1

web/app/components/app/app-publisher/__tests__/sections.spec.tsx

@@ -1,6 +1,7 @@
 /* oxlint-disable typescript/no-explicit-any */
 import type { ReactNode } from 'react'
 import { fireEvent, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import { AccessMode } from '@/models/access-control'
 import { renderWithConsoleQuery as render } from '@/test/console/query-data'
 import { AppModeEnum } from '@/types/app'
@@ -85,19 +86,30 @@ describe('app-publisher sections', () => {
     expect(handleRestore).toHaveBeenCalled()
   })
 
-  it('should expose the access control warning when subjects are missing', () => {
+  it('should expose the access control warning and open access settings from the keyboard', async () => {
+    const user = userEvent.setup()
+    const onClick = vi.fn()
+
     render(
       <PublisherAccessSection
         enabled
         isAppAccessSet={false}
         isLoading={false}
         accessMode={AccessMode.SPECIFIC_GROUPS_MEMBERS}
-        onClick={vi.fn()}
+        onClick={onClick}
       />,
     )
 
     expect(screen.getByText(/(?:^|\.)publishApp\.notSet(?=$|:)/)).toBeInTheDocument()
     expect(screen.getByText(/(?:^|\.)publishApp\.notSetDesc(?=$|:)/)).toBeInTheDocument()
+
+    const accessButton = screen.getByRole('button', {
+      name: /accessControlDialog\.accessItems\.specific/,
+    })
+    accessButton.focus()
+    await user.keyboard('{Enter}')
+
+    expect(onClick).toHaveBeenCalledOnce()
   })
 
   it('should render the publish update action when the draft has not been published yet', () => {

web/app/components/app/app-publisher/sections.tsx

@@ -88,12 +88,12 @@ export const AccessModeDisplay = ({ mode }: { mode?: keyof typeof ACCESS_MODE_MA
 
   return (
     <>
-      <span className={`${icon} size-4 shrink-0 text-text-secondary`} />
-      <div className="grow truncate">
+      <span aria-hidden className={`${icon} size-4 shrink-0 text-text-secondary`} />
+      <span className="grow truncate">
         <span className="system-sm-medium text-text-secondary">
           {t(($) => $[`accessControlDialog.accessItems.${label}`], { ns: 'app' })}
         </span>
-      </div>
+      </span>
     </>
   )
 }
@@ -219,22 +219,23 @@ export const PublisherAccessSection = ({
               {t(($) => $['publishApp.title'], { ns: 'app' })}
             </p>
           </div>
-          <div
-            className="flex h-8 cursor-pointer items-center gap-x-0.5 rounded-lg bg-components-input-bg-normal py-1 pr-2 pl-2.5 hover:bg-primary-50 hover:text-text-accent"
+          <button
+            type="button"
+            className="flex h-8 w-full cursor-pointer appearance-none items-center gap-x-0.5 rounded-lg border-0 bg-components-input-bg-normal py-1 pr-2 pl-2.5 text-start outline-hidden hover:bg-primary-50 hover:text-text-accent focus-visible:ring-2 focus-visible:ring-state-accent-solid"
             onClick={onClick}
           >
-            <div className="flex grow items-center gap-x-1.5 overflow-hidden pr-1">
+            <span className="flex grow items-center gap-x-1.5 overflow-hidden pr-1">
               <AccessModeDisplay mode={accessMode} />
-            </div>
+            </span>
             {!isAppAccessSet && (
-              <p className="shrink-0 system-xs-regular text-text-tertiary">
+              <span className="shrink-0 system-xs-regular text-text-tertiary">
                 {t(($) => $['publishApp.notSet'], { ns: 'app' })}
-              </p>
+              </span>
             )}
-            <div className="flex size-4 shrink-0 items-center justify-center">
-              <span className="i-ri-arrow-right-s-line size-4 text-text-quaternary" />
-            </div>
-          </div>
+            <span className="flex size-4 shrink-0 items-center justify-center">
+              <span aria-hidden className="i-ri-arrow-right-s-line size-4 text-text-quaternary" />
+            </span>
+          </button>
           {!isAppAccessSet && (
             <p className="mt-1 system-xs-regular text-text-warning">
               {t(($) => $['publishApp.notSetDesc'], { ns: 'app' })}