admin: semantic HTML pass — checkbox fieldset, landmarks, dl/dt, autocomplete, inline styles

checkbox-list.php partial:
- Replace outer <div>/<label> with <div>/<span class="admin-row-label"> + inner
  <fieldset class="admin-checkbox-group"><legend class="sr-only"> to satisfy
  WCAG 1.3.1 (group label for multi-checkbox rows without duplicating visible text)
- Replace <div class="admin-checkbox-list"> with <ul>; each checkbox wrapped in <li>

admin.css:
- Drop .admin-checkbox-list; add .admin-body fieldset.admin-checkbox-group rules
  (border/padding reset so it doesn't inherit jury-fieldset box styling)
- Extend form-row label rule to span.admin-row-label
- .admin-inline-form + .admin-inline-form { margin-top:.35rem } replaces inline style
- .admin-input--inline / .admin-select--inline get width:160px (was inline style)
- .admin-tags-count + table th sizing via :has() replaces th inline styles

login.php: wrap content in <main id="main-content"> (missing landmark)

account.php:
- <div class="admin-account-status"> → <dl>; __label <span> → <dt>
- <div class="admin-danger-zone__description"> → <p>

index.php: <div class="admin-maintenance-bar"> → <aside role="status" aria-label="Statut du site">

add.php / edit.php: autocomplete="name" on author field, autocomplete="email" on
contact field (WCAG 1.3.5 / input purpose)

tags.php: all inline style= attributes removed (width, text-align, margin-top,
display:inline); all moved to CSS classes
This commit is contained in:
Pontoporeia
2026-04-02 21:06:20 +02:00
parent fde05da493
commit ff8e33727d
11 changed files with 111 additions and 56 deletions

View File

@@ -54,7 +54,8 @@
border-bottom: 1px solid var(--border-primary);
}
.admin-form > div:not(.admin-submit-wrap) > label {
.admin-form > div:not(.admin-submit-wrap) > label,
.admin-form > div:not(.admin-submit-wrap) > span.admin-row-label {
font-size: 0.92rem;
padding-top: 0.5rem;
font-weight: 400;
@@ -140,12 +141,28 @@
display: block;
}
/* Checkboxes */
.admin-checkbox-list {
/* Checkbox group fieldset (languages, formats)
Wraps the <ul> of checkboxes; the visible label is a sibling <span>
in the grid row. The <legend> repeats the label text for AT only (sr-only).
.admin-body scope ensures this overrides the generic .admin-body fieldset rule. */
.admin-body fieldset.admin-checkbox-group {
border: none;
padding: 0;
margin: 0;
background: transparent;
}
.admin-body fieldset.admin-checkbox-group > ul {
list-style: none;
margin: 0;
padding-top: 0.3rem;
display: flex;
flex-direction: column;
gap: 0.35rem;
padding-top: 0.3rem;
}
.admin-body fieldset.admin-checkbox-group > ul > li {
display: contents; /* let the inner label handle layout */
}
.admin-checkbox-label {
@@ -754,13 +771,26 @@
.admin-input--inline,
.admin-inline-form input[type="text"] {
font-size: 0.82rem;
width: 160px;
}
.admin-select--inline,
.admin-inline-form select {
font-size: 0.82rem;
width: 160px;
}
/* Stack secondary forms (merge, delete) below the rename form */
.admin-inline-form + .admin-inline-form {
margin-top: 0.35rem;
}
/* Tags table column sizing */
.admin-body table:has(.admin-tags-count) th:nth-child(1) { width: 40%; }
.admin-body table:has(.admin-tags-count) th:nth-child(2) { width: 12%; }
.admin-body table:has(.admin-tags-count) th:nth-child(3) { width: 48%; }
.admin-tags-count { text-align: center; }
/* ── Banner preview ─────────────────────────────────────────────────────── */
.admin-banner-preview img {
max-width: 320px;