@cnamts/synapse 1.0.17 → 1.0.19

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

@@ -57,7 +57,7 @@ describe('SyTabs', () => {
 
 			// Vérifier le texte des onglets
 			testItems.forEach((item, index) => {
-				expect(tabButtons[index].text()).toBe(item.label.toUpperCase())
+				expect(tabButtons[index]?.text()).toBe(item.label.toUpperCase())
 			})
 		})
 
@@ -67,7 +67,7 @@ describe('SyTabs', () => {
 			// Par défaut, le premier onglet devrait être actif
 			const visiblePanel = wrapper.find('.sy-tabs-panel:not([hidden])')
 			expect(visiblePanel.exists()).toBe(true)
-			expect(visiblePanel.text()).toContain(testItems[0].content)
+			expect(visiblePanel.text()).toContain(testItems[0]?.content)
 		})
 
 		it('doit ajouter la classe active au bouton d\'onglet actif', () => {
@@ -76,7 +76,7 @@ describe('SyTabs', () => {
 			// Le premier onglet devrait avoir la classe active
 			const activeTab = wrapper.find('.sy-tabs__button--active')
 			expect(activeTab.exists()).toBe(true)
-			expect(activeTab.text()).toBe(testItems[0].label.toUpperCase())
+			expect(activeTab.text()).toBe(testItems[0]?.label.toUpperCase())
 		})
 	})
 
@@ -94,7 +94,7 @@ describe('SyTabs', () => {
 
 			// Vérifier que le deuxième onglet est actif
 			const activeTab = wrapper.find('.sy-tabs__button--active')
-			expect(activeTab.text()).toBe(testItems[1].label.toUpperCase())
+			expect(activeTab.text()).toBe(testItems[1]?.label.toUpperCase())
 
 			// Vérifier que le bon panneau est affiché
 			const visiblePanel = wrapper.find('.sy-tabs-panel:not([hidden])')
@@ -113,7 +113,7 @@ describe('SyTabs', () => {
 
 			// Vérifier que le bon onglet est actif
 			const activeTab = wrapper.find('.sy-tabs__button--active')
-			expect(activeTab.text()).toBe(testItems[1].label.toUpperCase())
+			expect(activeTab.text()).toBe(testItems[1]?.label.toUpperCase())
 		})
 	})
 
