mirror of
https://codeberg.org/PostERG/xamxam.git
synced 2026-05-07 03:29:19 +02:00
e1ce900113
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.
60 lines
4.8 KiB
Markdown
60 lines
4.8 KiB
Markdown
# CSS & Semantic HTML Refactor
|
||
|
||
## CSS class audit: replace with semantic selectors (`admin.css` / `main.css` / `tfe.css` / `search.css`)
|
||
|
||
- [ ] **`admin.css`**: Replace `.admin-main` with `.admin-body main`
|
||
- [ ] **`admin.css`**: Replace `.admin-page-title` with `.admin-body main > h1`
|
||
- [ ] **`admin.css`**: Replace `.admin-alert` / `.admin-alert--error` / `.admin-alert--success` with `[role="alert"]` / `data-type="error|success"` attribute
|
||
- [ ] **`admin.css`**: Replace `.admin-form-row` with `.admin-body form > div` or CSS grid on `<form>` children
|
||
- [ ] **`admin.css`**: Replace `.admin-label` with `.admin-body form label`
|
||
- [ ] **`admin.css`**: Replace `.admin-input` / `.admin-select` / `.admin-textarea` with native element selectors
|
||
- [ ] **`admin.css`**: Replace `.admin-hint` with `.admin-body form small`
|
||
- [ ] **`admin.css`**: Replace `.admin-table` with `.admin-body table`
|
||
- [ ] **`admin.css`**: Replace `.admin-fieldset` / `.admin-fieldset-legend` with `.admin-body fieldset` / `.admin-body legend`
|
||
- [ ] **`main.css`**: Replace `.card__caption` with `.home-body .cards-container li p` or `li > a > p`
|
||
- [ ] **`main.css`**: Replace `.card__media` with `.home-body figure`
|
||
- [ ] **`tfe.css`**: Replace `.tfe-meta-list` selectors with `article dl`, `article dt`, `article dd`
|
||
- [ ] **`tfe.css`**: Replace `.tfe-media-block` with `aside figure`
|
||
- [ ] **`tfe.css`**: Replace `.tfe-file-caption` with `aside figcaption`
|
||
- [ ] **`search.css`**: Replace `.repertoire-col > h2` — use `.repertoire-index section > h2`
|
||
- [ ] **`system.php`**: Move inline `<style>` block to `system.css`
|
||
|
||
## Template HTML changes to match
|
||
|
||
- [ ] In all admin templates, replace `<p class="admin-hint">` with `<small>` elements
|
||
- [ ] In `tfe.php`, remove `class="tfe-meta-list"` — target via `article dl`
|
||
- [ ] In `tfe.php`, remove `class="tfe-media-block"` — target via `aside figure`
|
||
- [ ] In `tfe.php`, remove `class="tfe-file-caption"` — target via `aside figcaption`
|
||
- [ ] In `index.php`, remove `class="card__caption"` — target via `li > a > p`
|
||
|
||
## Scattered inline styles in templates
|
||
|
||
- [ ] `tfe.php` line 146: `style="align-items:start;"` → `.tfe-meta-item--top` in `tfe.css`
|
||
- [ ] `tfe.php` lines 148, 170-172, 193: `font-style:italic`, `margin-top:1.5rem`, `font-size:.88rem;color:#666`, `color:#999;font-style:italic` → `.tfe-note-value`, `.tfe-back-link`, `.tfe-restricted` in `tfe.css`
|
||
- [ ] `admin/edit.php`: multiple `style=` on `.admin-form-row` and banner preview → modifier classes in `admin.css`
|
||
|
||
## Admin semantic HTML (sections IX–XVI)
|
||
|
||
- [ ] **`add.php`/`edit.php`**: Replace `<div class="admin-form-row">` with CSS grid on `<form>` children (~20 divs in add.php, ~22 in edit.php)
|
||
- [ ] **`add.php`/`edit.php`**: Replace inner wrapper `<div>` in multi-control rows — use `<small>` for hints, remove the wrapper div
|
||
- [ ] **`add.php`/`edit.php`**: Replace `<div class="admin-checkbox-list">` with `<ul>`; each `<label class="admin-checkbox-label">` becomes `<li>` containing `<label>`
|
||
- [ ] **`add.php`/`edit.php`**: Replace `<div class="admin-submit-wrap">` — remove; apply styles directly to `form > button:last-child`
|
||
- [ ] **`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">`
|
||
- [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
|
||
- [ ] **`tags.php`**: Move inline `style="margin-top:.35rem;"` on forms → `.admin-inline-form + .admin-inline-form` selector
|
||
- [ ] **`thanks.php`**: Replace `<div class="admin-thesis-info">` with `<section>` + `<h2>` heading; CSS targets `main > section`
|
||
- [ ] **`account.php`**: Replace `<div class="admin-account-status">` with `<dl>`; `__row` → `<div>`, `__label` → `<dt>`
|
||
- [ ] **`account.php`**: Replace `<div class="admin-danger-zone__description">` with `<p>`
|
||
- [ ] **`account.php`**: Move `style="margin-top:3rem;"` on danger zone heading → CSS modifier class
|
||
- [ ] **`login.php`**: Wrap login content in `<main>` (currently no main landmark)
|
||
- [ ] **`login.php`**: Extract inline styles on `.admin-form-row` and `.admin-submit-wrap` → `.admin-form-row--compact` modifier in `admin.css`
|
||
|
||
## Favicon
|
||
|
||
- [ ] **`admin_favicon.svg` used as public-facing favicon** — rename or create a distinct `favicon.svg` so admin and public can diverge without naming confusion
|