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>
|
||||
|
||||
<!-- 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>
|
||||
<div class="admin-bulk-btns">
|
||||
<button type="button" class="admin-btn-sm admin-btn-publish" onclick="bulkAction('publish')">Publier</button>
|
||||
|
||||
@@ -378,12 +378,14 @@
|
||||
|
||||
.admin-btn-sm {
|
||||
padding: 0.25rem 0.6rem;
|
||||
min-height: 2rem; /* WCAG 2.5.5: ≥32px touch target */
|
||||
border-radius: 3px;
|
||||
font-size: 0.78rem;
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
border: 1px solid transparent;
|
||||
transition: all 0.15s;
|
||||
white-space: nowrap;
|
||||
@@ -591,9 +593,13 @@
|
||||
border: 1px solid var(--border-primary);
|
||||
color: #969696;
|
||||
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;
|
||||
line-height: 1;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.admin-btn-remove:hover {
|
||||
border-color: #e55;
|
||||
|
||||
@@ -193,9 +193,9 @@
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 2rem;
|
||||
height: 2rem;
|
||||
padding: 0 0.5rem;
|
||||
min-width: 2.75rem;
|
||||
min-height: 2.75rem;
|
||||
padding: 0 0.6rem;
|
||||
border: 1px solid var(--border-secondary);
|
||||
border-radius: 3px;
|
||||
color: var(--text-primary);
|
||||
|
||||
@@ -269,9 +269,9 @@
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 2rem;
|
||||
height: 2rem;
|
||||
padding: 0 0.5rem;
|
||||
min-width: 2.75rem;
|
||||
min-height: 2.75rem;
|
||||
padding: 0 0.6rem;
|
||||
border: 1px solid var(--border-secondary);
|
||||
border-radius: 3px;
|
||||
color: var(--text-primary);
|
||||
|
||||
@@ -65,7 +65,7 @@ $juryIdx = max(count($juryLecteurs), 1);
|
||||
<input type="checkbox" name="jury_lecteurs_ext[0]" value="1"> Externe
|
||||
</label>
|
||||
<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>
|
||||
<?php else: ?>
|
||||
<?php foreach ($juryLecteurs as $li => $lm): ?>
|
||||
@@ -77,7 +77,7 @@ $juryIdx = max(count($juryLecteurs), 1);
|
||||
<?= $lm['is_external'] ? 'checked' : '' ?>> Externe
|
||||
</label>
|
||||
<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>
|
||||
<?php endforeach; ?>
|
||||
<?php endif; ?>
|
||||
@@ -97,7 +97,7 @@ $juryIdx = max(count($juryLecteurs), 1);
|
||||
+ '<label class="admin-checkbox-label admin-jury-ext">'
|
||||
+ '<input type="checkbox" name="jury_lecteurs_ext[' + juryIdx + ']" value="1"> Externe'
|
||||
+ '</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);
|
||||
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">`
|
||||
- [ ] **`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`**: 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 non-colour indicator + `aria-label="Statut : …"` to status badge `<span>` elements
|
||||
- [ ] **`tags.php`**: Add `scope="col"` to `<th>` cells
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
## 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
|
||||
|
||||
@@ -42,14 +42,14 @@
|
||||
|
||||
## 2.5.3 Label in name
|
||||
|
||||
- [ ] **`<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] **`<a class="clear-filter">✕ Réinitialiser</a>`** — wrap `✕` in `<span aria-hidden="true">`
|
||||
- [x] **Admin jury remove buttons `✕`** — `aria-label="Supprimer ce lecteur"` replaces the symbol
|
||||
|
||||
## 2.5.5 Target size
|
||||
|
||||
- [ ] **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
|
||||
- [ ] **Admin bulk action buttons and jury remove `✕` buttons (~28px)** — increase target size
|
||||
- [x] **Pagination buttons are `2rem` (32px)** — increase to `min-height: 2.75rem; min-width: 2.75rem` (44px)
|
||||
- [x] **Admin `.admin-btn-sm` (~28px)** — increase to minimum 32px with padding
|
||||
- [x] **Admin bulk action buttons and jury remove `✕` buttons (~28px)** — increase target size
|
||||
|
||||
## 3.1.1 Language of page
|
||||
|
||||
|
||||
Reference in New Issue
Block a user