PostERG/xamxam
1
0
Fork 0
mirror of https://codeberg.org/PostERG/xamxam.git synced 2026-05-06 19:19:19 +02:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

68
templates/partials/form/jury-fieldset.php
View File

@@ -48,56 +48,64 @@ $juryIdx = max(count($juryLecteurs), 1);
value="<?= htmlspecialchars($juryPromoteur ?? '') ?>" placeholder="Nom">
<label class="admin-checkbox-label admin-jury-ext">
<input type="checkbox" name="jury_promoteur_ext" value="1"
<?= $juryPromoteurExt ? 'checked' : '' ?>> Externe
<?= $juryPromoteurExt ? 'checked' : '' ?>
aria-label="Promoteur·ice — externe"> Externe
</label>
</div>
</div>
<!-- Lecteur·ices (dynamic list) -->
<div>
<label>Lecteur·ices :</label>
<div>
<div id="jury-lecteurs-list" class="admin-jury-list">
<?php if (empty($juryLecteurs)): ?>
<fieldset class="admin-jury-lecteurs">
<legend>Lecteur·ices</legend>
<div id="jury-lecteurs-list" class="admin-jury-list">
<?php if (empty($juryLecteurs)): ?>
<div class="admin-jury-entry">
<input type="text" name="jury_lecteurs[]" placeholder="Nom"
id="jury_lecteur_0" aria-label="Lecteur·ice 1 — nom">
<label class="admin-checkbox-label admin-jury-ext">
<input type="checkbox" name="jury_lecteurs_ext[0]" value="1"
aria-label="Lecteur·ice 1 — externe"> Externe
</label>
<button type="button" class="admin-btn-remove" onclick="removeJuryRow(this)"
aria-label="Supprimer le lecteur·ice 1"><span aria-hidden="true">✕</span></button>
</div>
<?php else: ?>
<?php foreach ($juryLecteurs as $li => $lm): ?>
<?php $lNum = $li + 1; ?>
<div class="admin-jury-entry">
<input type="text" name="jury_lecteurs[]" placeholder="Nom">
<input type="text" name="jury_lecteurs[]"
value="<?= htmlspecialchars($lm['name']) ?>" placeholder="Nom"
id="jury_lecteur_<?= $li ?>" aria-label="Lecteur·ice <?= $lNum ?> — nom">
<label class="admin-checkbox-label admin-jury-ext">
<input type="checkbox" name="jury_lecteurs_ext[0]" value="1"> Externe
<input type="checkbox" name="jury_lecteurs_ext[<?= $li ?>]" value="1"
<?= $lm['is_external'] ? 'checked' : '' ?>
aria-label="Lecteur·ice <?= $lNum ?> — externe"> Externe
</label>
<button type="button" class="admin-btn-remove" onclick="removeJuryRow(this)"
aria-label="Supprimer ce lecteur"><span aria-hidden="true">✕</span></button>
aria-label="Supprimer le lecteur·ice <?= $lNum ?>"><span aria-hidden="true">✕</span></button>
</div>
<?php else: ?>
<?php foreach ($juryLecteurs as $li => $lm): ?>
<div class="admin-jury-entry">
<input type="text" name="jury_lecteurs[]"
value="<?= htmlspecialchars($lm['name']) ?>" placeholder="Nom">
<label class="admin-checkbox-label admin-jury-ext">
<input type="checkbox" name="jury_lecteurs_ext[<?= $li ?>]" value="1"
<?= $lm['is_external'] ? 'checked' : '' ?>> Externe
</label>
<button type="button" class="admin-btn-remove" onclick="removeJuryRow(this)"
aria-label="Supprimer ce lecteur"><span aria-hidden="true">✕</span></button>
</div>
<?php endforeach; ?>
<?php endif; ?>
</div>
<button type="button" class="admin-btn-secondary admin-add-jury-btn"
onclick="addJuryRow()">+ Ajouter un·e lecteur·ice</button>
<?php endforeach; ?>
<?php endif; ?>
</div>
</div>
<button type="button" class="admin-btn-secondary admin-add-jury-btn"
onclick="addJuryRow()">+ Ajouter un·e lecteur·ice</button>
</fieldset>
</fieldset>
<script>
var juryIdx = <?= $juryIdx ?>;
function addJuryRow() {
var list = document.getElementById('jury-lecteurs-list');
var n = list.querySelectorAll('.admin-jury-entry').length + 1;
var div = document.createElement('div');
div.className = 'admin-jury-entry';
div.innerHTML = '<input type="text" name="jury_lecteurs[]" placeholder="Nom">'
div.innerHTML = '<input type="text" name="jury_lecteurs[]" placeholder="Nom"'
+ ' aria-label="Lecteur\u00b7ice ' + n + ' \u2014 nom">'
+ '<label class="admin-checkbox-label admin-jury-ext">'
+ '<input type="checkbox" name="jury_lecteurs_ext[' + juryIdx + ']" value="1"> Externe'
+ '<input type="checkbox" name="jury_lecteurs_ext[' + juryIdx + ']" value="1"'
+ ' aria-label="Lecteur\u00b7ice ' + n + ' \u2014 externe"> Externe'
+ '</label>'
+ '<button type="button" class="admin-btn-remove" onclick="removeJuryRow(this)" aria-label="Supprimer ce lecteur"><span aria-hidden="true">✕</span></button>';
+ '<button type="button" class="admin-btn-remove" onclick="removeJuryRow(this)"'
+ ' aria-label="Supprimer le lecteur\u00b7ice ' + n + '"><span aria-hidden="true">\u2715</span></button>';
list.appendChild(div);
juryIdx++;
}