From c352a392a1f98e9e8643e47da48c1114cc7a1219 Mon Sep 17 00:00:00 2001
From: Pontoporeia <pontoporeia@happyngreen.fr>
Date: Sun, 29 Mar 2026 16:06:59 +0200
Subject: [PATCH] =?UTF-8?q?search.php:=20semantic=20HTML=20overhaul=20of?=
 =?UTF-8?q?=20r=C3=A9pertoire=20index=20and=20results=20view?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace 4x <div class="repertoire-col"> with <section>; remove
  .repertoire-col__header class, CSS now targets section > h2
- Wrap all index link groups in <ul>/<li>; delete the four per-column
  link classes (year-index-item, cat-index-item, student-index-item,
  keyword-index-item); active state switches from .active to
  aria-current="page" on the <a>
- Add <h1 class="sr-only">Répertoire</h1> so the index view has a
  page-level heading (WCAG 2.4.6)
- Remove redundant <div class="search-results-view"> wrapper; padding
  moved to .results-grid and .search-results-header directly
- Replace <div class="results-grid"> with <ul class="results-grid">;
  each result card becomes <li><a class="result-card">
- Replace <span class="result-card__meta"> with <small> (ancillary
  metadata per HTML spec)
- Replace result-count <p> with <output role="status"> (computed value)
- Replace 3x <div class="search-filter-group"><label>…</label><select>
  with <label> directly wrapping <select> (implicit association,
  removes .search-filter-group divs); CSS updated to display:flex on
  the label itself
- Pagination wrapper changed to <nav aria-label="Pagination">;
  page-info span gets aria-current="page"
- search.css: delete .search-results-view, four index-item classes,
  .cat-index-group, .search-filter-group; consolidate years/other
  column link styles under .repertoire-col:first-child ul a and
  .repertoire-col:not(:first-child) ul a selectors; add ul reset rule
---
 TODO.md                  |  14 +++---
 public/assets/search.css |  75 ++++++++++-------------------
 public/search.php        | 101 +++++++++++++++++++++------------------
 3 files changed, 85 insertions(+), 105 deletions(-)

diff --git a/TODO.md b/TODO.md
index 04e22aa..dd14280 100644
--- a/TODO.md
+++ b/TODO.md
@@ -608,37 +608,37 @@ The design does **not** need to change - only the vocabulary of the markup.
 
 ### III - `public/search.php`
 
-- [ ] **`<div class="search-filter-group">`** wraps each label+select pair. Replace with
+- [x] **`<div class="search-filter-group">`** wraps each label+select pair. Replace with
       `<label>` directly wrapping `<select>` - one element instead of two, and the label/control
       association is implicit. Remove `.search-filter-group` and `.search-filter-label` (the
       `<label>` element is the label). CSS targets `form label` and `form select`.
 
-- [ ] **`<span class="search-filter-label">`** inside the filter group - deleted once the `<label>`
+- [x] **`<span class="search-filter-label">`** inside the filter group - deleted once the `<label>`
       approach is taken (see above).
 
-- [ ] **`<div class="search-results-view">`** is unnecessary nesting inside `<main>`. `<main>` is
+- [x] **`<div class="search-results-view">`** is unnecessary nesting inside `<main>`. `<main>` is
       already the landmark. Remove the wrapper; apply padding directly to `<main>` or its direct
       children.
 
-- [ ] **`<div class="results-grid">`** is a list of search results. Replace with `<ul class="results-grid">`.
+- [x] **`<div class="results-grid">`** is a list of search results. Replace with `<ul class="results-grid">`.
       Each `<a class="result-card">` becomes a `<li><a>` - the link text is made up of child `<span>`s
       which is correct. However `.result-card__authors` and `.result-card__title` `<span>`s would be
       better as `<strong>` (author, emphasis) and the title as plain text or `<span>`. The year/meta
       `<span class="result-card__meta">` → `<small>` (ancillary metadata).
 
-- [ ] **Répertoire index: `<div class="repertoire-index">`** - replace with `<div>` kept but its
+- [x] **Répertoire index: `<div class="repertoire-index">`** - replace with `<div>` kept but its
       four children are semantic candidates: each `.repertoire-col` is an independent index with a
       heading. Replace `<div class="repertoire-col">` with `<section>`. The heading
       (`<h2 class="repertoire-col__header">`) is already correct - `<h2>` is right. Remove
       `.repertoire-col__header`; CSS targets `section > h2` scoped inside `.repertoire-index`.
 
