From 59999b821123865ffd100c749555293ac8d48f1a Mon Sep 17 00:00:00 2001 From: adilallo <39313955+adilallo@users.noreply.github.com> Date: Sun, 24 May 2026 16:55:07 -0600 Subject: [PATCH] Remove focus on feature grid section --- app/components/cards/Mini/Mini.container.tsx | 1 - .../FeatureGrid/FeatureGrid.container.tsx | 4 --- .../sections/FeatureGrid/FeatureGrid.types.ts | 1 - .../sections/FeatureGrid/FeatureGrid.view.tsx | 5 ++-- tests/components/FeatureGrid.test.tsx | 25 ++++++++++--------- tests/e2e/critical-journeys.spec.ts | 19 +++----------- 6 files changed, 18 insertions(+), 37 deletions(-) diff --git a/app/components/cards/Mini/Mini.container.tsx b/app/components/cards/Mini/Mini.container.tsx index 7397e63..eb9e753 100644 --- a/app/components/cards/Mini/Mini.container.tsx +++ b/app/components/cards/Mini/Mini.container.tsx @@ -79,7 +79,6 @@ const MiniContainer = memo( return { wrapperElement: "div" as const, wrapperProps: { - ...baseProps, className: "block", }, }; diff --git a/app/components/sections/FeatureGrid/FeatureGrid.container.tsx b/app/components/sections/FeatureGrid/FeatureGrid.container.tsx index a8b0ae6..a993dfb 100644 --- a/app/components/sections/FeatureGrid/FeatureGrid.container.tsx +++ b/app/components/sections/FeatureGrid/FeatureGrid.container.tsx @@ -27,7 +27,6 @@ const FeatureGridContainer = memo( panelContent: getAssetPath(featurePanelPath("support")), ...featurePanelLayout("support"), ariaLabel: t("featureGrid.features.decisionMaking.ariaLabel"), - href: "#decision-making", }, { backgroundColor: "bg-[var(--color-surface-invert-brand-lime)]", @@ -40,7 +39,6 @@ const FeatureGridContainer = memo( panelContent: getAssetPath(featurePanelPath("exercises")), ...featurePanelLayout("exercises"), ariaLabel: t("featureGrid.features.valuesAlignment.ariaLabel"), - href: "#values-alignment", }, { backgroundColor: "bg-[var(--color-surface-invert-brand-rust)]", @@ -53,7 +51,6 @@ const FeatureGridContainer = memo( panelContent: getAssetPath(featurePanelPath("guidance")), ...featurePanelLayout("guidance"), ariaLabel: t("featureGrid.features.membershipGuidance.ariaLabel"), - href: "#membership-guidance", }, { backgroundColor: "bg-[var(--color-surface-invert-brand-teal)]", @@ -66,7 +63,6 @@ const FeatureGridContainer = memo( panelContent: getAssetPath(featurePanelPath("tools")), ...featurePanelLayout("tools"), ariaLabel: t("featureGrid.features.conflictResolution.ariaLabel"), - href: "#conflict-resolution", }, ], [t], diff --git a/app/components/sections/FeatureGrid/FeatureGrid.types.ts b/app/components/sections/FeatureGrid/FeatureGrid.types.ts index e767831..b49af6c 100644 --- a/app/components/sections/FeatureGrid/FeatureGrid.types.ts +++ b/app/components/sections/FeatureGrid/FeatureGrid.types.ts @@ -13,7 +13,6 @@ export interface Feature { panelHeight: number; panelImageClassName?: string; ariaLabel: string; - href: string; } export interface FeatureGridViewProps extends FeatureGridProps { diff --git a/app/components/sections/FeatureGrid/FeatureGrid.view.tsx b/app/components/sections/FeatureGrid/FeatureGrid.view.tsx index 2555aaf..d639a74 100644 --- a/app/components/sections/FeatureGrid/FeatureGrid.view.tsx +++ b/app/components/sections/FeatureGrid/FeatureGrid.view.tsx @@ -26,7 +26,7 @@ function FeatureGridView({ >
@@ -52,8 +52,7 @@ function FeatureGridView({ panelHeight={feature.panelHeight} panelImageClassName={feature.panelImageClassName} ariaLabel={feature.ariaLabel} - href={feature.href} - featureGridShell + featureGridShell /> ))}
diff --git a/tests/components/FeatureGrid.test.tsx b/tests/components/FeatureGrid.test.tsx index d0e2f41..755ee93 100644 --- a/tests/components/FeatureGrid.test.tsx +++ b/tests/components/FeatureGrid.test.tsx @@ -46,20 +46,21 @@ describe("FeatureGrid (behavioral tests)", () => { ).toBeInTheDocument(); }); - it("renders all four feature cards", () => { + it("renders all four feature cards as static tiles", () => { render(); + expect(screen.getByText("Decision-making")).toBeInTheDocument(); + expect(screen.getByText("Values alignment")).toBeInTheDocument(); + expect(screen.getByText("Membership")).toBeInTheDocument(); + expect(screen.getByText("Conflict resolution")).toBeInTheDocument(); expect( - screen.getByRole("link", { name: "Decision-making support tools" }), - ).toBeInTheDocument(); - expect( - screen.getByRole("link", { name: "Values alignment exercises" }), - ).toBeInTheDocument(); - expect( - screen.getByRole("link", { name: "Membership guidance resources" }), - ).toBeInTheDocument(); - expect( - screen.getByRole("link", { name: "Conflict resolution tools" }), - ).toBeInTheDocument(); + screen.queryByRole("link", { name: "Decision-making support tools" }), + ).not.toBeInTheDocument(); + }); + + it("does not apply a focus ring to the entire grid shell", () => { + render(); + const shell = document.querySelector('[data-figma-node="18847-22410"]'); + expect(shell?.className).not.toContain("focus-within:ring-2"); }); it("has proper accessibility attributes", () => { diff --git a/tests/e2e/critical-journeys.spec.ts b/tests/e2e/critical-journeys.spec.ts index 9e3f334..ad7736a 100644 --- a/tests/e2e/critical-journeys.spec.ts +++ b/tests/e2e/critical-journeys.spec.ts @@ -129,24 +129,11 @@ test.describe("Critical User Journeys", () => { featureSection.locator("text=Conflict resolution"), ).toBeVisible(); - // Check feature links - Mini tiles render as tags with href="#..." - // There are 4 feature cards + 1 "Learn more" link = 5 total links - // We check for the specific feature card links + // Feature tiles are presentational — only the lockup "Learn more" is a link await expect( featureSection.locator('a[href="#decision-making"]'), - ).toBeVisible(); - await expect( - featureSection.locator('a[href="#values-alignment"]'), - ).toBeVisible(); - await expect( - featureSection.locator('a[href="#membership-guidance"]'), - ).toBeVisible(); - await expect( - featureSection.locator('a[href="#conflict-resolution"]'), - ).toBeVisible(); - - // Test feature card interactions - await page.locator('a[href="#decision-making"]').click(); + ).toHaveCount(0); + await expect(featureSection.getByRole("link", { name: "Learn more" })).toBeVisible(); }); test("header navigation functionality", async ({ page }) => {