@cnamts/synapse 1.0.21 → 1.0.23

package/src/designTokens/tokens/pa/paLightTheme.ts

@@ -1,13 +1,18 @@
 import { paColorsTokens } from './paColors'
-import { paSemanticTokens } from '../pa/paSemantic'
+import { paSemanticTokens } from './paSemantic'
 
 export const paLightTheme = {
 	primary: paColorsTokens.blue.base,
 	secondary: paColorsTokens.cyan.darken40,
-	accent: paColorsTokens.cyan.base,
+	accentPrimaryLight: paColorsTokens.blue.lighten20,
+	accentPrimary: paColorsTokens.blue.base,
+	accentPrimaryContrasted: paColorsTokens.blue.darken40,
+	accentSecondaryLight: paColorsTokens.cyan.lighten60,
+	accentSecondary: paColorsTokens.cyan.base,
+	accentSecondaryContrasted: paColorsTokens.cyan.darken40,
+	accentAlt: paColorsTokens.grey.base,
 	error: paColorsTokens.orange.darken20,
 	info: paColorsTokens.blue.base,
-	avatar: paColorsTokens.cyan.darken20,
 	success: paColorsTokens.turquoise.darken60,
 	warning: paColorsTokens.yellow.darken60,
 	risquePro: paColorsTokens.brick.base,
@@ -20,12 +25,14 @@ export const paLightTheme = {
 	overlayFullpage: paSemanticTokens.colors.overlay.fullpage,
 	overlayOnDark: paSemanticTokens.colors.overlay.onDark,
 	overlayOnLight: paSemanticTokens.colors.overlay.onLight,
-	interactiveDefault: paSemanticTokens.colors.interactive.default,
-	interactiveHover: paSemanticTokens.colors.interactive.hover,
-	interactivePressed: paSemanticTokens.colors.interactive.pressed,
-	interactiveFocus: paSemanticTokens.colors.interactive.focus,
-	interactiveDisabled: paSemanticTokens.colors.interactive.disabled,
-	interactiveHoverOnSelected: paSemanticTokens.colors.interactive.hoverOnSelected,
+	interactiveSelectionEnabled: paSemanticTokens.colors.interactive.selectionEnabled,
+	interactiveSelectionHover: paSemanticTokens.colors.interactive.selectionHover,
+	interactiveSelectionPressed: paSemanticTokens.colors.interactive.selectionPressed,
+	interactiveSelectionSelected: paSemanticTokens.colors.interactive.selectionSelected,
+	interactiveSelectionHoverOnSelected: paSemanticTokens.colors.interactive.selectionHoverOnSelected,
+	interactiveSelectionSelectedAccent: paSemanticTokens.colors.interactive.selectionselectedAccent,
+	interactiveSelectionHoverOnSelectedAccent: paSemanticTokens.colors.interactive.selectionHoverOnSelectedAccent,
+	interactiveSelectionDisabled: paSemanticTokens.colors.interactive.selectionDisabled,
 	backgroundMain: paSemanticTokens.colors.background.main,
 	backgroundSurface: paSemanticTokens.colors.background.surface,
 	backgroundSurfaceAlt: paSemanticTokens.colors.background.surfaceAlt,
@@ -54,9 +61,11 @@ export const paLightTheme = {
 	borderDarker: paSemanticTokens.colors.border.darker,
 	borderBase: paSemanticTokens.colors.border.base,
 	borderSubdued: paSemanticTokens.colors.border.subdued,
-	borderAccent: paSemanticTokens.colors.border.accent,
-	borderAccentContrasted: paSemanticTokens.colors.border.accentContrasted,
-	borderAccentOnDark: paSemanticTokens.colors.border.accentOnDark,
+	borderAccentPrimary: paSemanticTokens.colors.border.accentPrimary,
+	borderAccentPrimaryContrasted: paSemanticTokens.colors.border.accentPrimaryContrasted,
+	borderAccentPrimaryOnDark: paSemanticTokens.colors.border.accentPrimaryOnDark,
+	borderAccentSecondary: paSemanticTokens.colors.border.accentSecondary,
+	borderAccentSecondaryContrasted: paSemanticTokens.colors.border.accentSecondaryContrasted,
 	borderInfo: paSemanticTokens.colors.border.info,
 	borderSuccess: paSemanticTokens.colors.border.success,
 	borderWarning: paSemanticTokens.colors.border.warning,
@@ -65,8 +74,9 @@ export const paLightTheme = {
 	borderDisabled: paSemanticTokens.colors.border.disabled,
 	borderDisabledOnDark: paSemanticTokens.colors.border.disabledOnDark,
 	textBase: paSemanticTokens.colors.text.base,
-	textAccent: paSemanticTokens.colors.text.accent,
-	textAccentContrasted: paSemanticTokens.colors.text.accentContrasted,
+	textAccentPrimary: paSemanticTokens.colors.text.accentPrimary,
+	textAccentPrimaryContrasted: paSemanticTokens.colors.text.accentPrimaryContrasted,
+	textAccentSecondary: paSemanticTokens.colors.text.accentSecondary,
 	textSubdued: paSemanticTokens.colors.text.subdued,
 	textInfo: paSemanticTokens.colors.text.info,
 	textSuccess: paSemanticTokens.colors.text.success,
@@ -79,8 +89,9 @@ export const paLightTheme = {
 	iconBase: paSemanticTokens.colors.icon.base,
 	iconSubdued: paSemanticTokens.colors.icon.subdued,
 	iconSubduedOnDark: paSemanticTokens.colors.icon.subduedOnDark,
-	iconAccent: paSemanticTokens.colors.icon.accent,
-	iconAccentContrasted: paSemanticTokens.colors.icon.accentContrasted,
+	iconAccentPrimary: paSemanticTokens.colors.icon.accentPrimary,
+	iconAccentPrimaryContrasted: paSemanticTokens.colors.icon.accentPrimaryContrasted,
+	iconAccentSecondary: paSemanticTokens.colors.icon.accentSecondary,
 	iconInfo: paSemanticTokens.colors.icon.info,
 	iconSuccess: paSemanticTokens.colors.icon.success,
 	iconWarning: paSemanticTokens.colors.icon.warning,

package/src/designTokens/tokens/pa/paSemantic.ts

@@ -33,9 +33,11 @@ export const paSemanticTokens = {
 			darker: paColorsTokens.grey.darken60,
 			base: paColorsTokens.grey.lighten40,
 			subdued: paColorsTokens.grey.lighten80,
-			accent: paColorsTokens.blue.base,
-			accentContrasted: paColorsTokens.blue.darken40,
-			accentOnDark: paColorsTokens.white.base,
+			accentPrimary: paColorsTokens.blue.base,
+			accentPrimaryContrasted: paColorsTokens.blue.darken40,
+			accentPrimaryOnDark: paColorsTokens.white.base,
+			accentSecondary: paColorsTokens.cyan.base,
+			accentSecondaryContrasted: paColorsTokens.cyan.darken40,
 			info: paColorsTokens.blue.base,
 			success: paColorsTokens.green.darken60,
 			warning: paColorsTokens.yellow.darken60,
@@ -46,8 +48,9 @@ export const paSemanticTokens = {
 		},
 		text: {
 			base: paColorsTokens.grey.darken60,
-			accent: paColorsTokens.blue.base,
-			accentContrasted: paColorsTokens.blue.darken40,
+			accentPrimary: paColorsTokens.blue.base,
+			accentPrimaryContrasted: paColorsTokens.blue.darken40,
+			accentSecondary: paColorsTokens.cyan.darken40,
 			subdued: paColorsTokens.grey.base,
 			info: paColorsTokens.blue.base,
 			success: paColorsTokens.green.darken60,
@@ -62,8 +65,9 @@ export const paSemanticTokens = {
 			base: paColorsTokens.grey.darken60,
 			subdued: paColorsTokens.grey.base,
 			subduedOnDark: paColorsTokens.white.lighten70,
-			accent: paColorsTokens.blue.base,
-			accentContrasted: paColorsTokens.blue.darken40,
+			accentPrimary: paColorsTokens.blue.base,
+			accentPrimaryContrasted: paColorsTokens.blue.darken40,
+			accentSecondary: paColorsTokens.cyan.darken40,
 			info: paColorsTokens.blue.base,
 			success: paColorsTokens.green.darken60,
 			warning: paColorsTokens.yellow.darken60,
@@ -78,12 +82,14 @@ export const paSemanticTokens = {
 			onLight: paColorsTokens.blue.base,
 		},
 		interactive: {
-			default: paColorsTokens.white.base,
-			hover: paColorsTokens.blue.lighten90,
-			pressed: paColorsTokens.blue.lighten80,
-			focus: paColorsTokens.blue.lighten90,
-			disabled: paColorsTokens.white.base,
-			hoverOnSelected: paColorsTokens.blue.lighten80,
+			selectionEnabled: paColorsTokens.white.base,
+			selectionHover: paColorsTokens.blue.lighten90,
+			selectionPressed: paColorsTokens.blue.lighten80,
+			selectionSelected: paColorsTokens.blue.lighten90,
+			selectionHoverOnSelected: paColorsTokens.blue.lighten80,
+			selectionselectedAccent: paColorsTokens.blue.base,
+			selectionHoverOnSelectedAccent: paColorsTokens.blue.lighten20,
+			selectionDisabled: paColorsTokens.white.base,
 		},
 	},
 }

package/src/directives/rgaaSvgFix.ts

@@ -247,13 +247,8 @@ function fixSvgAttributes(el: HTMLElement, config: RgaaSvgFixConfig) {
 			// Pour tous les SVG:
 			// 1. Toujours supprimer role="img"
 			svg.removeAttribute('role')
-			// 2. Toujours s'assurer que aria-hidden="true" est présent
-			if (config.isDecorative) {
-				svg.setAttribute('aria-hidden', 'true')
-			}
-			else {
-				svg.removeAttribute('aria-hidden')
-			}
+			// 2. Toujours masquer le SVG pour éviter un double énoncé, le conteneur porte le label si nécessaire
+			svg.setAttribute('aria-hidden', 'true')
 		}
 	}
 }

package/src/main.ts

@@ -5,3 +5,5 @@ export * from './services'
 export * from './composables'
 export * from './utils/rules'
 export * from './utils'
+
+export { createVuetifyInstance } from './vuetifyConfig'

package/src/stories/Accessibilite/{Audit → AuditEtContreAudit}/Exemptions-derogations.mdx

@@ -1,7 +1,7 @@
 import {Meta} from '@storybook/blocks';
 import '../../styles/shared.css';
 
-<Meta title="Accessibilité/Audit/Exemptions – dérogations"/>
+<Meta title="Accessibilité/Audit et Contre-audit/Exemptions – dérogations"/>
 
 <style>
 {

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

@@ -0,0 +1,188 @@
+import { Meta } from '@storybook/blocks';
+import '../../styles/shared.css';
+
+<Meta title="Accessibilité/Audit et Contre-audit/Introduction" />
+
+<style>
+{
+`
+      
+  
+  .key-element {
+    background-color: #f8f9fa;
+    border-left: 4px solid #0c419a;
+    padding: 1.5rem;
+    margin-bottom: 1.5rem;
+    border-radius: 4px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  }
+  
+  .key-element h3 {
+    color: #0c419a;
+    margin-top: 0;
+  }
+  
+  .info-section {
+    margin: 2rem 0;
+    padding: 1.5rem;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  }
+  
+  .info-section h2 {
+    padding-bottom: 0.5rem;
+    margin-top: 0;
+  }
+  
+  .contact-card {
+    background-color: #f0f7ff;
+    border-radius: 8px;
+    padding: 1.5rem;
+    margin: 2rem 0;
+  }
+  
+  .resources-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    gap: 1.5rem;
+    margin: 2rem 0;
+  }
+  
+  .resource-card {
+    background-color: #fff;
+    border-radius: 8px;
+    padding: 1.5rem;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  }
+  
+  .resource-card h3 {
+    margin-top: 0;
+    color: #0c419a;
+  }
+  
+  .resource-card a {
+    margin-top: auto;
+    text-decoration: none;
+    font-weight: 500;
+    color: #0c419a;
+  }
+  
+  .alert {
+    background-color: #e3e8f2;
+    border-left: 4px solid #0c419a;
+    padding: 1rem 1.5rem;
+    margin: 1.5rem 0;
+    border-radius: 4px;
+  }
+  
+  .alert-title {
+    color: #0c419a;
+    font-weight: 600;
+    margin: 0 0 0.5rem 0;
+  }
+  
+  .process-steps {
+    counter-reset: step;
+    margin: 2rem 0;
+  }
+  
+  .process-step {
+    position: relative;
+    padding-left: 3rem;
+    margin-bottom: 1.5rem;
+  }
+  
+  .environment-grid {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    gap: 1.5rem;
+    margin: 2rem 0;
+  }
+
+      .info-section h2::after {
+      content: '';
+      position: absolute;
+      bottom: -2px;
+      left: 0;
+      width: 80px;
+      height: 4px;
+      
+      border-radius: 3px;
+    }
+
+    .section-container h2::after {
+      content: '';
+      position: absolute;
+      bottom: -2px;
+      left: 0;
+      width: 80px;
+      height: 4px;
+      
+      border-radius: 3px;
+    }
+`
+}
+</style>
+
+<div className="header">
+  <h1>Audit et Contre-audit de conformité à l'accessibilité</h1>
+  <p>Demandez-nous un audit (ou contre-audit) de conformité RGAA</p>
+</div>
+
+<div className="info-section">
+  <h2>🌟 Objectif</h2>
+  <p>Une fois la phase pré-audit réalisée et que le niveau de conformité est jugé suffisant, <b>l'équipe produit peut solliciter la Filière Digital pour un audit de conformité <abbr title="Référentiel Général d'Amélioration de l'Accessibilité">RGAA</abbr> sur le même échantillon de pages</b>.</p>
+
+  <p>L'objectif de l'audit est d'évaluer la conformité d'un produit aux critères d'accessibilités définis par le <abbr title="Référentiel Général d'Amélioration de l'Accessibilité">RGAA</abbr>. L'expert identifie les non-conformités et fournit des recommandations pour améliorer l'accessibilité du produit.</p>
+
+  <p>Un contre-audit des non conformités pourra être proposé après application des correctifs relevés par l'audit. Il permettra d'identifier un nouveau niveau de conformité qui sera indiqué dans la déclaration d'accessibilité.</p>
+</div>
+
+<div className="section-container">
+  <h2>Environnement de test</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>
+
+  <div className="environment-grid">
+    <div className="resource-card">
+      <h3>💻 Environnement principal</h3>
+      <p>Si l'outil cible un public utilisant des terminaux de bureau :</p>
+      <ul>
+        <li>Système d'exploitation : Windows</li>
+        <li>Navigateur : Firefox (mentionner la version)</li>
+        <li>Lecteur d'écran : NVDA (dernière version)</li>
+      </ul>
+    </div>
+
+    <div className="resource-card">
+      <h3>📱 Environnement mobile</h3>
+      <p>Si l'outil cible un public utilisant des terminaux mobile :</p>
+      <ul>
+        <li>Système d'exploitation : Android</li>
+        <li>Navigateur : Chrome (mentionner la version)</li>
+        <li>Lecteur d'écran : TalkBack (dernière version)</li>
+      </ul>
+    </div>
+  </div>
+</div>
+
+<div className="section-container">
+  <h2>Livrables</h2>
+
+  <p> A l'issue de l'audit et, optionnellement, du contre-audit, il y aura deux livrables : la grille d'évaluation RGAA et la déclaration d'accessibilité.</p>
+
+  <div className="environment-grid">
+    <div className="resource-card">
+      <h3>Grille d'évaluation RGAA</h3>
+      <p>La Filière Digital remet la grille officielle RGAA avec les non-conformités et les recommandations techniques.</p>
+    </div>
+
+    <div className="resource-card">
+      <h3>Déclaration d'accessibilité</h3>
+      <p>L'équipe produit devra réaliser <a href="https://accessibilite.numerique.gouv.fr/ressources/modele-de-declaration/" target="_blank">la déclaration d'accessibilité en suivant le modèle officiel</a>. La Filière Digital pourra accompagner l'équipe pour sa réalisation.</p>
+    </div>
+  </div>
+
+</div>

package/src/stories/Accessibilite/{Audit → AuditEtContreAudit}/RGAA.mdx

@@ -1,7 +1,7 @@
 import {Meta} from '@storybook/blocks';
 import '../../styles/shared.css';
 
-<Meta title="Accessibilité/Audit/RGAA"/>
+<Meta title="Accessibilité/Audit et Contre-audit/RGAA"/>
 
 <style>
 {

package/src/stories/Accessibilite/Introduction.mdx

@@ -179,7 +179,7 @@ Pour répondre aux objectifs de mise en conformité des interfaces utilisateurs
 
 <div className="key-element" style={{ marginBottom: '3rem', borderBottom: 'none' }}>
   <h3>👥 Accompagnement</h3>
-  <p>Accompagnement personnalisé des équipes-produits sur le sujet de l'accessibilité numérique.</p>
+  <p>Accompagnement personnalisé des équipes-produits sur le sujet de l'accessibilité numérique et réalisations d'audits.</p>
 </div>
 
 <div className="info-section">
@@ -195,12 +195,12 @@ Pour répondre aux objectifs de mise en conformité des interfaces utilisateurs
     
     <div className="process-step">
       <h4>Anticipation des erreurs</h4>
-      <p>L'objectif est d'anticiper les erreurs et diluer l'effort de mise en conformité tout au long du processus de fabrication afin de ne pas attendre le résultat de l'audit pour réécrire le produit.</p>
+      <p>L'objectif est d'anticiper les erreurs et diluer l'effort de mise en conformité tout au long du processus de fabrication afin de ne pas attendre le résultat de l'audit pour réécrire le produit. Un temps de corrections doit être prévu par l'équipe produit entre la phase pré-audit et la phase audit.</p>
     </div>
     
     <div className="process-step">
       <h4>Audit et recommandations</h4>
-      <p>Une fois le produit éligible, l'équipe experte de la Filière Digital réalise un audit et communique à l'équipe-produit un rapport comportant des recommandations.</p>
+      <p>Une fois le produit éligible, l'équipe experte de la Filière Digital réalise un audit et communique à l'équipe-produit un rapport comportant des recommandations. Il pourra être demandé un contre-audit après une phase de corrections pilotée par l'équipe produit.</p>
     </div>
     
     <div className="process-step">
@@ -213,6 +213,25 @@ Pour répondre aux objectifs de mise en conformité des interfaces utilisateurs
     <h4 className="alert-title">À noter</h4>
     <p>Conscient que tous les produits ne peuvent pas utiliser dans l'immédiat le Design System thème Cnam ou thème Portail Agent, nous avons conçu le kit de pré-audit pour qu'il puisse fonctionner en autonomie.</p>
   </div>
+
+  <div className="image-container">
+    <img
+      src={"/etapes-accompagnement-accessibilite.png"}
+      aria-labelledby="etapes-accompagnement-accessibilite-alt"
+    />
+    <div className="image-caption" id="etapes-accompagnement-accessibilite-alt">
+      Les étapes de l'accompagnement accessibilité sont :
+      <ol>
+        <li><b>Échantillonage :</b> Sélection des pages représentatives en atelier avec la Filière Digital.</li>
+        <li><b>Pré-audit en autonomie :</b> L'équipe produit réalise une vérification automatisée et manuelle sur l'échantillon (<a href="/?path=/docs/accessibilité-kit-de-pré-audit-introduction--docs">voir la page "Introduction" du Kit de pré-audit</a>).</li>
+        <li><b>Corrections du pré-audit :</b> L'équipe produit implémente des correctifs issus des non conformités détectées en pré-audit (autonomie). La Filière Digital apporte son aide sur les solutions techniques.</li>
+        <li><b>Audit RGAA :</b> La Filière Digital réalise un audit RGAA sur le même échantillon et communique les non-conformités  (<a href="/?path=/docs/accessibilité-audit-et-contre-audit-introduction--docs">voir la page "Introduction" de l'Audit et Contre-audit</a>).</li>
+        <li><b>Corrections de l'audit :</b> L'équipe produit implémente des correctifs issus des non-conformités détectées en audit. La Filière Digital apporte son aide sur les solutions techniques.</li>
+        <li><b>Contre-audit RGAA :</b> Si besoin, la Filière Digital réalise un contre-audit RGAA suite aux corrections, en se concentrant sur les non conformités relevées en audit (<a href="/?path=/docs/accessibilité-audit-et-contre-audit-introduction--docs">voir la page "Introduction" de l'Audit et Contre-audit</a>).</li>
+        <li><b>Déclaration d'accessibilité :</b> La Filière Digital aide pour la publication de la déclaration d'accessibilité, comportant le niveau de conformités, des moyens de recours et le schéma pluriannuel.</li>
+      </ol>
+    </div>
+  </div>
 </div>
 
 <div className="contact-card">

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

@@ -126,19 +126,19 @@ import '../../styles/shared.css';
 </style>
 
 <div className="header">
-  <h1>Pré-audit web conformité à l'accessibilité</h1>
+  <h1>Pré-audit à l'accessibilité</h1>
   <p>Vérifiez la conformité de votre service web avant l'audit officiel</p>
 </div>
 
 <div className="info-section">
   <h2>🌟 Objectif</h2>
-  <p>L'objectif du pré-audit est d'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>, sans viser l'exhaustivité ni un score parfait. 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>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>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>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 des outils et des tutoriels pour vous accompagner dans cette démarche.</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>
 
   <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>
@@ -147,7 +147,7 @@ import '../../styles/shared.css';
 
 <div className="section-container">
   <h2>Environnement de test</h2>
-  <p>Il est important de tester votre service dans un environnement similaire à celui utilisé par les utilisateurs finaux. L'environnement de test sera le même pour chacune des phrases (pré-audit, audit, contre-audit) et devra être stable. Aucune nouvelle fonctionnalité ne doit être développée entre chaque phase. 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>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>
 
@@ -175,30 +175,29 @@ import '../../styles/shared.css';
 </div>
 
 <div className="section-container">
-  <h2>Livrable</h2>
+  <h2>Livrables</h2>
 
   <p> A l'issue du pré-audit, nous attendons les éléments suivants :</p>
 
   <div className="resources-grid">
-  <div className="resource-card">
-    <h3>Contexte du projet</h3>
-    <p>Détails sur les responsabilités et les parties prenantes.</p>
-  </div>
+    <div className="resource-card">
+      <h3>Contexte du projet</h3>
+      <p>Détails sur les responsabilités et les parties prenantes.</p>
+    </div>
 
-  <div className="resource-card">
-    <h3>Résultat de l'échantillon de test</h3>
-    <p>Analyse des pages testées.</p>
-  </div>
+    <div className="resource-card">
+      <h3>Résultat de l'échantillon de test</h3>
+      <p>Analyse des pages testées.</p>
+    </div>
 
-  <div className="resource-card">
-    <h3>Résultat du pré-audit manuel</h3>
-    <p>Complété avec un onglet par page.</p>
+    <div className="resource-card">
+      <h3>Résultat du pré-audit manuel</h3>
+      <p>Complété avec un onglet par page.</p>
+    </div>
   </div>
-</div>
-
-<div className="info-section">
-  <h2>Annexes</h2>
-    <p>Pour chaque page testée, il sera demandé de restituer un rapport Tanaguru complet.</p>
-</div>
 
+  <div className="info-section">
+    <h3>Annexes</h3>
+      <p>Pour chaque page testée, il sera demandé de restituer un rapport Tanaguru complet.</p>
+  </div>
 </div>

package/src/stories/DeprecationNotice/DeprecationNotice.ts

@@ -0,0 +1,41 @@
+import { computed } from 'vue'
+import SyAlert from '../../components/SyAlert/SyAlert.vue'
+
+type Replacement = {
+	label: string
+	url: string
+}
+
+export const createDeprecationNotice = (replacements: Replacement[]) => ({
+	render: () => ({
+		components: { SyAlert },
+		setup() {
+			const isMultiple = computed(() => replacements.length > 1)
+
+			return {
+				replacements,
+				isMultiple,
+			}
+		},
+		template: `
+          <SyAlert type="warning" variant="tonal" class="mb-4" :closable="false">
+            <b>
+              Ce<span v-if="isMultiple">s</span> composant<span v-if="isMultiple">s</span>
+              <span v-if="isMultiple"> sont</span>
+              <span v-else> est</span> déprécié<span v-if="isMultiple">s</span>
+            </b>,
+            <span v-if="isMultiple">ils ne seront</span>
+            <span v-else>il ne sera</span> plus maintenu<span v-if="isMultiple">s</span> ou mis à jour.<br/>
+
+            Nous vous recommandons d'utiliser à la place :
+            <span v-for="(item, index) in replacements" :key="item.label">
+          <a class="text-primary" :href="item.url">
+            <code>{{ item.label }}</code>
+          </a>
+          <span v-if="index < replacements.length - 1">, </span>
+        </span>.
+          </SyAlert>
+        `,
+	}),
+	tags: ['!dev'],
+})

package/src/stories/DesignTokens/ColorDisplay.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 	/* eslint-disabled vuejs-accessibility/anchor-has-content */
+	import SyHeading from '@/components/SyHeading/SyHeading.vue'
 	import { computed } from 'vue'
 	import { VContainer, VRow, VCol, VCard, VCardTitle, VCardSubtitle } from 'vuetify/components'
 
@@ -11,6 +12,7 @@
 		apColors: Record<string, string>
 		apColors2026: Record<string, string>
 		colorTitle: string
+		colorDescription?: string
 		colorTitleLevel: number
 	}
 
@@ -38,12 +40,15 @@
 
 <template>
 	<div
-		v-if="!isEmptyObject(displayColors) || (isEmptyObject(displayColors) && displayEmptyColors && theme !== 'ap2026')"
+		v-if="!isEmptyObject(displayColors) ||
+			(isEmptyObject(displayColors) && displayEmptyColors &&
+				!['ap2026', 'ap', 'cnam', 'pa'].includes(theme ?? ''))"
 		class="mb-5"
 	>
-		<h2
+		<SyHeading
 			v-if="colorTitleLevel === 2"
 			:id="titleKebabCase"
+			:level="2"
 			:style="`border-bottom: 1px solid rgba(38, 85, 115, 0.15); color: rgb(46, 52, 56); font-family: 'Nunito Sans', -apple-system, '.SFNSText-Regular', 'San Francisco', BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; `"
 			class="mb-2 pb-1 css-wzniqs"
 		>
@@ -74,11 +79,12 @@
 				</svg>
 			</a>
 			{{ colorTitle }}
-		</h2>
+		</SyHeading>
 
-		<h3
+		<SyHeading
 			v-else
 			:id="titleKebabCase"
+			:level="3"
 			:style="`color: rgb(46, 52, 56); font-family: 'Nunito Sans', -apple-system, '.SFNSText-Regular', 'San Francisco', BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; `"
 			class="mb-2 css-wzniqs"
 		>
@@ -109,7 +115,8 @@
 				</svg>
 			</a>
 			{{ colorTitle }}
-		</h3>
+		</SyHeading>
+		<span>{{ colorDescription }}</span>
 
 		<VContainer>
 			<VRow v-if="!isEmptyObject(displayColors)">