Add visible active badges for dashboard navigation

Author: JLG-WOCFR-DEV

docs/code-review-2024-10-05.md

@@ -0,0 +1,22 @@
+# Revue de code et audit RGAA
+
+## Synthèse
+- Le plugin structure proprement ses dépendances (activation, cron, assets, pages d’admin) et centralise les préférences UI/accessibilité, ce qui facilite la maintenance.
+- Les préférences d’accessibilité (contraste renforcé, réduction des animations, taille de police) sont présentes côté CSS/JS et désactivables dans l’interface, ce qui va dans le sens du RGAA.
+
+## Tests exécutés
+- `npm test`
+
+## Points positifs
+- Le sélecteur de mode « simple/avancé » est annoncé comme un `role="switch"`, met à jour l’état textuel et appelle une annonce vocale via l’utilitaire `speak`, ce qui répond aux attentes RGAA sur les contrôles dynamiques.【F:liens-morts-detector-jlg/includes/blc-admin-pages.php†L4041-L4093】【F:liens-morts-detector-jlg/assets/js/settings-mode-toggle.js†L17-L117】
+- Les groupes avancés sont rendus avec `role="tablist"`, boutons `role="tab"`, gestion du `tabindex` et masquage via `hidden`, permettant un parcours clavier conforme RGAA.【F:liens-morts-detector-jlg/includes/blc-admin-pages.php†L4400-L4483】【F:liens-morts-detector-jlg/assets/js/blc-admin-scripts.js†L4469-L4526】
+- Les thèmes d’accessibilité appliquent des jeux de couleurs à fort contraste et gèrent le mode réduit de mouvement, couvrant les critères RGAA 3.2 et 10.9.【F:liens-morts-detector-jlg/assets/css/blc-admin-styles.css†L3-L120】
+
+## Points à améliorer / bugs
+1. **Boutons d’aide non contextualisés** – Les boutons d’aide affichent tous l’intitulé « Afficher l’aide » sans préciser le champ ciblé, et le contenu du tooltip n’est lié ni au bouton ni au champ via `aria-describedby`. Un lecteur d’écran ne saura pas à quel champ se rapporte l’aide, ce qui viole les critères RGAA 3.3/9.2. Ajouter un intitulé spécifique (ex. « Aide : délai de relance ») et relier le tooltip au champ concerné résoudrait le problème.【F:liens-morts-detector-jlg/includes/blc-settings-fields.php†L32-L46】
+2. **Fermeture des tooltips limitée à la souris** – Le script ferme les bulles d’aide sur clic extérieur ou Échap, mais pas lorsqu’on quitte le bouton au clavier. On reste avec `aria-expanded="true"` et le tooltip visuellement ouvert après un tab, ce qui contrevient au RGAA 7.1 (perte de focus). Intercepter les événements `focusout`/`blur` pour fermer automatiquement corrigerait cela.【F:liens-morts-detector-jlg/assets/js/blc-admin-scripts.js†L4370-L4427】
+3. **Annonce de l’aide** – Lorsqu’un tooltip s’ouvre, aucun `aria-live` ni message vocal n’est déclenché. Les utilisateurs de lecteurs d’écran n’entendent donc pas le contenu nouvellement disponible, ce qui freine la conformité RGAA 4.1. Une solution consiste à appeler `accessibility.speak` lorsque la bulle s’ouvre ou à appliquer `aria-live="polite"` sur le conteneur actif.【F:liens-morts-detector-jlg/assets/js/blc-admin-scripts.js†L4370-L4410】
+
+## Recommandations
+- Prioriser la correction de la contextualisation et de la fermeture clavier des tooltips pour respecter les critères RGAA les plus critiques.
+- Ajouter un test d’accessibilité automatisé (axe-core, pa11y) sur les pages d’admin afin d’éviter les régressions futures.

docs/review-ergonomie.md

@@ -40,6 +40,8 @@
 - Ajouter des marqueurs textuels (ex. « Actif ») ou icônes contrastées dans les onglets/cartes, et vérifier systématiquement le contraste (≥4.5:1) en clair et en sombre.
 - Lors de l’ouverture de la modale, appliquer `aria-hidden="true"` (ou `inert`) sur le conteneur principal et restaurer l’attribut à la fermeture pour empêcher la navigation au lecteur d’écran. Envisager un backdrop `<div role="presentation">` pour annoncer la prise de focus.
 
+> ✅ Les onglets principaux et les cartes de filtres affichent désormais un badge « Actif » assorti d’une annonce dédiée (`screen-reader-text`), ce qui garantit une distinction perceptible sans dépendre uniquement des couleurs.
+
 ## Fiabilité
 **Constat :**
 - En cas d’échec de planification (`wp_schedule_single_event`), le statut est mis à jour mais l’utilisateur n’a pas de guidage pour résoudre (ex : vérifier DISABLE_WP_CRON, trigger manuel). Les solutions pro fournissent généralement un check-list contextualisé.【F:liens-morts-detector-jlg/includes/blc-admin-pages.php†L205-L274】

liens-morts-detector-jlg/assets/css/blc-admin-styles.css

@@ -393,6 +393,25 @@
         box-shadow var(--blc-admin-transition);
 }
 
+.blc-admin-tabs__state {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2px 8px;
+    margin-left: 4px;
+    font-size: 0.7rem;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    line-height: 1;
+    border-radius: 999px;
+    border: 1px solid currentColor;
+    background: var(--blc-admin-surface);
+    color: currentColor;
+    pointer-events: none;
+    white-space: nowrap;
+}
+
 .blc-admin-tabs__link:hover {
     color: var(--blc-admin-accent-strong);
     background: var(--blc-admin-accent-soft);
@@ -599,6 +618,7 @@
     flex-direction: column;
     align-items: flex-start;
     justify-content: center;
+    position: relative;
     flex: 1 1 200px;
     text-align: left;
     gap: 10px;
@@ -618,6 +638,32 @@
     cursor: pointer;
 }
 
+.blc-stat--has-status {
+    padding-right: 70px;
+}
+
+.blc-stat__status {
+    position: absolute;
+    top: 12px;
+    right: 18px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2px 10px;
+    font-size: 0.7rem;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    line-height: 1;
+    border-radius: 999px;
+    border: 1px solid var(--blc-admin-accent-strong);
+    background: var(--blc-admin-surface);
+    color: var(--blc-admin-accent-strong);
+    pointer-events: none;
+    box-shadow: 0 0 0 1px rgba(17, 24, 28, 0.04);
+    white-space: nowrap;
+}
+
 .blc-stat--static {
     cursor: default;
 }
@@ -1596,7 +1642,16 @@
     .blc-stat {
         width: 100%;
         flex: 1 1 100%;
-        padding: 12px 0;
+        padding: 16px 18px;
+    }
+
+    .blc-stat--has-status {
+        padding-right: 76px;
+    }
+
+    .blc-stat__status {
+        top: 10px;
+        right: 16px;
     }
 
     .blc-manual-actions__grid {
@@ -2713,15 +2768,15 @@ body.blc-modal-open {
     line-height: 1.4;
     box-shadow: 0 22px 40px -26px rgba(15, 118, 110, 0.7);
     opacity: 0;
-    visibility: hidden;
+    pointer-events: none;
     transform: translateY(-6px);
     transition: opacity 0.2s ease, transform 0.2s ease;
     z-index: 30;
 }
 
 .blc-field-help-wrapper.is-active .blc-field-help__bubble {
     opacity: 1;
-    visibility: visible;
+    pointer-events: auto;
     transform: translateY(0);
 }