import {Meta} from '@storybook/blocks';
import '../styles/shared.css';

<Meta title="Accessibilité/Design System/Audit du Design System"/>

<style>
{
`
  :root {
    --primary: #0c419a;
    --primary-light: rgba(0, 120, 212, 0.1);
    --primary-dark: #005a9e;
    --secondary: #0c419a;
    --secondary-light: #e3e8f2;
    --secondary-dark: #0c419a;
    --neutral-100: #ffffff;
    --neutral-200: #f8f9fa;
    --neutral-300: #eaeaea;
    --neutral-400: #d1d1d1;
    --neutral-500: #a0a0a0;
    --neutral-600: #6e6e6e;
    --neutral-700: #3d3d3d;
    --neutral-800: #1f1f1f;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --transition: all 0.3s ease;
  }

       
  
  .audit-header p {
    font-size: 1.2rem;
    margin-bottom: 0;
    opacity: 0.9;
    position: relative;
    z-index: 1;
    font-weight: 300;
  }
  
  .section {
    padding: 2rem;
    background-color: var(--neutral-100);
    border-radius: var(--radius-md);
    transition: var(--transition);
  }
  
  .section h2 {
    position: relative;
    padding-bottom: 0.75rem;
    margin-top: 0;
    color: var(--primary);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  
  .section h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    
    border-radius: 3px;
  }
  
  .alert {
    background-color: var(--secondary-light);
    border-left: 4px solid var(--secondary);
    padding: 1.25rem 1.5rem;
    margin: 1.75rem 0;
    border-radius: var(--radius-sm);
    position: relative;
  }
  
  .alert strong {
    color: var(--secondary-dark);
  }
  
  .info-box {
    background-color: var(--primary-light);
    border-left: 4px solid var(--primary);
    padding: 1.25rem 1.5rem;
    margin: 1.75rem 0;
    border-radius: var(--radius-sm);
  }
  
  .highlight {
    background-color: var(--primary-light);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-weight: 500;
    color: var(--primary-dark);
  }
  
  .image-container {
    margin: 2rem 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--neutral-300);
    transition: var(--transition);
  }
  
  .image-container img {
    width: 100%;
    display: block;
  }
  
  .image-caption {
    background-color: var(--neutral-200);
    padding: 1rem;
    font-size: 0.9rem;
    color: var(--neutral-700);
    border-top: 1px solid var(--neutral-300);
  }
  
  abbr {
    text-decoration: none;
    border-bottom: 1px dotted var(--primary);
    cursor: help;
  }
  
  .feature-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
  }
  
  .feature-card {
    background-color: var(--neutral-100);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--neutral-300);
    transition: var(--transition);
  }
  
  .feature-card h3 {
    color: var(--primary);
    margin-top: 0;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  
  a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
    border-bottom: 1px solid transparent;
  }
  
  a:hover {
    color: var(--primary-dark);
    border-bottom: 1px solid var(--primary);
  }
`
}
</style>

<div className="header">
  <h1>Audit du Design System</h1>
  <p>Garantir l'accessibilité des composants pour une expérience utilisateur inclusive</p>
</div>

<div className="section">
  <h2>Objectifs</h2>
  
  <p>Le Design System Synapse offre de nombreux avantages en matière d'accessibilité pour les services qui l'adoptent. En veillant à ce que les composants respectent les normes d'accessibilité, il assure une conformité optimale avec les critères du <abbr title="Référentiel Général d’Amélioration de l’Accessibilité">RGAA</abbr> pour les produits.</p>
  
  <div className="feature-list">
    <div className="feature-card">
      <h3>🔧 Simplification</h3>
      <p>Facilite la mise en œuvre de l'accessibilité à grande échelle sur les services numériques.</p>
    </div>
    
    <div className="feature-card">
      <h3>Réduction des erreurs</h3>
      <p>Diminue les risques d'erreurs humaines lors de l'implémentation des bonnes pratiques d'accessibilité.</p>
    </div>
    
    <div className="feature-card">
      <h3>Expérience améliorée</h3>
      <p>Améliore l'expérience utilisateur pour tous, et pas seulement pour les personnes en situation de handicap.</p>
    </div>
  </div>
  
  <div className="info-box">
    <p><strong>Audit en cours :</strong> Nous réalisons actuellement un audit d'accessibilité du Design System afin d'évaluer sa conformité au <abbr title="Référentiel Général d'Amélioration de l'Accessibilité">RGAA</abbr>. Cet audit vise à identifier les points d'amélioration pour garantir que tous les composants sont accessibles.</p>
  </div>
</div>

<div className="section">
  <h2>Couverture des critères</h2>
  
  <p>Le Design System ne garantit pas à lui seul l'accessibilité des services qui l'implémentent, car il ne couvre pas l'ensemble des critères du <abbr title="Référentiel Général d'Amélioration de l'Accessibilité">RGAA</abbr>.</p>
  
  <div className="alert">
    <p><strong>Important :</strong> Le Design System se concentre principalement sur l'aspect visuel et interactif des composants, tandis que le service doit respecter des critères plus larges.</p>
  </div>
  
  <h3>Ce que couvre le Design System :</h3>
  <ul>
    <li>Couleurs et contrastes</li>
    <li>Typographie accessible</li>
    <li>Interactions avec l'interface</li>
    <li>Structure des composants</li>
  </ul>
  
  <h3>Ce qui reste à la charge des équipes :</h3>
  <ul>
    <li>Structure sémantique des contenus</li>
    <li>Alternatives textuelles pour les images</li>
    <li>Gestion des erreurs de formulaire</li>
    <li>Accessibilité des contenus multimédia</li>
    <li>Navigation au clavier personnalisée</li>
  </ul>
  
  <p>Le Design System facilite l'intégration des bonnes pratiques d'accessibilité, mais pour une conformité totale, des ajustements et une validation supplémentaires sont nécessaires au niveau du design, du contenu et de la mise en œuvre technique.</p>
</div>

<div className="section">
  <h2>Documentation et rapports</h2>
  
  <p>Chaque composant possède une page "Accessibilité" qui vous renseignera sur les critères du <abbr title="Référentiel Général d'Amélioration de l'Accessibilité">RGAA</abbr> remontées par l'audit Tanaguru ainsi qu'un rapport complet d'un audit manuel.</p>
  
  <p>Vous pourrez ainsi :</p>
  <ul>
    <li>Suivre les correctifs réalisés</li>
    <li>Identifier la méthodologie appliquée</li>
    <li>Comprendre les bonnes pratiques à suivre</li>
    <li>Appliquer les recommandations dans vos projets</li>
  </ul>
</div>
