admin: semantic HTML pass — checkbox fieldset, landmarks, dl/dt, autocomplete, inline styles

checkbox-list.php partial:
- Replace outer <div>/<label> with <div>/<span class="admin-row-label"> + inner
  <fieldset class="admin-checkbox-group"><legend class="sr-only"> to satisfy
  WCAG 1.3.1 (group label for multi-checkbox rows without duplicating visible text)
- Replace <div class="admin-checkbox-list"> with <ul>; each checkbox wrapped in <li>

admin.css:
- Drop .admin-checkbox-list; add .admin-body fieldset.admin-checkbox-group rules
  (border/padding reset so it doesn't inherit jury-fieldset box styling)
- Extend form-row label rule to span.admin-row-label
- .admin-inline-form + .admin-inline-form { margin-top:.35rem } replaces inline style
- .admin-input--inline / .admin-select--inline get width:160px (was inline style)
- .admin-tags-count + table th sizing via :has() replaces th inline styles

login.php: wrap content in <main id="main-content"> (missing landmark)

account.php:
- <div class="admin-account-status"> → <dl>; __label <span> → <dt>
- <div class="admin-danger-zone__description"> → <p>

index.php: <div class="admin-maintenance-bar"> → <aside role="status" aria-label="Statut du site">

add.php / edit.php: autocomplete="name" on author field, autocomplete="email" on
contact field (WCAG 1.3.5 / input purpose)

tags.php: all inline style= attributes removed (width, text-align, margin-top,
display:inline); all moved to CSS classes
This commit is contained in:
Pontoporeia
2026-04-02 21:06:20 +02:00
parent fde05da493
commit ff8e33727d
11 changed files with 111 additions and 56 deletions

View File

@@ -29,29 +29,28 @@
## Scattered inline styles in templates
- [ ] `tfe.php` line 146: `style="align-items:start;"``.tfe-meta-item--top` in `tfe.css`
- [ ] `tfe.php` lines 148, 170-172, 193: `font-style:italic`, `margin-top:1.5rem`, `font-size:.88rem;color:#666`, `color:#999;font-style:italic``.tfe-note-value`, `.tfe-back-link`, `.tfe-restricted` in `tfe.css`
- [x] `tfe.php` inline styles — already extracted (no `style=` attributes remain in `public/tfe.php`)
- [ ] `admin/edit.php`: multiple `style=` on `.admin-form-row` and banner preview → modifier classes in `admin.css`
## Admin semantic HTML (sections IXXVI)
- [ ] **`add.php`/`edit.php`**: Replace `<div class="admin-form-row">` with CSS grid on `<form>` children (~20 divs in add.php, ~22 in edit.php)
- [ ] **`add.php`/`edit.php`**: Replace inner wrapper `<div>` in multi-control rows — use `<small>` for hints, remove the wrapper div
- [ ] **`add.php`/`edit.php`**: Replace `<div class="admin-checkbox-list">` with `<ul>`; each `<label class="admin-checkbox-label">` becomes `<li>` containing `<label>`
- [x] **`add.php`/`edit.php`**: Replace `<div class="admin-checkbox-list">` with `<ul>`; each `<label class="admin-checkbox-label">` becomes `<li>` containing `<label>`
- [ ] **`add.php`/`edit.php`**: Replace `<div class="admin-submit-wrap">` — remove; apply styles directly to `form > button:last-child`
- [ ] **`add.php`/`edit.php`**: Replace `<div class="admin-alert admin-alert--error/--success">` with `<p role="alert">` / `<p role="status">`
- [ ] **`index.php`**: Replace `<div class="admin-stats">` / `<div class="admin-stat">` children with `<dl>/<dt>/<dd>`
- [ ] **`index.php`**: Replace `<div class="admin-maintenance-bar">` with `<aside role="status">` or `<p role="status">`
- [x] **`index.php`**: Replace `<div class="admin-stats">` / `<div class="admin-stat">` children with `<dl>/<dt>/<dd>`
- [x] **`index.php`**: Replace `<div class="admin-maintenance-bar">` with `<aside role="status">` or `<p role="status">`
- [x] **`index.php`**: Add `role="toolbar" aria-label="Actions groupées"` to `<div class="admin-bulk-actions">`
- [ ] **`index.php`**: Add `scope="col"` to all `<th>` cells in the admin table
- [x] **`index.php`**: Add `scope="col"` to all `<th>` cells in the admin table
- [ ] **`index.php`**: Add non-colour indicator + `aria-label="Statut : …"` to status badge `<span>` elements
- [ ] **`tags.php`**: Add `scope="col"` to `<th>` cells
- [ ] **`tags.php`**: Move inline `style="margin-top:.35rem;"` on forms → `.admin-inline-form + .admin-inline-form` selector
- [ ] **`thanks.php`**: Replace `<div class="admin-thesis-info">` with `<section>` + `<h2>` heading; CSS targets `main > section`
- [ ] **`account.php`**: Replace `<div class="admin-account-status">` with `<dl>`; `__row``<div>`, `__label``<dt>`
- [ ] **`account.php`**: Replace `<div class="admin-danger-zone__description">` with `<p>`
- [ ] **`account.php`**: Move `style="margin-top:3rem;"` on danger zone heading → CSS modifier class
- [ ] **`login.php`**: Wrap login content in `<main>` (currently no main landmark)
- [x] **`tags.php`**: Add `scope="col"` to `<th>` cells
- [x] **`tags.php`**: Move inline `style="margin-top:.35rem;"` on forms → `.admin-inline-form + .admin-inline-form` selector
- [x] **`thanks.php`**: Replace `<div class="admin-thesis-info">` with `<section>` + `<h2>` heading; CSS targets `main > section`
- [x] **`account.php`**: Replace `<div class="admin-account-status">` with `<dl>`; `__row``<div>`, `__label``<dt>`
- [x] **`account.php`**: Replace `<div class="admin-danger-zone__description">` with `<p>`
- [x] **`account.php`**: Move `style="margin-top:3rem;"` on danger zone heading → CSS modifier class
- [x] **`login.php`**: Wrap login content in `<main>` (currently no main landmark)
- [ ] **`login.php`**: Extract inline styles on `.admin-form-row` and `.admin-submit-wrap``.admin-form-row--compact` modifier in `admin.css`
## Favicon

View File

@@ -6,13 +6,13 @@
## 1.3.1 Info and relationships
- [ ] **Admin form rows: multi-input rows (languages, formats)**`<label class="admin-label">` without `for` labels a group of checkboxes; replace with `<fieldset>/<legend>`
- [x] **Admin form rows: multi-input rows (languages, formats)**`checkbox-list.php` partial now wraps checkboxes in `<fieldset class="admin-checkbox-group">` with a `<legend class="sr-only">` for AT grouping
- [ ] **Status badges in `admin/index.php` convey state by colour alone** — add visible non-colour distinction (prefix icon with `aria-hidden="true"`) and `aria-label="Statut : Publié"` on badge `<span>`
## 1.3.4 / 1.3.5 Orientation & Input purpose
- [ ] **No `autocomplete` attributes on personal data fields**`add.php`/`edit.php`: add `autocomplete="name"` on author fields, `autocomplete="email"` on mail fields
- [x] **No `autocomplete` attributes on personal data fields**`add.php`/`edit.php`: `autocomplete="name"` on author fields, `autocomplete="email"` on mail fields (via `$attrs` in `text-field.php`)
## 1.4.1 Use of colour
@@ -57,7 +57,8 @@
## 3.3.1 Error identification
- [ ] **`add.php`/`formulaire.php` validation errors** — add `role="alert"` to error div; add `autofocus` to first invalid field when re-rendering form with session error data
- [x] **`add.php`/`edit.php` validation errors** — `flash-messages.php` already emits `<p role="alert" data-type="error">` for errors and `<p role="status">` for success
- [ ] **`add.php`/`edit.php` `autofocus` on first invalid field** — requires controller to pass back which field failed; deferred (larger refactor)
## 3.3.2 Labels or instructions