@@ -123,7 +123,7 @@ describe('SyTabs', () => {
 			const wrapper = createWrapper()
 
 			// Cliquer sur le deuxième onglet
-			const secondTab = wrapper.findAll('.sy-tabs__button')[1]
+			const secondTab = wrapper.findAll('.sy-tabs__button')[1]!
 			await secondTab.trigger('click')
 
 			// Vérifier que le deuxième onglet est maintenant actif
@@ -150,7 +150,7 @@ describe('SyTabs', () => {
 			})
 
 			// Cliquer sur le troisième onglet
-			const thirdTab = wrapper.findAll('.sy-tabs__button')[2]
+			const thirdTab = wrapper.findAll('.sy-tabs__button')[2]!
 			await thirdTab.trigger('click')
 
 			// Vérifier que l'événement update:modelValue a été émis avec la bonne valeur
@@ -173,7 +173,7 @@ describe('SyTabs', () => {
 			expect(nav.attributes('aria-label')).toBeDefined()
 
 			// Vérifier les attributs ARIA des onglets
-			const firstTab = wrapper.findAll('[role="tab"]')[0]
+			const firstTab = wrapper.findAll('[role="tab"]')[0]!
 			expect(firstTab.attributes('aria-selected')).toBe('true')
 			expect(firstTab.attributes('aria-controls')).toBe('panel-0')
 
@@ -186,7 +186,7 @@ describe('SyTabs', () => {
 			const wrapper = createWrapper()
 
 			// Simuler une pression de touche Enter sur le deuxième onglet
-			const secondTab = wrapper.findAll('.sy-tabs__button')[1]
+			const secondTab = wrapper.findAll('.sy-tabs__button')[1]!
 			await secondTab.trigger('keydown', {
 				key: 'Enter',
 			})
@@ -352,7 +352,7 @@ describe('SyTabs', () => {
 			const wrapper = createWrapper()
 
 			// Simuler une navigation avec flèche gauche depuis le premier onglet
-			const firstTab = wrapper.findAll('.sy-tabs__button')[0]
+			const firstTab = wrapper.findAll('.sy-tabs__button')[0]!
 			await firstTab.trigger('keydown', {
 				key: 'ArrowLeft',
 				preventDefault: vi.fn(),
@@ -485,20 +485,20 @@ describe('SyTabs', () => {
 			let markers = wrapper.findAll('[data-test="tab-prepend-slot"]')
 			expect(markers.length).toBe(testItems.length)
 			// Premier onglet actif, les autres inactifs
-			expect(markers[0].attributes('data-active')).toBe('true')
+			expect(markers[0]!.attributes('data-active')).toBe('true')
 			for (let i = 1; i < markers.length; i++) {
-				expect(markers[i].attributes('data-active')).toBe('false')
+				expect(markers[i]!.attributes('data-active')).toBe('false')
 			}
 
 			// Changer d'onglet actif
-			const secondTab = wrapper.findAll('.sy-tabs__button')[1]
+			const secondTab = wrapper.findAll('.sy-tabs__button')[1]!
 			await secondTab.trigger('click')
 			await nextTick()
 
 			// Recalcule des marqueurs
 			markers = wrapper.findAll('[data-test="tab-prepend-slot"]')
-			expect(markers[1].attributes('data-active')).toBe('true')
-			expect(markers[0].attributes('data-active')).toBe('false')
+			expect(markers[1]!.attributes('data-active')).toBe('true')
+			expect(markers[0]!.attributes('data-active')).toBe('false')
 		})
 
 		it('doit passer correctement item, index et isActive au slot tab-append', async () => {
@@ -520,20 +520,20 @@ describe('SyTabs', () => {
 			// Vérifier l'état initial : premier onglet actif
 			let markers = wrapper.findAll('[data-test="tab-append-slot"]')
 			expect(markers.length).toBe(testItems.length)
-			expect(markers[0].attributes('data-active')).toBe('true')
+			expect(markers[0]!.attributes('data-active')).toBe('true')
 			for (let i = 1; i < markers.length; i++) {
-				expect(markers[i].attributes('data-active')).toBe('false')
+				expect(markers[i]!.attributes('data-active')).toBe('false')
 			}
 
 			// Changer d'onglet actif
-			const thirdTab = wrapper.findAll('.sy-tabs__button')[2]
+			const thirdTab = wrapper.findAll('.sy-tabs__button')[2]!
 			await thirdTab.trigger('click')
 			await nextTick()
 
 			// Recalcule des marqueurs
 			markers = wrapper.findAll('[data-test="tab-append-slot"]')
-			expect(markers[2].attributes('data-active')).toBe('true')
-			expect(markers[0].attributes('data-active')).toBe('false')
+			expect(markers[2]!.attributes('data-active')).toBe('true')
+			expect(markers[0]!.attributes('data-active')).toBe('false')
 		})
 	})
 })

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

@@ -12,7 +12,3 @@ import '../../../stories/styles/shared.css';
 <Story of={AccessStories.Legende} />
 <br />
 
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
-
-<Story of={AccessStories.AccessibilitePanel} />
-<br />

package/src/components/Customs/SyTextField/Accessibilite.stories.ts

@@ -1,189 +1,11 @@
-import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon } from 'vuetify/components'
+import { VIcon } from 'vuetify/components'
 import type { StoryObj } from '@storybook/vue3'
-import { AccessibiliteItemsIndeterminate, AccessibiliteItemsValidated } from './AccessibiliteItems'
-import { mdiCheckboxMarkedCircle, mdiLink, mdiEye } from '@mdi/js'
-
+import { mdiCheckboxMarkedCircle } from '@mdi/js'
 const checkIcon = mdiCheckboxMarkedCircle
-const iconEye = mdiEye
-const linkICon = mdiLink
 
 export default {
 	title: 'Composants/Formulaires/SyTextField/Accessibilité',
 }
-export const AccessibilitePanel: StoryObj = {
-
-	render: () => {
-		return {
-			components: { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon },
-
-			setup() {
-				const icon = checkIcon
-
-				return { AccessibiliteItemsIndeterminate, AccessibiliteItemsValidated, icon, linkICon, iconEye }
-			},
-			template: `
-				<div class="accessibiliteItems" style="display:flex; max-width: none !important;">
-					<v-col cols="6">
-						<div style="display:flex; margin-bottom: 10px; justify-content: space-between; align-items: center;">
-							<h5>{{ AccessibiliteItemsIndeterminate.length }} critères à prendre en charge par le projet</h5>
-							<div style="display: flex; align-items: center;">
-								<v-btn variant="tonal" color="red" size="x-small" style="margin: 4px;font-size: 8px;"
-									   rounded>Tanaguru
-								</v-btn>
-							</div>
-						</div>
-
-						<v-expansion-panels value="opened" multiple>
-							<v-expansion-panel v-for="(item, index) in AccessibiliteItemsIndeterminate" :key="index" style="background-color: rgba(42, 96, 158, 0.1); margin-bottom: 10px;">
-								<v-expansion-panel-title>
-									<VIcon :icon="iconEye" style="margin-right: 5px; color:#5778b7;"/>
-									{{ item.title }}
-								</v-expansion-panel-title>
-								<v-expansion-panel-text>
-									<v-expansion-panels>
-									<div v-if="item.items2 && item.items2.length > 0 ">
-									<v-expansion-panel v-for="(i, index) in item.items2" :key="i"  style="margin-bottom: 10px;">
-											<v-expansion-panel-title
-												style="font-weight: bold; font-size: 13px; line-height: 16px;">
-												{{ i.subtitle}}
-											</v-expansion-panel-title>
-											<v-expansion-panel-text>
-												<div>
-													<p style="font-size: 13px;line-height: 16px;">
-														{{ i.precision }}
-													</p>
-													<div v-for="(value, index) in i.solution"
-														 style="margin-top:15px; font-size: 13px;line-height: 16px;">
-														<p style="font-weight: bold;">Méthodologie du test : <a
-															href="{{i.link}}" target="blank">
-															<VIcon :icon="linkICon"/>
-														</a></p>
-
-														<p>{{ value.info1 }}</p>
-														<p>{{ value.info2 }}</p>
-														<p>{{ value.info3 }}</p>
-
-													</div>
-													<span style="display:flex; justify-content:center; margin-bottom:5px;">______</span>
-												</div>
-											</v-expansion-panel-text>
-										</v-expansion-panel>
-										</div>
-										<v-expansion-panel v-else>
-											<v-expansion-panel-title
-												style="font-weight: bold; font-size: 13px; line-height: 16px;">
-												{{ item.subtitle }}
-											</v-expansion-panel-title>
-											<v-expansion-panel-text>
-												<div v-for="(value, i) in item.items" :key="i">
-													<p style="font-size: 13px;line-height: 16px;">
-														{{ value.precision }}
-													</p>
-													<div v-for="element in value.solution"
-														 style="margin-top:15px; font-size: 13px;line-height: 16px;">
-														<p style="font-weight: bold;">Méthodologie du test : <a
-															href="value.link" target="blank">
-															<VIcon :icon="linkICon"/>
-														</a></p>
-
-														<p>{{ element.info1 }}</p>
-														<p>{{ element.info2 }}</p>
-														<p>{{ element.info3 }}</p>
-
-													</div>
-													<span style="display:flex; justify-content:center; margin-bottom:5px;">______</span>
-												</div>
-											</v-expansion-panel-text>
-										</v-expansion-panel>
-									</v-expansion-panels>
-								</v-expansion-panel-text>
-							</v-expansion-panel>
-						</v-expansion-panels>
-					</v-col>
-					<v-col cols="6">
-						<div style="display:flex; margin-bottom: 10px; justify-content: space-between; align-items: center;">
-							<h5>{{ AccessibiliteItemsValidated.length }} critères pris en charge par l'équipe Design System</h5>
-							<div style="display: flex; align-items: center;">
-								<v-btn variant="tonal" color="red" size="x-small" style="margin: 4px;font-size: 8px;"
-									   rounded>Tanaguru
-								</v-btn>
-							</div>
-						</div>
-						<v-expansion-panels value="opened" multiple>
-							<v-expansion-panel
-								v-for="(item, index) in AccessibiliteItemsValidated"
-								:key="index" style="background-color: rgba(53,135,0,0.1); margin-bottom: 10px;">
-								<v-expansion-panel-title>
-									<VIcon color="green" :icon="icon" style="margin-right: 5px;"/>
-									{{ item.title }}
-								</v-expansion-panel-title>
-								<v-expansion-panel-text>
-									<v-expansion-panels>
-									
-									<v-expansion-panel v-for="(i, index) in item.items2" :key="i"  style="margin-bottom: 10px;">
-											<v-expansion-panel-title
-												style="font-weight: bold; font-size: 13px; line-height: 16px;">
-												{{ i.subtitle}}
-											</v-expansion-panel-title>
-											<v-expansion-panel-text>
-												<div>
-													<p style="font-size: 13px;line-height: 16px;">
-														{{ i.precision }}
-													</p>
-													<div v-for="(value, index) in i.solution"
-														 style="margin-top:15px; font-size: 13px;line-height: 16px;">
-														<p style="font-weight: bold;">Méthodologie du test : <a
-															href="{{i.link}}" target="blank">
-															<VIcon :icon="linkICon"/>
-														</a></p>
-
-														<p>{{ value.info1 }}</p>
-														<p>{{ value.info2 }}</p>
-														<p>{{ value.info3 }}</p>
-
-													</div>
-													<span style="display:flex; justify-content:center; margin-bottom:5px;">______</span>
-												</div>
-											</v-expansion-panel-text>
-										</v-expansion-panel>
-									
-										<v-expansion-panel >
-											<v-expansion-panel-title
-												style="font-weight: bold; font-size: 13px; line-height: 16px;">
-												{{ item.subtitle }}
-											</v-expansion-panel-title>
-											<v-expansion-panel-text>
-												<div v-for="(value, i) in item.items" :key="i">
-													<p style="font-size: 13px;line-height: 16px;">
-														{{ value.precision }}
-													</p>
-													<div v-for="element in value.solution"
-														 style="margin-top:15px; font-size: 13px;line-height: 16px;">
-														<p style="font-weight: bold;">Méthodologie du test : <a
-															href="value.link" target="blank">
-															<VIcon :icon="linkICon"/>
-														</a></p>
-
-														<p>{{ element.info1 }}</p>
-														<p>{{ element.info2 }}</p>
-														<p>{{ element.info3 }}</p>
-
-													</div>
-													<span style="display:flex; justify-content:center; margin-bottom:5px;">______</span>
-												</div>
-											</v-expansion-panel-text>
-										</v-expansion-panel>
-									</v-expansion-panels>
-								</v-expansion-panel-text>
-							</v-expansion-panel>
-						</v-expansion-panels>
-					</v-col>
-				</div>
-			`,
-		}
-	},
-	tags: ['!dev'],
-}
 
 export const Legende: StoryObj = {
 	args: {
@@ -195,28 +17,7 @@ export const Legende: StoryObj = {
 			setup() {
 				return { args }
 			},
-			template: `
-			  <p style="color: grey;font-size: 11px; margin-bottom: 12px;">Date de conception: 20/11/2024</p>
-			  <div>
-				<p>Le tableau ci-dessous liste nos recommandations suivant les <a target="blank" style="color:#0C41BD;" href="https://www.numerique.gouv.fr/publications/rgaa-accessibilite/#contenu">catégories du RGAA</a>.</p>
-				<p style="margin-bottom: 12px;font-weight:bold;">Pour rappel le composant seul ne garantie pas
-				  l'accessibilité du site.</p>
-				<div style="font-size: 14px">
-				  <p>Nous avons deux façons de relever les problèmes d'accessibilité des composants :</p>
-				  <div>
-					<v-btn variant="tonal" color="grey" size="x-small" style="margin: 2px;font-size: 8px;" rounded>
-					  Audit
-					</v-btn>
-					Problèmes relevés par le projet
-				  </div>
-				  <div>
-					<v-btn variant="tonal" color="red" size="x-small" style="margin: 2px;font-size: 8px;" rounded>
-					  Tanaguru
-					</v-btn>
-					Problèmes relevés par Tanaguru
-				  </div>
-				</div>
-			  </div>
+			template: `   
 			  <div class="mt-4">
 				  <p>Rapport d’audit manuel : <a href="/audits/SyTextField.xlsx" style="color:#0C41BD;">Voir le
 					  rapport</a></p>

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

@@ -12,7 +12,7 @@
 		mdiCalendar,
 	} from '@mdi/js'
 	import { computed, onMounted, ref, watch, nextTick, useAttrs, type ComponentPublicInstance } from 'vue'
-	import type { IconType, VariantStyle, ColorType } from './types'
+	import type { IconType, VariantStyle, ColorType } from '@/types/vuetifyTypes'
 	import { useValidation, type ValidationRule } from '@/composables/validation/useValidation'
 	import { useValidatable } from '@/composables/validation/useValidatable'
 	import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
@@ -866,6 +866,13 @@
 	:deep(.v-icon__svg) {
 		fill: rgb(0 0 0 / 70%);
 	}
+
+	:deep(.v-input__prepend .v-icon:focus-visible),
+	:deep(.v-input__append .v-icon:focus-visible) {
+		outline: 2px solid tokens.$primary-base;
+		outline-offset: 2px;
+		opacity: 1;
+	}
 }
 
 .help-text-below {

package/src/components/Customs/SyTextField/Usages.stories.ts

@@ -1,4 +1,4 @@
-import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon } from 'vuetify/components'
+import { VIcon } from 'vuetify/components'
 import type { StoryObj } from '@storybook/vue3'
 import { checkIcon, linkICon, croixIcon } from '@/constants/icons'
 import Usages from '@/components/Usages/Usages.vue'
@@ -22,7 +22,7 @@ export const UsagePage: StoryObj = {
 
 	render: () => {
 		return {
-			components: { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon, Usages },
+			components: { VIcon, Usages },
 
 			setup() {
 				const icon = checkIcon

package/src/components/DataList/Accessibilite.mdx

@@ -11,8 +11,3 @@ import '../../stories/styles/shared.css';
 
 <Story of={AccessStories.Legende} />
 <br />
-
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
-
-<Story of={AccessStories.AccessibilitePanel} />
-<br />

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

@@ -1,132 +1,12 @@
-import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon } from 'vuetify/components'
+import { VIcon } from 'vuetify/components'
 import type { StoryObj } from '@storybook/vue3'
-import { AccessibiliteItemsIndeterminate, AccessibiliteItemsValidated } from './AccessibiliteItems'
-import { mdiCheckboxMarkedCircle, mdiLink, mdiEye } from '@mdi/js'
-
+import { mdiCheckboxMarkedCircle } from '@mdi/js'
 const checkIcon = mdiCheckboxMarkedCircle
-const iconEye = mdiEye
-const linkICon = mdiLink
 
 export default {
 	title: 'Composants/Données/DataList/Accessibilité',
 }
 
-export const AccessibilitePanel: StoryObj = {
-
-	render: () => {
-		return {
-			components: { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon },
-
-			setup() {
-				const icon = checkIcon
-
-				return { AccessibiliteItemsIndeterminate, AccessibiliteItemsValidated, icon, linkICon, iconEye }
-			},
-			template: `
-				<div class="accessibiliteItems" style="display:flex; max-width: none !important;">
-					<v-col cols="6">
-						<div style="display:flex; margin-bottom: 10px; justify-content: space-between; align-items: center;">
-							<h5>{{ AccessibiliteItemsIndeterminate.length }} critères à prendre en charge par le projet</h5>
-							<div style="display: flex; align-items: center;">
-								<v-btn variant="tonal" color="red" size="x-small" style="margin: 4px;font-size: 8px;"
-									   rounded>Tanaguru
-								</v-btn>
-							</div>
-						</div>
-
-						<v-expansion-panels value="opened" multiple>
-							<v-expansion-panel v-for="(item, index) in AccessibiliteItemsIndeterminate" :key="index" style="background-color: rgba(42, 96, 158, 0.1); margin-bottom: 10px;">
-								<v-expansion-panel-title>
-									<VIcon :icon="iconEye" style="margin-right: 5px; color:#5778b7;"/>
-									{{ item.title }}
-								</v-expansion-panel-title>
-								<v-expansion-panel-text>
-									<v-expansion-panels>
-										<v-expansion-panel>
-											<v-expansion-panel-title
-												style="font-weight: bold; font-size: 13px; line-height: 16px;">
-												{{ item.subtitle }}
-											</v-expansion-panel-title>
-											<v-expansion-panel-text>
-												<div v-for="(value, i) in item.items" :key="i">
-													<p style="font-size: 13px;line-height: 16px;">
-														{{ value.precision }}
-													</p>
-													<div v-for="element in value.solution"
-														 style="margin-top:15px; font-size: 13px;line-height: 16px;">
-														<p style="font-weight: bold;">Méthodologie du test : <a
-															href="value.link" target="blank">
-															<VIcon :icon="linkICon"/>
-														</a></p>
-
-														<p>{{ element.info1 }}</p>
-														<p>{{ element.info2 }}</p>
-														<p>{{ element.info3 }}</p>
-
-													</div>
-													<span style="display:flex; justify-content:center; margin-bottom:5px;">______</span>
-												</div>
-											</v-expansion-panel-text>
-										</v-expansion-panel>
-									</v-expansion-panels>
-								</v-expansion-panel-text>
-							</v-expansion-panel>
-						</v-expansion-panels>
-					</v-col>
-					<v-col cols="6">
-						<div style="display:flex; margin-bottom: 10px; justify-content: space-between; align-items: center;">
-							<h5>{{ AccessibiliteItemsValidated.length }} critères pris en charge par l'équipe Design System</h5>
-							<div style="display: flex; align-items: center;">
-								<v-btn variant="tonal" color="red" size="x-small" style="margin: 4px;font-size: 8px;"
-									   rounded>Tanaguru
-								</v-btn>
-							</div>
-						</div>
-						<v-expansion-panels value="opened" multiple>
-							<v-expansion-panel
-								v-for="(item, index) in AccessibiliteItemsValidated"
-								:key="index" style="background-color: rgba(53,135,0,0.1); margin-bottom: 10px;">
-								<v-expansion-panel-title>
-									<VIcon color="green" :icon="icon" style="margin-right: 5px;"/>
-									{{ item.title }}
-								</v-expansion-panel-title>
-								<v-expansion-panel-text>
-									<v-expansion-panels>
-										<v-expansion-panel>
-											<v-expansion-panel-title style="font-weight: bold;font-size: 13px; line-height: 16px;">
-												{{ item.subtitle }}
-											</v-expansion-panel-title>
-											<v-expansion-panel-text>
-												<div v-for="(value, i) in item.items" :key="i">
-													<p style="font-size: 13px;line-height: 16px;">
-														{{ value.precision }}
-													</p>
-													<div v-for="element in value.solution"
-														 style="margin-top:15px; font-size: 13px;line-height: 16px;">
-														<p style="font-weight: bold;">Méthodologie du test : <a
-															href="value.link" target="blank">
-															<VIcon :icon="linkICon"/>
-														</a></p>
-														<p>{{ element.info1 }}</p>
-														<p>{{ element.info2 }}</p>
-														<p>{{ element.info3 }}</p>
-													</div>
-													<span style="display:flex; justify-content:center; margin-bottom:5px;">______</span>
-												</div>
-											</v-expansion-panel-text>
-										</v-expansion-panel>
-									</v-expansion-panels>
-								</v-expansion-panel-text>
-							</v-expansion-panel>
-						</v-expansion-panels>
-					</v-col>
-				</div>
-			`,
-		}
-	},
-	tags: ['!dev'],
-}
-
 export const Legende: StoryObj = {
 	args: {
 		icon: checkIcon,
@@ -137,28 +17,7 @@ export const Legende: StoryObj = {
 			setup() {
 				return { args }
 			},
-			template: `
-			  <p style="color: grey;font-size: 11px; margin-bottom: 12px;">Date de conception: 20/11/2024</p>
-			  <div>
-				<p>Le tableau ci-dessous liste nos recommandations suivant les <a target="blank" style="color:#0C41BD;" href="https://www.numerique.gouv.fr/publications/rgaa-accessibilite/#contenu">catégories du RGAA</a>.</p>
-				<p style="margin-bottom: 12px;font-weight:bold;">Pour rappel le composant seul ne garantie pas
-				  l'accessibilité du site.</p>
-				<div style="font-size: 14px">
-				  <p>Nous avons deux façons de relever les problèmes d'accessibilité des composants :</p>
-				  <div>
-					<v-btn variant="tonal" color="grey" size="x-small" style="margin: 2px;font-size: 8px;" rounded>
-					  Audit
-					</v-btn>
-					Problèmes relevés par le projet
-				  </div>
-				  <div>
-					<v-btn variant="tonal" color="red" size="x-small" style="margin: 2px;font-size: 8px;" rounded>
-					  Tanaguru
-					</v-btn>
-					Problèmes relevés par Tanaguru
-				  </div>
-				</div>
-			  </div>
+			template: `   
 			  <div class="mt-4">
 				  <p>Rapport d’audit manuel : <a href="/audits/DataList.xlsx" style="color:#0C41BD;">Voir le rapport</a></p>
 				  <p style="color: grey; font-size: 14px">Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system/issues/4030" target="_blank" style="color:#0C41BD;">issue #4030</a>)</p>

package/src/components/DataList/DataList.stories.ts

@@ -471,7 +471,7 @@ export const ActionBtn: Story = {
 			components: { DataList },
 			setup() {
 				const updateBirthdate = (index: number) => {
-					args.items[index].value = '25/09/1970'
+					args.items[index]!.value = '25/09/1970'
 				}
 				return { args, updateBirthdate }
 			},

package/src/components/DataList/tests/DataList.spec.ts

@@ -3,7 +3,7 @@ import { type DOMWrapper, mount } from '@vue/test-utils'
 import DataList from '../DataList.vue'
 import type { DataListItem } from '../types'
 
-const items = [
+const items: DataListItem[] = [
 	{
 		key: 'Civility',
 		value: '',
@@ -16,7 +16,7 @@ const items = [
 		key: 'First name',
 		value: 'Paul',
 	},
-] as DataListItem[]
+]
 
 describe('DataList', () => {
 	it('renders correctly', () => {
@@ -64,8 +64,8 @@ describe('DataList', () => {
 	it('renders correctly with an icon', () => {
 		const listWithIcon = items
 
-		// Add an action to the second item
-		listWithIcon[1].icon = 'mdiTest'
+		// Add an action to the secondZ item
+		listWithIcon[1]!.icon = 'mdiTest'
 
 		const wrapper = mount(DataList, {
 			props: {
@@ -85,7 +85,7 @@ describe('DataList', () => {
 		const listWithClass = items
 
 		// Add a class to the second item
-		listWithClass[1].class = 'custom-class'
+		listWithClass[1]!.class = 'custom-class'
 
 		const wrapper = mount(DataList, {
 			props: {
@@ -128,7 +128,7 @@ describe('DataList', () => {
 		const listWithAction = items
 
 		// Add an action to the second item
-		listWithAction[1].action = 'Edit'
+		listWithAction[1]!.action = 'Edit'
 
 		const wrapper = mount(DataList, {
 			props: {
@@ -144,7 +144,7 @@ describe('DataList', () => {
 		const listWithAction = items
 
 		// Add an action to the second item
-		listWithAction[2].action = 'Edit'
+		listWithAction[2]!.action = 'Edit'
 
 		const wrapper = mount(DataList, {
 			props: {

package/src/components/DataListGroup/Accessibilite.mdx

@@ -11,8 +11,3 @@ import '../../stories/styles/shared.css';
 
 <Story of={AccessStories.Legende} />
 <br />
-
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
-
-<Story of={AccessStories.AccessibilitePanel} />
-<br />