fix(web): make dataset sidebar menu items buttons (#40248)

oxlint-suppressions.json

@@ -180,14 +180,6 @@
       "count": 4
     }
   },
-  "web/app/components/app-sidebar/dataset-info/menu-item.tsx": {
-    "jsx_a11y/click-events-have-key-events": {
-      "count": 1
-    },
-    "jsx_a11y/no-static-element-interactions": {
-      "count": 1
-    }
-  },
   "web/app/components/app/annotation/add-annotation-modal/edit-item/index.tsx": {
     "erasable-syntax-only/enums": {
       "count": 1

web/app/components/app-sidebar/dataset-info/__tests__/index.spec.tsx

@@ -240,33 +240,47 @@ describe('MenuItem', () => {
       render(<MenuItem name="Edit" Icon={TestEditIcon} handleClick={handleClick} />)
 
       // Act
-      await user.click(screen.getByText('Edit'))
+      await user.click(screen.getByRole('button', { name: 'Edit' }))
 
       // Assert
       expect(handleClick).toHaveBeenCalledTimes(1)
     })
 
-    it('should stop propagation before invoking the handler', () => {
-      const parentClick = vi.fn()
+    it.each([
+      ['Enter', '{Enter}'],
+      ['Space', ' '],
+    ])('should be reachable and activate with %s', async (_, key) => {
+      const user = userEvent.setup()
       const handleClick = vi.fn()
+      render(<MenuItem name="Edit" Icon={TestEditIcon} handleClick={handleClick} />)
 
-      render(
-        <div role="button" tabIndex={0} onClick={parentClick} onKeyDown={parentClick}>
-          <MenuItem name="Edit" Icon={TestEditIcon} handleClick={handleClick} />
-        </div>,
-      )
+      await user.tab()
+      expect(screen.getByRole('button', { name: 'Edit' })).toHaveFocus()
 
-      fireEvent.click(screen.getByText('Edit'))
+      await user.keyboard(key)
+      expect(handleClick).toHaveBeenCalledTimes(1)
+    })
+
+    it('should stop propagation before invoking the handler', () => {
+      const handleClick = vi.fn()
+      render(<MenuItem name="Edit" Icon={TestEditIcon} handleClick={handleClick} />)
+
+      const menuItem = screen.getByRole('button', { name: 'Edit' })
+      const event = createEvent.click(menuItem)
+      const stopPropagation = vi.spyOn(event, 'stopPropagation')
+
+      fireEvent(menuItem, event)
 
       expect(handleClick).toHaveBeenCalledTimes(1)
-      expect(parentClick).not.toHaveBeenCalled()
+      expect(stopPropagation).toHaveBeenCalledTimes(1)
     })
 
     it('should prevent the default action when no click handler is provided', () => {
       render(<MenuItem name="Edit" Icon={TestEditIcon} />)
 
-      const event = createEvent.click(screen.getByText('Edit'))
-      fireEvent(screen.getByText('Edit'), event)
+      const menuItem = screen.getByRole('button', { name: 'Edit' })
+      const event = createEvent.click(menuItem)
+      fireEvent(menuItem, event)
 
       expect(event.defaultPrevented).toBe(true)
     })

web/app/components/app-sidebar/dataset-info/menu-item.tsx

@@ -9,17 +9,18 @@ type MenuItemProps = {
 
 const MenuItem = ({ Icon, name, handleClick }: MenuItemProps) => {
   return (
-    <div
-      className="flex items-center gap-x-1 rounded-lg px-2 py-1.5 hover:bg-state-base-hover"
+    <button
+      type="button"
+      className="flex appearance-none items-center gap-x-1 rounded-lg px-2 py-1.5 text-start outline-hidden hover:bg-state-base-hover focus-visible:ring-2 focus-visible:ring-state-accent-solid"
       onClick={(e) => {
         e.preventDefault()
         e.stopPropagation()
         handleClick?.()
       }}
     >
-      <Icon className="size-4 text-text-tertiary" />
+      <Icon aria-hidden className="size-4 text-text-tertiary" />
       <span className="px-1 system-md-regular text-text-secondary">{name}</span>
-    </div>
+    </button>
   )
 }