fix(a11y): label /admin overview quick-jump as a navigation landmark

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>
This commit is contained in:
Marc-André BombeckandClaude Opus 4.7 committed 2026-05-09 17:23:04 +02:00
1 parent 5ffe7502c2
commit 65cfb2799a
1 file changed
+9 -3
+9 -3
View File
@@ -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>
);