mirror of
https://codeberg.org/PostERG/xamxam.git
synced 2026-06-25 16:19:19 +02:00
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:
@@ -35,6 +35,7 @@ $selectedFormats = isset($_POST['formats']) && is_array($_POST['formats'])
|
||||
|
||||
$adminMode = ($_POST['admin_mode'] ?? '0') === '1';
|
||||
$editMode = ($_POST['edit_mode'] ?? '0') === '1';
|
||||
$errorFieldName = $errorFieldName ?? null;
|
||||
|
||||
// TFE file is optional when format is Site web (3), Performance (4) or Installation (6)
|
||||
$noTfeFileFormats = [3, 4, 6];
|
||||
@@ -53,8 +54,8 @@ $websiteLabel = htmlspecialchars($_POST['website_label'] ?? '');
|
||||
<legend>Format(s)</legend>
|
||||
<div>
|
||||
<span class="admin-row-label">Format(s) du TFE :<?= !$adminMode ? ' <span class="asterisk">*</span>' : '' ?></span>
|
||||
<fieldset class="admin-checkbox-group"
|
||||
<?= !$adminMode ? 'required aria-required="true"' : '' ?> >
|
||||
<fieldset class="admin-checkbox-group" role="group"
|
||||
<?= !$adminMode ? 'aria-required="true"' : '' ?> >
|
||||
<legend class="sr-only">Format(s) du TFE</legend>
|
||||
<ul>
|
||||
<?php foreach ($allFormats as $opt): ?>
|
||||
@@ -63,7 +64,8 @@ $websiteLabel = htmlspecialchars($_POST['website_label'] ?? '');
|
||||
<input type="checkbox"
|
||||
name="formats[]"
|
||||
value="<?= htmlspecialchars((string)$opt['id']) ?>"
|
||||
<?= in_array((int)$opt['id'], $selectedFormats, true) ? 'checked' : '' ?>>
|
||||
<?= in_array((int)$opt['id'], $selectedFormats, true) ? 'checked' : '' ?>
|
||||
<?= ($errorFieldName === 'formats') ? 'aria-invalid="true" aria-errormessage="flash-error" aria-describedby="flash-error"' : '' ?>>
|
||||
<?= htmlspecialchars($opt['name']) ?>
|
||||
</label>
|
||||
</li>
|
||||
@@ -85,8 +87,9 @@ $websiteLabel = htmlspecialchars($_POST['website_label'] ?? '');
|
||||
name="queue_file[cover][]"
|
||||
class="tfe-file-picker tfe-file-picker--single"
|
||||
data-queue-type="cover"
|
||||
data-existing-files='<?= htmlspecialchars(json_encode($existingFilesJsonForCover ?? []), ENT_QUOTES) ?>'>
|
||||
<small>JPG, PNG ou WEBP. Format 4:3 recommandé. Max 20 MB.</small>
|
||||
data-existing-files='<?= htmlspecialchars(json_encode($existingFilesJsonForCover ?? []), ENT_QUOTES) ?>'
|
||||
aria-describedby="couverture-hint">
|
||||
<small id="couverture-hint">JPG, PNG ou WEBP. Format 4:3 recommandé. Max 20 MB.</small>
|
||||
</div>
|
||||
<?php if ($editMode): ?>
|
||||
<button type="button" class="btn btn--sm btn--ghost file-browser-trigger"
|
||||
@@ -111,8 +114,10 @@ $websiteLabel = htmlspecialchars($_POST['website_label'] ?? '');
|
||||
class="tfe-file-picker tfe-file-picker--single"
|
||||
data-queue-type="note_intention"
|
||||
data-existing-files='<?= htmlspecialchars(json_encode($existingFilesJsonForNoteIntention ?? []), ENT_QUOTES) ?>'
|
||||
<?= !$adminMode ? 'required' : '' ?>>
|
||||
<small>PDF uniquement. Max 100 MB. Si votre fichier est trop lourd, compressez-le avec <a href="https://www.bentopdf.com" target="_blank" rel="noopener">bentopdf.com</a>.</small>
|
||||
<?= !$adminMode ? 'required' : '' ?>
|
||||
<?= ($errorFieldName === 'note_intention') ? 'aria-invalid="true" aria-errormessage="flash-error"' : '' ?>
|
||||
aria-describedby="note_intention-hint<?= ($errorFieldName === 'note_intention') ? ' flash-error' : '' ?>">
|
||||
<small id="note_intention-hint">PDF uniquement. Max 100 MB. Si votre fichier est trop lourd, compressez-le avec <a href="https://www.bentopdf.com" target="_blank" rel="noopener">bentopdf.com</a>.</small>
|
||||
</div>
|
||||
<?php if ($editMode): ?>
|
||||
<button type="button" class="btn btn--sm btn--ghost file-browser-trigger"
|
||||
@@ -138,8 +143,10 @@ $websiteLabel = htmlspecialchars($_POST['website_label'] ?? '');
|
||||
class="tfe-file-picker"
|
||||
data-queue-type="tfe"
|
||||
<?= (!$adminMode && !$tfeFileOptional) ? 'required' : '' ?>
|
||||
data-existing-files='<?= htmlspecialchars(json_encode($existingFilesJsonForTfe ?? []), ENT_QUOTES) ?>'>
|
||||
<small class="admin-file-hint">
|
||||
data-existing-files='<?= htmlspecialchars(json_encode($existingFilesJsonForTfe ?? []), ENT_QUOTES) ?>'
|
||||
<?= ($errorFieldName === 'tfe-files-input') ? 'aria-invalid="true" aria-errormessage="flash-error"' : '' ?>
|
||||
aria-describedby="tfe-files-hint<?= ($errorFieldName === 'tfe-files-input') ? ' flash-error' : '' ?>">
|
||||
<small id="tfe-files-hint" class="admin-file-hint">
|
||||
Glissez pour réordonner.
|
||||
<br>
|
||||
<br>
|
||||
@@ -175,8 +182,9 @@ $websiteLabel = htmlspecialchars($_POST['website_label'] ?? '');
|
||||
multiple
|
||||
class="tfe-file-picker"
|
||||
data-queue-type="annexe"
|
||||
data-existing-files='<?= htmlspecialchars(json_encode($existingFilesJsonForAnnexe ?? []), ENT_QUOTES) ?>'>
|
||||
<small class="admin-file-hint">PDF ou archives ZIP/TAR. Max 1 GB. Glissez pour réordonner.</small>
|
||||
data-existing-files='<?= htmlspecialchars(json_encode($existingFilesJsonForAnnexe ?? []), ENT_QUOTES) ?>'
|
||||
aria-describedby="annexe-files-hint">
|
||||
<small id="annexe-files-hint" class="admin-file-hint">PDF ou archives ZIP/TAR. Max 1 GB. Glissez pour réordonner.</small>
|
||||
</div>
|
||||
<?php if ($editMode): ?>
|
||||
<button type="button" class="btn btn--sm btn--ghost file-browser-trigger"
|
||||
@@ -199,8 +207,9 @@ $websiteLabel = htmlspecialchars($_POST['website_label'] ?? '');
|
||||
<div class="admin-file-input">
|
||||
<input type="url" id="website_url" name="website_url"
|
||||
value="<?= $websiteUrl ?>"
|
||||
placeholder="https://mon-tfe.erg.be">
|
||||
<small>Le TFE sera affiché comme un site embarqué sur sa page publique.</small>
|
||||
placeholder="https://mon-tfe.erg.be"
|
||||
aria-describedby="website_url-hint">
|
||||
<small id="website_url-hint">Le TFE sera affiché comme un site embarqué sur sa page publique.</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user