@cnamts/synapse 1.0.24 → 1.0.25

package/src/stories/Accessibilite/KitDePreAudit/Echantillonnage.mdx

@@ -121,13 +121,20 @@ import '../../styles/shared.css';
     padding: 1.5rem;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
   }
+
+  h2 {
+    font-weight: bold !important;
+    color: #0c419a !important;
+    font-size: 1.6rem !important;
+  }
 `
 }
 </style>
 
 <div className="header">
   <h1>Échantillonnage</h1>
-  <p>Définir un périmètre représentatif pour votre audit d'accessibilité</p>
+  <p>Définir un périmètre représentatif pour votre audit d'accessibilité.
+Si vous êtes au démarrage de votre projet, il est difficile d'établir l'échantillonnage. Utilisez donc le kit de pré-audit de manière systématique sur chaque nouveau développement afin d'éviter une dette d'accessibilité lors de l'échantillonnage. </p>
 </div>
 
 <div className="info-card">

package/src/stories/Accessibilite/KitDePreAudit/Introduction.mdx

@@ -26,7 +26,6 @@ import '../../styles/shared.css';
     margin: 2rem 0;
     padding: 1.5rem;
     border-radius: 8px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
   }
   
   .info-section h2 {
@@ -107,7 +106,6 @@ import '../../styles/shared.css';
       left: 0;
       width: 80px;
       height: 4px;
-      
       border-radius: 3px;
     }
 
@@ -121,32 +119,75 @@ import '../../styles/shared.css';
       
       border-radius: 3px;
     }
+
+      .info-section h2 {
+    position: relative;
+    padding-bottom: 0.75rem;
+    margin-top: 0;
+    color: #0c419a;
+    font-weight: 700;
+    font-size: 1.6rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  
+  .info-section h2::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 60px;
+    height: 3px;
+    border-radius: 3px;
+  }
 `
 }
 </style>
 
 <div className="header">
-  <h1>Pré-audit à l'accessibilité</h1>
-  <p>Vérifiez la conformité de votre service web avant l'audit officiel</p>
+  <h1>Pré-audit à l'accessibilité.</h1>
+  <p>Vérifiez la conformité de votre service web avant l'audit officiel ou pendant les phases de développement.</p>
 </div>
 
 <div className="info-section">
   <h2>🌟 Objectif</h2>
-  <p>L'objectif du pré-audit est d'<b>obtenir un premier avis sur le taux de conformité de votre service web, avant de convenir d'un réel audit <abbr title="Référentiel Général d'Amélioration de l'Accessibilité">RGAA</abbr></b>, sans viser l'exhaustivité ni un score parfait. La procédure se fait <b>en autonomie par l'équipe de développement du produit</b>. Le relevé des non-conformités relève de la responsabilité de l’équipe de développement, ce kit étant conçu pour guider l’auto-évaluation.</p>
 
-  <p>La restitution consiste à s'assurer que toutes les exigences du pré-audit sont remplies et que vous ayez un minimum d'erreur en lançant les tests automatisés avec Tanaguru.</p>
+<p>Le kit de pré-audit peut être utilisé de deux façons :</p>
+
+<ul>
+  <li>
+    <strong>Préparer un audit :</strong> en identifiant en amont un maximum de non-conformités. Il permet d’obtenir un premier niveau d’évaluation de l’accessibilité de votre service web avant la réalisation d’un audit <abbr title="Référentiel Général d'Amélioration de l'Accessibilité">RGAA</abbr>, sans viser l’exhaustivité ni un score final de conformité.
+  </li>
+  <li>
+    <strong>Vérifier en continu :</strong> s'assurer tout au long du développement, qu’un niveau intermédiaire d’accessibilité est bien respecté, réduisant ainsi le risque de non-conformité lors de l'audit officiel.
+  </li>
+</ul>
+
+  <p>
+    La démarche est réalisée <b>en autonomie par l’équipe de développement</b>. Le kit guide l’auto-évaluation et permet d'identifier les anomalies. La correction doit être effectuée par l'équipe.
+  </p>
 
