From 8b908d61508942118393f6dd3bd70158dc37cc7e Mon Sep 17 00:00:00 2001
From: yyh <92089059+lyzno1@users.noreply.github.com>
Date: Mon, 10 Aug 2026 10:56:18 +0800
Subject: [PATCH] fix(web): use buttons for pricing categories (#40360)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
---
 oxlint-suppressions.json                      |  8 ------
 .../billing/pricing-modal-flow.test.tsx       | 27 ++++++++++++++-----
 .../billing/pricing/plan-switcher/tab.tsx     |  8 +++---
 3 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/oxlint-suppressions.json b/oxlint-suppressions.json
index 28eb5a30017..e2ca46bb818 100644
--- a/oxlint-suppressions.json
+++ b/oxlint-suppressions.json
@@ -1958,14 +1958,6 @@
       "count": 1
     }
   },
-  "web/app/components/billing/pricing/plan-switcher/tab.tsx": {
-    "jsx_a11y/click-events-have-key-events": {
-      "count": 1
-    },
-    "jsx_a11y/no-static-element-interactions": {
-      "count": 1
-    }
-  },
   "web/app/components/billing/pricing/plans/self-hosted-plan-item/button.tsx": {
     "eslint-react/static-components": {
       "count": 2
diff --git a/web/__tests__/billing/pricing-modal-flow.test.tsx b/web/__tests__/billing/pricing-modal-flow.test.tsx
index ffca3a4b80f..08978362099 100644
--- a/web/__tests__/billing/pricing-modal-flow.test.tsx
+++ b/web/__tests__/billing/pricing-modal-flow.test.tsx
@@ -175,6 +175,15 @@ describe('Pricing Modal Flow', () => {
     it('should default to cloud category with three cloud plans', () => {
       render(<Pricing onCancel={onCancel} />)
 
+      expect(screen.getByRole('button', { name: 'billing.plansCommon.cloud' })).toHaveAttribute(
+        'aria-pressed',
+        'true',
+      )
+      expect(screen.getByRole('button', { name: 'billing.plansCommon.self' })).toHaveAttribute(
+        'aria-pressed',
+        'false',
+      )
+
       // Three cloud plans: sandbox, professional, team
       expect(screen.getByText(/plans\.sandbox\.name/i)).toBeInTheDocument()
       expect(screen.getByText(/plans\.professional\.name/i)).toBeInTheDocument()
@@ -205,9 +214,13 @@ describe('Pricing Modal Flow', () => {
       const user = userEvent.setup()
       render(<Pricing onCancel={onCancel} />)
 
-      // Click the self-hosted tab
-      const selfTab = screen.getByText(/plansCommon\.self/i)
-      await user.click(selfTab)
+      const selfHostedButton = screen.getByRole('button', {
+        name: 'billing.plansCommon.self',
+      })
+      selfHostedButton.focus()
+      await user.keyboard(' ')
+
+      expect(selfHostedButton).toHaveAttribute('aria-pressed', 'true')
 
       // Self-hosted plans should appear
       expect(screen.getByText(/plans\.community\.name/i)).toBeInTheDocument()
@@ -222,7 +235,7 @@ describe('Pricing Modal Flow', () => {
       const user = userEvent.setup()
       render(<Pricing onCancel={onCancel} />)
 
-      await user.click(screen.getByText(/plansCommon\.self/i))
+      await user.click(screen.getByRole('button', { name: 'billing.plansCommon.self' }))
 
       // Annual billing toggle should not be visible
       expect(screen.queryByText(/plansCommon\.annualBilling/i)).not.toBeInTheDocument()
@@ -232,7 +245,7 @@ describe('Pricing Modal Flow', () => {
       const user = userEvent.setup()
       render(<Pricing onCancel={onCancel} />)
 
-      await user.click(screen.getByText(/plansCommon\.self/i))
+      await user.click(screen.getByRole('button', { name: 'billing.plansCommon.self' }))
 
       expect(screen.queryByText('billing.plansCommon.taxTip')).not.toBeInTheDocument()
     })
@@ -242,11 +255,11 @@ describe('Pricing Modal Flow', () => {
       render(<Pricing onCancel={onCancel} />)
 
       // Switch to self-hosted
-      await user.click(screen.getByText(/plansCommon\.self/i))
+      await user.click(screen.getByRole('button', { name: 'billing.plansCommon.self' }))
       expect(screen.queryByText(/plans\.sandbox\.name/i)).not.toBeInTheDocument()
 
       // Switch back to cloud
-      await user.click(screen.getByText(/plansCommon\.cloud/i))
+      await user.click(screen.getByRole('button', { name: 'billing.plansCommon.cloud' }))
       expect(screen.getByText(/plans\.sandbox\.name/i)).toBeInTheDocument()
       expect(screen.getByText(/plansCommon\.annualBilling/i)).toBeInTheDocument()
     })
diff --git a/web/app/components/billing/pricing/plan-switcher/tab.tsx b/web/app/components/billing/pricing/plan-switcher/tab.tsx
index 22ae96ee839..318f501482d 100644
--- a/web/app/components/billing/pricing/plan-switcher/tab.tsx
+++ b/web/app/components/billing/pricing/plan-switcher/tab.tsx
@@ -16,8 +16,10 @@ const Tab = <T,>({ Icon, value, label, isActive, onClick }: TabProps<T>) => {
   }, [onClick, value])
 
   return (
-    <div
-      className="flex cursor-pointer items-center justify-center gap-x-2 px-5 py-3"
+    <button
+      type="button"
+      aria-pressed={isActive}
+      className="flex cursor-pointer appearance-none items-center justify-center gap-x-2 px-5 py-3 outline-hidden focus-visible:ring-2 focus-visible:ring-state-accent-solid"
       onClick={handleClick}
     >
       <Icon isActive={isActive} />
@@ -29,7 +31,7 @@ const Tab = <T,>({ Icon, value, label, isActive, onClick }: TabProps<T>) => {
       >
         {label}
       </span>
-    </div>
+    </button>
   )
 }