@cnamts/synapse 1.0.5 → 1.0.7

package/src/components/Amelipro/types.ts

@@ -3,3 +3,11 @@ export interface IndexedObject<T = string> {
 }
 
 export type ValidateOnType = 'lazy' | ('input' | 'blur' | 'submit') | 'input lazy' | 'blur lazy' | 'submit lazy' | 'lazy input' | 'lazy blur' | 'lazy submit' | undefined
+
+export interface IDataListItem {
+	id: number
+	[key: string]: string | number | undefined
+	accordionTitle?: string
+}
+
+export type Breakpoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'smAndDown' | 'smAndUp' | 'mdAndDown' | 'mdAndUp' | 'lgAndDown' | 'lgAndUp' | 'xlAndDown'

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

@@ -208,6 +208,10 @@ export const Legende: StoryObj = {
 					Problèmes relevés par Tanaguru
 				  </div>
 				</div>
+				  <div class="mt-4">
+					  <p>Rapport d’audit manuel : <a href="/audits/ChipList.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-v3/issues/814" target="_blank" style="color:#0C41BD;">issue #814</a>)</p>
+				  </div>
 			  </div>
             `,
 		}

package/src/components/ChipList/ChipList.vue

@@ -5,6 +5,7 @@
 	import { computed, ref } from 'vue'
 	import { locales } from './locales'
 	import type { ChipItem, ChipState } from './types'
+	import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
 
 	type NonEmptyChipState = Exclude<ChipState, undefined>
 	type VuetifyVariant = 'flat' | 'text' | 'elevated' | 'tonal' | 'outlined' | 'plain'
@@ -17,6 +18,8 @@
 		displayPrependStateIcon?: boolean
 		displayAppendStateIcon?: boolean
 		customIcon?: string
+		listAriaLabel?: string
+		listAriaLabelledby?: string
 		vuetifyOptions?: {
 			chip?: {
 				color?: string
@@ -41,6 +44,8 @@
 		displayPrependStateIcon: false,
 		displayAppendStateIcon: false,
 		customIcon: undefined,
+		listAriaLabel: undefined,
+		listAriaLabelledby: undefined,
 		vuetifyOptions: () => ({}),
 	})
 
@@ -53,21 +58,57 @@
 
 	const locale = ref(locales)
 	const deleteIcon = ref(mdiWindowClose)
+	const showAllItems = ref(false)
 
 	const filteredItems = computed(() => {
+		if (showAllItems.value) {
+			return props.items
+		}
 		return props.items.slice(0, props.overflowLimit - 1)
 	})
 
 	const showOverflowChip = computed(() => {
-		return props.items.length >= props.overflowLimit
+		return props.items.length >= props.overflowLimit && !showAllItems.value
+	})
+
+	const overflowCount = computed(() => {
+		return props.items.length - props.overflowLimit + 1
 	})
 
 	const overflowText = computed(() => {
-		return `+${props.items.length - props.overflowLimit + 1}`
+		return `+${overflowCount.value}`
+	})
+
+	const hiddenItems = computed(() => {
+		return props.items.slice(props.overflowLimit - 1)
+	})
+
+	const overflowAriaLabel = computed(() => {
+		const count = overflowCount.value
+		const itemsText = hiddenItems.value.map(item => item.text).join(', ')
+		return locale.value.overflowAriaLabel
+			.replace('{count}', count.toString())
+			.replace('{items}', itemsText)
+	})
+
+	const toggleButtonText = computed(() => {
+		if (showAllItems.value) {
+			return locale.value.hideExtraFilters
+		}
+		const count = overflowCount.value
+		return locale.value.showMoreFilters.replace('{count}', count.toString())
+	})
+
+	const listAccessibleName = computed(() => {
+		return props.listAriaLabel ?? locale.value.chipGroupLabel
 	})
 
 	const resetButtonText = computed(() => {
-		return props.resetText ?? locale.value.reset
+		if (props.resetText) {
+			return props.resetText
+		}
+		// Utiliser le pluriel si plus d'un filtre
+		return props.items.length > 1 ? locale.value.resetMultiple : locale.value.reset
 	})
 
 	/**
@@ -108,12 +149,27 @@
 		}
 	}
 
+	/**
+	 * Bascule l'affichage de tous les éléments ou seulement les premiers
+	 */
+	function toggleShowAllItems(): void {
+		showAllItems.value = !showAllItems.value
+	}
+
+	/**
+	 * Émet l'événement de suppression d'un élément
+	 *
+	 * @param item - L'élément à supprimer
+	 */
 	function emitRemoveEvent(item: ChipItem): void {
 		if (!props.readonly) {
 			emits('remove', item)
 		}
 	}
 
+	/**
+	 * Émet l'événement de réinitialisation
+	 */
 	function emitResetEvent(): void {
 		if (!props.readonly) {
 			emits('reset')
@@ -124,79 +180,102 @@
 <template>
 	<div
 		v-if="items.length"
-		:class="{
-			'flex-column': showOverflowChip,
-		}"
-		class="chip-list d-flex flex-wrap max-width-none mx-n1 mt-n1"
-		role="list"
+		class="sy-chip-list d-flex flex-wrap align-center ga-1"
 	>
-		<div
-			class="d-flex flex-wrap align-center"
-			role="group"
-			:aria-label="locale.chipGroupLabel"
+		<ul
+			:class="{
+				'flex-row': showOverflowChip,
+				'd-flex flex-wrap align-center ga-1': true
+			}"
+			:aria-label="props.listAriaLabelledby ? undefined : listAccessibleName"
+			:aria-labelledby="props.listAriaLabelledby"
 		>
-			<VChip
+			<li
 				v-for="item in filteredItems"
-				v-bind="options.chip"
 				:key="item.text"
-				:color="getBackgroundColor(item.state)"
-				:class="{
-					'sy-chip-success': item.state === 'success',
-					'sy-chip-info': item.state === 'info',
-					'sy-chip-warning': item.state === 'warning',
-					'sy-chip-error': item.state === 'error',
-				}"
-				role="listitem"
+				class="d-inline-flex"
 			>
-				<div class="d-flex align-center justify-center ga-sm-1">
+				<VChip
+					v-bind="options.chip"
+					:color="getBackgroundColor(item.state)"
+					:class="{
+						'sy-chip-success': item.state === 'success',
+						'sy-chip-info': item.state === 'info',
+						'sy-chip-warning': item.state === 'warning',
+						'sy-chip-error': item.state === 'error',
+					}"
+				>
 					<template v-if="displayPrependStateIcon">
-						<VIcon
+						<SyIcon
 							v-bind="options.icon"
 							:icon="customIcon || getIcon(item.state)"
 							:color="item.state"
+							decorative
 						/>
 					</template>
 
 					<span>{{ item.text }}</span>
 
 					<template v-if="displayAppendStateIcon">
-						<VIcon
+						<SyIcon
 							v-bind="options.icon"
 							:icon="customIcon || getIcon(item.state)"
+							decorative
 						/>
 					</template>
 
 					<VBtn
 						v-if="!readonly"
 						v-bind="options.btn"
-						:aria-label="locale.closeBtnLabel"
+						:aria-label="`Supprimer le filtre '${item.text}'`"
 						icon
 						class="remove-chip"
 						@click="emitRemoveEvent(item)"
 					>
-						<VIcon
+						<SyIcon
 							v-bind="options.icon"
 							:icon="deleteIcon"
 							:color="item.state"
+							decorative
 						/>
 					</VBtn>
-				</div>
-			</VChip>
-		</div>
+				</VChip>
+			</li>
 
+			<!-- Élément +N intégré dans la liste HTML -->
+			<li
+				v-if="showOverflowChip"
+				class="d-inline-flex"
+			>
+				<VChip
+					v-bind="options.chip"
+					class="overflow-chip text-cyan-darken-40 ma-1"
+					tabindex="0"
+					:aria-label="overflowAriaLabel"
+					@click="toggleShowAllItems"
+					@keydown.enter="toggleShowAllItems"
+					@keydown.space.prevent="toggleShowAllItems"
+				>
+					{{ overflowText }}
+				</VChip>
+			</li>
+		</ul>
+
+		<!-- Boutons d'action (hors de la liste) -->
 		<div
-			v-if="showOverflowChip || !readonly"
+			v-if="showAllItems || !readonly"
 			class="d-flex align-center"
 		>
-			<VChip
-				v-if="showOverflowChip"
-				v-bind="options.chip"
-				class="overflow-chip text-cyan-darken-40 ma-1"
-				role="status"
-				:aria-label="locale.overflowLabel"
+			<VBtn
+				v-if="showAllItems"
+				variant="text"
+				color="primary"
+				size="small"
+				class="hide-extra-btn px-1 mr-2"
+				@click="toggleShowAllItems"
 			>
-				{{ overflowText }}
-			</VChip>
+				{{ toggleButtonText }}
+			</VBtn>
 
 			<VBtn
 				v-if="!readonly"
@@ -204,7 +283,7 @@
 				color="primary"
 				size="small"
 				data-test-id="reset-btn"
-				class="overflow-btn px-1 ml-1 my-1"
+				class="overflow-btn px-1"
 				@click="emitResetEvent"
 			>
 				{{ resetButtonText }}
@@ -216,6 +295,41 @@
 <style lang="scss" scoped>
 @use '@/assets/tokens';
 
+// Styles pour la liste HTML native
+.sy-chip-list ul {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+}
+
+.sy-chip-list li {
+	margin: 0;
+	padding: 0;
+}
+
+// Styles pour le bouton de suppression
+.remove-chip {
+	padding: 0 !important;
+	min-width: auto !important;
+	width: auto !important;
+	height: auto !important;
+	flex-shrink: 0 !important;
+
+	// Assurer que l'icône reste visible en zoom texte 200%
+	:deep(.v-icon) {
+		font-size: 1rem !important;
+		width: 1rem !important;
+		height: 1rem !important;
+		flex-shrink: 0 !important;
+	}
+
+	// Améliorer le contraste des bordures de focus pour les boutons de suppression
+	&:focus-visible {
+		outline: 2px solid tokens.$primary-base !important;
+		outline-offset: -2px !important;
+	}
+}
+
 .sy-chip-success {
 	color: tokens.$colors-text-success !important;
 	border: 1px solid tokens.$colors-border-success !important;
@@ -238,6 +352,12 @@
 
 .overflow-chip {
 	border: 1px solid tokens.$cyan-lighten-90 !important;
+	cursor: pointer;
+
+	&:focus-visible {
+		outline: 2px solid tokens.$primary-base !important;
+		outline-offset: -2px !important;
+	}
 }
 
 // Disable overflow button hover state
@@ -245,7 +365,30 @@
 	display: none;
 }
 
-.remove-chip {
-	padding: 0 !important;
+// Bouton "Réinitialiser le filtre" - améliorer le contraste de la bordure de focus
+.overflow-btn:focus-visible {
+	outline: 2px solid tokens.$primary-base !important;
+	outline-offset: -2px !important;
+}
+
+// Styles spécifiques pour améliorer le contraste de focus selon le thème du chip
+.sy-chip-success .remove-chip:focus-visible {
+	outline: 2px solid tokens.$colors-border-success !important;
+	outline-offset: -2px !important;
+}
+
+.sy-chip-info .remove-chip:focus-visible {
+	outline: 2px solid tokens.$colors-border-info !important;
+	outline-offset: -2px !important;
+}
+
+.sy-chip-warning .remove-chip:focus-visible {
+	outline: 2px solid tokens.$colors-border-warning !important;
+	outline-offset: -2px !important;
+}
+
+.sy-chip-error .remove-chip:focus-visible {
+	outline: 2px solid tokens.$colors-border-error !important;
+	outline-offset: -2px !important;
 }
 </style>

package/src/components/ChipList/locales.ts

@@ -1,6 +1,8 @@
 export const locales = {
-	closeBtnLabel: 'Supprimer le filtre pour cette valeur',
 	reset: 'Réinitialiser le filtre',
+	resetMultiple: 'Réinitialiser les filtres',
 	chipGroupLabel: 'Liste des filtres sélectionnés',
-	overflowLabel: 'Filtres supplémentaires',
+	showMoreFilters: 'Afficher {count} filtres supplémentaires',
+	hideExtraFilters: 'Réduire',
+	overflowAriaLabel: 'Afficher {count} filtres supplémentaires : {items}',
 } as const

package/src/components/ChipList/tests/chipList.spec.ts

@@ -226,10 +226,13 @@ describe('ChipList', () => {
 			},
 		})
 
-		// Vérifie la présence des rôles ARIA
-		expect(wrapper.find('[role="list"]').exists()).toBe(true)
-		expect(wrapper.find('[role="group"]').exists()).toBe(true)
-		expect(wrapper.findAll('[role="listitem"]')).toHaveLength(defaultItems.length)
+		// Vérifie la présence de la structure HTML native
+		expect(wrapper.find('ul').exists()).toBe(true)
+		expect(wrapper.findAll('li')).toHaveLength(defaultItems.length)
+
+		// Vérifie l'aria-label sur la liste
+		const list = wrapper.find('ul')
+		expect(list.attributes('aria-label')).toBeTruthy()
 
 		// Vérifie les labels ARIA des boutons
 		const removeButton = wrapper.find('.remove-chip')

package/src/components/CollapsibleList/CollapsibleList.vue

@@ -2,7 +2,6 @@
 	import { computed } from 'vue'
 	import { useDisplay } from 'vuetify'
 	import type { ListItem } from './types'
-	import { vLetterSpacing } from '@/directives/letterSpacing'
 
 	const props = defineProps<{
 		listTitle: string | null
@@ -57,7 +56,6 @@
 		class="vd-collapse-list"
 	>
 		<h4
-			v-letter-spacing
 			class="text-subtitle-1 font-weight-bold mb-3"
 		>
 			{{ listTitle }}

package/src/components/CookieBanner/CookieBanner.vue

@@ -9,7 +9,6 @@
 	import { config } from './config'
 	import { locales } from './locales'
 	import CookiesSelection from '../CookiesSelection/CookiesSelection.vue'
-	import { vLetterSpacing } from '@/directives/letterSpacing'
 
 	const props = defineProps<CustomizableOptions & {
 		items?: CookiesItems
@@ -167,7 +166,6 @@
 	>
 		<VSheet
 			ref="vsheetRef"
-			v-letter-spacing
 			v-bind="options.banner"
 			:aria-label="locales.label"
 			class="vd-cookie-banner"
@@ -179,7 +177,7 @@
 			>
 				<div class="d-flex align-start flex-nowrap pa-0 mb-6">
 					<h2
-						v-letter-spacing
+
 						class="text-h5 font-weight-bold"
 					>
 						{{ locales.title }}

package/src/components/CopyBtn/CopyBtn.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-	import { ref } from 'vue'
+	import { ref, onUnmounted } from 'vue'
 	import { mdiContentCopy } from '@mdi/js'
 
 	import useCustomizableOptions, { type CustomizableOptions } from '@/composables/useCustomizableOptions'
@@ -28,6 +28,13 @@
 
 	const tooltip = ref(false)
 	const copyIcon = mdiContentCopy
+	let tooltipTimeoutId: ReturnType<typeof setTimeout> | undefined
+
+	onUnmounted(() => {
+		if (tooltipTimeoutId !== undefined) {
+			clearTimeout(tooltipTimeoutId)
+		}
+	})
 
 	function copy(): void {
 		let contentToCopy
@@ -66,7 +73,7 @@
 			return
 		}
 
-		setTimeout(() => {
+		tooltipTimeoutId = setTimeout(() => {
 			tooltip.value = false
 		}, props.tooltipDuration)
 	}

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

@@ -66,6 +66,7 @@ describe('CopyBtn', () => {
 			propsData: {
 				label: 'test',
 				textToCopy: 'test',
+				tooltipDuration: 100,
 			},
 			global: {
 				plugins: [vuetify],
@@ -76,7 +77,8 @@ describe('CopyBtn', () => {
 
 		expect(wrapper.vm.tooltip).toBeTruthy()
 
-		vi.runAllTimers()
+		vi.advanceTimersByTime(101) // tooltipDuration + 1ms pour être sûr
+
 		expect(wrapper.vm.tooltip).toBeFalsy()
 	})
 

package/src/components/Customs/Selects/SelectOverview.mdx

@@ -19,13 +19,13 @@ Notre système propose quatre modes de sélection, chacun adapté à des besoins
       border: '1px solid #e0e0e0', 
       borderRadius: '8px', 
       padding: '20px',
-      cursor: 'pointer',
       boxShadow: '0 2px 5px rgba(0,0,0,0.05)',
       transition: 'all 0.2s ease',
       backgroundColor: '#fff'
     }}
     onClick={() => linkTo('Composants/Formulaires/Selects/SySelect')()}
   >
+      <img style={{ width: '40%', height: 'auto', marginLeft: '35%' }} src="/components/sy-select.svg" alt="SySelect" />
     <h3 style={{ marginTop: 0, marginBottom: '10px', color: '#1976d2' }}>SySelect</h3>
     <div>Composant de sélection complet et flexible, supportant la sélection simple ou multiple.</div>
     <div style={{ marginTop: '10px', color: '#666' }}>
@@ -43,8 +43,9 @@ Notre système propose quatre modes de sélection, chacun adapté à des besoins
         padding: '5px 10px', 
         color: '#1976d2', 
         borderRadius: '4px', 
-        fontSize: '14px' 
-      }}>
+        fontSize: '14px', 
+        cursor: 'pointer',
+      }} onClick={() => linkTo('Composants/Formulaires/Selects/SySelect')()}>
         Voir la documentation →
       </span>
     </div>
@@ -56,13 +57,12 @@ Notre système propose quatre modes de sélection, chacun adapté à des besoins
       border: '1px solid #e0e0e0', 
       borderRadius: '8px', 
       padding: '20px',
-      cursor: 'pointer',
       boxShadow: '0 2px 5px rgba(0,0,0,0.05)',
       transition: 'all 0.2s ease',
       backgroundColor: '#fff'
     }}
-    onClick={() => linkTo('Composants/Formulaires/Selects/SyInputSelect')()}
   >
+        <img style={{ width: '40%', height: 'auto', marginLeft: '35%' }} src="/components/sy-input-select.svg" alt="SySelect" />
     <h3 style={{ marginTop: 0, marginBottom: '10px', color: '#7b1fa2' }}>SyInputSelect</h3>
     <div>Un composant de sélection qui ressemble à un champ de texte standard avec validation intégrée.</div>
     <div style={{ marginTop: '10px', color: '#666' }}>
@@ -79,8 +79,9 @@ Notre système propose quatre modes de sélection, chacun adapté à des besoins
         padding: '5px 10px', 
         color: '#7b1fa2', 
         borderRadius: '4px', 
-        fontSize: '14px' 
-      }}>
+        fontSize: '14px', 
+        cursor: 'pointer',
+      }} onClick={() => linkTo('Composants/Formulaires/Selects/SyInputSelect')()}>
         Voir la documentation →
       </span>
     </div>
@@ -94,13 +95,12 @@ Notre système propose quatre modes de sélection, chacun adapté à des besoins
       border: '1px solid #e0e0e0', 
       borderRadius: '8px', 
       padding: '20px',
-      cursor: 'pointer',
       boxShadow: '0 2px 5px rgba(0,0,0,0.05)',
       transition: 'all 0.2s ease',
       backgroundColor: '#fff'
     }}
-    onClick={() => linkTo('Composants/Formulaires/Selects/SyBtnSelect')()}
   >
+    <img style={{ width: '40%', height: 'auto', marginLeft: '35%' }} src="/components/sy-btn-select.svg" alt="SySelect" />
     <h3 style={{ marginTop: 0, marginBottom: '10px', color: '#00796b' }}>SyBtnSelect</h3>
     <div>Un composant de sélection sous forme de bouton, idéal pour les menus utilisateur ou les sélecteurs compacts.</div>
     <div style={{ marginTop: '10px', color: '#666' }}>
@@ -116,8 +116,9 @@ Notre système propose quatre modes de sélection, chacun adapté à des besoins
         padding: '5px 10px', 
         color: '#00796b', 
         borderRadius: '4px', 
-        fontSize: '14px' 
-      }}>
+        fontSize: '14px', 
+        cursor: 'pointer',
+      }} onClick={() => linkTo('Composants/Formulaires/Selects/SyBtnSelect')()}>
         Voir la documentation →
       </span>
     </div>
@@ -129,13 +130,12 @@ Notre système propose quatre modes de sélection, chacun adapté à des besoins
       border: '1px solid #e0e0e0', 
       borderRadius: '8px', 
       padding: '20px',
-      cursor: 'pointer',
       boxShadow: '0 2px 5px rgba(0,0,0,0.05)',
       transition: 'all 0.2s ease',
       backgroundColor: '#fff'
     }}
-    onClick={() => linkTo('Composants/Formulaires/Selects/SelectBtnField')()}
   >
+    <img style={{ width: '40%', height: 'auto', marginLeft: '35%' }} src="/components/select-btn-field.svg" alt="SySelect" />
     <h3 style={{ marginTop: 0, marginBottom: '10px', color: '#e65100' }}>SelectBtnField</h3>
     <div>Un composant de sélection sous forme de boutons toggle, idéal pour les choix visuels et les options mutuellement exclusives.</div>
     <div style={{ marginTop: '10px', color: '#666' }}>
@@ -151,8 +151,9 @@ Notre système propose quatre modes de sélection, chacun adapté à des besoins
         padding: '5px 10px', 
         color: '#e65100', 
         borderRadius: '4px', 
-        fontSize: '14px' 
-      }}>
+        fontSize: '14px', 
+        cursor: 'pointer',
+      }} onClick={() => linkTo('Composants/Formulaires/Selects/SelectBtnField')()}>
         Voir la documentation →
       </span>
     </div>
@@ -348,3 +349,5 @@ Notre système propose quatre modes de sélection, chacun adapté à des besoins
 - Adapter le type de sélecteur au contexte d'utilisation (formulaire standard, menu utilisateur, etc.)
 - Pour SelectBtnField, utiliser la propriété `inline` pour une disposition horizontale des options
 - Pour SelectBtnField, utiliser la propriété `unique` sur certaines options pour qu'elles désélectionnent automatiquement les autres options lorsqu'elles sont sélectionnées
+
+<a href="/?path=/docs/guide-du-dev-guide-de-validation-des-formulaires--docs" className="action-link">Pour plus d'informations sur la validation, consultez le guide de validation des formulaires.</a>