Merge pull request #401 from JLG-WOCFR-DEV/codex/review-code-and-accessibility-compliance-wnno9q

Add visible active badges for dashboard navigation

Author: JLG-WOCFR-DEV

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 {

liens-morts-detector-jlg/includes/blc-admin-pages.php

@@ -726,8 +726,15 @@ function blc_render_dashboard_tabs($active_tab) {
             esc_url($tab_url),
             $aria_current
         );
+        $active_badge = '';
+        $active_sr_hint = '';
 
-        echo '<li class="blc-admin-tabs__item"><a' . $link_attributes . '>' . esc_html($tab['label']) . '</a></li>';
+        if ($is_active) {
+            $active_badge = '<span class="blc-admin-tabs__state" aria-hidden="true">' . esc_html__('Actif', 'liens-morts-detector-jlg') . '</span>';
+            $active_sr_hint = '<span class="screen-reader-text">' . esc_html__('(onglet actif)', 'liens-morts-detector-jlg') . '</span>';
+        }
+
+        echo '<li class="blc-admin-tabs__item"><a' . $link_attributes . '>' . esc_html($tab['label']) . $active_sr_hint . $active_badge . '</a></li>';
     }
 
     echo '</ul></nav>';
@@ -3262,8 +3269,20 @@ class="blc-dashboard-summary__item blc-dashboard-summary__item--<?php echo esc_a
                 $card_classes = array(
                     'blc-stat',
                     'blc-stat--' . $card['slug'],
-                    $is_active_card ? 'is-active' : '',
                 );
+
+                if ($is_active_card) {
+                    $card_classes[] = 'is-active';
+                    $card_classes[] = 'blc-stat--has-status';
+                    $aria_label .= ' ' . __('(filtre actif)', 'liens-morts-detector-jlg');
+                }
+
+                $active_badge = $is_active_card
+                    ? '<span class="blc-stat__status" aria-hidden="true">' . esc_html__('Actif', 'liens-morts-detector-jlg') . '</span>'
+                    : '';
+                $active_sr_hint = $is_active_card
+                    ? '<span class="screen-reader-text">' . esc_html__('(filtre actif)', 'liens-morts-detector-jlg') . '</span>'
+                    : '';
                 ?>
                 <a
                     class="<?php echo esc_attr(implode(' ', array_filter(array_map('sanitize_html_class', $card_classes)))); ?>"
@@ -3272,11 +3291,13 @@ class="<?php echo esc_attr(implode(' ', array_filter(array_map('sanitize_html_cl
                     aria-label="<?php echo esc_attr($aria_label); ?>"
                     <?php echo $is_active_card ? ' aria-current="page"' : ''; ?>
                 >
+                    <?php echo $active_badge; ?>
                     <span class="blc-stat-value"><?php echo esc_html($card['value']); ?></span>
                     <span class="blc-stat-label"><?php echo esc_html($card['label']); ?></span>
                     <?php if (!empty($card['cta_label'])) : ?>
                         <span class="blc-stat-cta"><?php echo esc_html($card['cta_label']); ?></span>
                     <?php endif; ?>
+                    <?php echo $active_sr_hint; ?>
                 </a>
             <?php endforeach; ?>
         </div>