diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index 572d5aa5d..7de913619 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -3,7 +3,7 @@ import { Link } from "react-router"; import { Sun, Moon, Menu, X, ExternalLink } from "lucide-react"; import { NavLink } from "@/components/NavLink"; import { useTheme } from "@/hooks/useTheme"; -import { COMMUNITY_URL } from "@/data/constants"; +import { COMMUNITY_URL, SITE_NAME } from "@/data/constants"; import { cn } from "@/lib/utils"; const logoDark = `${import.meta.env.BASE_URL}brand/offon-logo-dark-color.svg`; const logoLight = `${import.meta.env.BASE_URL}brand/offon-logo-light-mono.svg`; @@ -129,7 +129,7 @@ export const Navbar = (): JSX.Element => {
{/* Dark logo is high-priority: it's visible in the default (dark) theme. Light logo uses auto priority since it's hidden until the user switches theme. */} - + {SITE_NAME} diff --git a/src/test/navbar.test.tsx b/src/test/navbar.test.tsx index 1bab7e3ad..331c74cbc 100644 --- a/src/test/navbar.test.tsx +++ b/src/test/navbar.test.tsx @@ -35,7 +35,11 @@ describe("Navbar - logo", () => { const logoLink = screen.getByRole("link", { name: "offon.dev" }); const imgs = logoLink.querySelectorAll("img"); expect(imgs).toHaveLength(2); - expect(imgs[0].getAttribute("aria-hidden")).toBe("true"); + // Dark logo: meaningful alt text for SEO, no aria-hidden per ACCESSIBILITY.md rule + expect(imgs[0].getAttribute("alt")).toBe("offon.dev"); + expect(imgs[0].getAttribute("aria-hidden")).toBeNull(); + // Light logo: decorative (dark logo carries the alt), aria-hidden required + expect(imgs[1].getAttribute("alt")).toBe(""); expect(imgs[1].getAttribute("aria-hidden")).toBe("true"); });