From e9e012376de5d8e5e19dce8236fdce8b2e44e200 Mon Sep 17 00:00:00 2001
From: Pontoporeia <pontoporeia@happyngreen.fr>
Date: Thu, 2 Apr 2026 12:35:23 +0200
Subject: [PATCH] Replace .admin-alert BEM classes with semantic role/data-type
 attributes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- admin.css: replace .admin-alert / .admin-alert--error / .admin-alert--success
  selectors with [role="alert"][data-type="error"] and [role="status"][data-type="success"]
- All 10 admin templates updated: <div class="admin-alert admin-alert--{type}">
  becomes <p role="alert|status" data-type="error|success"> (or <div> for the
  import.php multi-item list that contains a <ul>)
- flash-messages.php partial updated to match
- WCAG benefit: role="alert" is an ARIA live region — errors are announced
  immediately by screen readers without focus movement (fixes WCAG 3.3.1, 4.1.2)
- role="status" (polite live region) used for success messages — announced
  without interrupting the user
- Removes two BEM modifier classes; CSS now targets element semantics directly
---
 TODO.md                               | 2 +-
 public/admin/account.php              | 4 ++--
 public/admin/add.php                  | 2 +-
 public/admin/edit.php                 | 4 ++--
 public/admin/import.php               | 4 ++--
 public/admin/index.php                | 4 ++--
 public/admin/login.php                | 2 +-
 public/admin/pages.php                | 2 +-
 public/admin/tags.php                 | 4 ++--
 public/admin/thanks.php               | 2 +-
 public/assets/css/admin.css           | 7 ++++---
 templates/partials/flash-messages.php | 4 ++--
 12 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/TODO.md b/TODO.md
index 1b809be..c93291c 100644
--- a/TODO.md
+++ b/TODO.md
@@ -5,7 +5,7 @@
 ### CSS class audit: replace with semantic selectors
 - [x] **`admin.css`**: Replace `.admin-main` with `.admin-body main` — only one `<main>` per page
 - [x] **`admin.css`**: Replace `.admin-page-title` with `.admin-body main > h1` — always the first `h1` in `<main>`
-- [ ] **`admin.css`**: Replace `.admin-alert` / `.admin-alert--error` / `.admin-alert--success` with `[role="alert"]` or `.admin-body main > .alert` using `data-type="error|success"` attribute instead of modifier classes
+- [x] **`admin.css`**: Replace `.admin-alert` / `.admin-alert--error` / `.admin-alert--success` with `[role="alert"]` or `.admin-body main > .alert` using `data-type="error|success"` attribute instead of modifier classes
 - [ ] **`admin.css`**: Replace `.admin-form-row` with `.admin-body form > div` or `.admin-body form > .row` — form rows are always direct `<div>` children of `<form>`
 - [ ] **`admin.css`**: Replace `.admin-label` with `.admin-body form label` — every label in admin forms
 - [ ] **`admin.css`**: Replace `.admin-input` / `.admin-select` / `.admin-textarea` with `.admin-body form input[type="text"]`, `.admin-body form select`, `.admin-body form textarea` — leverage native element selectors
