PostERG/xamxam
1
0
Fork 0
mirror of https://codeberg.org/PostERG/xamxam.git synced 2026-05-06 19:19:19 +02:00
Code Issues Packages Projects Releases Wiki Activity
Files
c86781b9be5b34576d6969b1a225481759d499a4
xamxam/todo/01-css-semantic-refactor.md
Pontoporeia e1ce900113 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.
2026-04-06 15:32:41 +02:00

4.8 KiB
Raw Blame History

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">
  • 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
Reference in New Issue View Git Blame Copy Permalink