@cnamts/synapse 1.0.19 → 1.0.21

package/src/components/Customs/SyCheckBoxGroup/tests/SyCheckBoxGroup.spec.ts

@@ -0,0 +1,152 @@
+import SyCheckBoxGroup from '../SyCheckBoxGroup.vue'
+import SyCheckbox from '@/components/Customs/SyCheckbox/SyCheckbox.vue'
+import { mount } from '@vue/test-utils'
+import { describe, it, expect } from 'vitest'
+import { nextTick } from 'vue'
+
+describe('SyCheckBoxGroup', () => {
+	it('should render correctly', () => {
+		const wrapper = mount(SyCheckBoxGroup, {
+			props: {
+				label: 'Test checkbox group',
+				options: [
+					{ label: 'A', value: 'A', id: 'opt-a' },
+					{ label: 'B', value: 'B', id: 'opt-b' },
+				],
+			},
+		})
+
+		expect(wrapper.find('.sy-checkbox-group').exists()).toBe(true)
+		expect(wrapper.text()).toContain('Test checkbox group')
+		expect(wrapper.findAll('input[type="checkbox"]').length).toBe(2)
+	})
+
+	it('should handle v-model correctly (single)', async () => {
+		const wrapper = mount(SyCheckBoxGroup, {
+			props: {
+				'modelValue': null,
+				'onUpdate:modelValue': e => wrapper.setProps({ modelValue: e }),
+				'options': [
+					{ label: 'Option A', value: 'A', id: 'opt-a' },
+					{ label: 'Option B', value: 'B', id: 'opt-b' },
+				],
+			},
+		})
+
+		const checkboxes = wrapper.findAllComponents(SyCheckbox)
+		expect(checkboxes.length).toBe(2)
+
+		await checkboxes[0]?.find('input').setValue(true)
+
+		expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['A'])
+		expect(wrapper.emitted('change')?.[0]).toEqual(['A'])
+
+		// Uncheck
+		await checkboxes[0]?.find('input').setValue(false)
+		expect(wrapper.emitted('update:modelValue')?.[1]).toEqual([null])
+		expect(wrapper.emitted('change')?.[1]).toEqual([null])
+	})
+
+	it('should handle v-model correctly (multiple)', async () => {
+		const wrapper = mount(SyCheckBoxGroup, {
+			props: {
+				'multiple': true,
+				'modelValue': [],
+				'onUpdate:modelValue': e => wrapper.setProps({ modelValue: e }),
+				'options': [
+					{ label: 'Option A', value: 'A', id: 'opt-a' },
+					{ label: 'Option B', value: 'B', id: 'opt-b' },
+				],
+			},
+		})
+
+		const checkboxes = wrapper.findAllComponents(SyCheckbox)
+		expect(checkboxes.length).toBe(2)
+
+		await checkboxes[0]?.find('input').setValue(true)
+		expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([['A']])
+
+		await checkboxes[1]?.find('input').setValue(true)
+		expect(wrapper.emitted('update:modelValue')?.[1]).toEqual([['A', 'B']])
+	})
+
+	it('should handle validation correctly (required)', async () => {
+		const wrapper = mount(SyCheckBoxGroup, {
+			props: {
+				'modelValue': null,
+				'label': 'Required CheckBoxGroup',
+				'required': true,
+				'isValidateOnBlur': false,
+				'onUpdate:modelValue': e => wrapper.setProps({ modelValue: e }),
+				'options': [{ label: 'X', value: 'X', id: 'opt-x' }],
+			},
+		})
+
+		await wrapper.vm.validateOnSubmit()
+		await nextTick()
+		expect(wrapper.vm.validation.hasError.value).toBe(true)
+		expect(wrapper.vm.validation.errors.value[0]).toContain('est requis')
+
+		await wrapper.find('input').setValue(true)
+
+		await wrapper.vm.validateOnSubmit()
+		await nextTick()
+
+		expect(wrapper.vm.validation.hasError.value).toBe(false)
+		expect(wrapper.props('modelValue')).toBe('X')
+	})
+
+	it('should handle readonly and disabled states', async () => {
+		const wrapper = mount(SyCheckBoxGroup, {
+			props: {
+				modelValue: null,
+				readonly: true,
+				options: [{ label: 'X', value: 'X', id: 'opt-x' }],
+			},
+		})
+
+		wrapper.findComponent(SyCheckbox).vm.$emit('update:modelValue', true)
+		await nextTick()
+		expect(wrapper.emitted('update:modelValue')).toBeFalsy()
+
+		await wrapper.setProps({ readonly: false, disabled: true })
+		wrapper.findComponent(SyCheckbox).vm.$emit('update:modelValue', true)
+		await nextTick()
+		expect(wrapper.emitted('update:modelValue')).toBeFalsy()
+	})
+
+	it('should handle custom validation rules', async () => {
+		const customRule = {
+			type: 'custom',
+			options: {
+				validate: (value: unknown) => value === 'OK',
+				message: 'Vous devez sélectionner une option.',
+				fieldIdentifier: 'Custom CheckBoxGroup',
+			},
+		}
+
+		const wrapper = mount(SyCheckBoxGroup, {
+			props: {
+				'modelValue': null,
+				'required': true,
+				'customRules': [customRule],
+				'isValidateOnBlur': false,
+				'options': [
+					{ label: 'Non', value: 'NO', id: 'opt-no' },
+					{ label: 'Oui', value: 'OK', id: 'opt-ok' },
+				],
+				'onUpdate:modelValue': e => wrapper.setProps({ modelValue: e }),
+			},
+		})
+
+		const isValidInitial = await wrapper.vm.validateOnSubmit()
+		expect(isValidInitial).toBe(false)
+		expect(wrapper.vm.validation.errors.value).toContain('Vous devez sélectionner une option.')
+
+		await wrapper.setProps({ modelValue: 'OK' })
+
+		const isValidCorrect = await wrapper.vm.validateOnSubmit()
+		expect(isValidCorrect).toBe(true)
+		expect(wrapper.vm.validation.errors.value).toHaveLength(0)
+	})
+})

