From 02de007ac26c927620aea19985b303d51ca99c58 Mon Sep 17 00:00:00 2001
From: Sinduri Guntupalli <sinduri.guntupalli@dynatrace.com>
Date: Fri, 5 Jun 2026 15:14:05 +0200
Subject: [PATCH] fix: add meaningful alt text to primary navbar logo for SEO

The dark logo image had alt="" which caused SEO tools to flag it as
missing alt text. Per WCAG images-of-text guidance, logo wordmarks use
the brand name as alt text.

The light logo retains alt="" + aria-hidden="true" (decorative) since
the dark logo carries the accessible description for the pair. The
link's aria-label is kept so the accessible name is present in light
mode when the dark logo is display:none.

Signed-off-by: Sinduri Guntupalli <sinduri.guntupalli@dynatrace.com>
---
 src/components/Navbar.tsx | 4 ++--
 src/test/navbar.test.tsx  | 6 +++++-
 2 files changed, 7 insertions(+), 3 deletions(-)

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 => {
       <div className="mx-auto flex max-w-6xl items-center justify-between px-6 py-1.5">
         <Link to="/" aria-label="offon.dev" className="logo-link flex items-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-sm">
           {/* 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. */}
-          <img src={logoDark} alt="" aria-hidden="true" width={130} height={33} loading="eager" fetchPriority="high" className="h-8 dark:block hidden" />
+          <img src={logoDark} alt={SITE_NAME} width={130} height={33} loading="eager" fetchPriority="high" className="h-8 dark:block hidden" />
           <img src={logoLight} alt="" aria-hidden="true" width={130} height={33} loading="eager" className="h-8 block dark:hidden" />
         </Link>
 
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");
   });