-  <p>Les résultats observés par le pré-audit sont souvent partiels et doivent être considérés comme un point de départ et non comme une évaluation finale. Lors d'un audit suivi du pré-audit, nous observons un taux minimum compris entre 30% et 50%. Un contre-audit pourra être proposé après application des correctifs relevés par l'audit.</p>
+  <p>
+    Une fois les corrections apportées, l'équipe doit restituer la bonne conformité dans le rapport de pré-audit. Le rapport de pré-audit ne détermine pas de score puisque seul l'audit peut le faire. Néanmoins, par hypothèse, nous estimons qu'un projet peut atteindre le seuil de conformité partielle du RGAA {'>'}50%.
+  </p>
 
-  <p>L'enjeu est d'identifier un maximum de non conformités en phase pré-audit afin de réduire le nombre de correctifs en phase audit. Ce kit met aussi à disposition <b>des outils et des tutoriels pour vous accompagner dans cette démarche</b>.</p>
+  <p>
+    Dans le cadre d'un objectif de conformité totale (100%) du RGAA, un processus d'audit peut être engagé. Le Kit de pré-audit ne permet pas seul d'atteindre le 100%.
+  </p>
+  <p>
+    L’enjeu est d’identifier le plus tôt possible un maximum de non-conformités afin de réduire le volume de correctifs à traiter lors de l’audit. Le kit met également à disposition <b>des outils et des tutoriels pour vous accompagner dans cette démarche</b>.
+  </p>
 
   <div className="alert">
-    <p><strong>Note :</strong> Vous pouvez nous solliciter pour un accompagnement si vous rencontrez des difficultés techniques à résoudre les non-conformités, relevées par Tanaguru en phase automatique ou par l'équipe en phase manuelle.</p>
+    <p>
+      <strong>Note :</strong> Vous pouvez nous solliciter pour un accompagnement si vous rencontrez des difficultés techniques dans la résolution des non-conformités relevées, que ce soit par Tanaguru lors des tests automatiques ou par l’équipe lors des vérifications manuelles.
+    </p>
   </div>
 </div>
 
 <div className="section-container">
-  <h2>Environnement de test</h2>
+  <h2>Environnement de test (pré-audit, audit, contre-audit)</h2>
   <p>Il est important de tester votre service dans un environnement similaire à celui utilisé par les utilisateurs finaux. <b>L'environnement de test sera le même pour chacune des phases (pré-audit, audit, contre-audit) et devra être stable. Aucune nouvelle fonctionnalité ne doit être développée entre chaque phase.</b> Seules les corrections liées aux écarts d’accessibilité identifiés doivent être réalisées, afin de garantir la cohérence et la comparabilité des résultats.</p>
 
   <p>Le produit devra mettre à disposition un environnement adéquat pour l'audit qui, selon le public ciblé par le produit, pourra être un environnement de bureau ou mobile.</p>

package/src/stories/Accessibilite/KitDePreAudit/Outils/Introduction.mdx

@@ -45,6 +45,12 @@ import '../../../styles/shared.css';
       background: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"%3E%3Cpath d="M0,0 L100,0 L100,100 L0,100 Z" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="2"/%3E%3C/svg%3E') repeat;
       opacity: 0.3;
     }
+
+      h2 {
+    font-weight: bold !important;
+    color: #0c419a !important;
+    font-size: 1.6rem !important;
+  }
     
        
     
@@ -93,6 +99,7 @@ import '../../../styles/shared.css';
       gap: 0.75rem;
       position: relative;
       padding-bottom: 0.75rem;
+       font-weight: bold !important;
     }
     
     .tool-card-title::after {
@@ -105,6 +112,11 @@ import '../../../styles/shared.css';
       
       border-radius: 3px;
     }
