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

@@ -747,6 +747,26 @@
}
/* ── Jury fieldset ──────────────────────────────────────────────────────── */
/* Nested lecteur·ices fieldset sits inside the outer jury fieldset:
strip heavy border/background so it reads as a sub-group, not a card. */
.admin-body fieldset fieldset.admin-jury-lecteurs {
border: none;
padding: 0;
margin: 0.75rem 0 0;
background: transparent;
}
.admin-body fieldset fieldset.admin-jury-lecteurs > legend {
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--text-tertiary);
padding: 0;
margin-bottom: 0.5rem;
}
.admin-jury-row {
display: flex;
gap: 0.75rem;