mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-08 12:32:43 +00:00
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:
1 parent
5ffe7502c2
commit
65cfb2799a
1 file changed
+9
-3
@@ -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>
|
||||
);
|
||||
|
||||
Reference in new issue
Block a user