package/src/components/Customs/SyCheckBoxGroup/types.ts

@@ -0,0 +1,10 @@
+export type Option = {
+	label: string
+	value: string | number
+	disabled?: boolean
+	readonly?: boolean
+	id?: string
+	name?: string
+	ariaLabel?: string
+	title?: string
+}

package/src/components/Customs/SyCheckbox/SyCheckbox.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-	import { computed, ref, watch, onMounted, nextTick } from 'vue'
+	import { computed, ref, watch, onMounted, onUpdated, nextTick } from 'vue'
+	import type { VCheckbox } from 'vuetify/components'
 	import { useValidation, type ValidationRule } from '@/composables/validation/useValidation'
 	import { useValidatable } from '@/composables/validation/useValidatable'
 	import { locales } from './locales'
@@ -70,6 +71,8 @@
 
 	const emit = defineEmits(['update:modelValue', 'update:indeterminate', 'change'])
 
+	const checkboxRef = ref<VCheckbox | null>(null)
+
 	const internalIndeterminate = ref(props.indeterminate)
 
 	const generatedLabel = computed(() => {
@@ -239,39 +242,24 @@
 	// Fonction pour supprimer les attributs ARIA non désirés des éléments input
 	const removeAriaAttributes = () => {
 		nextTick(() => {
-			// Sélectionner tous les inputs de type checkbox dans le composant
-			// Pour aria-disabled
-			const checkboxInputsDisabled = document.querySelectorAll('input[type="checkbox"][aria-disabled="false"]')
-			checkboxInputsDisabled.forEach((input) => {
-				input.removeAttribute('aria-disabled')
-			})
-
-			// Configurer un MutationObserver pour surveiller les changements futurs
-			const observer = new MutationObserver((mutations) => {
-				mutations.forEach(() => {
-					// Pour aria-disabled
-					const newCheckboxInputsDisabled = document.querySelectorAll('input[type="checkbox"][aria-disabled="false"]')
-					newCheckboxInputsDisabled.forEach((input) => {
-						input.removeAttribute('aria-disabled')
-					})
-				})
-			})
-
-			// Observer le document pour les changements
-			observer.observe(document.body, {
-				subtree: true,
-				childList: true,
-				attributes: true,
-				attributeFilter: ['aria-disabled'],
-			})
+			if (checkboxRef.value) {
+				const checkboxInput = checkboxRef.value.$el.querySelector('input[type="checkbox"][aria-disabled="false"]')
+				if (checkboxInput) {
+					checkboxInput.removeAttribute('aria-disabled')
+				}
+			}
 		})
 	}
 
-	// Appliquer la correction lors du montage du composant
+	// Appliquer la correction lors du montage et de la mise à jour du composant
 	onMounted(() => {
 		removeAriaAttributes()
 	})
 
+	onUpdated(() => {
+		removeAriaAttributes()
+	})
+
 	// Intégration avec le système de validation du formulaire
 	useValidatable(validateOnSubmit)
 
@@ -317,6 +305,7 @@
 	<div>
 		<VCheckbox
 			:id="props.id"
+			ref="checkboxRef"
 			v-model="model"
 			:name="props.name"
 			:label="generatedLabel"

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

@@ -1,9 +1,9 @@
 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} />
+<Meta of={SyCheckboxStories} name="Accessibility" />
 
 <div className="accessibility-guide">
 <div className="header">

package/src/components/Customs/SyForm/SyForm.a11y.spec.ts

@@ -4,7 +4,7 @@ import { describe, it } from 'vitest'
 import { mount } from '@vue/test-utils'
 import { axe } from 'vitest-axe'
 import { assertNoA11yViolations } from '@tests/unit/accessibility/axeUtils'
-import SyForm from '../SyForm.vue'
+import SyForm from './SyForm.vue'
 
 // Scénario d’accessibilité : formulaire contenant un champ et un bouton de soumission.
 

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/SyRadioGroup.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 
-	import { computed, nextTick, onMounted, ref, watch } from 'vue'
+	import { computed, nextTick, onMounted, onUpdated, ref, watch } from 'vue'
+	import type { VRadioGroup } from 'vuetify/components'
 	import { useValidation, type ValidationRule } from '@/composables/validation/useValidation'
 	import { useValidatable } from '@/composables/validation/useValidatable'
 	import { locales } from './locales'
@@ -61,6 +62,7 @@
 	)
 
 	const emit = defineEmits(['update:modelValue', 'change'])
