@cnamts/synapse 1.0.2 → 1.0.3

package/src/components/Customs/{SySelect → Selects/SySelect}/Accessibilite.stories.ts

@@ -1,15 +1,77 @@
-import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon } from 'vuetify/components'
+import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon, VTable } from 'vuetify/components'
 import type { StoryObj } from '@storybook/vue3'
 import { AccessibiliteItemsIndeterminate, AccessibiliteItemsValidated } from './AccessibiliteItems'
-import { mdiCheckboxMarkedCircle, mdiLink, mdiEye } from '@mdi/js'
+import { mdiCheckboxMarkedCircle, mdiLink, mdiEye, mdiKeyboard } from '@mdi/js'
 
 const checkIcon = mdiCheckboxMarkedCircle
 const iconEye = mdiEye
 const linkICon = mdiLink
+const keyboardIcon = mdiKeyboard
 
 export default {
-	title: 'Composants/Formulaires/SySelect/Accessibilité',
+	title: 'Composants/Formulaires/Selects/SySelect/Accessibilité',
 }
+
+// Story masquée qui n'apparaît que dans le MDX
+export const ComboboxKeyboardNavigation: StoryObj = {
+	tags: ['!dev'],
+	render: () => {
+		return {
+			components: { VTable, VIcon },
+			setup() {
+				const keyboardData = [
+					{
+						touche: 'Flèche bas',
+						action: '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)',
+					},
+					{
+						touche: 'Flèche haut',
+						action: 'Ouvre le menu et déplace le focus sur la dernière option',
+					},
+					{
+						touche: 'Flèches haut/bas',
+						action: 'Déplace le focus dans la liste des options (sans modifier la sélection)',
+					},
+					{
+						touche: 'Entrée',
+						action: 'Sélectionne l\'option active et ferme le menu',
+					},
+					{
+						touche: 'Échap',
+						action: 'Ferme le menu sans modifier la sélection',
+					},
+					{
+						touche: 'Caractères imprimables',
+						action: 'Déplace le focus sur l\'option commençant par le(s) caractère(s) saisi(s)',
+					},
+				]
+				return { keyboardData, keyboardIcon }
+			},
+			template: `
+				<div>
+					<h3><v-icon :icon="keyboardIcon" style="margin-right: 8px;"/>Navigation au clavier</h3>
+					<p>Le composant SySelect implémente le pattern de navigation au clavier recommandé par le W3C pour les combobox select-only.</p>
+					<v-table density="compact" style="margin-top: 16px;">
+						<thead>
+							<tr>
+								<th>Touche</th>
+								<th>Action</th>
+							</tr>
+						</thead>
+						<tbody>
+							<tr v-for="(item, index) in keyboardData" :key="index">
+								<td><code>{{ item.touche }}</code></td>
+								<td>{{ item.action }}</td>
+							</tr>
+						</tbody>
+					</v-table>
+					<p style="margin-top: 16px;"><strong>Note:</strong> Le focus DOM reste toujours sur l'élément combobox, tandis que le focus visuel est géré via <code>aria-activedescendant</code>.</p>
+				</div>
+			`,
+		}
+	},
+}
+
 export const AccessibilitePanel: StoryObj = {
 
 	render: () => {
@@ -209,6 +271,14 @@ export const Legende: StoryObj = {
 					Problèmes relevés par Tanaguru
 				  </div>
 				</div>
+        <div class="mt-4">
+					  <p>Rapport d’audit manuel : <a href="/audits/SySelect.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/787" target="_blank"
+						  style="color:#0C41BD;"
+					  >issue #787</a>)</p>
+				  </div>
 			  </div>
             `,
 		}

package/src/components/Customs/{SySelect → Selects/SySelect}/SySelect.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Meta, Controls, Story, Source } from '@storybook/blocks';
-import * as SySelectStories from "./SySelect.stories";
+import * as SySelectStories from "./SySelect.stories.ts";
 
 <Meta of={SySelectStories} />
 

package/src/components/Customs/{SySelect → Selects/SySelect}/SySelect.stories.ts

@@ -1,12 +1,12 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import SySelect from '@/components/Customs/SySelect/SySelect.vue'
-import SyAlert from '@/components/SyAlert/SyAlert.vue'
+import SySelect from '@/components/Customs/Selects/SySelect/SySelect.vue'
+import SyAlert from '../../../SyAlert/SyAlert.vue'
 import { VBtn, VMenu, VList, VListItem, VListItemTitle, VForm } from 'vuetify/components'
 import { ref } from 'vue'
 import { fn } from '@storybook/test'
 
 const meta: Meta<typeof SySelect> = {
-	title: 'Composants/Formulaires/SySelect',
+	title: 'Composants/Formulaires/Selects/SySelect',
 	component: SySelect,
 	parameters: {
 		layout: 'fullscreen',
@@ -82,8 +82,16 @@ export const Default: Story = {
 					import SySelect from '@cnamts/SySelect'
 					
 					const items =  [
-						{ text: 'Option 1', value: '1' },
-						{ text: 'Option 2', value: '2' },
+						{ 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>
 				`,
@@ -92,8 +100,16 @@ export const Default: Story = {
 	},
 	args: {
 		'items': [
-			{ text: 'Option 1', value: '1' },
-			{ text: 'Option 2', value: '2' },
+			{ 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' },
 		],
 		'onUpdate:modelValue': fn(),
 	},
@@ -269,10 +285,16 @@ import SySelect from '@cnamts/synapse'
 
 const selectedOptions = ref([])
 const options = [
-  { text: 'Option 1', value: '1' },
-  { text: 'Option 2', value: '2' },
-  { text: 'Option 3', value: '3' },
-  { text: 'Option 4', value: '4' },
+						{ 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>
         `,
@@ -281,10 +303,16 @@ const options = [
 	},
 	args: {
 		'items': [
-			{ text: 'Option 1', value: '1' },
-			{ text: 'Option 2', value: '2' },
-			{ text: 'Option 3', value: '3' },
-			{ text: 'Option 4', value: '4' },
+			{ 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' },
 		],
 		'label': 'Sélection multiple',
 		'multiple': true,

package/src/components/Customs/{SySelect → Selects/SySelect}/SySelect.vue

@@ -5,8 +5,12 @@
 	})
 	import { mdiInformation, mdiMenuDown, mdiCloseCircle } from '@mdi/js'
 	import { ref, watch, onMounted, onUnmounted, computed, nextTick, type PropType } from 'vue'
+	import { useSySelectKeyboard } from './composables/useSySelectKeyboard'
+	import { vRgaaSvgFix } from '../../../../directives/rgaaSvgFix'
 	import type { VTextField } from 'vuetify/components'
-	import { VChip, VCheckbox } from 'vuetify/components'
+	import { VChip } from 'vuetify/components'
+	import SyCheckbox from '@/components/Customs/SyCheckbox/SyCheckbox.vue'
+	import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
 	import { locales } from './locales'
 
 	export type ItemType = {
@@ -119,8 +123,22 @@
 	const toggleMenu = () => {
 		if (props.readonly) return
 		isOpen.value = !isOpen.value
-		if (isOpen.value) updateListPosition()
+		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)
+				}
+			})
+		}
 	}
+
 	const closeList = (event?: Event) => {
 		// Check if the click is inside the dropdown list
 		const target = event?.target as HTMLElement
@@ -134,7 +152,6 @@
 		isOpen.value = false
 	}
 	const inputId = ref(`sy-select-${Math.random().toString(36).substring(7)}`)
-
 	const listStyles = ref<Record<string, string>>({})
 	const updateListPosition = () => {
 		if (input.value?.$el) {
@@ -149,13 +166,53 @@
 	}
 
 	const selectItem = (item: ItemType | null, event?: Event) => {
+		// Prevent default action if event is provided
+		event?.preventDefault()
+
 		// Stop event propagation to prevent click-outside from triggering
 		event?.stopPropagation()
 
+		// Si c'est un clic, appliquer le focus visuel en utilisant le système existant
+		if (event?.type === 'click' && item !== null) {
+			// Trouver l'index de l'élément cliqué
+			const clickedIndex = formattedItems.value.findIndex((formattedItem) => {
+				if (props.returnObject) {
+					return formattedItem[props.valueKey] === item[props.valueKey]
+				}
+				return formattedItem === item
+			})
+
+			// Si l'élément est trouvé, utiliser le système existant pour appliquer le focus visuel
+			if (clickedIndex !== -1) {
+				setActiveDescendant(clickedIndex)
+			}
+		}
+
 		if (item === null) {
 			selectedItem.value = props.multiple ? [] : null
 			emit('update:modelValue', props.multiple ? [] : null)
-			isOpen.value = false
+
+			// Garder la liste ouverte après une suppression et réinitialiser la navigation au clavier
+			if (event?.type === 'keydown' || event?.type === 'click') {
+				if (!isOpen.value) {
+					isOpen.value = true
+					updateListPosition()
+				}
+
+				// S'assurer que le focus DOM revient à l'input et restaurer le focus visuel
+				nextTick(() => {
+					// Focus DOM sur l'input
+					const inputElement = document.querySelector('.v-field__input')
+					if (inputElement) {
+						(inputElement as HTMLInputElement).focus()
+					}
+					// Restaurer le focus visuel/ARIA
+					restoreFocus()
+				})
+			}
+			else {
+				isOpen.value = false
+			}
 			return
 		}
 
@@ -168,6 +225,11 @@
 			return
 		}
 
+		// If the item is the default option (e.g., "-choisir-") in single mode, don't select it
+		if (isDefaultOption(item)) {
+			return
+		}
+
 		if (props.multiple) {
 			// Initialize as empty array if not already an array
 			if (!Array.isArray(selectedItem.value)) {
@@ -306,6 +368,26 @@
 		selectedItem.value = newValue
 	})
 
+	// Utilisation du composable pour la gestion clavier
+	const {
+		activeDescendantId,
+		setActiveDescendant,
+		handleEnterKey,
+		handleSpaceKey,
+		handleDownKey,
+		handleUpKey,
+		handleCharacterKey,
+		handleEscapeKey,
+		restoreFocus,
+	} = useSySelectKeyboard({
+		isOpen,
+		formattedItems,
+		toggleMenu,
+		selectItem,
+		getItemText,
+		updateListPosition,
+	})
+
 	// Function to check if an item is the default option (e.g., "-choisir-")
 	const isDefaultOption = (item: ItemType) => {
 		// Check if this is the first item and has a placeholder-like text
@@ -423,10 +505,6 @@
 		}
 	})
 
-	watch(isOpen, (open) => {
-		if (open) updateListPosition()
-	})
-
 	onMounted(() => {
 		if (labelRef.value) {
 			labelWidth.value = labelRef.value.offsetWidth + 64
@@ -442,6 +520,10 @@
 				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')
 				}
 			}
 		})
@@ -465,15 +547,25 @@
 			ref="input"
 			v-model="selectedItemText"
 			v-click-outside="closeList"
+			v-rgaa-svg-fix="true"
 			:title="$attrs['aria-label'] || labelWithAsterisk"
 			color="primary"
-			tabindex="0"
+			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"
@@ -484,45 +576,64 @@
 			:style="hasError ? { minWidth: `${labelWidth + 18}px`} : {minWidth: `${labelWidth}px`}"
 			v-bind="Object.fromEntries(Object.entries($attrs).filter(([key]) => key !== 'display-asterisk'))"
 			@click="toggleMenu"
-			@keydown.enter.prevent="toggleMenu"
-			@keydown.space.prevent="toggleMenu"
+			@keydown.enter.prevent="handleEnterKey"
+			@keydown.space.prevent="handleSpaceKey"
+			@keydown.down.prevent="handleDownKey"
+			@keydown.up.prevent="handleUpKey"
+			@keydown.esc.prevent="handleEscapeKey"
+			@keydown="(e) => {
+				// Handle printable characters for keyboard navigation
+				if (!e.ctrlKey && !e.altKey && !e.metaKey) {
+					handleCharacterKey(e.key)
+				}
+			}"
 		>
-			<template
+			<div
 				v-if="hasChips"
-				#default
+				class="d-flex flex-wrap gap-1"
 			>
-				<div class="d-flex flex-wrap gap-1">
-					<VChip
-						v-for="item in selectedItem"
-						:key="props.returnObject ? item[props.valueKey] : item"
-						size="small"
-						class="ma-1"
-						closable
-						@click:close="removeChip(item)"
-					>
-						{{ getChipText(item) }}
-					</VChip>
-				</div>
-			</template>
+				<VChip
+					v-for="item in selectedItem"
+					:key="props.returnObject ? item[props.valueKey] : item"
+					size="small"
+					class="ma-1"
+					closable
+					:close-label="`Supprimer ${getChipText(item)}`"
+					@click:close="removeChip(item)"
+				>
+					{{ getChipText(item) }}
+				</VChip>
+			</div>
 			<template #append-inner>
-				<VIcon
+				<SyIcon
 					v-if="hasError"
 					class="mr-6"
-				>
-					{{ mdiInformation }}
-				</VIcon>
-				<VIcon
+					:icon="mdiInformation"
+					:decorative="false"
+					label="Information"
+					role="img"
+				/>
+				<button
 					v-if="props.clearable && selectedItemText"
-					class="sy-select__clear-icon"
-					:class="hasError ? 'mr-14' : 'mr-8'"
+					type="button"
+					class="sy-select__clear-button"
+					:style="{ right: hasError ? '38px' : '32px' }"
 					:aria-label="locales.clear"
-					@click.stop.prevent="selectItem(null)"
+					@keydown.enter.prevent="$event => selectItem(null, $event)"
+					@keydown.space.prevent="$event => selectItem(null, $event)"
+					@click.stop.prevent="$event => selectItem(null, $event)"
 				>
-					{{ mdiCloseCircle }}
-				</VIcon>
-				<VIcon class="arrow">
-					{{ mdiMenuDown }}
-				</VIcon>
+					<SyIcon
+						class="sy-select__clear-icon"
+						:icon="mdiCloseCircle"
+						:decorative="true"
+					/>
+				</button>
+				<SyIcon
+					class="arrow"
+					:icon="mdiMenuDown"
+					:decorative="true"
+				/>
 			</template>
 		</VTextField>
 		<span
@@ -531,36 +642,49 @@
 		>{{ label }}</span>
 		<VList
 			v-if="isOpen"
+			:id="menuId"
 			class="v-list"
+			role="listbox"
+			:aria-multiselectable="props.multiple ? 'true' : undefined"
+			:aria-label="$attrs['aria-label'] || labelWithAsterisk"
 			:style="{
 				minWidth: `${input?.$el.offsetWidth}px`,
 				...listStyles
 			}"
 			bg-color="white"
-			@keydown.esc.prevent="isOpen = false"
+			tabindex="0"
+			:title="props.multiple ? 'Sélection multiple' : 'Sélection'"
+			@keydown.esc.prevent="closeList"
+			@keydown.tab.prevent="closeList"
+			@keydown.enter.prevent="handleEnterKey"
+			@keydown.down.prevent="handleDownKey"
+			@keydown.up.prevent="handleUpKey"
 			@click.stop
 		>
 			<VListItem
 				v-for="(item, index) in formattedItems"
+				:id="`option-${index}`"
 				:key="index"
 				:ref="'options-' + index"
 				role="option"
 				class="v-list-item"
-				:aria-selected="isItemSelected(item)"
-				:tabindex="index + 1"
-				:class="{ active: isItemSelected(item) }"
+				:aria-selected="(isItemSelected(item) || `option-${index}` === activeDescendantId) ? 'true' : 'false'"
+				tabindex="-1"
+				:class="{ active: isItemSelected(item) || `option-${index}` === activeDescendantId }"
 				@click.stop="(event) => selectItem(item, event)"
 			>
 				<template
 					v-if="props.multiple && !isDefaultOption(item)"
 					#prepend
 				>
-					<VCheckbox
+					<SyCheckbox
 						:model-value="isItemSelected(item)"
 						density="compact"
 						hide-details
 						color="primary"
 						class="mt-0 pt-0 mr-1"
+						:title="getItemText(item)"
+						:aria-label="getItemText(item)"
 						@click.stop="(event) => selectItem(item, event)"
 					/>
 				</template>
@@ -613,6 +737,14 @@
 	background-color: rgb(0 0 0 / 8%);
 }
 
+/* Ensure focus styles match selection styles for keyboard navigation */
+.v-list-item:focus-visible,
+.v-list-item.keyboard-focused {
+	outline: 2px solid tokens.$primary-base;
+	outline-offset: -2px;
+	background-color: rgb(0 0 0 / 8%);
+}
+
 .v-icon {
 	position: absolute;
 	right: 10px;
@@ -624,6 +756,20 @@
 	opacity: var(--v-medium-emphasis-opacity) !important;
 }
 
+.sy-select__clear-button {
+	position: absolute;
+	background: transparent;
+	border: none;
+	padding: 0;
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	top: 50%;
+	transform: translateY(-50%);
+	right: 10px;
+}
+
 .v-chip {
 	margin: 2px;
 }
@@ -631,6 +777,7 @@
 :deep(.v-field__input) {
 	color: tokens.$grey-darken-20;
 	cursor: pointer;
+	caret-color: transparent;
 }
 
 .hidden-label {

package/src/components/Customs/{SySelect → Selects/SySelect}/Usages.stories.ts

@@ -4,7 +4,7 @@ import { checkIcon, linkICon, croixIcon } from '@/constants/icons'
 import Usages from '@/components/Usages/Usages.vue'
 
 export default {
-	title: 'Composants/Formulaires/SySelect/Usages',
+	title: 'Composants/Formulaires/Selects/SySelect/Usages',
 }
 
 const itemsToDo = [