+
+    .tool-card-title-tanaguru p {
+      font-size: 1.2rem !important;
+      font-weight: bold !important;
+    }
     
     .tool-card-icon {
       width: 36px;
@@ -115,6 +127,7 @@ import '../../../styles/shared.css';
       background-color: rgba(0, 120, 212, 0.1);
       border-radius: 50%;
       font-size: 1.2rem;
+      margin-bottom: 0.5rem;
     }
     
     .tool-card-description {
@@ -131,6 +144,7 @@ import '../../../styles/shared.css';
       text-decoration: none;
       font-weight: 500;
       position: relative;
+       font-weight: bold;
     }
     
     .tool-card-link::after {
@@ -269,23 +283,16 @@ import '../../../styles/shared.css';
 <div className="header">
   <h1>Outils d'accessibilité</h1>
   <p>
-    Découvrez les outils essentiels pour vérifier la conformité de vos interfaces aux normes d'accessibilité dans le cadre du pré-audit et de l'audit.
+    Découvrez les outils essentiels pour vérifier la conformité de vos interfaces aux normes d'accessibilité dans le cadre du pré-audit, de l'audit ou de la vérification continue. <br/> Ces outils vous aideront à identifier et corriger les problèmes d'accessibilité avant même de soumettre votre produit à un audit complet.
   </p>
 </div>
 
-<section className="section">
-  <h2 className="section-title">Présentation</h2>
-  <p className="section-description">
-    Dans le cadre du pré-audit et de l'audit, il existe des outils automatisés pour vérifier certains critères de conformité en matière d'accessibilité. Ces outils vous aideront à identifier et corriger les problèmes d'accessibilité avant même de soumettre votre produit à un audit complet.
-  </p>
-</section>
 <section className="section">
   <h2 className="section-title">Outil principal</h2>
   
   <div className="tool-card">
     <div className="tool-card-content">
-      <h3 className="tool-card-title">
-        <span className="tool-card-icon" role="img" aria-hidden="true">🔍</span>
+      <h3 className="tool-card-title-tanaguru">
         Tanaguru webext RGAA
       </h3>
       

package/src/stories/Accessibilite/KitDePreAudit/Preaudit.mdx

@@ -34,12 +34,9 @@ import '../../styles/shared.css';
   
   .info-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);
   }
   
   .info-section h2 {
@@ -48,6 +45,7 @@ import '../../styles/shared.css';
     margin-top: 0;
     color: var(--primary);
     font-weight: 700;
+    font-size: 1.6rem;
     display: flex;
     align-items: center;
     gap: 0.5rem;
@@ -60,7 +58,6 @@ import '../../styles/shared.css';
     left: 0;
     width: 60px;
     height: 3px;
-      
     border-radius: 3px;
   }
   
@@ -78,28 +75,15 @@ import '../../styles/shared.css';
   }
   
   .verification-card {
-    background-color: var(--neutral-200);
-    border: 1px solid var(--neutral-300);
     padding: 1.75rem;
     margin-bottom: 2rem;
     border-radius: var(--radius-md);
-    box-shadow: var(--shadow-sm);
     transition: var(--transition);
     position: relative;
   }
   
-  .verification-card::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 0;
-    height: 100%;
-    width: 4px;
-    background: linear-gradient(to bottom, var(--primary), var(--primary-light));
-    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
-  }
   
