From 65cfb2799a42b9b30f8fa0b05fdcefabfd54ab53 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Sat, 9 May 2026 17:23:04 +0200
Subject: [PATCH] fix(a11y): label /admin overview quick-jump as a navigation
 landmark
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Wrap the section quick-jump list under `/admin` in a `<nav>` with
`aria-labelledby` pointing at its heading. Without the landmark,
screen-reader users navigating by region heard "list of links" with no
contextual label distinguishing it from the sidebar nav (which already
carries its own `aria-label`).

The `<h2>` keeps its existing copy ("Sections") and now serves as the
nav's accessible name via `aria-labelledby`. Visual is identical.

Picked up from the v1.5 phase-5 friction audit (item #10) — small fix,
clear win, no scope creep.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/app/admin/page.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
index c6d9a4cbe..dd7cc0caa 100644
--- a/src/app/admin/page.tsx
+++ b/src/app/admin/page.tsx
@@ -50,8 +50,14 @@ export default function AdminOverviewPage() {
 
         <StatusCardGrid />
 
-        <div>
-          <h2 className="text-muted-foreground mb-3 text-sm font-semibold tracking-wider uppercase">
+        {/* v1.5 phase-5: wrap the quick-jump list in a labelled <nav> so
+            screen-reader landmark navigation can distinguish it from the
+            sidebar nav (which already has its own aria-label). */}
+        <nav aria-labelledby="admin-overview-sections-heading">
+          <h2
+            id="admin-overview-sections-heading"
+            className="text-muted-foreground mb-3 text-sm font-semibold tracking-wider uppercase"
+          >
             {t("admin.shell.sectionsNav")}
           </h2>
           <ul className="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3">
@@ -79,7 +85,7 @@ export default function AdminOverviewPage() {
               );
             })}
           </ul>
-        </div>
+        </nav>
       </div>
     </AdminShell>
   );