@cnamts/synapse 1.0.4 → 1.0.6

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/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/SySelect/Accessibilite.mdx

@@ -82,9 +82,16 @@ import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
   </div>
 </div>
 
+<div className="accessibility-guide">
+Accessibilité
+=============
+<Story of={AccessStories.Legende} />
 <br />
+
+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 <Story of={AccessStories.AccessibilitePanel} />
 <br />
+</div>
 
 <style>
 {

package/src/components/Customs/Selects/SySelect/Accessibilite.stories.ts

@@ -277,7 +277,10 @@ export const Legende: StoryObj = {
 					  <p style="color: grey; font-size: 14px">Correctifs associés (<a
 						  href="https://github.com/assurance-maladie-digital/design-system-v3/issues/787" target="_blank"
 						  style="color:#0C41BD;"
-					  >issue #787</a>)</p>
+					  >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>
 			  </div>
             `,

package/src/components/Customs/Selects/SySelect/SySelect.stories.ts

@@ -55,6 +55,10 @@ const meta: Meta<typeof SySelect> = {
 			control: 'text',
 			description: 'Permet de définir une largeur personnalisée pour le champ de sélection (en px)',
 		},
+		helpText: {
+			control: 'text',
+			description: 'Texte d\'aide à la saisie',
+		},
 	},
 } as Meta<typeof SySelect>
 
@@ -131,6 +135,80 @@ export const Default: Story = {
 	},
 }
 
+export const HelpText: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<SySelect
+						v-model="value"
+						:items="items"
+						help-text="Texte d'aide à la saisie"
+					/>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import SySelect from '@cnamts/SySelect'
+					
+					const items =  [
+						{ text: 'Adrien', value: 'Adrien' },
+						{ text: 'Axel', value: 'Axel' },
+						{ text: 'Baptiste', value: 'Baptiste' },
+						{ text: 'Clement', value: 'Clement' },
+						{ text: 'Corentin', value: 'Corentin' },
+						{ text: 'Damien', value: 'Damien' },
+						{ text: 'David', value: 'David' },
+						{ text: 'Eloi', value: 'Eloi' },
+						{ text: 'Louis', value: 'Louis' },
+						{ text: 'Valentin', value: 'Valentin' },
+					],
+				</script>
+				`,
+			},
+		],
+	},
+	args: {
+		'items': [
+			{ text: 'Adrien', value: 'Adrien' },
+			{ text: 'Axel', value: 'Axel' },
+			{ text: 'Baptiste', value: 'Baptiste' },
+			{ text: 'Clement', value: 'Clement' },
+			{ text: 'Corentin', value: 'Corentin' },
+			{ text: 'Damien', value: 'Damien' },
+			{ text: 'David', value: 'David' },
+			{ text: 'Eloi', value: 'Eloi' },
+			{ text: 'Louis', value: 'Louis' },
+			{ text: 'Valentin', value: 'Valentin' },
+		],
+		'helpText': 'Texte d\'aide à la saisie',
+		'hideMessages': false,
+		'required': true,
+		'onUpdate:modelValue': fn(),
+	},
+	render: (args) => {
+		return {
+			components: { SySelect, VBtn, VMenu, VList, VListItem, VListItemTitle },
+			setup() {
+				return { args }
+			},
+			template: `
+				<div class="pa-4">
+					<SySelect
+						v-bind="args"
+					/>
+				</div>
+				<br/><br/><br/><br/>
+			`,
+		}
+	},
+}
+
 export const Required: Story = {
 	parameters: {
 		sourceCode: [
@@ -138,6 +216,7 @@ export const Required: Story = {
 				name: 'Template',
 				code: `
 				<template>
+					<p class="mb-2 text-caption text-grey-darken-2">Ce champ est obligatoire</p>
 					<SySelect
 						v-model="value"
 						:items="items"
@@ -177,6 +256,7 @@ export const Required: Story = {
 			},
 			template: `
 				<div class="pa-4">
+					<p class="mb-2 text-caption text-grey-darken-2">Ce champ est obligatoire</p>
 					<SySelect
 						v-bind="args"
 						:required="args.required"

package/src/components/Customs/Selects/SySelect/SySelect.vue

@@ -108,6 +108,10 @@
 			type: Boolean,
 			default: false,
 		},
+		helpText: {
+			type: String,
+			default: '',
+		},
 	})
 
 	const emit = defineEmits(['update:modelValue'])
@@ -120,22 +124,24 @@
 	const labelWidth = ref(0)
 	const labelRef = ref<HTMLElement | null>(null)
 
-	const toggleMenu = () => {
+	const toggleMenu = (skipInitialFocus = false) => {
 		if (props.readonly) return
 		isOpen.value = !isOpen.value
 		if (isOpen.value) {
 			updateListPosition()
-			// Initialiser la sélection à l'ouverture
-			nextTick(() => {
-				// Si un élément est déjà sélectionné, l'activer
-				const selectedIndex = formattedItems.value.findIndex(item => isItemSelected(item))
-				if (selectedIndex >= 0) {
-					setActiveDescendant(selectedIndex)
-				}
-				else {
-					setActiveDescendant(0)
-				}
-			})
+			// Initialiser la sélection à l'ouverture seulement si pas ouvert via clavier
+			if (!skipInitialFocus) {
+				nextTick(() => {
+					// Si un élément est déjà sélectionné, l'activer
+					const selectedIndex = formattedItems.value.findIndex(item => isItemSelected(item))
+					if (selectedIndex >= 0) {
+						setActiveDescendant(selectedIndex)
+					}
+					else {
+						setActiveDescendant(0)
+					}
+				})
+			}
 		}
 	}
 
@@ -152,6 +158,8 @@
 		isOpen.value = false
 	}
 	const inputId = ref(`sy-select-${Math.random().toString(36).substring(7)}`)
+	// Generate unique menu ID for each component instance to avoid conflicts and validation issues
+	const uniqueMenuId = ref(props.menuId === 'sy-select-menu' ? `sy-select-menu-${Math.random().toString(36).substring(7)}` : props.menuId)
 	const listStyles = ref<Record<string, string>>({})
 	const updateListPosition = () => {
 		if (input.value?.$el) {
@@ -357,6 +365,23 @@
 
 	const input = ref<InstanceType<typeof VTextField> | null>(null)
 
+	// Détecte s'il y a des messages d'erreur, de succès ou d'avertissement
+	const hasMessages = computed(() => {
+		if (props.disableErrorHandling) return false
+		return props.errorMessages.length > 0 || hasError.value
+	})
+
+	// Détermine si le helpText doit être affiché à la position du message ou en dessous
+	const showHelpTextAsMessage = computed(() => {
+		// Afficher à la position du message si pas de messages d'erreur
+		return props.helpText && !hasMessages.value
+	})
+
+	const showHelpTextBelow = computed(() => {
+		// Afficher en dessous si il y a des messages d'erreur ET hideMessages n'est pas activé
+		return props.helpText && hasMessages.value && !props.hideMessages
+	})
+
 	const calculatedWidth = computed(() => {
 		const baseWidth = props.width ? Number(props.width) : 0
 		const selectedText = typeof selectedItemText.value === 'string' ? selectedItemText.value : ''
@@ -378,6 +403,11 @@
 		handleUpKey,
 		handleCharacterKey,
 		handleEscapeKey,
+		handleHomeKey,
+		handleEndKey,
+		handlePageUpKey,
+		handlePageDownKey,
+		handleTabKey,
 		restoreFocus,
 	} = useSySelectKeyboard({
 		isOpen,
@@ -505,6 +535,59 @@
 		}
 	})
 
+	let mutationObserver: MutationObserver | null = null
+
+	// Function to set up proper ARIA attributes
+	const setupAriaAttributes = () => {
+		if (input.value && input.value.$el) {
+			// Find the input element
+			const inputElement = input.value.$el?.querySelector?.('input')
+			if (inputElement) {
+				// Remove problematic attributes that shouldn't be on input
+				inputElement.removeAttribute('aria-describedby')
+				inputElement.removeAttribute('size')
+				inputElement.removeAttribute('tabindex')
+				inputElement.removeAttribute('aria-hidden')
+
+				// Set proper combobox attributes on input element (following CNSA standard)
+				inputElement.setAttribute('role', 'combobox')
+				inputElement.setAttribute('aria-expanded', isOpen.value ? 'true' : 'false')
+				// Only set aria-controls when menu is open and element exists
+				if (isOpen.value) {
+					inputElement.setAttribute('aria-controls', uniqueMenuId.value)
+				}
+				else {
+					inputElement.removeAttribute('aria-controls')
+				}
+				// Note: aria-autocomplete is omitted for select-only combobox (invalid to set to 'none')
+				inputElement.setAttribute('aria-haspopup', 'listbox')
+				if (isOpen.value && activeDescendantId.value) {
+					inputElement.setAttribute('aria-activedescendant', activeDescendantId.value)
+				}
+				if (isRequired.value) {
+					inputElement.setAttribute('aria-required', 'true')
+				}
+				if (hasError.value) {
+					inputElement.setAttribute('aria-invalid', 'true')
+				}
+			}
+
+			// Clean up parent element - remove any conflicting attributes
+			const parentElement = input.value.$el
+			if (parentElement) {
+				// Remove any role or ARIA attributes from parent that should be on input
+				parentElement.removeAttribute('role')
+				parentElement.removeAttribute('aria-expanded')
+				parentElement.removeAttribute('aria-controls')
+				parentElement.removeAttribute('aria-haspopup')
+				parentElement.removeAttribute('aria-activedescendant')
+				parentElement.removeAttribute('aria-required')
+				parentElement.removeAttribute('aria-invalid')
+				parentElement.removeAttribute('aria-hidden')
+			}
+		}
+	}
+
 	onMounted(() => {
 		if (labelRef.value) {
 			labelWidth.value = labelRef.value.offsetWidth + 64
@@ -513,25 +596,158 @@
 		window.addEventListener('resize', updateListPosition)
 
 		// Use nextTick to ensure the DOM is fully rendered
+		nextTick(() => {
+			// Initial setup
+			setupAriaAttributes()
+
+			// Set up MutationObserver to monitor attribute changes
+			if (input.value && input.value.$el) {
+				mutationObserver = new MutationObserver((mutations) => {
+					let needsCleanup = false
+					mutations.forEach((mutation) => {
+						if (mutation.type === 'attributes') {
+							const target = mutation.target as HTMLElement
+							const attributeName = mutation.attributeName
+
+							// Check if problematic attributes were added to input
+							if (target.tagName === 'INPUT' && (
+								attributeName === 'role'
+								|| attributeName === 'aria-hidden'
+								|| attributeName === 'aria-expanded'
+								|| attributeName === 'aria-controls'
+								|| attributeName === 'aria-haspopup'
+							)) {
+								needsCleanup = true
+							}
+
+							// Check if aria-hidden was added to parent
+							if (target === input.value?.$el && attributeName === 'aria-hidden') {
+								needsCleanup = true
+							}
+						}
+					})
+
+					if (needsCleanup) {
+						// Use setTimeout to avoid infinite loops
+						setTimeout(setupAriaAttributes, 0)
+					}
+				})
+
+				// Observe both the parent element and its children
+				mutationObserver.observe(input.value.$el, {
+					attributes: true,
+					subtree: true,
+					attributeFilter: ['role', 'aria-hidden', 'aria-expanded', 'aria-controls', 'aria-haspopup'],
+				})
+			}
+		})
+	})
+
+	// Watchers to update ARIA attributes dynamically on input element
+	watch(isOpen, (newValue) => {
 		nextTick(() => {
 			if (input.value && input.value.$el) {
-				// Find the input element
-				const inputElement = input.value.$el.querySelector('input')
+				const inputElement = input.value.$el?.querySelector?.('input')
 				if (inputElement) {
-					// Remove the aria-describedby attribute
-					inputElement.removeAttribute('aria-describedby')
-					// fix le critere RGAA 10.1 : Dans le site web, des feuilles de styles sont-elles utilisées pour contrôler la présentation de l'information?
-					inputElement.removeAttribute('size')
-					// Remove any tabindex from the input element to prevent it from being tabbable
-					inputElement.removeAttribute('tabindex')
+					inputElement.setAttribute('aria-expanded', newValue ? 'true' : 'false')
+					if (newValue && activeDescendantId.value) {
+						inputElement.setAttribute('aria-activedescendant', activeDescendantId.value)
+					}
+					else {
+						inputElement.removeAttribute('aria-activedescendant')
+					}
 				}
 			}
 		})
 	})
 
+	watch(activeDescendantId, (newValue) => {
+		nextTick(() => {
+			if (input.value && input.value.$el && isOpen.value) {
+				const inputElement = input.value.$el?.querySelector?.('input')
+				if (inputElement) {
+					if (newValue) {
+						inputElement.setAttribute('aria-activedescendant', newValue)
+					}
+					else {
+						inputElement.removeAttribute('aria-activedescendant')
+					}
+				}
+			}
+		})
+	})
+
+	watch(hasError, (newValue) => {
+		nextTick(() => {
+			if (input.value && input.value.$el) {
+				const inputElement = input.value.$el?.querySelector?.('input')
+				if (inputElement) {
+					if (newValue) {
+						inputElement.setAttribute('aria-invalid', 'true')
+					}
+					else {
+						inputElement.removeAttribute('aria-invalid')
+					}
+				}
+			}
+		})
+	})
+
+	// Watch for selection changes to enforce correct accessibility attributes
+	// This prevents Vuetify from overriding our combobox attributes
+	watch(selectedItem, () => {
+		nextTick(() => {
+			if (input.value && input.value.$el) {
+				const inputElement = input.value.$el?.querySelector?.('input')
+				if (inputElement) {
+					// Ensure combobox role is maintained on input
+					inputElement.setAttribute('role', 'combobox')
+					// Ensure aria-hidden is never set to true
+					inputElement.removeAttribute('aria-hidden')
+					// Maintain other combobox attributes
+					inputElement.setAttribute('aria-expanded', isOpen.value ? 'true' : 'false')
+					inputElement.setAttribute('aria-haspopup', 'listbox')
+					// Note: aria-autocomplete is omitted for select-only combobox
+					// Only set aria-controls when menu is open and element exists
+					if (isOpen.value) {
+						inputElement.setAttribute('aria-controls', uniqueMenuId.value)
+					}
+					else {
+						inputElement.removeAttribute('aria-controls')
+					}
+
+					// Only add aria-required if the component is actually required
+					if (isRequired.value) {
+						inputElement.setAttribute('aria-required', 'true')
+					}
+					else {
+						inputElement.removeAttribute('aria-required')
+					}
+				}
+
+				// Clean up parent element
+				const parentElement = input.value.$el
+				if (parentElement) {
+					parentElement.removeAttribute('role')
+					parentElement.removeAttribute('aria-hidden')
+					parentElement.removeAttribute('aria-expanded')
+					parentElement.removeAttribute('aria-haspopup')
+					parentElement.removeAttribute('aria-controls')
+					parentElement.removeAttribute('aria-required')
+				}
+			}
+		})
+	}, { deep: true })
+
 	onUnmounted(() => {
 		window.removeEventListener('scroll', updateListPosition, true)
 		window.removeEventListener('resize', updateListPosition)
+
+		// Clean up MutationObserver
+		if (mutationObserver) {
+			mutationObserver.disconnect()
+			mutationObserver = null
+		}
 	})
 
 	defineExpose({
@@ -549,27 +765,19 @@
 		v-rgaa-svg-fix="true"
 		:title="$attrs['aria-label'] || labelWithAsterisk"
 		color="primary"
-		role="combobox"
 		:disabled="disabled"
 		:label="labelWithAsterisk"
 		:aria-label="$attrs['aria-label'] || labelWithAsterisk"
-		:aria-expanded="isOpen ? 'true' : 'false'"
-		:aria-controls="menuId"
-		aria-autocomplete="list"
-		aria-haspopup="listbox"
-		aria-readonly="true"
-		:aria-owns="menuId"
-		:aria-activedescendant="isOpen ? activeDescendantId : undefined"
 		:error-messages="props.disableErrorHandling ? [] : errorMessages"
 		:variant="outlined ? 'outlined' : 'underlined'"
 		:rules="isRequired && !props.disableErrorHandling ? ['Le champ est requis.'] : []"
-		:aria-required="isRequired ? 'true' : undefined"
-		:aria-invalid="hasError ? 'true' : undefined"
 		:bg-color="props.bgColor"
 		:density="props.density"
 		:active="hasChips || isOpen"
 		readonly
-		:hide-details="props.hideMessages"
+		:hide-details="props.hideMessages && !showHelpTextAsMessage"
+		:hint="showHelpTextAsMessage ? props.helpText : ''"
+		:persistent-hint="!!showHelpTextAsMessage"
 		class="sy-select"
 		:width="calculatedWidth"
 		:style="hasError ? { minWidth: `${labelWidth + 18}px`} : {minWidth: `${labelWidth}px`}"
@@ -580,6 +788,11 @@
 		@keydown.down.prevent="handleDownKey"
 		@keydown.up.prevent="handleUpKey"
 		@keydown.esc.prevent="handleEscapeKey"
+		@keydown.home.prevent="handleHomeKey"
+		@keydown.end.prevent="handleEndKey"
+		@keydown.page-up.prevent="handlePageUpKey"
+		@keydown.page-down.prevent="handlePageDownKey"
+		@keydown.tab="handleTabKey"
 		@keydown="(e) => {
 			// Handle printable characters for keyboard navigation
 			if (!e.ctrlKey && !e.altKey && !e.metaKey) {
@@ -607,6 +820,7 @@
 			<SyIcon
 				v-if="hasError"
 				class="mr-6"
+				color="error"
 				:icon="mdiInformation"
 				:decorative="false"
 				label="Information"
@@ -641,7 +855,7 @@
 	>{{ label }}</span>
 	<VList
 		v-if="isOpen"
-		:id="menuId"
+		:id="uniqueMenuId"
 		class="v-list"
 		role="listbox"
 		:aria-multiselectable="props.multiple ? 'true' : undefined"
@@ -654,10 +868,14 @@
 		tabindex="0"
 		:title="props.multiple ? 'Sélection multiple' : 'Sélection'"
 		@keydown.esc.prevent="closeList"
-		@keydown.tab.prevent="closeList"
+		@keydown.tab="handleTabKey"
 		@keydown.enter.prevent="handleEnterKey"
 		@keydown.down.prevent="handleDownKey"
 		@keydown.up.prevent="handleUpKey"
+		@keydown.home.prevent="handleHomeKey"
+		@keydown.end.prevent="handleEndKey"
+		@keydown.page-up.prevent="handlePageUpKey"
+		@keydown.page-down.prevent="handlePageDownKey"
 		@click.stop
 	>
 		<VListItem
@@ -667,7 +885,7 @@
 			:ref="'options-' + index"
 			role="option"
 			class="v-list-item"
-			:aria-selected="(isItemSelected(item) || `option-${index}` === activeDescendantId) ? 'true' : 'false'"
+			:aria-selected="isItemSelected(item) ? 'true' : 'false'"
 			tabindex="-1"
 			:class="{ active: isItemSelected(item) || `option-${index}` === activeDescendantId }"
 			@click.stop="(event) => selectItem(item, event)"
@@ -692,6 +910,14 @@
 			</VListItemTitle>
 		</VListItem>
 	</VList>
+
+	<div
+		v-if="showHelpTextBelow"
+		class="help-text-below px-4 mt-1"
+		:class="{ 'text-disabled': props.disabled }"
+	>
+		{{ props.helpText }}
+	</div>
 </template>
 
 <style scoped lang="scss">
@@ -734,6 +960,26 @@
 	background-color: rgb(0 0 0 / 8%);
 }
 
+.help-text {
+	color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+	font-size: 14px;
+	line-height: 1.2;
+}
+
+.help-text.text-disabled {
+	color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
+}
+
+.help-text-below {
+	color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+	font-size: 14px;
+	line-height: 1.2;
+}
+
+.help-text-below.text-disabled {
+	color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
+}
+
 /* Ensure focus styles match selection styles for keyboard navigation */
 .v-list-item:focus-visible,
 .v-list-item.keyboard-focused {