From 4ba06615a1b8bbcdb2777e30a396b96d4b9f2754 Mon Sep 17 00:00:00 2001
From: Semih Yesilyurt <semihyesilyurt@gmail.com>
Date: Mon, 25 May 2026 15:31:08 +0300
Subject: [PATCH] style(web): satisfy biome on subscription page (format +
 a11y)

Run biome --write formatting on the subscription page + new tests, and
swap the trial-progress banner's role="status" for aria-live="polite"
(keeps the polite live-region announcement without tripping
lint/a11y/useSemanticElements).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../subscription/__tests__/plan-helper-trial.test.tsx       | 4 +---
 .../subscription/__tests__/value-reinforcement.test.tsx     | 6 +-----
 apps/web/src/routes/dashboard/subscription/index.tsx        | 6 ++----
 3 files changed, 4 insertions(+), 12 deletions(-)

diff --git a/apps/web/src/routes/dashboard/subscription/__tests__/plan-helper-trial.test.tsx b/apps/web/src/routes/dashboard/subscription/__tests__/plan-helper-trial.test.tsx
index d0ffd31..b676d33 100644
--- a/apps/web/src/routes/dashboard/subscription/__tests__/plan-helper-trial.test.tsx
+++ b/apps/web/src/routes/dashboard/subscription/__tests__/plan-helper-trial.test.tsx
@@ -43,9 +43,7 @@ describe("TrialCtaCard value hook", () => {
   });
 
   test("pending state disables the CTA and shows loading label", () => {
-    const { getByText, container } = render(
-      <TrialCtaCard onStartTrial={vi.fn()} pending={true} />,
-    );
+    const { getByText, container } = render(<TrialCtaCard onStartTrial={vi.fn()} pending={true} />);
     expect(getByText("common.loading")).toBeTruthy();
     expect(container.querySelector("button")?.hasAttribute("disabled")).toBe(true);
   });
diff --git a/apps/web/src/routes/dashboard/subscription/__tests__/value-reinforcement.test.tsx b/apps/web/src/routes/dashboard/subscription/__tests__/value-reinforcement.test.tsx
index e1c7931..0a5bc44 100644
--- a/apps/web/src/routes/dashboard/subscription/__tests__/value-reinforcement.test.tsx
+++ b/apps/web/src/routes/dashboard/subscription/__tests__/value-reinforcement.test.tsx
@@ -23,11 +23,7 @@ vi.mock("@/lib/posthog", () => ({
   setPeopleProperties: vi.fn(),
 }));
 
-import {
-  BillingPeriodToggle,
-  PlanGrid,
-  plans,
-} from "@/routes/dashboard/subscription/index";
+import { BillingPeriodToggle, PlanGrid, plans } from "@/routes/dashboard/subscription/index";
 
 describe("per-day price anchor (PlanGrid)", () => {
   test("renders a per-day line on every plan card", () => {
diff --git a/apps/web/src/routes/dashboard/subscription/index.tsx b/apps/web/src/routes/dashboard/subscription/index.tsx
index 281f4d5..acaa4fa 100644
--- a/apps/web/src/routes/dashboard/subscription/index.tsx
+++ b/apps/web/src/routes/dashboard/subscription/index.tsx
@@ -1026,9 +1026,7 @@ export function BillingPeriodToggle({
         ))}
       </div>
       {period === "yearly" && (
-        <p className="text-xs font-medium text-primary">
-          {t("subscription.yearlyFreeMonths")}
-        </p>
+        <p className="text-xs font-medium text-primary">{t("subscription.yearlyFreeMonths")}</p>
       )}
     </div>
   );
@@ -1635,7 +1633,7 @@ export function TrialProgressBanner({
   const pct = Math.round((elapsed / totalDays) * 100);
   return (
     <div
-      role="status"
+      aria-live="polite"
       className="animate-fade-in-up flex flex-col gap-3 rounded-2xl border border-brand/25 bg-brand/5 px-5 py-4 sm:flex-row sm:items-center"
     >
       <div className="flex flex-1 items-start gap-3">