mirror of
https://codeberg.org/PostERG/xamxam.git
synced 2026-05-06 19:19:19 +02:00
a11y: WCAG 2.5.5 target sizes + 2.5.3 label-in-name fixes
Increase touch/click target sizes to meet WCAG 2.5.5 (minimum 44×44px for navigation, 32px for admin UI controls): - main.css / search.css: pagination buttons 2rem → min-height/min-width 2.75rem (44px). Changed display to inline-flex for proper centering. - admin.css: .admin-btn-sm gains min-height: 2rem (32px) and switches to inline-flex so the constraint is respected. - admin.css: .admin-btn-remove (jury ✕ buttons) gains min-height: 2rem and inline-flex display + explicit cursor:pointer. WCAG 2.5.3 label-in-name — jury remove buttons already had aria-label; wrap the visible ✕ glyph in <span aria-hidden='true'> so screen readers hear only the aria-label, not the symbol: - templates/partials/form/jury-fieldset.php: all three ✕ occurrences (static PHP blocks + JS-generated innerHTML string) wrapped. WCAG 4.1.2 / semantic HTML: - admin/index.php: add role='toolbar' aria-label='Actions groupées' to the bulk-actions bar.
This commit is contained in:
@@ -133,7 +133,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
</form>
|
</form>
|
||||||
|
|
||||||
<!-- Bulk actions bar -->
|
<!-- Bulk actions bar -->
|
||||||
<div id="bulk-actions" class="admin-bulk-actions">
|
<div id="bulk-actions" class="admin-bulk-actions" role="toolbar" aria-label="Actions groupées">
|
||||||
<strong><span id="selected-count">0</span> TFE(s) sélectionné(s)</strong>
|
<strong><span id="selected-count">0</span> TFE(s) sélectionné(s)</strong>
|
||||||
<div class="admin-bulk-btns">
|
<div class="admin-bulk-btns">
|
||||||
<button type="button" class="admin-btn-sm admin-btn-publish" onclick="bulkAction('publish')">Publier</button>
|
<button type="button" class="admin-btn-sm admin-btn-publish" onclick="bulkAction('publish')">Publier</button>
|
||||||
|
|||||||
@@ -378,12 +378,14 @@
|
|||||||
|
|
||||||
.admin-btn-sm {
|
.admin-btn-sm {
|
||||||
padding: 0.25rem 0.6rem;
|
padding: 0.25rem 0.6rem;
|
||||||
|
min-height: 2rem; /* WCAG 2.5.5: ≥32px touch target */
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
font-size: 0.78rem;
|
font-size: 0.78rem;
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
display: inline-block;
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
border: 1px solid transparent;
|
border: 1px solid transparent;
|
||||||
transition: all 0.15s;
|
transition: all 0.15s;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
@@ -591,9 +593,13 @@
|
|||||||
border: 1px solid var(--border-primary);
|
border: 1px solid var(--border-primary);
|
||||||
color: #969696;
|
color: #969696;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
padding: 0.2rem 0.45rem;
|
padding: 0.2rem 0.55rem;
|
||||||
|
min-height: 2rem; /* WCAG 2.5.5: ≥32px touch target */
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.admin-btn-remove:hover {
|
.admin-btn-remove:hover {
|
||||||
border-color: #e55;
|
border-color: #e55;
|
||||||
|
|||||||
@@ -193,9 +193,9 @@
|
|||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
min-width: 2rem;
|
min-width: 2.75rem;
|
||||||
height: 2rem;
|
min-height: 2.75rem;
|
||||||
padding: 0 0.5rem;
|
padding: 0 0.6rem;
|
||||||
border: 1px solid var(--border-secondary);
|
border: 1px solid var(--border-secondary);
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
color: var(--text-primary);
|
color: var(--text-primary);
|
||||||
|
|||||||
@@ -269,9 +269,9 @@
|
|||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
min-width: 2rem;
|
min-width: 2.75rem;
|
||||||
height: 2rem;
|
min-height: 2.75rem;
|
||||||
padding: 0 0.5rem;
|
padding: 0 0.6rem;
|
||||||
border: 1px solid var(--border-secondary);
|
border: 1px solid var(--border-secondary);
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
color: var(--text-primary);
|
color: var(--text-primary);
|
||||||
|
|||||||
@@ -65,7 +65,7 @@ $juryIdx = max(count($juryLecteurs), 1);
|
|||||||
<input type="checkbox" name="jury_lecteurs_ext[0]" value="1"> Externe
|
<input type="checkbox" name="jury_lecteurs_ext[0]" value="1"> Externe
|
||||||
</label>
|
</label>
|
||||||
<button type="button" class="admin-btn-remove" onclick="removeJuryRow(this)"
|
<button type="button" class="admin-btn-remove" onclick="removeJuryRow(this)"
|
||||||
aria-label="Supprimer ce lecteur">✕</button>
|
aria-label="Supprimer ce lecteur"><span aria-hidden="true">✕</span></button>
|
||||||
</div>
|
</div>
|
||||||
<?php else: ?>
|
<?php else: ?>
|
||||||
<?php foreach ($juryLecteurs as $li => $lm): ?>
|
<?php foreach ($juryLecteurs as $li => $lm): ?>
|
||||||
@@ -77,7 +77,7 @@ $juryIdx = max(count($juryLecteurs), 1);
|
|||||||
<?= $lm['is_external'] ? 'checked' : '' ?>> Externe
|
<?= $lm['is_external'] ? 'checked' : '' ?>> Externe
|
||||||
</label>
|
</label>
|
||||||
<button type="button" class="admin-btn-remove" onclick="removeJuryRow(this)"
|
<button type="button" class="admin-btn-remove" onclick="removeJuryRow(this)"
|
||||||
aria-label="Supprimer ce lecteur">✕</button>
|
aria-label="Supprimer ce lecteur"><span aria-hidden="true">✕</span></button>
|
||||||
</div>
|
</div>
|
||||||
<?php endforeach; ?>
|
<?php endforeach; ?>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
@@ -97,7 +97,7 @@ $juryIdx = max(count($juryLecteurs), 1);
|
|||||||
+ '<label class="admin-checkbox-label admin-jury-ext">'
|
+ '<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"> Externe'
|
||||||
+ '</label>'
|
+ '</label>'
|
||||||
+ '<button type="button" class="admin-btn-remove" onclick="removeJuryRow(this)" aria-label="Supprimer ce lecteur">✕</button>';
|
+ '<button type="button" class="admin-btn-remove" onclick="removeJuryRow(this)" aria-label="Supprimer ce lecteur"><span aria-hidden="true">✕</span></button>';
|
||||||
list.appendChild(div);
|
list.appendChild(div);
|
||||||
juryIdx++;
|
juryIdx++;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -42,7 +42,7 @@
|
|||||||
- [ ] **`add.php`/`edit.php`**: Replace `<div class="admin-alert admin-alert--error/--success">` with `<p role="alert">` / `<p role="status">`
|
- [ ] **`add.php`/`edit.php`**: Replace `<div class="admin-alert admin-alert--error/--success">` with `<p role="alert">` / `<p role="status">`
|
||||||
- [ ] **`index.php`**: Replace `<div class="admin-stats">` / `<div class="admin-stat">` children with `<dl>/<dt>/<dd>`
|
- [ ] **`index.php`**: Replace `<div class="admin-stats">` / `<div class="admin-stat">` children with `<dl>/<dt>/<dd>`
|
||||||
- [ ] **`index.php`**: Replace `<div class="admin-maintenance-bar">` with `<aside role="status">` or `<p role="status">`
|
- [ ] **`index.php`**: Replace `<div class="admin-maintenance-bar">` with `<aside role="status">` or `<p role="status">`
|
||||||
- [ ] **`index.php`**: Add `role="toolbar" aria-label="Actions groupées"` to `<div class="admin-bulk-actions">`
|
- [x] **`index.php`**: Add `role="toolbar" aria-label="Actions groupées"` to `<div class="admin-bulk-actions">`
|
||||||
- [ ] **`index.php`**: Add `scope="col"` to all `<th>` cells in the admin table
|
- [ ] **`index.php`**: Add `scope="col"` to all `<th>` cells in the admin table
|
||||||
- [ ] **`index.php`**: Add non-colour indicator + `aria-label="Statut : …"` to status badge `<span>` elements
|
- [ ] **`index.php`**: Add non-colour indicator + `aria-label="Statut : …"` to status badge `<span>` elements
|
||||||
- [ ] **`tags.php`**: Add `scope="col"` to `<th>` cells
|
- [ ] **`tags.php`**: Add `scope="col"` to `<th>` cells
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
|
|
||||||
## 1.1.1 Non-text content (alt text)
|
## 1.1.1 Non-text content (alt text)
|
||||||
|
|
||||||
- [ ] **Admin `<nav>` "✕ Réinitialiser" and "✕" remove buttons** — wrap `✕` in `<span aria-hidden="true">✕</span>`; add `aria-label="Supprimer ce membre du jury"` on jury remove buttons in `add.php`/`edit.php`
|
- [x] **Admin `<nav>` "✕ Réinitialiser" and "✕" remove buttons** — wrap `✕` in `<span aria-hidden="true">✕</span>`; add `aria-label="Supprimer ce membre du jury"` on jury remove buttons in `add.php`/`edit.php`
|
||||||
|
|
||||||
## 1.3.1 Info and relationships
|
## 1.3.1 Info and relationships
|
||||||
|
|
||||||
@@ -42,14 +42,14 @@
|
|||||||
|
|
||||||
## 2.5.3 Label in name
|
## 2.5.3 Label in name
|
||||||
|
|
||||||
- [ ] **`<a class="clear-filter">✕ Réinitialiser</a>`** — wrap `✕` in `<span aria-hidden="true">`
|
- [x] **`<a class="clear-filter">✕ Réinitialiser</a>`** — wrap `✕` in `<span aria-hidden="true">`
|
||||||
- [ ] **Admin jury remove buttons `✕`** — `aria-label="Supprimer ce lecteur"` replaces the symbol
|
- [x] **Admin jury remove buttons `✕`** — `aria-label="Supprimer ce lecteur"` replaces the symbol
|
||||||
|
|
||||||
## 2.5.5 Target size
|
## 2.5.5 Target size
|
||||||
|
|
||||||
- [ ] **Pagination buttons are `2rem` (32px)** — increase to `min-height: 2.75rem; min-width: 2.75rem` (44px)
|
- [x] **Pagination buttons are `2rem` (32px)** — increase to `min-height: 2.75rem; min-width: 2.75rem` (44px)
|
||||||
- [ ] **Admin `.admin-btn-sm` (~28px)** — increase to minimum 32px with padding
|
- [x] **Admin `.admin-btn-sm` (~28px)** — increase to minimum 32px with padding
|
||||||
- [ ] **Admin bulk action buttons and jury remove `✕` buttons (~28px)** — increase target size
|
- [x] **Admin bulk action buttons and jury remove `✕` buttons (~28px)** — increase target size
|
||||||
|
|
||||||
## 3.1.1 Language of page
|
## 3.1.1 Language of page
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user