@cnamts/synapse 1.0.23 → 1.0.25

package/src/components/ChipList/accessibilite/Accessibility.mdx

@@ -1,15 +1,88 @@
 import { Meta, Story } from '@storybook/addon-docs';
-import * as Stories from '../ChipList.stories.ts';
-import '@/stories/styles/shared.css';
+import * as ChipListStories from '../ChipList.stories.ts';
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
+import {
+  AccessibilityGuideLayout,
+  CriteriaSection,
+  CriteriaCard,
+  DemoSection,
+  BestPracticesSection,
+  ResourcesSection,
+  AuditSection,
+} from '@/stories/accessibility/AccessibilityGuideLayout.mdx';
 
-<Meta of={Stories} />
+<Meta of={ChipListStories} />
 
-<div className="header">
-  <h1>Accessibilité</h1>
-</div>
+<AccessibilityGuideLayout
+  componentName="ChipList"
+  iconSrc={AccessibilityIcon}
+  apgHref="https://www.w3.org/WAI/ARIA/apg/patterns/listbox/"
+>
+  <AuditSection>
+    <div class="mt-2">
+      <p>Rapport d'audit manuel : <a href="/audits/ChipList.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/814" target="_blank" style={{color:'#0C41BD'}}>issue #814</a>)</p>
+    </div>
+  </AuditSection>
+  <CriteriaSection>
+    <CriteriaCard icon="🏷️" title="Structure sémantique de liste">
+      <ul>
+        <li><strong>Liste native</strong> : Utilisation de <code>&lt;ul&gt;</code> et <code>&lt;li&gt;</code> pour la structure principale</li>
+        <li><strong>Étiquetage</strong> : <code>aria-label</code> ou <code>aria-labelledby</code> pour la liste via les props <strong>listAriaLabel</strong> et <strong>listAriaLabelledby</strong></li>
+        <li><strong>Contenu des chips</strong> : <code>&lt;span&gt;</code> avec <code>role="status"</code> et <code>aria-live="polite"</code> pour le texte des chips</li>
+        <li><strong>Accessibilité</strong> : Permet une navigation sémantique correcte (critères 9.1.1, 9.2.1 RGAA)</li>
+      </ul>
+    </CriteriaCard>
 
+    <CriteriaCard icon="🎯" title="Chips interactifs et débordement">
+      <ul>
+        <li><strong>Chips supprimables</strong> : Boutons avec <code>aria-label</code> descriptif pour chaque action de suppression</li>
+        <li><strong>Chip de débordement</strong> : <code>role="button"</code>, <code>tabindex="0"</code>, et <code>aria-label</code> décrivant les éléments masqués</li>
+        <li><strong>Navigation clavier</strong> : Support des touches Entrée et Espace pour le chip de débordement</li>
+        <li><strong>Focus visible</strong> : Indicateurs de focus sur tous les éléments interactifs</li>
+      </ul>
+    </CriteriaCard>
 
