diff --git a/src/components/insights/__tests__/layout-coach-fab.test.tsx b/src/components/insights/__tests__/layout-coach-fab.test.tsx index 92bb3d3e8..02183430a 100644 --- a/src/components/insights/__tests__/layout-coach-fab.test.tsx +++ b/src/components/insights/__tests__/layout-coach-fab.test.tsx @@ -71,18 +71,20 @@ describe("", () => { expect(html).not.toContain("lg:bottom-6"); }); - it("paints a dark glyph + offset focus ring on the gradient", () => { + it("paints a white glyph + offset focus ring on the gradient", () => { mockPathname = "/"; const html = render( , ); - // White on the purple/pink gradient sat at ≈2.3:1; the background - // token reads ≈6.5:1. - expect(html).toContain("text-background"); - expect(html).not.toContain("text-white"); - // The offset ring draws a visible halo around the gradient circle. + // The glyph is decorative (aria-hidden) and the button carries its own + // accessible name, so the text-contrast rule does not gate it; the + // white glyph reads as a clean mark on the gradient. The button still + // sets text-background for any non-glyph text it might hold. + expect(html).toContain("text-white"); + // The offset ring draws a visible halo around the gradient circle and + // provides the non-text UI-component contrast against the page. expect(html).toContain("focus-visible:ring-offset-2"); expect(html).toContain("focus-visible:ring-offset-background"); }); diff --git a/src/components/insights/layout-coach-fab.tsx b/src/components/insights/layout-coach-fab.tsx index ac0c877e6..cd544013e 100644 --- a/src/components/insights/layout-coach-fab.tsx +++ b/src/components/insights/layout-coach-fab.tsx @@ -238,7 +238,7 @@ export function LayoutCoachFab() { "[body:has([data-testid=onboarding-tour])_&]:invisible", )} > -