@cnamts/synapse 1.0.0 → 1.0.2

package/src/stories/Accessibilite/Aculturation/AuditDesignSystem.mdx

@@ -1,28 +1,301 @@
-import {Meta} from '@storybook/addon-docs/blocks';
+import {Meta} from '@storybook/blocks';
 
 <Meta title="Accessibilité/Aculturation/Audit du 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;
+  }
 
-## Objectifs
+  .audit-header {
+    color: white;
+    padding: 2.5rem;
+    border-radius: var(--radius-lg);
+    margin-bottom: 2.5rem;
+    box-shadow: var(--shadow-lg);
+    position: relative;
+    overflow: hidden;
+  }
+  
+  .audit-header::before {
+    content: '';
+    position: absolute;
+    top: -50%;
+    right: -50%;
+    width: 100%;
+    height: 100%;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 50%;
+    z-index: 0;
+  }
+  
+  .audit-header h1 {
+    margin-top: 0;
+    font-size: 2.75rem;
+    font-weight: 800;
+    letter-spacing: -0.5px;
+    position: relative;
+    z-index: 1;
+  }
+  
+  .audit-header p {
+    font-size: 1.2rem;
+    margin-bottom: 0;
+    opacity: 0.9;
+    position: relative;
+    z-index: 1;
+    font-weight: 300;
+  }
+  
+  .section {
+    margin: 2.5rem 0;
+    padding: 2rem;
+    background-color: var(--neutral-100);
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-sm);
+    transition: var(--transition);
+    border: 1px solid var(--neutral-300);
+  }
+  
+  .section:hover {
+    box-shadow: var(--shadow-md);
+    transform: translateY(-2px);
+  }
+  
+  .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:hover {
+    box-shadow: var(--shadow-lg);
+    transform: translateY(-3px);
+  }
+  
+  .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:hover {
+    box-shadow: var(--shadow-md);
+    transform: translateY(-2px);
+  }
+  
+  .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>
 
-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. Cela simplifie la mise en œuvre de l'accessibilité à grande échelle sur les services numériques, réduisant ainsi les erreurs humaines et améliorant l'expérience utilisateur pour tous, et pas seulement pour les personnes en situation de handicap.
+<div className="audit-header">
+  <h1>📝 Audit du Design System</h1>
+  <p>Garantir l'accessibilité des composants pour une expérience utilisateur inclusive</p>
+</div>
 
-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.
+<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>
 
-## Couverture des critères
+<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>
 
-Le Design System ne garantit pas à lui seul l'accessibilité des services qui l'implémente, 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>. En effet, le Design System se concentre sur l'aspect visuel et interactif des composants (comme les couleurs, la typographie, les interactions avec l'interface, etc.), tandis que le service doit respecter des critères plus larges. Par exemple, il doit veiller à la structure sémantique des contenus, aux alternatives textuelles, à la gestion des erreurs de formulaire, à l'accessibilité des contenus multimédia, etc. 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.
-
-## Documentation et rapports
-
-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. Vous pourrez ainsi suivre les correctifs réalisés et identifier la méthodologie appliquée.
-
-<figure>
-  <img
-    src={"/capture-page-accessibilite-composant.png"}
-    aria-labelledby="capture-page-accessibilite-alt"
-    style={{ marginTop: '20px', padding: '10px',  border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0'}}
-  />
-  <figcaption id="capture-page-accessibilite-alt" class={'text-caption text-center'}>Capture d'écran de la page Accessibilité du composant NotificationBar.<br/>Celle-ci donne des éléments sur les audits Tanaguru et manuels.</figcaption>
-</figure>
+<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 className="image-container">
+    <img
+      src={"/capture-page-accessibilite-composant.png"}
+      aria-labelledby="capture-page-accessibilite-alt"
+    />
+    <div className="image-caption" id="capture-page-accessibilite-alt">
+      Capture d'écran de la page Accessibilité du composant NotificationBar.<br/>
+      Celle-ci donne des éléments sur les audits Tanaguru et manuels.
+    </div>
+  </div>
+</div>