-<div class="mt-2">
-<p>Rapport d’audit manuel : <a href="/audits/ChipList.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/814" target="_blank" style={{color:'#0C41BD'}}>issue #814</a>)</p>
-</div>
+    <CriteriaCard icon="⌨️" title="Navigation et interaction clavier">
+      <ul>
+        <li><strong>Navigation Tab</strong> : Parcours logique des éléments interactifs (chips → bouton débordement → boutons reset)</li>
+        <li><strong>Suppression de chips</strong> : Touches Entrée/Espace sur les boutons de suppression</li>
+        <li><strong>Débordement</strong> : Touches Entrée/Espace pour afficher/masquer les éléments supplémentaires</li>
+        <li><strong>Réinitialisation</strong> : Bouton reset accessible avec navigation standard</li>
+      </ul>
+    </CriteriaCard>
+
+    <CriteriaCard icon="🎨" title="États et feedback visuel">
+      <ul>
+        <li><strong>États des chips</strong> : Couleurs et icônes différentes pour success, info, warning, error</li>
+        <li><strong>Icônes d'état</strong> : Option <strong>displayPrependStateIcon</strong> et <strong>displayAppendStateIcon</strong> avec icônes décoratives</li>
+        <li><strong>Contraste</strong> : Styles CSS spécifiques pour garantir le contraste des bordures de focus selon l'état</li>
+        <li><strong>Feedback</strong> : <code>aria-live="polite"</code> pour les changements de contenu</li>
+      </ul>
+    </CriteriaCard>
+  </CriteriaSection>
+
+  <DemoSection componentName="ChipList">
+    <Story of={ChipListStories.WithOverflow} />
+  </DemoSection>
+
+  <BestPracticesSection>
+    <ul>
+      <li>Utilisez des libellés descriptifs pour la liste via <code>listAriaLabel</code></li>
+      <li>Limitez le nombre de chips visibles avec <code>overflowLimit</code> pour éviter la surcharge visuelle</li>
+      <li>Assurez-vous que les textes des chips sont concis mais explicites</li>
+      <li>Utilisez les états visuels (success, info, warning, error) de manière cohérente</li>
+      <li>Fournissez une alternative de réinitialisation lorsque les chips sont nombreux</li>
+      <li>Testez la navigation au clavier sans la souris</li>
+    </ul>
+  </BestPracticesSection>
+
+  <ResourcesSection>
+    <ul>
+      <li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/listbox/" target="_blank" rel="noopener noreferrer">Guide des pratiques d'auteur WAI-ARIA pour les listes</a></li>
+      <li><a href="https://www.w3.org/WAI/WCAG21/quickref/" target="_blank" rel="noopener noreferrer">Référence rapide WCAG 2.1</a></li>
+      <li><a href="https://inclusive-components.design/tag-buttons/" target="_blank" rel="noopener noreferrer">Inclusive Components: Tag Buttons</a></li>
+      <li><a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/814" target="_blank" rel="noopener noreferrer">Issue #814 - Corrections d'accessibilité ChipList</a></li>
+    </ul>
+  </ResourcesSection>
+</AccessibilityGuideLayout>

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

@@ -25,6 +25,47 @@ describe('ChipList – accessibility (axe)', () => {
 		},
 	]
 
