Files
xamxam/todo/01-css-semantic-refactor.md
Pontoporeia fe1f8629ea rename admin-submit-wrap → admin-form-footer across all templates and CSS
- Updated 6 admin templates: add.php, edit.php, login.php, account.php,
  import.php, pages-edit.php — replaced <div class="admin-submit-wrap">
  with <div class="admin-form-footer">
- Updated 8 CSS selectors in admin.css:
  - .admin-form-footer { margin-top/padding-top } (was .admin-submit-wrap)
  - .admin-form > div:not(.admin-form-footer) grid exclusion guard (×3)
  - .admin-login-box .admin-form > div:not(.admin-form-footer) overrides (×2)
  - .admin-login-box .admin-form-footer compact spacing override
- No visual change; purely a semantic rename to a descriptive class name
- Also marked status-badge.php partial and WCAG 1.3.1 badge tasks as
  already-done in todo/02-php-components.md and todo/04-accessibility.md
  (partial + CSS were fully implemented but todo had not been updated)
2026-04-06 15:33:08 +02:00

59 lines
5.5 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# CSS & Semantic HTML Refactor
## CSS class audit: replace with semantic selectors (`admin.css` / `main.css` / `tfe.css` / `search.css`)
- [x] **`admin.css`**: Replace `.admin-main` with `.admin-body main` — already done; CSS uses `.admin-body main`
- [x] **`admin.css`**: Replace `.admin-page-title` with `.admin-body main > h1` — already done; CSS uses `.admin-body main > h1`
- [x] **`admin.css`**: Replace `.admin-alert` / `.admin-alert--error` / `.admin-alert--success` with `[role="alert"]` / `data-type="error|success"` attribute
- [x] **`admin.css`**: Replace `.admin-form-row` with `.admin-body form > div` — already done; CSS uses `.admin-form > div:not(.admin-form-footer)` grid pattern
- [x] **`admin.css`**: Replace `.admin-label` with `.admin-body form label` — already done; CSS uses `.admin-form > div > label`
- [x] **`admin.css`**: Replace `.admin-input` / `.admin-select` / `.admin-textarea` with native element selectors — already done; CSS targets native `input`, `select`, `textarea` inside `.admin-form`
- [x] **`admin.css`**: Replace `.admin-hint` with `.admin-body form small`
- [x] **`admin.css`**: Replace `.admin-table` with `.admin-body table` — already done; CSS uses `.admin-body table`
- [x] **`admin.css`**: Replace `.admin-fieldset` / `.admin-fieldset-legend` with `.admin-body fieldset` / `.admin-body legend` — already done; CSS uses `.admin-body fieldset` and `.admin-body legend`
- [x] **`main.css`**: Replace `.card__caption` with `.home-body .cards-container li p` or `li > a > p`
- [x] **`main.css`**: Replace `.card__media` with `.home-body figure`
- [x] **`tfe.css`**: Replace `.tfe-meta-list` selectors with `article dl`, `article dt`, `article dd` — already done
- [x] **`tfe.css`**: Replace `.tfe-media-block` with `aside figure` — already done
- [x] **`tfe.css`**: Replace `.tfe-file-caption` with `aside figcaption` — already done
- [x] **`search.css`**: Replace `.repertoire-col > h2` — already uses `.repertoire-index section > h2`
- [x] **`system.php`**: Move inline `<style>` block to `system.css`
## Template HTML changes to match
- [x] In all admin templates, replace `<p class="admin-hint">` with `<small>` elements — already done; partials emit `<small>` directly
- [x] In `tfe.php`, remove `class="tfe-meta-list"` — target via `article dl`
- [x] In `tfe.php`, remove `class="tfe-media-block"` — target via `aside figure`
- [x] In `tfe.php`, remove `class="tfe-file-caption"` — target via `aside figcaption`
- [x] In `index.php`, remove `class="card__caption"` — target via `li > a > p`
## Scattered inline styles in templates
- [x] `tfe.php` inline styles — already extracted (no `style=` attributes remain in `public/tfe.php`)
- [x] `admin/edit.php`: multiple `style=` on `.admin-form-row` and banner preview → modifier classes in `admin.css` — already done; no `style=` attributes remain in `edit.php`
## Admin semantic HTML (sections IXXVI)
- [x] **`add.php`/`edit.php`**: Replace `<div class="admin-form-row">` with CSS grid on `<form>` children — already done via form partials; rows are bare `<div>` inside `.admin-form`
- [x] **`add.php`/`edit.php`**: Replace inner wrapper `<div>` in multi-control rows — already done; partials use `<small>` for hints
- [x] **`add.php`/`edit.php`**: Replace `<div class="admin-checkbox-list">` with `<ul>`; each `<label class="admin-checkbox-label">` becomes `<li>` containing `<label>`
- [x] **`add.php`/`edit.php`**: Renamed `<div class="admin-submit-wrap">``<div class="admin-form-footer">` in all 6 admin templates (`add.php`, `edit.php`, `login.php`, `account.php`, `import.php`, `pages-edit.php`) and updated all 8 CSS selectors in `admin.css``.admin-form > div:not(.admin-form-footer)`, `.admin-login-box .admin-form-footer`, etc.
- [x] **`add.php`/`edit.php`**: Replace `<div class="admin-alert admin-alert--error/--success">` with `<p role="alert">` / `<p role="status">` — already done via `flash-messages.php`
- [x] **`index.php`**: Replace `<div class="admin-stats">` / `<div class="admin-stat">` children with `<dl>/<dt>/<dd>`
- [x] **`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">`
- [x] **`index.php`**: Add `scope="col"` to all `<th>` cells in the admin table
- [x] **`index.php`**: Add non-colour indicator + `aria-label="Statut : …"` to status badge `<span>` elements (via `status-badge.php` partial)
- [x] **`tags.php`**: Add `scope="col"` to `<th>` cells
- [x] **`tags.php`**: Move inline `style="margin-top:.35rem;"` on forms → `.admin-inline-form + .admin-inline-form` selector
- [x] **`thanks.php`**: Replace `<div class="admin-thesis-info">` with `<section>` + `<h2>` heading; CSS targets `main > section`
- [x] **`account.php`**: Replace `<div class="admin-account-status">` with `<dl>`; `__row``<div>`, `__label``<dt>`
- [x] **`account.php`**: Replace `<div class="admin-danger-zone__description">` with `<p>`
- [x] **`account.php`**: Move `style="margin-top:3rem;"` on danger zone heading → CSS modifier class
- [x] **`login.php`**: Wrap login content in `<main>` (currently no main landmark)
- [x] **`login.php`**: Extract inline styles on `.admin-form-row` and `.admin-form-footer``login.php` has no `style=` attributes; `.admin-login-box` modifier in `admin.css` already handles the compact layout
## 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