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

<Meta of={SyRadioGroupStories} />

<div className="accessibility-guide">
<div className="header">
  <h1>Guide d'Accessibilité du Composant SyRadioGroup</h1>
</div>
  
  <div className="intro-section">
    <img 
      src={AccessibilityIcon} 
      alt="Icône d'accessibilité" 
      className="accessibility-icon"
    />
    <p className="intro-text">
      Le composant SyRadioGroup a été conçu en suivant rigoureusement les recommandations d'accessibilité du W3C, 
     <a href="https://www.w3.org/WAI/ARIA/apg/patterns/radio/examples/radio/#support-notice-header/" target="_blank" rel="noopener noreferrer"></a>. 
      Ce guide détaille comment notre implémentation respecte ces standards et garantit une expérience utilisateur inclusive.
    </p>
</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 ARIA appropriés</strong> : <code>role="radio"</code> pour le bouton radio</li>
        <li><strong>État du bouton</strong> : <code>aria-checked</code> avec les valeurs <code>true</code>, <code>false</code></li>
        <li><strong>Étiquetage explicite</strong> : Association claire entre le radio bouton et son label</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>Fleche haut/ fleche bas </strong> : Pour naviguer entre les boutons radio</li>
        <li><strong>Touche Tab</strong> : Navigation séquentielle entre les boutons radio</li>
        <li><strong>Focus visible</strong> : Indication claire de l'élément actuellement focalisé</li>
        <li><strong>Gestion des états multiples</strong> : Cycle entre les états non selectionné, selectionné</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-checked</code> indique si le bouton est selectionné, non selectionné</li>
        <li><strong>État de désactivation</strong> : <code>aria-disabled</code> signale les éléments non disponibles</li>
        <li><strong>Validation visuelle</strong> : Couleurs et icônes spécifiques pour les états d'erreur, d'avertissement et de succès</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</li>
        <li><strong>Taille et espacement</strong> : Dimensions adaptées pour faciliter l'interaction tactile</li>
        <li><strong>Compatibilité avec le mode contraste élevé</strong> : Utilisation de <code>currentColor</code> pour s'adapter aux paramètres système</li>
        <li><strong>Densité ajustable</strong> : Options de densité pour s'adapter aux besoins des utilisateurs</li>
      </ul>
    </div>
  </div>

  <div className="demo-section">
    <h2>Démonstration interactive</h2>
    <p>
      Explorez ci-dessous un exemple de SyRadioGroup entièrement accessible avec état indéterminé. 
      Essayez de naviguer en utilisant uniquement votre clavier (fleche haut/bas pour naviguer, Espace pour activer) pour tester l'accessibilité.
    </p>
    <Primary />
  </div>

  <div className="best-practices">
    <h2>Bonnes pratiques d'utilisation</h2>
    <ul>
      <li>Utilisez des libellés clairs et concis pour décrire l'action</li>
      <li>Regroupez les boutons radio dans un radiogroup une légende explicative</li>
      <li>Évitez de modifier l'état d'un bouton automatiquement sans action utilisateur explicite</li>
      <li>Assurez-vous que la taille de la zone cliquable est suffisante (au moins 44×44 pixels pour les interfaces tactiles)</li>
      <li>Fournissez un retour visuel et textuel clair pour les erreurs de validation</li>
    </ul>
  </div>

  <div className="resources-section">
    <h2>Ressources supplémentaires</h2>
    <ul>
      <li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/radio/" target="_blank" rel="noopener noreferrer">Guide des pratiques d'auteur WAI-ARIA</a></li>
      <li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/radio/examples/radio/#support-notice-header/" target="_blank" rel="noopener noreferrer">Exempler radiogroup WAI-ARIA</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/#radio" target="_blank" rel="noopener noreferrer">Spécification WAI-ARIA 1.2 pour le rôle radio</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,
  .demo-section h2,
  .tri-state-section h2,
  .parent-child-section h2,
  .best-practices h2,
  .resources-section h2 {
    border-bottom: 2px solid #eaecef;
    padding-bottom: 10px;
    margin-top: 30px;
    margin-bottom: 20px;
    color: #0077cc;
  }

  .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;
  }

  .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>