import { Meta, Title, Subtitle, Description, Primary, Controls, Stories } from '@storybook/blocks';
import * as SyTabsStories from '../SyTabs.stories';
import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
import '@/stories/styles/shared.css';

<Meta of={SyTabsStories} />

<div className="accessibility-guide">
  <div className="header">
  <h1>Guide d'Accessibilité</h1>
</div>
  
  <div className="intro-section">
    <img 
      src={AccessibilityIcon} 
      alt="Icône d'accessibilité" 
      className="accessibility-icon"
    />
    <div className="intro-text">
      Le composant SyTabs a été conçu en suivant rigoureusement les recommandations d'accessibilité du W3C, 
      notamment le modèle <a href="https://www.w3.org/WAI/ARIA/apg/patterns/tabs/" target="_blank" rel="noopener noreferrer">WAI-ARIA pour les onglets</a>. 
      Ce guide détaille comment notre implémentation respecte ces standards et garantit une expérience utilisateur inclusive.
    </div>
  </div>

  <div className="criteria-section">
    <h2>Critères d'accessibilité respectés</h2>
    
    <div className="criteria-card">
      <div className="criteria-header">
        <span className="criteria-icon">🔍</span>
        <h3>Structure sémantique</h3>
      </div>
      <ul>
        <li><strong>Rôles et sémantique adaptatifs</strong> : Utilisation dynamique de <code>role="tablist"</code> / <code>role="tab"</code> / <code>role="tabpanel"</code> (mode Onglets) ou de la balise native <code>&lt;nav role="navigation"&gt;</code> (mode Navigation)</li>
        <li><strong>État de l'élément actif</strong> : Utilisation de <code>aria-selected="true"</code> (mode Onglets) ou <code>aria-current="page"</code> (mode Navigation)</li>
        <li><strong>Relations programmatiques</strong> : <code>aria-controls</code> et <code>aria-labelledby</code> lient les onglets à leurs panneaux respectifs (uniquement en mode Onglets)</li>
        <li><strong>Nommage accessible</strong> : Le conteneur principal possède un <code>aria-label</code> dynamique (<em>"Onglets de navigation"</em> ou <em>"Menu de navigation"</em> selon le mode)</li>
        <li><strong>Structure HTML aplatie</strong> : Les éléments interactifs (boutons ou liens) sont contenus directement dans leur parent sémantique (<code>&lt;div&gt;</code> ou <code>&lt;nav&gt;</code>) sans balises de liste (<code>&lt;ul&gt;</code>) superflues, optimisant l'arbre d'accessibilité</li>
      </ul>
    </div>
    
    <div className="criteria-card">
      <div className="criteria-header">
        <span className="criteria-icon">⌨️</span>
        <h3>Navigation clavier complète</h3>
      </div>
      <ul>
        <li><strong>Touche Tab</strong> : Navigation vers la liste d'onglets et sortie de celle-ci</li>
        <li><strong>Touches fléchées</strong> : Navigation entre les onglets (gauche/droite)</li>
        <li><strong>Touches Home/End</strong> : Accès direct au premier/dernier onglet</li>
        <li><strong>Touche Espace/Entrée</strong> : Activation de l'onglet actuellement focalisé</li>
        <li><strong>Touche Escape</strong> : Sortie du contexte de navigation des onglets</li>
        <li><strong>Focus visible</strong> : Contour visuel distinct pour indiquer l'onglet actuellement focalisé</li>
      </ul>
    </div>
    
    <div className="criteria-card">
      <div className="criteria-header">
        <span className="criteria-icon">📱</span>
        <h3>États et retours d'information</h3>
      </div>
      <ul>
        <li><strong>État de sélection</strong> : <code>aria-selected="true"</code> ou <code>aria-current="page"</code> indique l'élément actif aux technologies d'assistance</li>
        <li><strong>Éléments désactivés</strong> : Utilisation de l'attribut natif <code>disabled</code> (pour les boutons) ou <code>aria-disabled="true"</code> (pour les liens), qui sont par ailleurs exclus de la navigation au clavier (flèches)</li>
        <li><strong>Visibilité des panneaux</strong> : L'attribut HTML <code>hidden</code> sur les panneaux inactifs les retire correctement de l'arbre d'accessibilité</li>
        <li><strong>Indication visuelle</strong> : Styles distinctifs pour l'onglet actif (couleur de texte, barre de soulignement animée)</li>
        <li><strong>Focus visible</strong> : Un <code>outline</code> de 3px est appliqué lors de la navigation au clavier (<code>:focus-visible</code>)</li>
      </ul>
    </div>
    
    <div className="criteria-card">
      <div className="criteria-header">
        <span className="criteria-icon">🎨</span>
        <h3>Personnalisation accessible</h3>
      </div>
      <ul>
        <li><strong>Contraste configurable</strong> : Options de couleurs pour garantir un contraste suffisant entre les onglets actifs/inactifs</li>
        <li><strong>Taille et espacement</strong> : Dimensions adaptées pour faciliter l'interaction tactile avec une hauteur minimale de 44px</li>
        <li><strong>Compatibilité avec le mode contraste élevé</strong> : Utilisation de variables CSS pour s'adapter aux paramètres système</li>
        <li><strong>Densité et thème</strong> : Options de personnalisation pour s'adapter aux différents contextes d'utilisation</li>
      </ul>
    </div>
  </div>

  <div className="adaptive-mode-section">
    <h2>Mode adaptatif (Onglets vs Navigation)</h2>
    <div className="section-description">
      Le composant SyTabs détecte automatiquement son contexte d'utilisation et adapte sa structure sémantique en conséquence :
    </div>
    
    <div className="criteria-card">
      <div className="criteria-header">
        <span className="criteria-icon">📑</span>
        <h3>Mode Onglets (par défaut)</h3>
      </div>
      <p>Utilisé pour permuter du contenu local sans changer d'URL.</p>
      <ul>
        <li>Utilise le modèle WAI-ARIA complet pour les onglets (<code>role="tablist"</code>, <code>role="tab"</code>, <code>role="tabpanel"</code>).</li>
        <li>L'activation de l'onglet par les flèches du clavier est <strong>automatique</strong>.</li>
      </ul>
    </div>
    
    <div className="criteria-card">
      <div className="criteria-header">
        <span className="criteria-icon">🧭</span>
        <h3>Mode Navigation (Routing)</h3>
      </div>
      <p>Activé automatiquement si au moins un onglet utilise les attributs <code>to</code> ou <code>href</code>.</p>
      <ul>
        <li>Utilise une sémantique de navigation standard (<code>&lt;nav role="navigation"&gt;</code>) au lieu des rôles ARIA d'onglets pour éviter la confusion des utilisateurs de lecteurs d'écran.</li>
        <li>Indique l'élément actif via <code>aria-current="page"</code> au lieu de <code>aria-selected</code>.</li>
        <li>L'activation au clavier est <strong>manuelle</strong> : les flèches déplacent le focus sans déclencher le lien, la touche Entrée valide le choix.</li>
        <li>Les rôles <code>tabpanel</code> ne sont pas générés car ce concept n'est pas applicable à la navigation entre différentes pages.</li>
      </ul>
    </div>
  </div>

  <div className="automatic-section">
    <h2>Activation automatique (Mode Onglets)</h2>
    <div className="section-description">
      En <strong>Mode Onglets</strong>, le composant implémente un modèle d'activation automatique :
    </div>
    <ul>
      <li>La sélection d'un nouvel onglet via la navigation par flèches (Gauche/Droite) active immédiatement cet onglet</li>
      <li>Le contenu du panneau associé est affiché sans nécessiter une action supplémentaire (Entrée/Espace)</li>
      <li>Le focus reste sur l'onglet activé pour permettre de continuer la navigation au clavier</li>
    </ul>
    <div className="section-description">
      <em>Note : En Mode Navigation (Routing), l'activation est manuelle (déplacement du focus avec les flèches, puis validation avec Entrée) pour éviter les redirections inattendues.</em>
    </div>
  </div>

  <div className="demo-section">
    <h2>Démonstration interactive</h2>
    <div className="section-description">
      Explorez ci-dessous un exemple de SyTabs entièrement accessible. 
      Essayez de naviguer en utilisant uniquement votre clavier (Tab pour accéder à la barre d'onglets, flèches gauche/droite pour naviguer entre les onglets) pour tester l'accessibilité.
    </div>
    <Primary />
  </div>

  <div className="tab-panel-section">
    <h2>Relation onglet-panneau (Mode Onglets)</h2>
    <div className="section-description">
      Lorsqu'il n'est pas utilisé pour la navigation de pages, le composant établit une relation programmatique stricte :
    </div>
    <ul>
      <li>Chaque onglet (<code>role="tab"</code>) est associé à un panneau de contenu via <code>aria-controls</code></li>
      <li>Chaque panneau de contenu (<code>role="tabpanel"</code>) est associé à son onglet via <code>aria-labelledby</code></li>
      <li>
        Les identifiants uniques garantissent que ces associations sont clairement établies :
        <ul>
          <li>Onglets : <code>id="tab-&#123;index&#125;"</code></li>
          <li>Panneaux : <code>id="panel-&#123;index&#125;"</code></li>
        </ul>
      </li>
    </ul>
    <div className="section-description">
      Cette structure garantit que les utilisateurs de technologies d'assistance comprennent clairement la relation entre les onglets et leur contenu associé, améliorant ainsi la navigation et la compréhension de l'interface.
    </div>
  </div>

    <div className="warning-section">
    <h2>Note d'audit (Faux positif Tanaguru)</h2>
    <p>
      Un faux positif (éléments interactifs non atteignables en navigation clavier) est remonté par Tanaguru. En réalité, le composant gère intentionnellement le focus via un <em>roving tabindex</em> dans ses deux modes (Onglets et Navigation) pour une meilleure ergonomie : seul l'élément actif est dans l'ordre de tabulation classique (Tab), les autres éléments étant atteignables via les touches fléchées. Une vérification manuelle au clavier confirme que tous les éléments sont parfaitement accessibles et activables, conformément aux comportements attendus.
    </p>
  </div>

  <div className="best-practices">
    <h2>Bonnes pratiques d'utilisation</h2>
    <ul>
      <li>Utilisez des libellés clairs et concis pour chaque onglet, évitez les textes trop longs ou ambiguës</li>
      <li>Limitez le nombre d'onglets pour éviter de surcharger l'interface et la navigation par clavier</li>
      <li>Organisez les onglets dans un ordre logique, avec les informations les plus importantes en premier</li>
      <li>Assurez-vous que la taille des onglets est suffisante pour faciliter l'interaction tactile (au moins 44px de hauteur)</li>
      <li>Maintenez une distinction visuelle claire entre l'onglet actif et les onglets inactifs</li>
      <li>Évitez d'utiliser des onglets imbriqués qui pourraient compliquer la navigation</li>
      <li>Conservez une cohérence dans le comportement et l'apparence des onglets à travers l'application</li>
    </ul>
  </div>

  <div className="resources-section">
    <h2>Ressources supplémentaires</h2>
    <ul>
      <li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/tabs/" target="_blank" rel="noopener noreferrer">Guide des pratiques d'auteur WAI-ARIA pour les onglets</a></li>
      <li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/tabs/examples/tabs-automatic/" target="_blank" rel="noopener noreferrer">Exemple d'onglets WAI-ARIA à activation automatique</a></li>
      <li><a href="https://www.w3.org/TR/wai-aria-practices-1.2/#tabpanel" target="_blank" rel="noopener noreferrer">Pratiques recommandées WAI-ARIA 1.2 pour les panneaux à onglets</a></li>
      <li><a href="https://www.w3.org/WAI/WCAG21/quickref/" target="_blank" rel="noopener noreferrer">Référence rapide WCAG 2.1</a></li>
      <li><a href="https://www.w3.org/TR/wai-aria-1.2/#tab" target="_blank" rel="noopener noreferrer">Spécification WAI-ARIA 1.2 pour le rôle tab</a></li>
    </ul>
  </div>
</div>

<style>
{`
  .accessibility-guide {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    color: #333;
  }

  .intro-section {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    border-left: 5px solid #0077cc;
  }

  .accessibility-icon {
    width: 60px;
    height: 60px;
    margin-right: 20px;
    flex-shrink: 0;
  }

  .intro-text {
    font-size: 1.1em;
    line-height: 1.6;
    margin: 0;
  }

  .criteria-section {
    margin-bottom: 40px;
  }

  .criteria-section h2,
  .adaptive-mode-section h2,
  .demo-section h2,
  .tri-state-section h2,
  .parent-child-section h2,
  .best-practices h2,
  .automatic-section h2,
  .tab-panel-section h2,
  .resources-section h2,
  .warning-section h2 {
    border-bottom: 2px solid #eaecef;
    padding-bottom: 10px;
    margin-top: 30px;
    margin-bottom: 20px;
    color: #0077cc;
  }

  .warning-section h2 {
    color: #856404;
    border-bottom-color: #ffeeba;
    margin-top: 0;
  }

  .criteria-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin-bottom: 20px;
  }

  .criteria-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
  }

  .criteria-icon {
    font-size: 1.8em;
    margin-right: 15px;
  }

  .criteria-header h3 {
    margin: 0;
    font-size: 1.3em;
    color: #0077cc;
  }

  .criteria-card ul {
    margin: 0;
    padding-left: 20px;
  }

  .criteria-card li {
    margin-bottom: 8px;
    line-height: 1.5;
  }

  .demo-section {
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 40px;
  }

  .tri-state-section,
  .parent-child-section {
    background-color: #f0f7ff;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
  }

  .warning-section {
    background-color: #fff3cd;
    border-left: 5px solid #ffeeba;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 40px;
  }

  .warning-section p {
    color: #856404;
    line-height: 1.6;
    margin: 0;
  }

  .tri-state-section p,
  .parent-child-section p {
    line-height: 1.6;
  }

  .best-practices {
    background-color: #f5f5f5;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
  }

  .best-practices ul {
    padding-left: 20px;
  }

  .best-practices li {
    margin-bottom: 10px;
    line-height: 1.5;
  }

  .resources-section {
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
  }

  .resources-section ul {
    padding-left: 20px;
  }

  .resources-section li {
    margin-bottom: 10px;
  }

  .resources-section a {
    color: #0077cc;
    text-decoration: none;
  }

  .resources-section a:hover {
    text-decoration: underline;
  }

  code {
    background-color: #f0f0f0;
    padding: 2px 5px;
    border-radius: 3px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.9em;
  }
`}
</style>