@cnamts/synapse 1.0.18 → 1.0.20

package/src/components/Customs/Selects/SySelect/accessibilite/Accessibility.mdx

@@ -0,0 +1,274 @@
+import { Meta, Story } from '@storybook/addon-docs';
+import * as Stories from '../SySelect.stories.ts';
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
+import '@/stories/styles/shared.css';
+
+<Meta of={Stories} />
+
+
+<div className="accessibility-guide">
+  <h1>Guide d'Accessibilité du Composant SySelect</h1>
+
+  
+  <div className="intro-section">
+    <img 
+      src={AccessibilityIcon} 
+      alt="Icône d'accessibilité" 
+      className="accessibility-icon"
+    />
+    <p className="intro-text">
+      Le composant SySelect a été conçu en suivant rigoureusement les recommandations d'accessibilité du W3C, 
+      notamment le modèle <a href="https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/" target="_blank" rel="noopener noreferrer">WAI-ARIA pour les combobox select-only</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="combobox"</code> sur l'input, <code>role="listbox"</code> sur le menu déroulant</li>
+        <li><strong>Relations entre éléments</strong> : <code>aria-controls</code> pour lier le combobox au listbox</li>
+        <li><strong>Type d'interaction</strong> : <code>aria-haspopup="listbox"</code> et <code>aria-autocomplete="list"</code></li>
+        <li><strong>État du menu</strong> : <code>aria-expanded</code> indique si le menu est ouvert ou fermé</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>Flèches haut/bas</strong> : Navigation entre les options sans modifier la sélection</li>
+        <li><strong>Entrée</strong> : Sélection de l'option active et fermeture du menu</li>
+        <li><strong>Échap</strong> : Fermeture du menu sans modifier la sélection</li>
+        <li><strong>Caractères imprimables</strong> : Navigation vers l'option commençant par le(s) caractère(s) saisi(s)</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>Sélection active</strong> : <code>aria-activedescendant</code> indique l'option active pendant la navigation</li>
+        <li><strong>Option sélectionnée</strong> : <code>aria-selected="true"</code> sur l'option sélectionnée</li>
+        <li><strong>État de validation</strong> : <code>aria-required="true"</code> et <code>aria-invalid="true"</code> pour les champs obligatoires et en erreur</li>
+        <li><strong>Scroll automatique</strong> : Les options sont automatiquement scrollées dans la vue lors de la navigation</li>
+      </ul>
+    </div>
+  </div>
+
+  <div className="keyboard-section">
+    <h2>Détail de la navigation clavier</h2>
+    Le composant **SySelect** implémente le pattern de navigation au clavier recommandé par le W3C pour les *combobox select-only*.
+ <table
+    style={{
+      width: '100%',
+      borderCollapse: 'collapse',
+      marginTop: '1em',
+    }}
+  >
+    <thead>
+      <tr style={{ borderBottom: '1px solid #ddd', textAlign: 'left' }}>
+        <th style={{ padding: '8px' }}>Touche</th>
+        <th style={{ padding: '8px' }}>Action</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td style={{ padding: '8px' }}><code>Flèche bas</code></td>
+        <td style={{ padding: '8px' }}>
+          Ouvre le menu et déplace le focus sur la première option (ou la suivante si une option est déjà sélectionnée)
+        </td>
+      </tr>
+      <tr>
+        <td style={{ padding: '8px' }}><code>Flèche haut</code></td>
+        <td style={{ padding: '8px' }}>
+          Ouvre le menu et déplace le focus sur la dernière option
+        </td>
+      </tr>
+      <tr>
+        <td style={{ padding: '8px' }}><code>Flèches haut/bas</code></td>
+        <td style={{ padding: '8px' }}>
+          Déplace le focus dans la liste des options (sans modifier la sélection)
+        </td>
+      </tr>
+      <tr>
+        <td style={{ padding: '8px' }}><code>Entrée</code></td>
+        <td style={{ padding: '8px' }}>
+          Sélectionne l'option active et ferme le menu
+        </td>
+      </tr>
+      <tr>
+        <td style={{ padding: '8px' }}><code>Échap</code></td>
+        <td style={{ padding: '8px' }}>
+          Ferme le menu sans modifier la sélection
+        </td>
+      </tr>
+      <tr>
+        <td style={{ padding: '8px' }}><code>Caractères imprimables</code></td>
+        <td style={{ padding: '8px' }}>
+          Déplace le focus sur l'option commençant par le(s) caractère(s) saisi(s)
+        </td>
+      </tr>
+    </tbody>
+  </table>
+ <p style={{ marginTop: '1em' }}>
+    <strong>Note :</strong> Le focus DOM reste toujours sur l'élément <em>combobox</em>, tandis que le focus visuel est géré via <code>aria-activedescendant</code>.
+  </p>
+  </div>
+
+  <div className="implementation-section">
+    <h2>Spécificités d'implémentation</h2>
+    <p>
+      Conformément aux recommandations WAI-ARIA pour les combobox avec auto-complétion, notre implémentation :
+    </p>
+    <ul>
+      <li>Maintient le focus DOM sur l'input combobox pendant toute l'interaction</li>
+      <li>Utilise <code>aria-activedescendant</code> pour indiquer l'option active aux technologies d'assistance</li>
+      <li>Sépare clairement la navigation (flèches) de la sélection (Entrée)</li>
+      <li>Gère correctement les états visuels et programmatiques des options</li>
+      <li>Implémente un filtrage en temps réel des options basé sur la saisie utilisateur</li>
+      <li>Désactive l'auto-complétion du navigateur pour éviter les conflits</li>
+    </ul>
+  </div>
+</div>
+
+<div className="accessibility-guide">
+<div className="header">
+  <h1>Accessibilité</h1>
+</div>
+
+<div class="mt-2">
+<p>Rapport d’audit manuel : <a href="/audits/SySelect.xlsx" style={{ color:'#0C41BD' }}>Voir le rapport</a></p>
+		<p style={{ color: 'grey', fontSize: '14px', marginTop: '0px' }}>Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/787" target="_blank" style={{color:'#0C41BD'}}>issue #787</a>), (<a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/931" target="_blank" style={{color:'#0C41BD'}}>issue #931</a>)</p>
+</div>
+
+<br />
+
+</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,
+  .keyboard-section h2,
+  .implementation-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;
+  }
+
+  .keyboard-section {
+    background-color: #f0f7ff;
+    padding: 20px;
+    border-radius: 8px;
+    margin-bottom: 30px;
+  }
+
+  .implementation-section {
+    background-color: #f5f5f5;
+    padding: 20px;
+    border-radius: 8px;
+    margin-bottom: 30px;
+  }
+
+  .implementation-section ul {
+    padding-left: 20px;
+  }
+
+  .implementation-section li {
+    margin-bottom: 10px;
+    line-height: 1.5;
+  }
+
+  code {
+    background-color: #f0f0f0;
+    padding: 2px 5px;
+    border-radius: 3px;
+    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+    font-size: 0.9em;
+  }
+`
+}
+</style>

package/src/components/Customs/Selects/SySelect/composables/useSySelectKeyboard.ts

@@ -10,6 +10,8 @@ export interface UseSySelectKeyboardOptions {
 	toggleMenu: (skipInitialFocus?: boolean) => void
 	selectItem: (item: ItemType | null | undefined, event?: Event) => void
 	getItemText: (item: unknown) => unknown
+	optionIdPrefix?: string
+	focusListItem?: boolean
 }
 
 export function useSySelectKeyboard(options: UseSySelectKeyboardOptions) {
@@ -19,8 +21,19 @@ export function useSySelectKeyboard(options: UseSySelectKeyboardOptions) {
 		toggleMenu,
 		selectItem,
 		getItemText,
+		optionIdPrefix = 'option',
+		focusListItem = true,
 	} = options
 
+	const getOptionId = (index: number) => `${optionIdPrefix}-${index}`
+	const parseIndexFromId = (id: string | null | undefined) => {
+		if (!id) return NaN
+		const parts = id.split('-')
+		const maybeIndex = parts[parts.length - 1] as string
+		const parsed = parseInt(maybeIndex)
+		return Number.isNaN(parsed) ? NaN : parsed
+	}
+
 	// État central pour le focus et la navigation
 	const activeDescendantId = ref('')
 	const lastFocusedIndex = ref(-1)
@@ -35,13 +48,13 @@ export function useSySelectKeyboard(options: UseSySelectKeyboardOptions) {
 		// Vérifier si l'index est valide
 		if (index >= 0 && index < formattedItems.value.length) {
 			// Mettre à jour l'ID pour ARIA
-			activeDescendantId.value = `option-${index}`
+			activeDescendantId.value = getOptionId(index)
 			// Stocker l'index pour référence future
 			lastFocusedIndex.value = index
 
 			// Appliquer les changements visuels au prochain cycle de rendu
 			nextTick(() => {
-				const element = document.getElementById(`option-${index}`)
+				const element = document.getElementById(getOptionId(index))
 				if (element) {
 					// Supprimer le focus visuel des autres éléments
 					const allItems = document.querySelectorAll('.v-list-item')
@@ -52,6 +65,10 @@ export function useSySelectKeyboard(options: UseSySelectKeyboardOptions) {
 					})
 
 					element.setAttribute('tabindex', '0')
+					element.setAttribute('tabindex', focusListItem ? '0' : '-1')
+					if (focusListItem) {
+						element.focus()
+					}
 					element.classList.add('keyboard-focused')
 					element.scrollIntoView({ block: 'nearest' })
 				}
@@ -108,8 +125,7 @@ export function useSySelectKeyboard(options: UseSySelectKeyboardOptions) {
 
 		// Sinon, essayer de récupérer l'index à partir de l'ID ARIA
 		if (activeDescendantId.value) {
-			const activeIndexString = activeDescendantId.value.split('-')?.[1]
-			const activeIndex = activeIndexString ? parseInt(activeIndexString) : NaN
+			const activeIndex = parseIndexFromId(activeDescendantId.value)
 			if (!isNaN(activeIndex) && activeIndex >= 0 && activeIndex < formattedItems.value.length) {
 				// Synchroniser lastFocusedIndex avec l'index trouvé
 				lastFocusedIndex.value = activeIndex
@@ -300,16 +316,6 @@ export function useSySelectKeyboard(options: UseSySelectKeyboardOptions) {
 	}
 
 	const handleTabKey = () => {
-		if (isOpen.value && activeDescendantId.value) {
-			// Trouver l'item actuellement focusé
-			const currentIndexString = activeDescendantId.value.split('-')?.[1]
-			const currentIndex = currentIndexString ? parseInt(currentIndexString) : NaN
-			if (!isNaN(currentIndex) && currentIndex >= 0 && currentIndex < formattedItems.value.length) {
-				const currentItem = formattedItems.value[currentIndex]
-				// Sélectionner l'item qui a le focus
-				selectItem(currentItem)
-			}
-		}
 		// Fermer le menu (la navigation Tab normale continuera après)
 		if (isOpen.value) {
 			isOpen.value = false
@@ -322,8 +328,7 @@ export function useSySelectKeyboard(options: UseSySelectKeyboardOptions) {
 	// Watch activeDescendantId pour synchroniser lastFocusedIndex
 	watch(activeDescendantId, (newId) => {
 		if (newId) {
-			const indexString = newId.split('-')?.[1]
-			const index = indexString ? parseInt(indexString) : NaN
+			const index = parseIndexFromId(newId)
 			if (!isNaN(index) && index >= 0 && index < formattedItems.value.length) {
 				// Synchroniser lastFocusedIndex avec l'ID ARIA
 				lastFocusedIndex.value = index

package/src/components/Customs/SyCheckbox/{Accessibilite.mdx → accessibilite/Accessibility.mdx}

@@ -1,7 +1,7 @@
 import { Meta, Title, Subtitle, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as SyCheckboxStories from './SyCheckbox.stories';
+import * as SyCheckboxStories from '../SyCheckbox.stories';
 import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
-import '../../../stories/styles/shared.css';
+import '@/stories/styles/shared.css';
 
 <Meta of={SyCheckboxStories} />
 

package/src/components/Customs/SyForm/accessibilite/Accessibility.mdx

@@ -0,0 +1,10 @@
+import { Meta, Story } from '@storybook/addon-docs';
+import * as SyForm from '../SyForm.stories';
+import '@/stories/styles/shared.css';
+
+<Meta of={SyForm}/>
+
+<div className="header">
+  <h1>Accessibilité</h1>
+  <p>Cette page sera bientôt disponible</p>
+</div>

package/src/components/Customs/SyIcon/SyIcon.mdx

@@ -1,5 +1,6 @@
 import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/blocks'
 import * as SyIconStories from './SyIcon.stories'
+import '@/stories/styles/shared.css';
 
 <Meta of={SyIconStories} />
 
@@ -15,7 +16,9 @@ Le composant `SyIcon` est un wrapper autour du composant `v-icon` de Vuetify qui
 <Primary />
 <Controls />
 
-## Accessibilité
+<div className="header">
+  <h1>Accessibilité</h1>
+</div>
 
 Le composant `SyIcon` gère automatiquement les attributs ARIA en fonction de la nature de l'icône :
 

package/src/components/Customs/SyIcon/SyIcon.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-	import { vRgaaSvgFix } from '../../../directives/rgaaSvgFix'
+	import type { IconValue } from 'vuetify/lib/composables/icons.mjs'
+	import { vRgaaSvgFix } from '@/directives/rgaaSvgFix'
 	import { computed, onMounted, watch } from 'vue'
 
 	/**
@@ -17,14 +18,14 @@
 	/**
 	 * Vérifie si une icône non décorative a un label
 	 */
-	const checkAccessibility = (icon: string, decorative: boolean | undefined, label: string | undefined) => {
+	const checkAccessibility = (icon: IconValue, decorative: boolean | undefined, label: string | undefined) => {
 		if (decorative === false && !label) {
 			console.error(`L'icône "${icon}" n'est pas décorative, mais aucun texte alternatif (label) n'a été fourni.`)
 		}
 	}
 
 	const props = defineProps<{
-		icon: string
+		icon: IconValue
 		label?: string
 		decorative?: boolean
 		role?: 'img' | 'button' | 'presentation'

package/src/components/Customs/SyIcon/{Accessibilite.stories.ts → accessibilite/Accessibilite.stories.ts}

@@ -1,9 +1,9 @@
-import SyIconAccessibility from './SyIconAccessibility.vue'
+import SyIconAccessibility from '../SyIconAccessibility.vue'
 import { mdiStar } from '@mdi/js'
 
 const meta = {
-	title: 'Composants/Données/SyIcon/Accessibilité',
-	component: () => import('./SyIcon.vue'),
+	title: 'Composants/Données/SyIcon/Accessibility',
+	component: () => import('../SyIcon.vue'),
 	parameters: {
 		docs: {
 			description: {

package/src/components/Customs/SyIcon/{Accessibilite.mdx → accessibilite/Accessibility.mdx}

@@ -1,9 +1,9 @@
 import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/blocks'
 import * as SyIconStoriesAccessibility from './Accessibilite.stories'
-import SyIconAccessibility from './SyIconAccessibility.vue'
+import SyIconAccessibility from '../SyIconAccessibility.vue'
 
 <Meta of={SyIconStoriesAccessibility} />
-import '../../../stories/styles/shared.css';
+import '@/stories/styles/shared.css';
 
 <div className="header">
   <h1>Accessibilité du composant SyIcon</h1>

package/src/components/Customs/SyPagination/SyPagination.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Meta, Controls, Story, Source } from '@storybook/blocks';
-import '../../../stories/styles/shared.css';
+import '@/stories/styles/shared.css';
 import * as SyPaginationStories from "./SyPagination.stories";
 
 <Meta of={SyPaginationStories} />
@@ -142,7 +142,9 @@ Voici un exemple d'implémentation du composant SyPagination :
 </style>
 `} />
 
-## Accessibilité
+<div className="header">
+  <h1>Accessibilité</h1>
+</div>
 
 Le composant SyPagination respecte les règles d'accessibilité RGAA :
 

package/src/components/Customs/SyPagination/accessibilite/Accessibility.mdx

@@ -0,0 +1,10 @@
+import { Meta, Story } from '@storybook/addon-docs';
+import * as SyPagination from '../SyPagination.stories';
+import '@/stories/styles/shared.css';
+
+<Meta of={SyPagination} />
+
+<div className="header">
+  <h1>Accessibilité</h1>
+  <p>Cette page sera bientôt disponible</p>
+</div>

package/src/components/Customs/SyRadioGroup/{Accessibilite.mdx → accessibilite/Accessibility.mdx}

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

package/src/components/Customs/SyTabs/SyTabs.mdx

@@ -1,5 +1,5 @@
 import { Meta, Canvas, Controls, Source, Story } from '@storybook/blocks';
-import '../../../stories/styles/shared.css';
+import '@/stories/styles/shared.css';
 import * as SyTabsStories from "./SyTabs.stories";
 
 <Meta of={SyTabsStories} />
@@ -36,7 +36,9 @@ export interface TabItem {
 }
 ```
 
-## Accessibilité
+<div className="header">
+  <h1>Accessibilité</h1>
+</div>
 
 Le composant `SyTabs` respecte les critères d'accessibilité RGAA suivants :
 

package/src/components/Customs/SyTabs/{Accessibilite.mdx → accessibilite/Accessibility.mdx}

@@ -1,7 +1,7 @@
 import { Meta, Title, Subtitle, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as SyTabsStories from './SyTabs.stories';
+import * as SyTabsStories from '../SyTabs.stories';
 import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
-import '../../../stories/styles/shared.css';
+import '@/stories/styles/shared.css';
 
 <Meta of={SyTabsStories} />
 

package/src/components/Customs/SyTextField/SyTextField.mdx

@@ -43,7 +43,6 @@ Le champ adapte automatiquement son apparence selon son état :
 	import { SyTextField } from '@cnamts/synapse'
 
 	const model = ref('')
-import '../../../stories/styles/shared.css';
 
 </script>
 
@@ -51,7 +50,7 @@ import '../../../stories/styles/shared.css';
 	<main class="ma-12">
 		Text saisie: {{ model }}
 		<div class="d-flex flex-wrap align-center">
-        <SyTextField
+        	<SyTextField
 				v-model="model"
 				label="Label"
 				color="primary"

package/src/components/Customs/SyTextField/SyTextField.vue

@@ -550,6 +550,10 @@
 
 						if (describedbyIds) {
 							inputElement.setAttribute('aria-describedby', describedbyIds)
+							// si erreur ajouter erreur dans aria-describedby
+							if (hasError.value) {
+								inputElement.setAttribute('aria-describedby', `${describedbyIds} ${messagesId}`)
+							}
 						}
 						else {
 							inputElement.removeAttribute('aria-describedby')
@@ -791,6 +795,10 @@
 		opacity: 1 !important;
 	}
 
+	:deep(.v-icon__svg) {
+		fill: tokens.$colors-text-warning !important;
+	}
+
 	:deep(.v-field) {
 		color: tokens.$colors-border-warning !important;
 
@@ -867,6 +875,11 @@
 		fill: rgb(0 0 0 / 70%);
 	}
 
+	:deep(.v-field--focused .v-field__outline) {
+		color: tokens.$primary-base !important;
+		opacity: 1 !important;
+	}
+
 	:deep(.v-input__prepend .v-icon:focus-visible),
 	:deep(.v-input__append .v-icon:focus-visible) {
 		outline: 2px solid tokens.$primary-base;

package/src/components/Customs/SyTextField/accessibilite/Accessibility.mdx

@@ -0,0 +1,15 @@
+import { Meta, Story } from '@storybook/addon-docs';
+import * as Stories from '../SyTextField.stories.ts';
+import '@/stories/styles/shared.css';
+
+<Meta of={Stories} />
+
+<div className="header">
+  <h1>Accessibilité</h1>
+</div>
+
+
+<div class="mt-2">
+<p>Rapport d’audit manuel : <a href="/audits/SyTextField.xlsx" style={{ color:'#0C41BD' }}>Voir le rapport</a></p>
+		<p style={{ color: 'grey', fontSize: '14px', marginTop: '0px' }}>Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/935" target="_blank" style={{color:'#0C41BD'}}>issue #935</a>), (<a href="https://github.com/assurance-maladie-digital/design-system/issues/4028" target="_blank" style={{color:'#0C41BD'}}>issue #4028</a>)</p>
+	</div>

package/src/components/DataList/accessibilite/Accessibility.mdx

@@ -0,0 +1,15 @@
+import { Meta, Story } from '@storybook/addon-docs';
+import * as Stories from '../DataList.stories.ts';
+import '@/stories/styles/shared.css';
+
+<Meta of={Stories} />
+
+<div className="header">
+  <h1>Accessibilité</h1>
+</div>
+
+
+<div class="mt-2">
+<p>Rapport d’audit manuel : <a href="/audits/DataList.xlsx" style={{ color:'#0C41BD' }}>Voir le rapport</a></p>
+		<p style={{ color: 'grey', fontSize: '14px', marginTop: '0px' }}>Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/4030" target="_blank" style={{color:'#0C41BD'}}>issue #4030</a>)</p>
+	</div>

package/src/components/DataListGroup/accessibilite/Accessibility.mdx

@@ -0,0 +1,14 @@
+import { Meta, Story } from '@storybook/addon-docs';
+import * as Stories from '../DataListGroup.stories.ts';
+import '@/stories/styles/shared.css';
+
+<Meta of={Stories} />
+
+<div className="header">
+  <h1>Accessibilité</h1>
+</div>
+
+<div class="mt-2">
+<p>Rapport d’audit manuel : <a href="/audits/DataListGroup.xlsx" style={{ color:'#0C41BD' }}>Voir le rapport</a></p>
+		<p style={{ color: 'grey', fontSize: '14px', marginTop: '0px' }}>Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/651" target="_blank" style={{color:'#0C41BD'}}>issue #651</a>)</p>
+	</div>

package/src/components/DatePicker/Accessibilite.mdx

@@ -1,6 +1,6 @@
 import { Meta, Story } from '@storybook/addon-docs';
 import * as AccessStories from './Accessibilite.stories.ts';
-import '../../stories/styles/shared.css';
+import '@/stories/styles/shared.css';
 
 <Meta of={AccessStories} />
 

package/src/components/DatePicker/Accessibilite.stories.ts

@@ -4,7 +4,7 @@ import { mdiCheckboxMarkedCircle } from '@mdi/js'
 const checkIcon = mdiCheckboxMarkedCircle
 
 export default {
-	title: 'Composants/Formulaires/DatePicker/Accessibilité',
+	title: 'Composants/Formulaires/DatePicker/Accessibility',
 }
 
 export const Legende: StoryObj = {