From f2c023e19ab8ced9a2fdd5809a455c3b7f43be59 Mon Sep 17 00:00:00 2001
From: Pontoporeia <pontoporeia@happyngreen.fr>
Date: Sun, 29 Mar 2026 16:31:26 +0200
Subject: [PATCH] admin nav: replace bare <a> links with <ul>/<li>, use
 aria-current instead of .active class
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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.
---
 TODO.md                  | 15 +++++----------
 public/assets/admin.css  | 37 +++++++++++++++++++++++++++++++++----
 templates/admin/head.php | 28 +++++++++++++++-------------
 3 files changed, 53 insertions(+), 27 deletions(-)

diff --git a/TODO.md b/TODO.md
index 862dd30..b27ec38 100644
--- a/TODO.md
+++ b/TODO.md
@@ -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)
 
diff --git a/public/assets/admin.css b/public/assets/admin.css
index aa7a85c..d66845d 100644
--- a/public/assets/admin.css
+++ b/public/assets/admin.css
@@ -47,7 +47,18 @@ html, body {
   font-weight: 400;
 }
 
-.admin-nav__link {
+/* Nav link list */
+.admin-nav__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  gap: 2.5rem;
+  flex: 1;
+}
+
+.admin-nav__list a {
   font-size: 0.85rem;
   letter-spacing: 0.1em;
   text-transform: uppercase;
@@ -57,10 +68,28 @@ html, body {
   transition: opacity 0.15s;
 }
 
-.admin-nav__link:hover,
-.admin-nav__link.active {
+.admin-nav__list a:hover,
+.admin-nav__list a[aria-current="page"] {
+  opacity: 1;
+  color: #fff;
+}
+
+.admin-nav__list a[aria-current="page"] {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
+  padding-bottom: 1px;
+}
+
+/* Logout link pushed to the far right */
+.admin-nav__logout {
+  margin-left: auto;
+}
+
+.admin-nav__logout a {
+  opacity: 0.6;
+}
+
+.admin-nav__logout a:hover {
   opacity: 1;
-  color: var(--white);
 }
 
 /* Main content area */
diff --git a/templates/admin/head.php b/templates/admin/head.php
index c9167da..50b47e5 100644
--- a/templates/admin/head.php
+++ b/templates/admin/head.php
@@ -28,17 +28,19 @@
         $currentPage = basename($_SERVER['PHP_SELF']);
         $thesisId = $_GET['id'] ?? null;
         ?>
-        <a href="/admin/" class="admin-nav__link <?= $currentPage === 'index.php' ? 'active' : '' ?>">Liste des TFE</a>
-        <a href="/admin/add.php" class="admin-nav__link <?= $currentPage === 'add.php' ? 'active' : '' ?>">Ajouter un TFE</a>
-        <a href="/admin/import.php" class="admin-nav__link <?= $currentPage === 'import.php' ? 'active' : '' ?>">Importer une liste de TFE</a>
-        <a href="/admin/pages.php" class="admin-nav__link <?= in_array($currentPage, ['pages.php','pages-edit.php']) ? 'active' : '' ?>">Pages statiques</a>
-        <a href="/admin/tags.php" class="admin-nav__link <?= $currentPage === 'tags.php' ? 'active' : '' ?>">Mots-clés</a>
-        <a href="/admin/system.php" class="admin-nav__link <?= in_array($currentPage, ['system.php','status.php','logs.php']) ? 'active' : '' ?>">Système</a>
-        <a href="/admin/account.php" class="admin-nav__link <?= $currentPage === 'account.php' ? 'active' : '' ?>">Compte</a>
-        <?php if ($thesisId && in_array($currentPage, ['edit.php', 'thanks.php'])): ?>
-            <a href="/admin/edit.php?id=<?= intval($thesisId) ?>" class="admin-nav__link <?= $currentPage === 'edit.php' ? 'active' : '' ?>">Modifier</a>
-        <?php endif; ?>
-        <?php if (defined('ADMIN_PASSWORD_HASH')): ?>
-            <a href="/admin/logout.php" class="admin-nav__link" style="margin-left:auto;opacity:.6;">Déconnexion</a>
-        <?php endif; ?>
+        <ul class="admin-nav__list">
+            <li><a href="/admin/" <?= $currentPage === 'index.php' ? 'aria-current="page"' : '' ?>>Liste des TFE</a></li>
+            <li><a href="/admin/add.php" <?= $currentPage === 'add.php' ? 'aria-current="page"' : '' ?>>Ajouter un TFE</a></li>
+            <li><a href="/admin/import.php" <?= $currentPage === 'import.php' ? 'aria-current="page"' : '' ?>>Importer une liste de TFE</a></li>
+            <li><a href="/admin/pages.php" <?= in_array($currentPage, ['pages.php','pages-edit.php']) ? 'aria-current="page"' : '' ?>>Pages statiques</a></li>
+            <li><a href="/admin/tags.php" <?= $currentPage === 'tags.php' ? 'aria-current="page"' : '' ?>>Mots-clés</a></li>
+            <li><a href="/admin/system.php" <?= in_array($currentPage, ['system.php','status.php','logs.php']) ? 'aria-current="page"' : '' ?>>Système</a></li>
+            <li><a href="/admin/account.php" <?= $currentPage === 'account.php' ? 'aria-current="page"' : '' ?>>Compte</a></li>
+            <?php if ($thesisId && in_array($currentPage, ['edit.php', 'thanks.php'])): ?>
+            <li><a href="/admin/edit.php?id=<?= intval($thesisId) ?>" <?= $currentPage === 'edit.php' ? 'aria-current="page"' : '' ?>>Modifier</a></li>
+            <?php endif; ?>
+            <?php if (defined('ADMIN_PASSWORD_HASH')): ?>
+            <li class="admin-nav__logout"><a href="/admin/logout.php">Déconnexion</a></li>
+            <?php endif; ?>
+        </ul>
     </nav>