-  .verification-card h3 {
+  .verification-card h2 {
     color: var(--primary);
     margin-top: 0;
     display: flex;
@@ -146,12 +130,12 @@ import '../../styles/shared.css';
     background: linear-gradient(135deg, #f0f7ff 0%, #e6f0ff 100%);
     border-radius: var(--radius-md);
     padding: 1.75rem;
-    margin: 1.75rem 0;
+    margin: 1rem 0;
     border: 1px solid #d9e8ff;
     position: relative;
   }
   
-  .contact-info h3 {
+  .contact-info h2 {
     color: var(--primary-dark);
     margin-top: 0;
     display: flex;
@@ -168,6 +152,10 @@ import '../../styles/shared.css';
     color: var(--primary-dark);
     border: 1px solid var(--neutral-300);
   }
+
+  h4 {
+     font-weight: bold !important;
+  }
   
   a {
     color: var(--primary);
@@ -187,18 +175,20 @@ import '../../styles/shared.css';
 
 <div className="header">
   <h1>Pré-audit d'accessibilité</h1>
-  <p>Vérifiez la conformité de votre service web avant l'audit officiel</p>
+  <p>Vérifiez la conformité de votre service web avant l'audit officiel ou pendant les phases de développement.</p>
 </div>
 
 <div className="info-section">
-  <h2>🌟 Objectif</h2>
-  <p>L'objectif du pré-audit est d'atteindre en semi-autonomie un premier palier de conformité de votre service web avant de convenir d'un réel audit <abbr title="Référentiel Général d'Amélioration de l'Accessibilité">RGAA</abbr>. La procédure se fait en autonomie par l'équipe de développement du produit. Le relevé des non-conformités relève de la responsabilité de l’équipe de développement, ce kit étant conçu pour guider l’auto-évaluation.</p>
+  <h2>🌟 Objectif:</h2>
+  <p>L'Objectif du pré-audit est d'atteindre en semi-autonomie un premier palier de conformité de votre service web avant de convenir d'un réel audit <abbr title="Référentiel Général d'Amélioration de l'Accessibilité">RGAA</abbr>. La procédure se fait en autonomie par l'équipe de développement du produit. Le relevé des non-conformités relève de la responsabilité de l’équipe de développement, ce kit étant conçu pour guider l’auto-évaluation.</p>
   
   <p>Pour prouver ce palier et être éligible à la demande d'audit complet vous devez compléter <a href="/documents/Checklist_pre-audit_CNAM_NOM_DU_PRODUIT.xlsx" target="_blank">ce fichier</a> qui mentionne les exigences requises par la vérification assistée des outils automatisés et la vérification manuelle.</p>
+
+  <p>Les tests ci dessous permettent aussi de vérifier tout au long des phases de développement, qu’un niveau intermédiaire d’accessibilité est bien respecté.</p>
 </div>
 
 <div className="contact-info">
-  <h3>📬 Contact et assistance</h3>
+  <h2>📬 Contact et assistance</h2>
   <p>Dans le cas où vous rencontrez une difficulté avec un test, un critère ou un outil n'hésitez pas à nous contacter via l'adresse <a href="mailto:valentin.becquet@assurance-maladie.fr">valentin.becquet@assurance-maladie.fr</a> (cette adresse évoluera prochainement).</p>
   
   <p>Pour demander un audit, contactez également cette adresse. L'acceptance de la demande est soumise à la démonstration de l'effort engagé par l'équipe-produit. Cette appréciation fera l'objet d'une discussion.</p>
@@ -212,7 +202,7 @@ import '../../styles/shared.css';
   <h2>🔍 Vérification assistée des outils automatisés</h2>
   
   <div className="verification-card">
-    <h3>📦 Utilisation de Tanaguru</h3>
+    <h2>📦 Utilisation de Tanaguru</h2>
     <p>Lancez Tanaguru sur chaque page de l'échantillon de test. Vous pouvez retrouver une documentation d'utilisation de Tanaguru <a href="/?path=/docs/accessibilité-kit-de-pré-audit-outils-tanaguru-utilisation--docs">ici</a>.</p>
     
     <div className="alert">
@@ -228,7 +218,7 @@ import '../../styles/shared.css';
 <div className="info-section">
   <h2>👤 Vérification manuelle</h2>
 
-  <p>L'objectif est de vérifier chacun des 8 points suivants pour chaque page de l'échantillon de test. Nous recommandons vivement, au préalable, de naviguer sur la totalité de la page via le lecteur d'écran car il s'agit d'un moyen concret de vérifier si le code sémantique et la navigation au clavier sont réellement conformes. Vous pouvez consulter notre <a href="/?path=/docs/accessibilité-kit-de-pré-audit-outils-lecteurs-d-écran--docs">mode d'emploi sur les lecteurs d'écran</a>.</p>
+  <p>L'Objectif est de vérifier chacun des 8 points suivants pour chaque page de l'échantillon de test. Nous recommandons vivement, au préalable, de naviguer sur la totalité de la page via le lecteur d'écran car il s'agit d'un moyen concret de vérifier si le code sémantique et la navigation au clavier sont réellement conformes. Vous pouvez consulter notre <a href="/?path=/docs/accessibilité-kit-de-pré-audit-outils-lecteurs-d-écran--docs">mode d'emploi sur les lecteurs d'écran</a>.</p>
 
   <div className="alert">
     <p><strong>Notation :</strong> Au sein de la check-list, il faudra choisir entre <span className="highlight">"Conforme"</span>, <span className="highlight">"Non conforme"</span>, <span className="highlight">"Non applicable"</span>, <span className="highlight">"Dérogé"</span> ou <span className="highlight">"Non testé"</span> pour chacun des critères.</p>
@@ -237,11 +227,11 @@ import '../../styles/shared.css';
 </div>
 
 <div className="verification-card">
-  <h3>⌨️ 1. Navigation au clavier</h3>
+  <h2>⌨️ 1. Navigation au clavier</h2>
 
-  <h4>Objectif</h4>
+  <h4>Objectif:</h4>
   <p>S'assurer que toutes les parties sont entièrement navigables au clavier</p>
-  <h4>Méthode de test</h4>
+  <h4>Méthode de test:</h4>
   <ol>
     <li>Naviguer via la touche Tab pour se déplacer, Shift+Tab pour revenir en arrière, Entrée/Espace/Flèches/etc. en fonction des composants.</li>
     <li>Tester tous les éléments interactifs : menus, menus déroulants, formulaires, liens, boutons, carrousels, fenêtres modales, etc. Concernant le comportement clavier pour les composants d'interface, se renseigner via les <a href="https://www.w3.org/WAI/ARIA/apg/patterns/">patterns du W3C</a>.</li>
@@ -249,7 +239,7 @@ import '../../styles/shared.css';
     <li>S'assurer que le focus du clavier reste visible et possède un contraste minimum de 3:1.</li>
     <li>Vérifier qu'aucun piège au clavier n'existe (boucle, etc.).</li>
   </ol>
-  <h4>Outil éventuel</h4>
+  <h4>Outil éventuel:</h4>
   <p>Aucun</p>
 
   <div className="alert">
@@ -262,17 +252,17 @@ import '../../styles/shared.css';
 </div>
 
 <div className="verification-card">
-  <h3>📺 2. Éléments visuels et déclenchements automatiques</h3>
+  <h2>📺 2. Éléments visuels et déclenchements automatiques</h2>
 
-  <h4>Objectif</h4>
+  <h4>Objectif:</h4>
   <p>Vérifier que les animations, transitions et autres éléments visuels peuvent être arrêtés, mis en pause ou désactivés par l'utilisateur.</p>
-  <h4>Méthode de test</h4>
+  <h4>Méthode de test:</h4>
   <ol>
     <li>Identifier tous les éléments animés, qui clignotent ou se mettent à jour automatiquement sur votre site.</li>
     <li>Vérifier que ces éléments peuvent être arrêtés ou mis en pause par l'utilisateur.</li>
     <li>S'assurer que la durée du mouvement est inférieure ou égale à 5 secondes s'il n'existe aucun moyen d'arrêter ou de masquer le contenu.</li>
   </ol>
-  <h4>Outil éventuel</h4>
+  <h4>Outil éventuel:</h4>
   <p>Aucun</p>
 
   <div className="alert">
@@ -281,17 +271,17 @@ import '../../styles/shared.css';
 </div>
 
 <div className="verification-card">
-  <h3>🔗 3. Pertinence des libellés et textes alternatifs</h3>
+  <h2>🔗 3. Pertinence des libellés et textes alternatifs</h2>
 
-  <h4>Objectif</h4>
+  <h4>Objectif:</h4>
   <p>Les libellés et textes alternatifs des images, liens, boutons doivent être explicite, clair et contextuel, en évitant les termes génériques comme "Logo", "Cliquez ici" ou "En savoir plus".</p>
-  <h4>Méthode de test</h4>
+  <h4>Méthode de test:</h4>
   <ol>
     <li>Inspecter les images porteuses d'information et s'assurer qu'elles contiennent un alt pertinent (ou legend pour les balises picture)</li>
     <li>À l'inverse, s'assurer que seules les images de décoration sont ignorées par les technologies d'assistance (ex: aria-hidden="true")</li>
     <li>Vérifier que chaque lien ou bouton a un intitulé qui décrit clairement sa fonction ou sa destination.</li>
   </ol>
-  <h4>Outil éventuel</h4>
+  <h4>Outil éventuel:</h4>
   <p>Pour les images, le plugin Assistant RGAA permet de mettre en évidence les images considérées avec ou sans alternative textuelle (catégorie 1). La catégorie 6 du même plugin permet de mettre en évidence les liens et liens images.</p>
 
   <div className="alert">
@@ -305,12 +295,12 @@ import '../../styles/shared.css';
 </div>
 
 <div className="verification-card">
-  <h3>📝 4. Formulaires</h3>
+  <h2>📝 4. Formulaires</h2>
 
-  <h4>Objectif</h4>
+  <h4>Objectif:</h4>
   <p>Assurez-vous que tous les éléments d'un formulaire sont accessibles et compréhensibles pour les utilisateurs, y compris ceux qui utilisent des technologies d'assistance (lecteurs d'écran, commandes vocales, etc.).</p>
 
-  <h4>Méthode de test :</h4>
+  <h4>Méthode de test: :</h4>
 
   <div className="verification-steps">
     <h5>1. Labels associés aux champs</h5>
@@ -349,7 +339,7 @@ import '../../styles/shared.css';
     </ol>
   </div>
 
-  <h4>Outil éventuel</h4>
+  <h4>Outil éventuel:</h4>
   <p>Utilisation du lecteur d'écran pour vérifier la navigation et l'accessibilité des formulaires, tel que l'indication du caractère obligatoire du champ, la liaison du champ aux aides à la saisie ainsi qu'aux messages d'erreurs, le comportement à la soumission du formulaire, etc.</p>
 
    <h4>Ressources</h4>
@@ -357,18 +347,18 @@ import '../../styles/shared.css';
 </div>
 
 <div className="verification-card">
-  <h3>📃 5. Tableaux</h3>
+  <h2>📃 5. Tableaux</h2>
 
-  <h4>Objectif</h4>
+  <h4>Objectif:</h4>
   <p>Vérifier que les tableaux de données sont bien structurés</p>
-  <h4>Méthode de test</h4>
+  <h4>Méthode de test:</h4>
   <ol>
     <li>S'assurer que les titres des tableaux de données sont sémantiquement rattachés au tableau et sont pertinents.</li>
     <li>S'assurer que tableaux de données complexes (en-têtes n'étant pas qu'en une seule ligne ou une seule colonne) possèdent un résumé pertinent.</li>
     <li>Vérifiez que les cellules d'en-tête sont correctement déclarées avec des balises <code>&lt;th&gt;</code> et non des balises <code>&lt;td&gt;</code> stylisées.</li>
     <li>Assurez-vous que les tableaux complexes ont des attributs <code>scope</code> ou des associations entre cellules d'en-tête et cellules de données.</li>
   </ol>
-  <h4>Outil éventuel</h4>
+  <h4>Outil éventuel:</h4>
   <p>Inspecteur de code</p>
 
   <div className="alert">
@@ -383,15 +373,15 @@ import '../../styles/shared.css';
 </div>
 
 <div className="verification-card">
-  <h3>📬 6. Langue</h3>
-  <h4>Objectif</h4>
+  <h2>📬 6. Langue</h2>
+  <h4>Objectif:</h4>
   <p>Permettre aux lecteurs d’écran d’utiliser la bonne prononciation.</p>
-  <h4>Méthode de test</h4>
+  <h4>Méthode de test:</h4>
   <ol>
     <li>Inspectez le code source de la page (clic droit > "Inspecter" dans le navigateur) et vérifiez que l’attribut `lang="fr"` (ou la langue correspondante) est bien présent dans l’élément `<html>`. S’il s’agit d’une autre langue, elle doit être pertinente ([voir documentation MDN sur l’attribut lang](https://developer.mozilla.org/fr/docs/Web/HTML/Global_attributes/lang))</li>
     <li>Repérer les mots/phrases dans une autre langue au sein de la page et vérifier l'existence et la valeur de l’attribut <code>lang</code>.</li>
   </ol>
-  <h4>Outil éventuel</h4>
+  <h4>Outil éventuel:</h4>
   <p>Inspecteur de code</p>
 
   <div className="alert">
@@ -400,18 +390,18 @@ import '../../styles/shared.css';
 </div>
 
 <div className="verification-card">
-  <h3>📄 7. Titre de la page et hiérarchie des titres</h3>
+  <h2>📄 7. Titre de la page et hiérarchie des titres</h2>
 
-  <h4>Objectif</h4>
+  <h4>Objectif:</h4>
   <p>Vérifier que la page possède un titre descriptif, unique et pertinent. De plus, s'assurer que la structure des titres au sein de la page est cohérente.</p>
-  <h4>Méthode de test</h4>
+  <h4>Méthode de test:</h4>
   <ol>
     <li>Identifier si le titre affiché dans l'onglet du navigateur est pertinent.</li>
     <li>Le contenu de la page devra avoir au moins un titre.</li>
     <li>Analyser les balises de <code>h1</code> à <code>h6</code> en vérifiant la pertinence et la structure (aucun saut de niveau).</li>
     <li>S'assurer que les titres sont sémantiquement correctes (présence d'une balise <code>hx</code> ou balises <code>role="heading" aria-level="x"</code></li>
   </ol>
-  <h4>Outil éventuel</h4>
+  <h4>Outil éventuel:</h4>
   <p>Extension HeadingsMap (<a href="/?path=/docs/accessibilité-kit-de-pré-audit-outils-introduction--docs">voir la page des outils</a>)</p>
 
   <div className="alert">
@@ -424,18 +414,18 @@ import '../../styles/shared.css';
 </div>
 
 <div className="verification-card">
-  <h3>📹 8. Contenus multimédia</h3>
+  <h2>📹 8. Contenus multimédia</h2>
 
-  <h4>Objectif</h4>
+  <h4>Objectif:</h4>
   <p>Vérifier que les vidéos et autres contenus multimédia temporels possèdent, si nécessaire, une transcription textuelle, une audiodescription synchronisée et/ou des sous-titres synchronisés. Concernant les médias non temporels, s'assurer qu'ils possèdent une alternative ou sont accessibles par le clavier et tout dispositif de pointage.</p>
-  <h4>Méthode de test</h4>
+  <h4>Méthode de test:</h4>
   <ol>
     <li>Écouter les vidéos sans regarder l’écran et statuer sur la pertinence de l'audiodescription.</li>
     <li>Lire une vidéo avec sous-titres activés et statuer sur leur pertinence.</li>
     <li>Vérifier que toute transcription textuelle exprime tout ce qui est retranscrit oralement et suivent la chronologie du média.</li>
     <li>S'assurer que tout son déclenché automatiquement peut, soit être stoppé, soit contrôlé indépendemment du volume, soit possède une durée inféreure ou égale à 3 secondes.</li>
   </ol>
-  <h4>Outil éventuel</h4>
+  <h4>Outil éventuel:</h4>
   <p>Aucun</p>
   <h4>Ressources</h4>
   <p><a href="https://bati-itao.github.io/learning/esdc-self-paced-web-accessibility-course/module9/introduction-fr.html">Concepts des contenus multimédia</a></p>

package/src/stories/Components/Components.stories.ts

@@ -56,6 +56,13 @@ export const ComponentsList: StoryObj = {
 						img: '/components/sub-header.svg',
 						category: 'Structure',
 					},
+					{
+						title: 'SkeletonLoader',
+						description: 'Utilisé pour améliorer l’expérience utilisateur pendant le chargement des données, affiche une structure visuelle temporaire qui ressemble au contenu final.',
+						link: '/?path=/docs/composants-composants-vuetify-vskeletonloader--docs',
+						img: '/components/v-skeleton-loader.svg',
+						category: 'Structure',
+					},
 					{
 						title: 'FooterBar',
 						description: 'Utilisé pour afficher une barre de pied de page avec des liens et des informations supplémentaires.',
@@ -77,6 +84,13 @@ export const ComponentsList: StoryObj = {
 						img: '/components/contextual-menu.svg',
 						category: 'Navigation',
 					},
+					{
+						title: 'Breadcrumbs',
+						description: 'Utilisé comme un outil d’aide à la navigation et comme une structure hiérarchique pour les pages.',
+						link: '/?path=/docs/composants-composants-vuetify-vbreadcrumbs--docs',
+						img: '/components/breadcrumbs.svg',
+						category: 'Navigation',
+					},
 					{
 						title: 'ExternalLinks',
 						description: 'Utilisé pour afficher un menu avec une liste vers des liens externes.',
@@ -112,6 +126,13 @@ export const ComponentsList: StoryObj = {
 						img: '/components/back-btn.svg',
 						category: 'Boutons',
 					},
+					{
+						title: 'SyIconBtn',
+						description: 'Utilisé lorsque on a besoin d’un bouton qui sert principalement à afficher une icône.',
+						link: '/?path=/docs/composants-boutons-syiconbutton--docs',
+						img: `/components/sy-icon-button${isAp ? '-ap' : ''}.svg`,
+						category: 'Boutons',
+					},
 					{
 						title: 'BackToTopBtn',
 						description: 'Utilisé pour afficher un bouton permettant à l’utilisateur de remonter en haut de la page.',
@@ -168,6 +189,13 @@ export const ComponentsList: StoryObj = {
 						img: `/components/sy-select${isAp ? '-ap' : ''}.svg`,
 						category: 'Formulaires',
 					},
+					{
+						title: 'Switch',
+						description: 'Utilisé pour permettre à l’utilisateur de choisir entre deux valeurs distinctes. Il est très similaire à un bouton bascule (toggle) ou à un interrupteur marche/arrêt.',
+						link: '/?path=/docs/composants-composants-vuetify-vswitch--docs',
+						img: `/components/switch${isAp ? '-ap' : ''}.svg`,
+						category: 'Boutons',
+					},
 					{
 						title: 'SySelect',
 						description: 'Utilisé pour proposer une alternative au v-select de Vuetify qui ne respecte pas les règles d\'accessibilité RGAA. Il est basé sur un v-textfield.',
@@ -189,6 +217,13 @@ export const ComponentsList: StoryObj = {
 						img: '/components/sy-btn-select.svg',
 						category: 'Formulaires',
 					},
+					{
+						title: 'OTPInput',
+						description: 'Utilisé pour une procédure MFA d’authentification des utilisateurs via un mot de passe à usage unique.',
+						link: '/?path=/docs/composants-composants-vuetify-votpinput--docs',
+						img: `/components/otp${isAp ? '-ap' : ''}.svg`,
+						category: 'Formulaires',
+					},
 					{
 						title: 'DatePicker',
 						description: 'Utilisé pour permettre à l’utilisateur de sélectionner ou de saisir une date.',
@@ -405,6 +440,8 @@ export const ComponentsList: StoryObj = {
 					'SyAutocomplete',
 					'SySelect',
 					'SyRadioGroup',
+					'SyIconBtn',
+					'NirField',
 				]
 
 				const shouldDisplayComponent = (component: { category: string, title: string }, category: string) => {
@@ -420,7 +457,9 @@ export const ComponentsList: StoryObj = {
 
 				const groupedComponents = categoryOrder.map(category => ({
 					category,
-					components: components.filter(component => shouldDisplayComponent(component, category)),
+					components: components
+						.filter(component => shouldDisplayComponent(component, category))
+						.sort((a, b) => a.title.localeCompare(b.title)),
 				})).filter(group => group.components.length > 0)
 
 				return {

package/src/stories/Demarrer/EnrichirLeDesignSystem.mdx

@@ -14,7 +14,8 @@ Le Design System de l'Assurance Maladie est un projet vivant qui évolue constam
 Votre contribution est essentielle pour garantir que le Design System reste pertinent, accessible et efficace.<br/>
 Toute demande ne sera pas nécessairement intégrée, mais chaque suggestion est examinée avec attention par l'équipe du Studio Design.
 
-<Story of={ComponentStories.InfoIntro}/>
+#
+<Story of={ComponentStories.WarningIntro}/>
 
 <a id="exigences" />
 ## Exigences requises pour acceptation d'un nouveau composant ou d'une nouvelle fonctionnalité
@@ -31,13 +32,7 @@ Toute demande ne sera pas nécessairement intégrée, mais chaque suggestion est
 10. Doit se conformer aux **exigences techniques** du Design System et à son bon fonctionnement sur le Starter Kit (VueJS 3, version des plugins...).
 
 ## Créer une nouvelle demande
-
-<Story of={ComponentStories.Optimisation}/>
-
+#
 <Story of={ComponentStories.AjoutFonctionnalite}/>
 
-<Story of={ComponentStories.DeclinaisonFonctionnalite}/>
-
-<Story of={ComponentStories.CreationComposant}/>
-
-<Story of={ComponentStories.IntegrationComposant}/>
+<Story of={ComponentStories.CreationComposant}/>

package/src/stories/Demarrer/EnrichirLeDesignSystem.stories.ts

@@ -26,6 +26,34 @@ export const InfoIntro = {
 	tags: ['!dev'],
 }
 
+export const WarningIntro = {
+	render: () => {
+		return {
+			components: { SyAlert },
+			setup() {
+				return {}
+			},
+			template: `
+              <SyAlert type="error" variant="tonal" :closable="false">
+                <template #default>
+					<b>Pour limiter les risques de régression et d'anomalie nous mettons temporairement en pause les demandes de nouvelles fonctionnalités. Nous invitons les projets à mettre en place des solutions de contournement.</b>
+					<br/><br/>
+					Une fois les chantiers ci-après complétés au 1er juillet 2026 nous pourrons reprendre l'analyse et l'intégration de vos features au fil de l'eau selon la disponibilité de l'équipe.
+					<br/><br/>
+					Chantiers en cours :
+					<ul><li>- Disponibilité des composants Amelipro</li>
+						<li>- Optimisation de la validation des composants de formulaire</li>
+						<li>- Optimisation des tokens pour la convergence des 3 thèmes (Amelipro, Cnam, Portail Agent)</li>
+						<li>- Optimisation de l'accessibilité numérique</li>
+					</ul>
+				</template>
+              </SyAlert>
+            `,
+		}
+	},
+	tags: ['!dev'],
+}
+
 export const Optimisation = {
 	render: () => {
 		return {