mirror of
https://codeberg.org/PostERG/xamxam.git
synced 2026-05-06 19:19:19 +02:00
Replace .admin-alert BEM classes with semantic role/data-type attributes
- 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
This commit is contained in:
@@ -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 -->
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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 -->
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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): ?>
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user