admin nav: replace bare <a> links with <ul>/<li>, use aria-current instead of .active class

- templates/admin/head.php: all 7 nav links (+ conditional Modifier + Déconnexion)
  wrapped in <ul class="admin-nav__list">/<li>; .active class removed, replaced
  with aria-current="page" on each <a> based on $currentPage match
- Déconnexion link: removed inline style="margin-left:auto;opacity:.6;"; moved to
  new .admin-nav__logout <li> class in admin.css
- public/assets/admin.css: replaced .admin-nav__link rules with .admin-nav__list a
  selectors; added .admin-nav__list (flex list, gap 2.5rem, flex:1); added
  .admin-nav__list a[aria-current="page"] rule (border-bottom underline indicator);
  added .admin-nav__logout / .admin-nav__logout a for the push-right logout item
- Removes .admin-nav__link class entirely from the codebase (was only used in
  templates/admin/head.php and admin.css)

Fixes WCAG 2.4.6 (nav landmark content model), 1.4.1 (colour-only active indicator),
and section VIII of the semantic HTML admin audit.
This commit is contained in:
Pontoporeia
2026-03-29 16:31:26 +02:00
parent ac872c1fe0
commit f2c023e19a
3 changed files with 53 additions and 27 deletions

15
TODO.md
View File

@@ -757,17 +757,12 @@ Once the above is applied, the following classes become deletable (element name
### VIII - `templates/admin/head.php` (admin nav)
- [ ] **Admin nav links are bare `<a>` tags in a flat `<nav>`** - identical problem as the public
nav. All seven nav links (`Liste des TFE`, `Ajouter`, `Importer`, `Pages statiques`,
`Mots-clés`, `Système`, `Compte`) plus the conditional `Modifier` and `Déconnexion` links
are direct children of `<nav>`. Replace with `<ul>/<li>` children.
Active state `.active` class → `aria-current="page"` on the `<a>`. Remove `.admin-nav__link`
as a selector; use `nav ul a` scoped to `.admin-nav`. The `Déconnexion` link with
`style="margin-left:auto;opacity:.6;"` → becomes `nav ul li:last-child a` or a utility
class, removing the inline style.
- [x] **Admin nav links are bare `<a>` tags in a flat `<nav>`** - replaced with `<ul class="admin-nav__list">/<li>` children.
Active state `.active` class → `aria-current="page"` on the `<a>`. Removed `.admin-nav__link`
selector; CSS now uses `.admin-nav__list a` scoped to the list. The `Déconnexion` link
`style="margin-left:auto;opacity:.6;"``.admin-nav__logout` utility class, inline style removed.
- [ ] **`<nav class="admin-nav">` has no `aria-label`** - add `aria-label="Navigation admin"` to
distinguish it from any other landmark on the page.
- [x] **`<nav class="admin-nav">` has no `aria-label`** - `aria-label="Navigation admin"` was already present; confirmed.
### IX - `public/admin/add.php` & `public/admin/edit.php` (TFE forms)