a11y(jury-fieldset): fix WCAG 3.3.2, 4.1.2, 2.1.1 + audit 1.4.4/1.4.12

3.3.2 Labels or instructions
- Replace bare <label>Lecteur·ices :</label> (no 'for', no associated control)
  with <fieldset class="admin-jury-lecteurs"><legend>Lecteur·ices</legend>
  giving AT a proper programmatic label for the entire lecteur group

4.1.2 Name, role, value — Externe checkboxes lacked group context
- Add aria-label="Promoteur·ice — externe" on the promoteur Externe checkbox
- Add aria-label="Lecteur·ice N — nom" on every lecteur name input
- Add aria-label="Lecteur·ice N — externe" on every lecteur Externe checkbox
- All three attributes added to both PHP-rendered rows and the addJuryRow() JS
  that builds new rows dynamically

2.1.1 Keyboard — remove buttons already had aria-label; verified and updated
  label text to "Supprimer le lecteur·ice N" (consistent with new numbering)

CSS (admin.css)
- Add .admin-body fieldset fieldset.admin-jury-lecteurs rule: removes
  border/padding/background from the nested fieldset so it reads as a
  sub-group inside the outer jury fieldset, not a double-bordered card

Audit (no code change)
- WCAG 1.4.4: all font-size values use rem — no px text sizing anywhere
- WCAG 1.4.12: only overflow:hidden on media containers and .sr-only utility;
  no essential text content is clipped by text-spacing overrides
- WCAG 4.1.2 bulk JS: result is a redirect to flash-messages.php which already
  emits role="alert"/role="status" — no additional JS announcement needed
This commit is contained in:
Pontoporeia
2026-04-03 13:10:24 +02:00
parent 769d56fabc
commit d9f94eeb13
4 changed files with 85 additions and 51 deletions

View File

@@ -22,15 +22,15 @@
## 1.4.4 Resize text
- [ ] **Verify no text is set in `px`**ensure `width: 14px; height: 14px` on checkboxes and similar elements do not prevent text scaling
- [x] **Verify no text is set in `px`**audited all CSS files; every `font-size` uses `rem` or `em`; no `px` font-size found anywhere. No action needed.
## 1.4.12 Text spacing
- [ ] **No text-spacing override test done**verify WCAG 1.4.12 bookmarklet does not cause content clipping (especially `overflow: hidden` on `.card__media` and tight `aspect-ratio: 4/3`)
- [x] **No text-spacing override test done**audited all `overflow: hidden` instances: `.sr-only` (visually hidden utility, 1×1px — not text content), `.home-body figure` / `aside figure` / `.card` (media containers, not text). `.card__gradient-title` clamps decorative gradient text — not essential content (same info is in the `<p>` link). No WCAG 1.4.12 failure found.
## 2.1.1 Keyboard
- [ ] **Jury "✕" remove buttons in `add.php`/`edit.php`** add `aria-label` for keyboard discoverability
- [x] **Jury "✕" remove buttons in `add.php`/`edit.php`**`aria-label="Supprimer le lecteur·ice N"` already present on all remove buttons in `jury-fieldset.php` (both static and dynamically added rows)
## 2.4.3 Focus order
@@ -62,17 +62,17 @@
## 3.3.2 Labels or instructions
- [ ] **Admin jury "Lecteur·ices" label has no `for` attribute**wrap lecteur rows in `<fieldset>/<legend>` or use `aria-describedby`
- [x] **Admin jury "Lecteur·ices" label has no `for` attribute**replaced plain `<label>Lecteur·ices :</label>` with `<fieldset class="admin-jury-lecteurs"><legend>Lecteur·ices</legend>` in `jury-fieldset.php`; CSS rule strips the nested fieldsets border/padding so it renders as a sub-group
## 4.1.2 Name, role, value
- [ ] **Custom "Externe" checkbox for jury members has no group context** — add `aria-label="[Nom du promoteur] est externe"` dynamically via JS, or `aria-describedby` pointing to the adjacent name input
- [x] **Custom "Externe" checkbox for jury members has no group context** — all jury "Externe" checkboxes now carry explicit `aria-label` (e.g. `"Promoteur·ice — externe"`, `"Lecteur·ice N — externe"`); both static PHP-rendered rows and dynamically added rows via `addJuryRow()` receive the label
- [ ] **`<video>` elements on `tfe.php` have no captions** — add `<track kind="captions">` slot in template; document caption requirement in admin upload form
- [ ] **Admin `<select>` for visibility/access in `edit.php` uses truncated option text** — use full description in option text (or `title` attribute); keep truncated text only for visual display
- [ ] **Bulk publish/unpublish JS does not announce result to screen readers** — add `role="alert"` to error messages and `role="status"` to success messages across all admin pages
- [x] **Bulk publish/unpublish JS does not announce result to screen readers** — action result is a full-page redirect to a flash message rendered by `flash-messages.php` which already emits `role="alert"` (error) / `role="status"` (success); no additional JS announcement needed
## 5 - Motion & user preferences