-- [ ] **`.year-index-item`, `.cat-index-item`, `.student-index-item`, `.keyword-index-item`** - all
+- [x] **`.year-index-item`, `.cat-index-item`, `.student-index-item`, `.keyword-index-item`** - all
       four are sequences of `<a>` links with `display:block`. They are lists. Wrap each group in
       `<ul>`; each link becomes `<li><a>`. The four custom classes collapse to a single `ul a`
       selector per column (or no class at all, scoped via `section`). The `.active` class on links
       → `aria-current="page"` on the `<a>`.
 
-- [ ] **`<p class="search-results-header">`** count line - remove `.search-results-header`; this is
+- [x] **`<p class="search-results-header">`** count line - remove `.search-results-header`; this is
       a plain `<p>` styled with `.search-main p:first-child` or just keep a lightweight class. Or use
       `<output>` since it is a computed result count.
 
diff --git a/public/assets/search.css b/public/assets/search.css
index c9fdb37..b768486 100644
--- a/public/assets/search.css
+++ b/public/assets/search.css
@@ -52,7 +52,7 @@
   border-right: none;
 }
 
-.repertoire-col__header {
+.repertoire-col > h2 {
   font-size: 0.72rem;
   letter-spacing: 0.1em;
   text-transform: uppercase;
@@ -63,8 +63,15 @@
   border-bottom: 1px solid var(--border-color);
 }
 
+/* Strip list chrome inside repertoire columns */
+.repertoire-col ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
 /* Years column - big bold numbers */
-.year-index-item {
+.repertoire-col:first-child ul a {
   display: block;
   font-size: 2.2rem;
   font-weight: 700;
@@ -76,16 +83,12 @@
   letter-spacing: -0.02em;
 }
 
-.year-index-item:hover,
-.year-index-item.active {
+.repertoire-col:first-child ul a:hover,
+.repertoire-col:first-child ul a[aria-current] {
   color: var(--purple);
 }
 
 /* Categories column */
-.cat-index-group {
-  margin-bottom: 0.6rem;
-}
-
 .cat-index-label {
   font-size: 0.72rem;
   letter-spacing: 0.08em;
@@ -97,7 +100,8 @@
   margin-top: 0.75rem;
 }
 
-.cat-index-item {
+/* Categories, students, keywords columns — shared link style */
+.repertoire-col:not(:first-child) ul a {
   display: block;
   font-size: 0.95rem;
   color: var(--black);
@@ -107,57 +111,26 @@
   transition: color 0.15s;
 }
 
-.cat-index-item:hover,
-.cat-index-item.active {
-  color: var(--purple);
-}
-
-/* Students column */
-.student-index-item {
-  display: block;
-  font-size: 0.95rem;
-  color: var(--black);
-  text-decoration: none;
-  padding: 0.1rem 0;
-  line-height: 1.4;
-  transition: color 0.15s;
-}
-
-.student-index-item:hover {
-  color: var(--purple);
-}
-
-/* Keywords column */
-.keyword-index-item {
-  display: block;
-  font-size: 0.95rem;
-  color: var(--black);
-  text-decoration: none;
-  padding: 0.1rem 0;
-  line-height: 1.4;
-  transition: color 0.15s;
-}
-
-.keyword-index-item:hover,
-.keyword-index-item.active {
+.repertoire-col:not(:first-child) ul a:hover,
+.repertoire-col:not(:first-child) ul a[aria-current] {
   color: var(--purple);
 }
 
 /* ---- Search results view (grid) ---- */
-.search-results-view {
-  padding: 1rem 1.5rem;
-}
-
 .search-results-header {
+  display: block;
   font-size: 0.85rem;
   color: var(--text-muted);
-  margin-bottom: 1rem;
+  margin: 1rem 1.5rem 0.5rem;
 }
 
 .results-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
   gap: 1.5rem;
+  list-style: none;
+  margin: 0;
+  padding: 0.5rem 1.5rem 1.5rem;
 }
 
 .result-card {
@@ -187,6 +160,7 @@
 .result-card__meta {
   font-size: 0.78rem;
   color: var(--purple);
+  font-style: normal;
 }
 
 /* Toggle button (index/results) */
@@ -229,18 +203,17 @@
   flex-wrap: wrap;
 }
 
-.search-filter-group {
+/* label now wraps the select directly — flex aligns label text + select */
+.search-filter-label {
   display: flex;
   align-items: center;
   gap: 0.4rem;
-}
-
-.search-filter-label {
   font-size: 0.78rem;
   color: var(--text-muted);
   text-transform: uppercase;
   letter-spacing: 0.06em;
   white-space: nowrap;
+  cursor: default;
 }
 
 .search-filter-select {
diff --git a/public/search.php b/public/search.php
index 8520a17..514410a 100644
--- a/public/search.php
+++ b/public/search.php
@@ -129,8 +129,7 @@ $extraCss = ['assets/search.css'];
     <form class="search-controls" method="GET" action="search.php">
         <input type="hidden" name="query" value="<?= htmlspecialchars($_GET['query'] ?? '') ?>">
 
-        <div class="search-filter-group">
-            <label class="search-filter-label" for="filter-year">Année</label>
+        <label class="search-filter-label" for="filter-year">Année
             <select class="search-filter-select" name="year" id="filter-year">
                 <option value="">Toutes</option>
                 <?php foreach ($years as $y): ?>
@@ -139,10 +138,9 @@ $extraCss = ['assets/search.css'];
                     </option>
                 <?php endforeach; ?>
             </select>
-        </div>
+        </label>
 
-        <div class="search-filter-group">
-            <label class="search-filter-label" for="filter-orientation">Orientation</label>
+        <label class="search-filter-label" for="filter-orientation">Orientation
             <select class="search-filter-select" name="orientation" id="filter-orientation">
                 <option value="">Toutes</option>
                 <?php foreach ($orientations as $o): ?>
@@ -152,10 +150,9 @@ $extraCss = ['assets/search.css'];
                     </option>
                 <?php endforeach; ?>
             </select>
-        </div>
+        </label>
 
-        <div class="search-filter-group">
-            <label class="search-filter-label" for="filter-ap">AP</label>
+        <label class="search-filter-label" for="filter-ap">AP
             <select class="search-filter-select" name="ap_program" id="filter-ap">
                 <option value="">Tous</option>
                 <?php foreach ($apPrograms as $ap): ?>
@@ -165,91 +162,96 @@ $extraCss = ['assets/search.css'];
                     </option>
                 <?php endforeach; ?>
             </select>
-        </div>
+        </label>
 
         <button type="submit" class="search-apply-btn">Filtrer</button>
         <a href="search.php" class="search-reset-link">Réinitialiser</a>
     </form>
 
     <main class="search-main" id="main-content">
-        <div class="search-results-view">
-            <p class="search-results-header"><?= $totalItems ?> résultat<?= $totalItems > 1 ? 's' : '' ?></p>
+        <output class="search-results-header" role="status"><?= $totalItems ?> résultat<?= $totalItems > 1 ? 's' : '' ?></output>
 
             <?php if (!empty($results)): ?>
-            <div class="results-grid">
+            <ul class="results-grid">
                 <?php foreach ($results as $item): ?>
-                <a href="tfe.php?id=<?= (int)$item['id'] ?>" class="result-card">
+                <li><a href="tfe.php?id=<?= (int)$item['id'] ?>" class="result-card">
                     <span class="result-card__authors"><?= htmlspecialchars($item['authors'] ?? '') ?></span>
                     <span class="result-card__title"><?= htmlspecialchars($item['title']) ?></span>
-                    <span class="result-card__meta"><?= htmlspecialchars($item['year']) ?><?php if (!empty($item['orientation'])): ?> · <?= htmlspecialchars($item['orientation']) ?><?php endif; ?></span>
-                </a>
+                    <small class="result-card__meta"><?= htmlspecialchars($item['year']) ?><?php if (!empty($item['orientation'])): ?> · <?= htmlspecialchars($item['orientation']) ?><?php endif; ?></small>
+                </a></li>
                 <?php endforeach; ?>
-            </div>
+            </ul>
 
             <?php if ($totalPages > 1): ?>
-            <div class="pagination-wrap">
+            <nav class="pagination-wrap" aria-label="Pagination">
                 <a href="?<?= http_build_query(array_merge($_GET, ['page' => max(1, $page - 1)])) ?>"
                    class="pagination-btn<?= $page <= 1 ? ' disabled' : '' ?>"
                    <?= $page <= 1 ? 'aria-disabled="true" tabindex="-1"' : '' ?>
                    aria-label="Page précédente">‹</a>
-                <span class="pagination-info"><?= $page ?> / <?= $totalPages ?></span>
+                <span class="pagination-info" aria-current="page"><?= $page ?> / <?= $totalPages ?></span>
                 <a href="?<?= http_build_query(array_merge($_GET, ['page' => min($totalPages, $page + 1)])) ?>"
                    class="pagination-btn<?= $page >= $totalPages ? ' disabled' : '' ?>"
                    <?= $page >= $totalPages ? 'aria-disabled="true" tabindex="-1"' : '' ?>
                    aria-label="Page suivante">›</a>
-            </div>
+            </nav>
             <?php endif; ?>
 
             <?php else: ?>
             <p class="search-empty">Aucun résultat pour cette recherche.</p>
             <?php endif; ?>
-        </div>
     </main>
 
     <?php else: ?>
     <!-- ── RÉPERTOIRE INDEX VIEW ─────────────────────────── -->
     <main class="search-main" id="main-content">
+        <h1 class="sr-only">Répertoire</h1>
         <div class="repertoire-index">
 
             <!-- ANNÉES -->
-            <div class="repertoire-col">
-                <h2 class="repertoire-col__header">Années</h2>
+            <section class="repertoire-col">
+                <h2>Années</h2>
+                <ul>
                 <?php foreach ($years as $y): ?>
-                    <a href="search.php?year=<?= (int)$y ?>"
-                       class="year-index-item <?= (isset($_GET['year']) && $_GET['year'] == $y) ? 'active' : '' ?>">
+                    <li><a href="search.php?year=<?= (int)$y ?>"
+                       <?= (isset($_GET['year']) && $_GET['year'] == $y) ? 'aria-current="page"' : '' ?>>
                         <?= (int)$y ?>
-                    </a>
+                    </a></li>
                 <?php endforeach; ?>
-            </div>
+                </ul>
+            </section>
 
             <!-- CATÉGORIES -->
-            <div class="repertoire-col">
-                <h2 class="repertoire-col__header">Catégories</h2>
+            <section class="repertoire-col">
+                <h2>Catégories</h2>
 
                 <?php if (!empty($orientations)): ?>
                     <span class="cat-index-label">Orientation</span>
+                    <ul>
                     <?php foreach ($orientations as $o): ?>
-                        <a href="search.php?orientation=<?= urlencode($o['name']) ?>"
-                           class="cat-index-item <?= (isset($_GET['orientation']) && $_GET['orientation'] == $o['name']) ? 'active' : '' ?>">
+                        <li><a href="search.php?orientation=<?= urlencode($o['name']) ?>"
+                           <?= (isset($_GET['orientation']) && $_GET['orientation'] == $o['name']) ? 'aria-current="page"' : '' ?>>
                             <?= htmlspecialchars($o['name']) ?>
-                        </a>
+                        </a></li>
                     <?php endforeach; ?>
+                    </ul>
                 <?php endif; ?>
 
                 <?php if (!empty($apPrograms)): ?>
                     <span class="cat-index-label">Ateliers Pluridisciplinaires</span>
+                    <ul>
                     <?php foreach ($apPrograms as $ap): ?>
-                        <a href="search.php?ap_program=<?= urlencode($ap['name']) ?>"
-                           class="cat-index-item <?= (isset($_GET['ap_program']) && $_GET['ap_program'] == $ap['name']) ? 'active' : '' ?>">
+                        <li><a href="search.php?ap_program=<?= urlencode($ap['name']) ?>"
+                           <?= (isset($_GET['ap_program']) && $_GET['ap_program'] == $ap['name']) ? 'aria-current="page"' : '' ?>>
                             <?= htmlspecialchars($ap['name']) ?>
-                        </a>
+                        </a></li>
                     <?php endforeach; ?>
+                    </ul>
                 <?php endif; ?>
-            </div>
+            </section>
 
             <!-- ÉTUDIANTES -->
-            <div class="repertoire-col">
-                <h2 class="repertoire-col__header">Étudiantes</h2>
+            <section class="repertoire-col">
+                <h2>Étudiantes</h2>
                 <?php
                 // Build unique author → thesis list
                 $authorMap = [];
@@ -264,23 +266,28 @@ $extraCss = ['assets/search.css'];
                     }
                 }
                 ksort($authorMap);
-                foreach ($authorMap as $name => $id): ?>
-                    <a href="tfe.php?id=<?= (int)$id ?>" class="student-index-item">
+                ?>
+                <ul>
+                <?php foreach ($authorMap as $name => $id): ?>
+                    <li><a href="tfe.php?id=<?= (int)$id ?>">
                         <?= htmlspecialchars($name) ?>
-                    </a>
+                    </a></li>
                 <?php endforeach; ?>
-            </div>
+                </ul>
+            </section>
 
             <!-- MOTS-CLÉS -->
-            <div class="repertoire-col">
-                <h2 class="repertoire-col__header">Mots-clés</h2>
+            <section class="repertoire-col">
+                <h2>Mots-clés</h2>
+                <ul>
                 <?php foreach ($keywords as $kw): ?>
-                    <a href="search.php?keyword=<?= urlencode($kw['name']) ?>"
-                       class="keyword-index-item <?= (isset($_GET['keyword']) && $_GET['keyword'] == $kw['name']) ? 'active' : '' ?>">
+                    <li><a href="search.php?keyword=<?= urlencode($kw['name']) ?>"
+                       <?= (isset($_GET['keyword']) && $_GET['keyword'] == $kw['name']) ? 'aria-current="page"' : '' ?>>
                         <?= htmlspecialchars($kw['name']) ?>
-                    </a>
+                    </a></li>
                 <?php endforeach; ?>
-            </div>
+                </ul>
+            </section>
 
         </div>
     </main>