+	const radioGroupRef = ref<VRadioGroup | null>(null)
 	const model = computed({
 		get() {
 			return props.modelValue
@@ -139,24 +141,10 @@
 
 	watch(model, (newValue) => {
 		if (!props.isValidateOnBlur) {
-			// Si le formulaire a été soumis et que la valeur change, on valide à nouveau
-			if (isSubmitted.value) {
-				const isValid = validateField(newValue)
-				if (isValid) {
-					// La validation a réussi, effacer les erreurs
-					validation.clearValidation()
-				}
-			}
-			else {
-				// Comportement normal (hors soumission)
-				const isValid = validateField(newValue)
-				// Si la validation réussit, s'assurer que les erreurs sont effacées
-				if (isValid && validation.hasError.value) {
-					validation.clearValidation()
-				}
-			}
+			validateField(newValue)
 		}
 	})
+
 	const hasError = computed(() => validation.hasError.value)
 	const hasWarning = computed(() => validation.hasWarning.value)
 	const hasSuccess = computed(() => validation.hasSuccess.value)
@@ -184,36 +172,16 @@
 
 	const removeAriaAttributesForRadio = () => {
 		nextTick(() => {
-			// Pour aria-disabled sur les radios
-			const radioInputsDisabled = document.querySelectorAll(
-				'input[type="radio"][aria-disabled="false"]',
-			)
-			radioInputsDisabled.forEach((input) => {
-				input.removeAttribute('aria-disabled')
-			})
-
-			// Observer les futurs changements
-			const observer = new MutationObserver((mutations) => {
-				mutations.forEach(() => {
-					const newRadioInputsDisabled = document.querySelectorAll(
-						'input[type="radio"][aria-disabled="false"]',
-					)
-					newRadioInputsDisabled.forEach((input) => {
-						input.removeAttribute('aria-disabled')
-					})
+			if (radioGroupRef.value) {
+				const radioInputs = radioGroupRef.value.$el.querySelectorAll('input[type="radio"][aria-disabled="false"]')
+				radioInputs.forEach((input: Element) => {
+					input.removeAttribute('aria-disabled')
 				})
-			})
-
-			observer.observe(document.body, {
-				subtree: true,
-				childList: true,
-				attributes: true,
-				attributeFilter: ['aria-disabled'],
-			})
+			}
 		})
 	}
 
-	// Appliquer la correction lors du montage du composant
+	// Appliquer la correction lors du montage et de la mise à jour du composant
 	onMounted(() => {
 		removeAriaAttributesForRadio()
 		if (!props.isValidateOnBlur && !props.required) {
@@ -221,6 +189,10 @@
 		}
 	})
 
+	onUpdated(() => {
+		removeAriaAttributesForRadio()
+	})
+
 	// Intégration avec le système de validation du formulaire
 	useValidatable(validateOnSubmit)
 
@@ -235,6 +207,7 @@
 <template>
 	<v-radio-group
 		:id="props.id"
+		ref="radioGroupRef"
 		v-model="model"
 		:class="{
 			'warning-field': hasWarning && !hasError,

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 = {