Add field-level aria-errormessage, aria-invalid, and aria-describedby across the TFE form

WCAG 3.3.1 (Error Identification): failing fields now get
aria-errormessage pointing to the flash-error container and
aria-invalid="true". WCAG 3.3.3 (Error Suggestion): <small>
hint text on inputs, selects, and file fields is now linked via
aria-describedby (always, not just on error).

Changes:
- text-field.php, select-field.php, checkbox-list.php: accept
  $errorFieldName; add aria-errormessage/aria-invalid on match;
  add id to <small> and aria-describedby on the control
- fieldset-tfe-info.php: aria-invalid on synopsis textarea
- fichiers-fragment.php: aria-describedby on cover, note
  d'intention, TFE, annexes, and website inputs; aria-invalid
  on format checkboxes when error matches 'formats'
- form.php: id="flash-error" + tabindex="-1" on flash-error
  div; accept $errorFieldName from callers
- admin/add.php: set $errorFieldName, wire $withAutofocusFn
  (was identity default)
- admin/edit.php: set $errorFieldName
- partage/index.php: consume autofocus field, wire autofocus
  function, add App::flashAutofocus() in submit catch block

Also fixes WCAG standards issue: removed invalid 'required'
HTML attribute from <fieldset> elements in checkbox-list.php
and fichiers-fragment.php (only aria-required stays). Added
role="group" for explicit ARIA semantics.
This commit is contained in:
Pontoporeia
2026-06-11 10:22:06 +02:00
parent c0ba99e861
commit e17246c850
11 changed files with 111 additions and 35 deletions

View File

@@ -18,6 +18,7 @@
* string $hxTarget — optional hx-target CSS selector for HTMX swap
* string $hxSwap — optional hx-swap value; default 'outerHTML'
* string $hxInclude — optional hx-include selector; default 'this'
* string|null $errorFieldName — when set and matches $name, adds aria-invalid on checkboxes
*/
$checked = $checked ?? [];
@@ -26,11 +27,17 @@ $hxPost = $hxPost ?? '';
$hxTarget = $hxTarget ?? '';
$hxSwap = $hxSwap ?? 'outerHTML';
$hxInclude = $hxInclude ?? 'this';
$errorFieldName = $errorFieldName ?? null;
$ariaInvalid = ($errorFieldName === $name) ? ' aria-invalid="true" aria-errormessage="flash-error"' : '';
// aria-describedby only when there's an error (no hint text for checkbox groups)
$ariaDescribedBy = ($errorFieldName === $name) ? ' aria-describedby="flash-error"' : '';
?>
<div>
<span class="admin-row-label"><?= isset($labelHtml) ? $labelHtml : (htmlspecialchars($label) . ($required ? ' <span class="asterisk">*</span>' : '')) ?></span>
<fieldset class="admin-checkbox-group"
<?= $required ? ' required aria-required="true"' : '' ?>
role="group"
<?= $required ? ' aria-required="true"' : '' ?>
<?php if ($hxPost !== ''): ?>
hx-post="<?= htmlspecialchars($hxPost) ?>"
hx-target="<?= htmlspecialchars($hxTarget) ?>"
@@ -46,7 +53,9 @@ $hxInclude = $hxInclude ?? 'this';
<input type="checkbox"
name="<?= htmlspecialchars($name) ?>[]"
value="<?= htmlspecialchars((string)$opt['id']) ?>"
<?= in_array((string)$opt['id'], array_map('strval', $checked)) ? 'checked' : '' ?>>
<?= in_array((string)$opt['id'], array_map('strval', $checked)) ? 'checked' : '' ?>
<?= $ariaInvalid ?>
<?= $ariaDescribedBy ?>>
<?= htmlspecialchars($opt['name']) ?>
</label>
</li>
@@ -55,4 +64,4 @@ $hxInclude = $hxInclude ?? 'this';
</fieldset>
</div>
<?php
unset($checked, $hxPost, $hxTarget, $hxSwap, $hxInclude);
unset($checked, $hxPost, $hxTarget, $hxSwap, $hxInclude, $ariaInvalid, $ariaDescribedBy, $errorFieldName);