mirror of
https://codeberg.org/PostERG/xamxam.git
synced 2026-05-06 19:19:19 +02:00
search.php: semantic HTML overhaul of répertoire index and results view
- 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
This commit is contained in:
14
TODO.md
14
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.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user