refactor(web): use css icon for version filter

oxlint-suppressions.json

@@ -5269,14 +5269,6 @@
       "count": 4
     }
   },
-  "web/app/components/workflow/panel/version-history-panel/filter/filter-item.tsx": {
-    "jsx_a11y/click-events-have-key-events": {
-      "count": 1
-    },
-    "jsx_a11y/no-static-element-interactions": {
-      "count": 1
-    }
-  },
   "web/app/components/workflow/panel/version-history-panel/index.tsx": {
     "jsx_a11y/click-events-have-key-events": {
       "count": 2

web/app/components/workflow/panel/version-history-panel/filter/__tests__/filter-item.spec.tsx

@@ -7,7 +7,7 @@ describe('FilterItem', () => {
   it('renders the label, fires selection, and shows the check mark when selected', async () => {
     const user = userEvent.setup()
     const onClick = vi.fn()
-    const { container } = render(
+    render(
       <FilterItem
         item={{
           key: WorkflowVersionFilterOptions.onlyYours,
@@ -18,9 +18,12 @@ describe('FilterItem', () => {
       />,
     )
 
-    await user.click(screen.getByText('Only yours'))
+    const option = screen.getByRole('button', { name: 'Only yours' })
+    expect(option).toHaveAttribute('aria-pressed', 'true')
+
+    option.focus()
+    await user.keyboard(' ')
 
     expect(onClick).toHaveBeenCalledWith(WorkflowVersionFilterOptions.onlyYours)
-    expect(container.querySelector('svg')).not.toBeNull()
   })
 })

web/app/components/workflow/panel/version-history-panel/filter/__tests__/index.spec.tsx

@@ -1,7 +1,6 @@
 import { fireEvent, render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { WorkflowVersionFilterOptions } from '../../../../types'
-import FilterItem from '../filter-item'
 import FilterSwitch from '../filter-switch'
 import Filter from '../index'
 
@@ -29,32 +28,6 @@ describe('VersionHistory Filter Components', () => {
     })
   })
 
-  // Filter items should show the current selection and forward the option key.
-  describe('FilterItem', () => {
-    it('should call onClick with the selected filter key', async () => {
-      const user = userEvent.setup()
-      const onClick = vi.fn()
-
-      const { container } = render(
-        <FilterItem
-          item={{
-            key: WorkflowVersionFilterOptions.onlyYours,
-            name: 'Only Yours',
-          }}
-          isSelected
-          onClick={onClick}
-        />,
-      )
-
-      expect(screen.getByText('Only Yours')).toBeInTheDocument()
-      expect(container.querySelector('svg')).toBeInTheDocument()
-
-      await user.click(screen.getByText('Only Yours'))
-
-      expect(onClick).toHaveBeenCalledWith(WorkflowVersionFilterOptions.onlyYours)
-    })
-  })
-
   // The composed filter popover should open, list options, and delegate actions.
   describe('Filter', () => {
     it('should open the menu and forward option and switch actions', async () => {
@@ -79,7 +52,9 @@ describe('VersionHistory Filter Components', () => {
       expect(screen.getByText('workflow.versionHistory.filter.all')).toBeInTheDocument()
       expect(screen.getByText('workflow.versionHistory.filter.onlyYours')).toBeInTheDocument()
 
-      await user.click(screen.getByText('workflow.versionHistory.filter.onlyYours'))
+      await user.click(
+        screen.getByRole('button', { name: 'workflow.versionHistory.filter.onlyYours' }),
+      )
       expect(onClickFilterItem).toHaveBeenCalledWith(WorkflowVersionFilterOptions.onlyYours)
 
       fireEvent.click(screen.getByRole('switch'))

web/app/components/workflow/panel/version-history-panel/filter/filter-item.tsx

@@ -1,6 +1,5 @@
 import type { FC } from 'react'
 import type { WorkflowVersionFilterOptions } from '../../../types'
-import { RiCheckLine } from '@remixicon/react'
 import * as React from 'react'
 
 type FilterItemProps = {
@@ -14,15 +13,19 @@ type FilterItemProps = {
 
 const FilterItem: FC<FilterItemProps> = ({ item, isSelected = false, onClick }) => {
   return (
-    <div
-      className="flex cursor-pointer items-center justify-between gap-x-1 rounded-lg px-2 py-1.5 hover:bg-state-base-hover"
+    <button
+      type="button"
+      aria-pressed={isSelected}
+      className="flex w-full cursor-pointer appearance-none items-center justify-between gap-x-1 rounded-lg px-2 py-1.5 text-left outline-hidden hover:bg-state-base-hover focus-visible:ring-2 focus-visible:ring-state-accent-solid"
       onClick={() => {
         onClick(item.key)
       }}
     >
-      <div className="flex-1 system-md-regular text-text-primary">{item.name}</div>
-      {isSelected && <RiCheckLine className="size-4 shrink-0 text-text-accent" />}
-    </div>
+      <span className="flex-1 system-md-regular text-text-primary">{item.name}</span>
+      {isSelected && (
+        <span aria-hidden className="i-ri-check-line size-4 shrink-0 text-text-accent" />
+      )}
+    </button>
   )
 }