+	it('has no obvious axe violations with overflow chip', async () => {
+		const overflowItems: ChipItem[] = [
+			{
+				text: 'Email',
+				value: 'email',
+				state: 'success' as ChipState,
+			},
+			{
+				text: 'SMS',
+				value: 'sms',
+				state: 'info' as ChipState,
+			},
+			{
+				text: 'Téléphone',
+				value: 'telephone',
+				state: 'warning' as ChipState,
+			},
+			{
+				text: 'Courrier',
+				value: 'courrier',
+				state: 'error' as ChipState,
+			},
+			{
+				text: 'Notification',
+				value: 'notification',
+			},
+		]
+
+		const wrapper = mount(ChipList, {
+			props: {
+				items: overflowItems,
+				overflowLimit: 3,
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'ChipList – overflow chip', {
+			ignoreRules: ['region'],
+		})
+	})
+
 	it('has no obvious axe violations with default items', async () => {
 		const wrapper = mount(ChipList, {
 			props: {

package/src/components/CookiesSelection/CookiesInformation/CookiesInformation.vue

@@ -180,8 +180,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens';
-
 details > summary {
 	cursor: pointer;
 	list-style: none;

package/src/components/CopyBtn/CopyBtn.vue

@@ -125,8 +125,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens';
-
 .v-btn:deep() {
 	.v-btn__underlay,
 	.v-btn__overlay {
@@ -143,6 +141,6 @@
 }
 
 .v-btn--icon .v-icon {
-	color: tokens.$grey-lighten-20;
+	color: rgb(var(--v-theme-grey-lighten20));
 }
 </style>

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

@@ -35,7 +35,7 @@
 		(e: 'update:error-messages', value: string[] | undefined): void
 	}>()
 
-	const internalValue = ref<SelectBtnValue>(null)
+	const internalValue = ref<SelectBtnValue>(props.multiple ? [] : null)
 	const darktheme = ref<boolean>(false)
 	const listRef = ref<HTMLElement | null>(null)
 	const optionsRef = ref<Array<HTMLElement>>([])
@@ -48,11 +48,12 @@
 	})
 
 	watch(() => props.modelValue, (value) => {
-		if (value === null && props.multiple) {
-			internalValue.value = []
-			return
+		if (props.multiple) {
+			internalValue.value = Array.isArray(value) ? value : []
+		}
+		else {
+			internalValue.value = value ?? null
 		}
-		internalValue.value = value
 	}, {
 		immediate: true,
 		deep: true,
@@ -79,10 +80,12 @@
 
 	function getNewValue(item: SelectBtnItem): SelectBtnValue {
 		if (props.multiple) {
-			const typedValue = internalValue.value as Array<string | number>
+			const typedValue = Array.isArray(internalValue.value)
+				? internalValue.value
+				: []
 
 			// if the item is unique, select only it
-			if (item.unique && typedValue.includes(item.value) === false) {
+			if (item.unique && !typedValue.includes(item.value)) {
 				return [item.value]
 			}
 
@@ -199,8 +202,7 @@
 		// Don't auto-select if focus was caused by mouse interaction
 		if (isMouseInteraction.value) {
 			const element = e.target as HTMLElement
-			const index = optionsRef.value.findIndex(item => item === element)
-			focusedIndex.value = index
+			focusedIndex.value = optionsRef.value.findIndex(item => item === element)
 			return
 		}
 
@@ -265,7 +267,7 @@
 				}"
 				role="option"
 				:tabindex="index === focusedIndex ? '0' : '-1'"
-				:aria-selected="!props.multiple ? (isSelected(item.value) ? 'true' : 'false') : undefined"
+				:aria-selected="props.multiple ? undefined : (isSelected(item.value) ? 'true' : 'false')"
 				:aria-checked="props.multiple ? (isSelected(item.value) ? 'true' : 'false') : undefined"
 				@keydown.space.prevent="toggleItem(item)"
 				@mousedown="handleMouseDown"
@@ -308,14 +310,12 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens';
-
 .select-btn-field__options {
 	display: flex;
 	list-style-type: none;
 	padding: 0;
 	margin: 0;
-	gap: tokens.$gap-2;
+	gap: var(--v-gap-2);
 }
 
 .select-btn-field__options--inline {
@@ -335,10 +335,10 @@
 	cursor: pointer;
 	position: relative;
 	transition: background-color 0.2s, color 0.2s;
-	background-color: #fff;
+	background-color: rgb(var(--v-theme-surface));
 
 	&--selected {
-		color: #fff;
+		color: rgb(var(--v-theme-textOnDark));
 		background-color: rgb(var(--v-theme-primary));
 	}
 
@@ -377,7 +377,7 @@
 }
 
 .select-btn-field__options--error .select-btn-field__item {
-	color: tokens.$colors-text-error;
-	border-color: tokens.$colors-border-error;
+	color: rgb(var(--v-theme-textError));
+	border-color: rgb(var(--v-theme-borderError));
 }
 </style>

package/src/components/Customs/Selects/SelectBtnField/accessibilite/Accessibility.mdx

@@ -18,8 +18,6 @@ import {
 	apgHref="https://www.w3.org/WAI/ARIA/apg/patterns/listbox/"
 >
 
-## Critères d'accessibilité
-
 <CriteriaSection>
 
 <CriteriaCard title="Structure sémantique">
@@ -49,10 +47,6 @@ import {
 
 <DemoSection>
 
-## Démo
-
-Exemples d'utilisation du composant `SelectBtnField` :
-
 ```vue
 <template>
   <!-- Sélection simple avec label -->
@@ -92,7 +86,6 @@ Exemples d'utilisation du composant `SelectBtnField` :
 
 </DemoSection>
 
-## Bonnes pratiques
 
 <BestPracticesSection>
 
@@ -122,8 +115,6 @@ Exemples d'utilisation du composant `SelectBtnField` :
 
 </BestPracticesSection>
 
-## Ressources
-
 <ResourcesSection>
 
 - [WAI-ARIA Authoring Practices - Listbox](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/)

package/src/components/Customs/Selects/SelectBtnField/tests/SelectBtnField.spec.ts

@@ -118,6 +118,37 @@ describe('SelectBtnField', () => {
 		])
 	})
 
+	it('handles multiple mode safely when modelValue is null', async () => {
+		const wrapper = mount(SelectBtnField, {
+			props: {
+				label: 'Test',
+				hint: 'Test',
+				items: [
+					{
+						text: 'Test',
+						value: 'test',
+					},
+					{
+						text: 'Test 2',
+						value: 'test2',
+					},
+					{
+						text: 'Test 3',
+						value: 'test3',
+					},
+				],
+				multiple: true,
+				modelValue: null,
+			},
+		})
+
+		await wrapper.find('[role="option"]').trigger('click')
+
+		expect(wrapper.emitted('update:modelValue')).toEqual([
+			[['test']],
+		])
+	})
+
 	it(`display correctly with an error`, () => {
 		const wrapper = mount(SelectBtnField, {
 			props: {

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

@@ -125,6 +125,10 @@ const meta: Meta<typeof SyAutocomplete> = {
 			action: 'update:modelValue',
 			description: 'Émis lors de la sélection d\'une option. Reçoit la valeur sélectionnée.',
 		},
+		'disabled': {
+			control: 'boolean',
+			description: 'Désactive le champ',
+		},
 		'readonly': {
 			control: 'boolean',
 			description: 'Rend le champ en lecture seule',
@@ -1199,6 +1203,68 @@ const items = [
 	},
 }
 
+export const DisabledField: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+  <SyAutocomplete
+    v-model="selectedValue"
+    :items="items"
+    label="Champ désactivé"
+    disabled
+  />
+</template>
+        `,
+			},
+			{
+				name: 'Script',
+				code: `
+<script setup lang="ts">
+import { ref } from 'vue'
+import { SyAutocomplete } from '@cnamts/synapse'
+
+const selectedValue = ref('Axel')
+const items = [
+  { text: 'Adrien', value: 'Adrien' },
+  { text: 'Axel', value: 'Axel' },
+  { text: 'Baptiste', value: 'Baptiste' },
+]
+</script>
+        `,
+			},
+		],
+	},
+	args: {
+		items: [
+			{ text: 'Adrien', value: 'Adrien' },
+			{ text: 'Axel', value: 'Axel' },
+			{ text: 'Baptiste', value: 'Baptiste' },
+		],
+		label: 'Champ désactivé',
+		disabled: true,
+	},
+	render: (args) => {
+		return {
+			components: { SyAutocomplete },
+			setup() {
+				const selectedValue = ref('Axel')
+				return { args, selectedValue }
+			},
+			template: `
+				<div class="pa-4">
+					<SyAutocomplete
+						v-model="selectedValue"
+						v-bind="args"
+					/>
+				</div>
+			`,
+		}
+	},
+}
+
 export const WithCustomKeys: Story = {
 	parameters: {
 

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-	import { computed, onMounted, ref, watch, type PropType } from 'vue'
+	import { computed, nextTick, onMounted, ref, watch, type PropType } from 'vue'
 	import { VMenu, VList, VListItem, VListItemTitle, VChip } from 'vuetify/components'
 	import { mdiChevronDown, mdiCloseCircle } from '@mdi/js'
 	import SyTextField from '@/components/Customs/SyTextField/SyTextField.vue'
@@ -123,6 +123,10 @@
 			type: String,
 			default: '',
 		},
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
 		readonly: {
 			type: Boolean,
 			default: false,
@@ -168,6 +172,7 @@
 	const selected = ref<SelectValue | SelectArray>(props.modelValue as SelectValue | SelectArray)
 	const hasInteracted = ref(false)
 	const suppressNextInput = ref(false)
+	const suppressMenuOpen = ref(false)
 	type SyTextFieldInstance = InstanceType<typeof SyTextField> & { $refs?: { input?: HTMLInputElement } }
 	const textFieldRef = ref<SyTextFieldInstance | null>(null)
 	const randomId = Math.random().toString(36).slice(2)
@@ -199,6 +204,7 @@
 
 	const syncSearchFromValue = () => {
 		if (props.multiple) return
+		suppressMenuOpen.value = true
 		if (!selected.value) {
 			search.value = ''
 			return
@@ -241,6 +247,11 @@
 	let debounceHandle: ReturnType<typeof setTimeout> | null = null
 
 	watch(search, () => {
+		if (suppressMenuOpen.value) {
+			suppressMenuOpen.value = false
+			return
+		}
+
 		if (!isOpen.value) {
 			isOpen.value = true
 		}
@@ -368,7 +379,15 @@
 		return errorHandling.validateOnSubmit()
 	}
 
-	const checkErrorOnBlur = () => {
+	const checkErrorOnBlur = (event?: FocusEvent) => {
+		const relatedTarget = event?.relatedTarget as HTMLElement | null | undefined
+		if (relatedTarget?.closest('.sy-autocomplete__chip') || relatedTarget?.closest('.sy-autocomplete__clear-button')) {
+			isOpen.value = true
+			nextTick(() => {
+				focusInput(textFieldRef)
+			})
+			return
+		}
 		markInteracted()
 		return errorHandling.checkErrorOnBlur()
 	}
@@ -405,6 +424,7 @@
 	}
 
 	const openAndFocus = () => {
+		if (props.disabled || props.readonly) return
 		markInteracted()
 		isOpen.value = true
 		focusInput(textFieldRef)
@@ -473,6 +493,7 @@
 					:placeholder="hasInlineSelections || hasSelectionTextDisplay ? '' : placeholder"
 					:is-active="hasInlineSelections || hasSelectionTextDisplay"
 					:readonly="readonly"
+					:disabled="disabled"
 					:bg-color="bgColor"
 					:density="density"
 					:autocomplete="'off'"
@@ -522,7 +543,9 @@
 							class="sy-autocomplete__chip"
 							closable
 							:close-label="locales.removeChip(getChipLabel(item as ItemType))"
-							@click:close="() => selectItem(item as ItemType)"
+							@click:close.stop.prevent="() => selectItem(item as ItemType)"
+							@keydown.enter.capture.stop.prevent="(event) => (event.target as HTMLElement | null)?.closest('.v-chip__close') && selectItem(item as ItemType)"
+							@keydown.space.capture.stop.prevent="(event) => (event.target as HTMLElement | null)?.closest('.v-chip__close') && selectItem(item as ItemType)"
 						>
 							{{ getChipLabel(item as ItemType) }}
 						</VChip>
@@ -610,8 +633,6 @@
 </template>
 
 <style scoped lang="scss">
-@use '@/assets/tokens';
-
 .sy-autocomplete {
 	width: 100%;
 	position: relative;
@@ -639,7 +660,7 @@
 }
 
 .sy-autocomplete__clear-icon {
-	color: rgb(0 0 0 / 54%);
+	color: rgb(var(--v-theme-iconBase));
 }
 
 .sy-autocomplete__chip {
@@ -707,7 +728,7 @@ li:hover {
 .v-list-item.keyboard-focused,
 li:focus-visible,
 li.keyboard-focused {
-	outline: 2px solid tokens.$primary-base;
+	outline: 2px solid rgb(var(--v-theme-borderAccentPrimary));
 	outline-offset: -2px;
 	background-color: rgb(0 0 0 / 8%);
 }

package/src/components/Customs/Selects/SyAutocomplete/tests/SyAutocomplete.a11y.spec.ts

@@ -146,6 +146,24 @@ describe('SyAutocomplete – accessibility (axe)', () => {
 		})
 	})
 
+	it('has no obvious axe violations for disabled field', async () => {
+		const wrapper = mount(SyAutocomplete, {
+			props: {
+				modelValue: 'Option 1',
+				items,
+				label: 'Champ désactivé',
+				textKey: 'text',
+				valueKey: 'value',
+				disabled: true,
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyAutocomplete – disabled field', {
+			ignoreRules: ['region'],
+		})
+	})
+
 	it('has no obvious axe violations when hideDetails is true', async () => {
 		const wrapper = mount(SyAutocomplete, {
 			props: {