diff --git a/public/admin/account.php b/public/admin/account.php
index 2ca4af1..1b1905c 100644
--- a/public/admin/account.php
+++ b/public/admin/account.php
@@ -23,10 +23,10 @@ if (empty($_SESSION['csrf_token'])) {
     <h1>Compte administrateur</h1>
 
     <?php if ($error): ?>
-    <div class="admin-alert admin-alert--error">⚠ <?= htmlspecialchars($error) ?></div>
+    <p role="alert" data-type="error">⚠ <?= htmlspecialchars($error) ?></p>
     <?php endif; ?>
     <?php if ($success): ?>
-    <div class="admin-alert admin-alert--success">✓ <?= htmlspecialchars($success) ?></div>
+    <p role="status" data-type="success">✓ <?= htmlspecialchars($success) ?></p>
     <?php endif; ?>
 
     <!-- Status info -->
diff --git a/public/admin/add.php b/public/admin/add.php
index d56fe9a..3bbcf16 100644
--- a/public/admin/add.php
+++ b/public/admin/add.php
@@ -46,7 +46,7 @@ function wasSelected($key, $value) {
     <h1>Ajouter un TFE</h1>
 
     <?php if ($error): ?>
-    <div class="admin-alert admin-alert--error">⚠ <?= htmlspecialchars($error) ?></div>
+    <p role="alert" data-type="error">⚠ <?= htmlspecialchars($error) ?></p>
     <?php endif; ?>
 
     <form action="actions/formulaire.php" method="post" enctype="multipart/form-data" class="admin-form">
diff --git a/public/admin/edit.php b/public/admin/edit.php
index d5b753b..7f5e7c9 100644
--- a/public/admin/edit.php
+++ b/public/admin/edit.php
@@ -68,10 +68,10 @@ try {
     <h1>Modifier un TFE</h1>
 
     <?php if ($error): ?>
-    <div class="admin-alert admin-alert--error">⚠ <?= htmlspecialchars($error) ?></div>
+    <p role="alert" data-type="error">⚠ <?= htmlspecialchars($error) ?></p>
     <?php endif; ?>
     <?php if ($success): ?>
-    <div class="admin-alert admin-alert--success">✓ <?= htmlspecialchars($success) ?></div>
+    <p role="status" data-type="success">✓ <?= htmlspecialchars($success) ?></p>
     <?php endif; ?>
 
     <form method="post" action="/admin/actions/edit.php" class="admin-form" enctype="multipart/form-data">
diff --git a/public/admin/import.php b/public/admin/import.php
index 45e7287..53a2d37 100644
--- a/public/admin/import.php
+++ b/public/admin/import.php
@@ -324,7 +324,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_FILES['csv_file'])) {
     <h1>Importer une liste de TFE</h1>
 
     <?php if (!empty($errors)): ?>
-    <div class="admin-alert admin-alert--error">
+    <div role="alert" data-type="error">
         <strong>⚠ Erreurs :</strong>
         <ul style="margin:.5rem 0 0;padding-left:1.2rem;">
             <?php foreach ($errors as $err): ?>
@@ -335,7 +335,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_FILES['csv_file'])) {
     <?php endif; ?>
 
     <?php if ($message): ?>
-    <div class="admin-alert admin-alert--success">✓ <?= htmlspecialchars($message) ?></div>
+    <p role="status" data-type="success">✓ <?= htmlspecialchars($message) ?></p>
     <?php endif; ?>
 
     <form action="import.php" method="post" enctype="multipart/form-data" class="admin-import-area">
diff --git a/public/admin/index.php b/public/admin/index.php
index 5e267ea..a12523d 100644
--- a/public/admin/index.php
+++ b/public/admin/index.php
@@ -68,10 +68,10 @@ document.addEventListener('DOMContentLoaded', () => {
     <h1>Liste des TFE</h1>
 
     <?php if (isset($_SESSION['error'])): ?>
-    <div class="admin-alert admin-alert--error">⚠ <?= htmlspecialchars($_SESSION['error']); unset($_SESSION['error']); ?></div>
+    <p role="alert" data-type="error">⚠ <?= htmlspecialchars($_SESSION['error']); unset($_SESSION['error']); ?></p>
     <?php endif; ?>
     <?php if (isset($_SESSION['success'])): ?>
-    <div class="admin-alert admin-alert--success">✓ <?= htmlspecialchars($_SESSION['success']); unset($_SESSION['success']); ?></div>
+    <p role="status" data-type="success">✓ <?= htmlspecialchars($_SESSION['success']); unset($_SESSION['success']); ?></p>
     <?php endif; ?>
 
     <!-- Maintenance mode toggle -->
diff --git a/public/admin/login.php b/public/admin/login.php
index c058585..776ddbc 100644
--- a/public/admin/login.php
+++ b/public/admin/login.php
@@ -30,7 +30,7 @@ $pageTitle = 'Connexion';
         <div class="admin-login-box">
             <h2>Administration</h2>
             <?php if ($error): ?>
-                <div class="admin-alert admin-alert--error">⚠ <?= htmlspecialchars($error) ?></div>
+                <p role="alert" data-type="error">⚠ <?= htmlspecialchars($error) ?></p>
             <?php endif; ?>
             <form method="post" action="/admin/login.php" class="admin-form">
                 <div class="admin-form-row">
diff --git a/public/admin/pages.php b/public/admin/pages.php
index 4f28ce2..70edc75 100644
--- a/public/admin/pages.php
+++ b/public/admin/pages.php
@@ -25,7 +25,7 @@ unset($_SESSION['success']);
     <h1>Pages statiques</h1>
 
     <?php if ($success): ?>
-    <div class="admin-alert admin-alert--success">✓ <?= htmlspecialchars($success) ?></div>
+    <p role="status" data-type="success">✓ <?= htmlspecialchars($success) ?></p>
     <?php endif; ?>
 
     <table>
diff --git a/public/admin/tags.php b/public/admin/tags.php
index 6b3f4d6..d1e6f78 100644
--- a/public/admin/tags.php
+++ b/public/admin/tags.php
@@ -29,10 +29,10 @@ unset($_SESSION['admin_error'], $_SESSION['admin_success']);
     <h1>Mots-clés (<?= count($tags) ?>)</h1>
 
     <?php if ($error): ?>
-    <div class="admin-alert admin-alert--error">⚠ <?= htmlspecialchars($error) ?></div>
+    <p role="alert" data-type="error">⚠ <?= htmlspecialchars($error) ?></p>
     <?php endif; ?>
     <?php if ($success): ?>
-    <div class="admin-alert admin-alert--success">✓ <?= htmlspecialchars($success) ?></div>
+    <p role="status" data-type="success">✓ <?= htmlspecialchars($success) ?></p>
     <?php endif; ?>
 
     <table>
diff --git a/public/admin/thanks.php b/public/admin/thanks.php
index 669e80d..41dec17 100644
--- a/public/admin/thanks.php
+++ b/public/admin/thanks.php
@@ -69,7 +69,7 @@ $pageTitle = "Récapitulatif TFE";
     <h1>Récapitulatif TFE</h1>
 
     <?php if ($error): ?>
-        <div class="admin-alert admin-alert--error">⚠ <?= htmlspecialchars($error) ?></div>
+        <p role="alert" data-type="error">⚠ <?= htmlspecialchars($error) ?></p>
         <p><a href="/admin/add.php" class="admin-btn-secondary">Retour au formulaire</a></p>
 
     <?php elseif ($thesis): ?>
diff --git a/public/assets/css/admin.css b/public/assets/css/admin.css
index c0f8513..8362bda 100644
--- a/public/assets/css/admin.css
+++ b/public/assets/css/admin.css
@@ -276,7 +276,8 @@
 }
 
 /* ---- Alert Messages ---- */
-.admin-alert {
+[role="alert"],
+[role="status"] {
   padding: 0.75rem 1rem;
   border-radius: 3px;
   font-size: 0.9rem;
@@ -284,13 +285,13 @@
   border-left: 3px solid;
 }
 
-.admin-alert--error {
+[role="alert"][data-type="error"] {
   background: rgba(200, 0, 0, 0.1);
   border-color: #c00;
   color: #ff6b6b;
 }
 
-.admin-alert--success {
+[role="status"][data-type="success"] {
   background: rgba(0, 150, 80, 0.1);
   border-color: #0a0;
   color: #4caf50;
diff --git a/templates/partials/flash-messages.php b/templates/partials/flash-messages.php
index 6966fd0..e7e8457 100644
--- a/templates/partials/flash-messages.php
+++ b/templates/partials/flash-messages.php
@@ -11,8 +11,8 @@
 $_flash = App::consumeFlash();
 ?>
 <?php if ($_flash['error']): ?>
-<div class="admin-alert admin-alert--error">⚠ <?= htmlspecialchars($_flash['error']) ?></div>
+<p role="alert" data-type="error">⚠ <?= htmlspecialchars($_flash['error']) ?></p>
 <?php endif; ?>
 <?php if ($_flash['success']): ?>
-<div class="admin-alert admin-alert--success">✓ <?= htmlspecialchars($_flash['success']) ?></div>
+<p role="status" data-type="success">✓ <?= htmlspecialchars($_flash['success']) ?></p>
 <?php endif; ?>