@cnamts/synapse 1.0.22 → 1.0.24

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

@@ -193,7 +193,7 @@
 
 	const iconColor = computed(() => {
 		if (hasError.value || Boolean(isRequired.value) || props.errorMessages.length > 0) return 'error'
-		return 'rgb(0 0 0 / 70%)'
+		return 'rgb(var(--v-theme-iconBase));'
 	})
 
 	const variant = computed(() => {
@@ -286,7 +286,10 @@
 			emit('update:modelValue', props.multiple ? [] : null)
 
 			// Garder la liste ouverte après une suppression et réinitialiser la navigation au clavier
-			if (event?.type === 'keydown' || event?.type === 'click') {
+			const target = event?.target as HTMLElement | undefined
+			const listElement = list.value?.$el as HTMLElement | undefined
+			const isClickFromList = Boolean(listElement && target && listElement.contains(target))
+			if (event?.type === 'keydown' || isClickFromList) {
 				if (!isOpen.value) {
 					isOpen.value = true
 				}
@@ -414,6 +417,11 @@
 			return ''
 		}
 
+		// If inline labels are shown, return empty string to hide input text
+		if (hasMultipleSelections.value) {
+			return ''
+		}
+
 		// For multiple mode, show default option text when nothing is selected
 		if (props.multiple) {
 			if (!selectedItem.value || (Array.isArray(selectedItem.value) && selectedItem.value.length === 0)) {
@@ -457,6 +465,10 @@
 		return props.chips && props.multiple && Array.isArray(selectedItem.value) && selectedItem.value.length > 0
 	})
 
+	const hasMultipleSelections = computed(() => {
+		return !props.chips && props.multiple && Array.isArray(selectedItem.value) && (selectedItem.value as unknown[]).length > 0
+	})
+
 	const hasSelectionToClear = computed(() => {
 		return props.multiple
 			? (((selectedItem.value as unknown[] | null | undefined)?.length) ?? 0) > 0
@@ -904,7 +916,10 @@
 			<template #activator="{ props: activatorProps }">
 				<div
 					class="sy-select"
-					:class="{ 'sy-select--clearable': props.clearable }"
+					:class="{
+						'sy-select--clearable': props.clearable,
+						'sy-select--with-chips': hasChips,
+					}"
 				>
 					<VTextField
 						:id="inputId"
@@ -920,7 +935,7 @@
 						:rules="isRequired && !props.disableErrorHandling ? ['Le champ est requis.'] : []"
 						:bg-color="props.bgColor"
 						:density="props.density"
-						:active="hasChips || isOpen"
+						:active="hasChips || hasMultipleSelections || isOpen"
 						readonly
 						:hide-details="props.hideMessages && !showHelpTextAsMessage"
 						:hint="showHelpTextAsMessage ? props.helpText : ''"
@@ -955,12 +970,23 @@
 								size="small"
 								class="ma-1"
 								closable
-								:close-label="`Supprimer ${getChipText(item)}`"
-								@click:close="removeChip(item)"
+								:close-label="locales.removeChip(getChipText(item))"
+								@click:close.stop.prevent="removeChip(item)"
+								@keydown.enter.capture.stop.prevent="(event) => (event.target as HTMLElement | null)?.closest('.v-chip__close') && removeChip(item)"
+								@keydown.space.capture.stop.prevent="(event) => (event.target as HTMLElement | null)?.closest('.v-chip__close') && removeChip(item)"
 							>
 								{{ getChipText(item) }}
 							</VChip>
 						</div>
+						<template v-else-if="hasMultipleSelections">
+							<span
+								v-for="item in (selectedItem as unknown[])"
+								:key="props.returnObject && item ? String((item as ItemType)[props.valueKey]) : String(item)"
+								class="sy-select__label"
+							>
+								{{ getChipText(item) }}
+							</span>
+						</template>
 						<!-- Prepend -->
 						<template
 							v-if="$slots.prepend || props.prependIcon || props.prependTooltip"
@@ -1123,8 +1149,6 @@
 </template>
 
 <style scoped lang="scss">
-@use '@/assets/tokens';
-
 .sy-select-container {
 	display: flex;
 	flex-direction: column;
@@ -1136,12 +1160,12 @@
 
 	:deep(.v-input__prepend > .v-icon__svg),
 	:deep(.v-input__append > .v-icon__svg) {
-		fill: rgb(0 0 0 / 70%);
+		fill: rgb(var(--v-theme-iconBase));
 	}
 
 	:deep(.v-input__prepend .v-icon:focus-visible),
 	:deep(.v-input__append .v-icon:focus-visible) {
-		outline: 2px solid tokens.$primary-base;
+		outline: 2px solid rgb(var(--v-theme-accentPrimary));
 		outline-offset: 2px;
 		opacity: 1;
 	}
@@ -1192,7 +1216,7 @@
 /* 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: 2px solid rgb(var(--v-theme-accentPrimary));
 	outline-offset: -2px;
 	background-color: rgb(0 0 0 / 8%);
 }
@@ -1219,14 +1243,19 @@
 .v-icon.arrow {
 	position: absolute;
 	right: 10px;
-	color: tokens.$grey-darken-20;
+	color: rgb(var(--v-theme-iconBase));
 }
 
 .sy-select__clear-icon {
-	color: tokens.$grey-darken-20 !important;
+	color: rgb(var(--v-theme-iconBase)) !important;
 	opacity: var(--v-medium-emphasis-opacity) !important;
 }
 
+/* Style spécifique pour les chips */
+:deep(.v-chip .v-chip__close .v-icon__svg) {
+	fill: inherit !important;
+}
+
 .sy-select__clear-button {
 	position: absolute;
 	background: transparent;
@@ -1249,9 +1278,21 @@
 	margin: 2px;
 }
 
+.sy-select__label {
+	align-self: center;
+	white-space: nowrap;
+	flex-shrink: 0;
+	font-size: inherit;
+
+	&:not(:last-of-type)::after {
+		content: ',';
+		margin-right: 4px;
+	}
+}
+
 .sy-select :deep(.v-field__input) {
 	opacity: 1;
-	color: tokens.$grey-darken-20 !important;
+	color: rgb(var(--v-theme-iconBase)) !important;
 	cursor: pointer;
 	caret-color: transparent;
 	padding-right: 25px;
@@ -1274,4 +1315,9 @@
 	position: absolute;
 	white-space: nowrap;
 }
+
+.sy-select--with-chips :deep(.v-field__input input) {
+	position: absolute;
+	z-index: -1;
+}
 </style>

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

@@ -1,3 +1,4 @@
 export const locales = {
 	clear: 'Effacer la sélection',
+	removeChip: (label: string) => `Supprimer ${label}`,
 }

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

@@ -964,6 +964,60 @@ describe('SySelect.vue', () => {
 
 			wrapper.unmount()
 		})
+
+		it('removes chip when Enter key is pressed on chip close button', async () => {
+			const items = [
+				{ text: 'Option 1', value: '1' },
+				{ text: 'Option 2', value: '2' },
+			]
+			const wrapper = mount(SySelect, {
+				props: {
+					items,
+					multiple: true,
+					chips: true,
+					modelValue: ['1', '2'],
+					textKey: 'text',
+					valueKey: 'value',
+				},
+				attachTo: document.body,
+			})
+
+			await wrapper.vm.$nextTick()
+			const closeButton = wrapper.find('.v-chip__close')
+			closeButton.element.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, cancelable: true }))
+			await wrapper.vm.$nextTick()
+
+			expect(wrapper.emitted()['update:modelValue']?.[0]).toEqual([['2']])
+
+			wrapper.unmount()
+		})
+
+		it('removes chip when Space key is pressed on chip close button', async () => {
+			const items = [
+				{ text: 'Option 1', value: '1' },
+				{ text: 'Option 2', value: '2' },
+			]
+			const wrapper = mount(SySelect, {
+				props: {
+					items,
+					multiple: true,
+					chips: true,
+					modelValue: ['1', '2'],
+					textKey: 'text',
+					valueKey: 'value',
+				},
+				attachTo: document.body,
+			})
+
+			await wrapper.vm.$nextTick()
+			const closeButton = wrapper.find('.v-chip__close')
+			closeButton.element.dispatchEvent(new KeyboardEvent('keydown', { key: ' ', bubbles: true, cancelable: true }))
+			await wrapper.vm.$nextTick()
+
+			expect(wrapper.emitted()['update:modelValue']?.[0]).toEqual([['2']])
+
+			wrapper.unmount()
+		})
 	})
 
 	describe('keyboard navigation', () => {

package/src/components/Customs/SyCheckBoxGroup/SyCheckBoxGroup.vue

@@ -83,9 +83,6 @@
 	const isSubmitted = ref(false)
 
 	const validation = useValidation({
-		customRules: props.customRules,
-		warningRules: props.customWarningRules,
-		successRules: props.customSuccessRules,
 		showSuccessMessages: props.showSuccessMessages,
 		fieldIdentifier: props.label,
 		disableErrorHandling: props.disableErrorHandling,
@@ -135,7 +132,7 @@
 		return model.value as (string | number) | null
 	}
 
-	const validateField = (value: (string | number) | (string | number)[] | null) => {
+	const validateField = async (value: (string | number) | (string | number)[] | null) => {
 		if (props.readonly) {
 			validation.clearValidation()
 			return true
@@ -146,7 +143,7 @@
 			return true
 		}
 
-		const result = validation.validateField(
+		const result = await validation.validateField(
 			value,
 			[...defaultRules.value, ...props.customRules],
 			props.customWarningRules,
@@ -155,18 +152,18 @@
 		return !result.hasError
 	}
 
-	const validateOnSubmit = () => {
+	const validateOnSubmit = async () => {
 		isSubmitted.value = true
-		return validateField(getValidationValue())
+		return await validateField(getValidationValue())
 	}
 
 	const checkErrorOnBlur = () => {
 		validateField(getValidationValue())
 	}
 
-	watch(model, (newValue) => {
+	watch(model, async (newValue) => {
 		if (!props.isValidateOnBlur || isSubmitted.value) {
-			validateField(newValue as (string | number) | (string | number)[] | null)
+			await validateField(newValue as (string | number) | (string | number)[] | null)
 		}
 	})
 

package/src/components/Customs/SyCheckbox/SyCheckbox.stories.ts

@@ -5,7 +5,7 @@ import { fn } from '@storybook/test'
 
 // Interface pour typer correctement le composant SyCheckbox avec sa méthode validateOnSubmit
 interface SyCheckboxInstance {
-	validateOnSubmit: () => boolean
+	validateOnSubmit: () => Promise<boolean>
 }
 
 const meta = {
@@ -171,9 +171,6 @@ export const Indeterminate: Story = {
 		template: `<SyCheckbox v-model="checked" :indeterminate="indeterminate" v-bind="args" label="Case à cocher indéterminée" />`,
 	}),
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -207,9 +204,6 @@ Cette case à cocher est dans un état indéterminé, généralement utilisé lo
 
 export const WithControlsIds: Story = {
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -702,11 +696,11 @@ const rules = [
   },
 ]
 
-const validateForm = () => {
+const validateForm = async (): Promise<void> => {
   if (!checkbox.value || !checkbox2.value) return
   hasError.value = true
-  const isValid = checkbox.value.validateOnSubmit()
-  const isValid2 = checkbox2.value.validateOnSubmit()
+  const isValid = await checkbox.value.validateOnSubmit()
+  const isValid2 = await checkbox2.value.validateOnSubmit()
   if (isValid && isValid2) {
     formSubmitted.value = true
     hasError.value = false
@@ -735,18 +729,18 @@ Cette case à cocher utilise des règles de validation personnalisées et valide
 			const hasError = ref(false)
 
 			// Revalider quand les valeurs changent
-			watch([checked, checked2], () => {
+			watch([checked, checked2], async () => {
 				if (hasError.value && checkbox.value && checkbox2.value) {
-					checkbox.value.validateOnSubmit()
-					checkbox2.value.validateOnSubmit()
+					await checkbox.value.validateOnSubmit()
+					await checkbox2.value.validateOnSubmit()
 				}
 			})
 
-			const validateForm = () => {
+			const validateForm = async (): Promise<void> => {
 				if (!checkbox.value || !checkbox2.value) return
 				hasError.value = true
-				const isValid = checkbox.value.validateOnSubmit()
-				const isValid2 = checkbox2.value.validateOnSubmit()
+				const isValid = await checkbox.value.validateOnSubmit()
+				const isValid2 = await checkbox2.value.validateOnSubmit()
 				if (isValid && isValid2) {
 					formSubmitted.value = true
 					hasError.value = false

package/src/components/Customs/SyCheckbox/SyCheckbox.vue

@@ -102,9 +102,6 @@
 	const isSubmitted = ref(false)
 
 	const validation = useValidation({
-		customRules: props.customRules,
-		warningRules: props.customWarningRules,
-		successRules: props.customSuccessRules,
 		showSuccessMessages: props.showSuccessMessages,
 		fieldIdentifier: props.label,
 		disableErrorHandling: props.disableErrorHandling,
@@ -135,7 +132,7 @@
 		: [],
 	)
 
-	const validateField = (value: boolean | null) => {
+	const validateField = async (value: boolean | null) => {
 		// Si en lecture seule ou si la valeur est null et non requise, pas de validation
 		if (props.readonly) {
 			validation.clearValidation()
@@ -157,7 +154,7 @@
 		}
 
 		// Validation standard
-		const result = validation.validateField(
+		const result = await validation.validateField(
 			value,
 			[...defaultRules.value, ...props.customRules],
 			props.customWarningRules,
@@ -175,11 +172,11 @@
 		validateField(model.value)
 	}
 
-	watch(model, (newValue) => {
+	watch(model, async (newValue) => {
 		if (!props.isValidateOnBlur) {
 			// Si le formulaire a été soumis et que la valeur change, on valide à nouveau
 			if (isSubmitted.value) {
-				const isValid = validateField(newValue)
+				const isValid = await validateField(newValue)
 				if (isValid) {
 					// La validation a réussi, effacer les erreurs
 					validation.clearValidation()
@@ -187,7 +184,7 @@
 			}
 			else {
 				// Comportement normal (hors soumission)
-				const isValid = validateField(newValue)
+				const isValid = await validateField(newValue)
 				// Si la validation réussit, s'assurer que les erreurs sont effacées
 				if (isValid && validation.hasError.value) {
 					validation.clearValidation()
@@ -206,7 +203,7 @@
 
 	const ariaChecked = computed(() => {
 		if (internalIndeterminate.value) return 'mixed'
-		return model.value ? 'true' : undefined
+		return model.value ? 'true' : 'false'
 	})
 
 	const labelColor = computed(() => {
@@ -243,9 +240,17 @@
 	const removeAriaAttributes = () => {
 		nextTick(() => {
 			if (checkboxRef.value) {
-				const checkboxInput = checkboxRef.value.$el.querySelector('input[type="checkbox"][aria-disabled="false"]')
+				const checkboxInput = checkboxRef.value.$el?.querySelector('input[type="checkbox"]')
 				if (checkboxInput) {
-					checkboxInput.removeAttribute('aria-disabled')
+					// Supprimer aria-disabled="false" car il est redondant
+					if (checkboxInput.getAttribute('aria-disabled') === 'false') {
+						checkboxInput.removeAttribute('aria-disabled')
+					}
+					// Supprimer aria-checked natif de Vuetify pour éviter les conflits
+					// Notre composant gère aria-checked au niveau du wrapper VCheckbox
+					if (checkboxInput.hasAttribute('aria-checked')) {
+						checkboxInput.removeAttribute('aria-checked')
+					}
 				}
 			}
 		})

package/src/components/Customs/SyCheckbox/accessibilite/Accessibility.mdx

@@ -79,6 +79,23 @@ import '@/stories/styles/shared.css';
     </div>
   </div>
 
+  <div className="aria-management-section">
+    <h2>Gestion des attributs ARIA</h2>
+    <p>
+      Pour garantir la conformité ARIA, le composant SyCheckbox gère activement les conflits potentiels 
+      avec l'implémentation native de Vuetify :
+    </p>
+    <ul>
+      <li><strong>Suppression des attributs conflictuels</strong> : Les attributs ARIA natifs de Vuetify sont automatiquement supprimés de l'élément input pour éviter les doublons</li>
+      <li><strong>Gestion centralisée</strong> : L'attribut <code>aria-checked</code> est géré au niveau du composant SyCheckbox et non au niveau de l'input natif</li>
+      <li><strong>Conformité garantie</strong> : Cette approche garantit que l'attribut <code>aria-checked</code> reflète toujours l'état réel du composant (true, false ou mixed)</li>
+    </ul>
+    <p>
+      Cette gestion préventive évite les erreurs d'audit d'accessibilité qui pourraient survenir 
+      lorsque plusieurs attributs ARIA contradictoires sont présents sur le même élément.
+    </p>
+  </div>
+
   <div className="tri-state-section">
     <h2>Fonctionnalité tri-état (indéterminé)</h2>
     <p>
@@ -190,6 +207,7 @@ import '@/stories/styles/shared.css';
 
   .criteria-section h2,
   .demo-section h2,
+  .aria-management-section h2,
   .tri-state-section h2,
   .parent-child-section h2,
   .best-practices h2,
@@ -243,6 +261,23 @@ import '@/stories/styles/shared.css';
     margin-bottom: 40px;
   }
 
+  .aria-management-section {
+    background-color: #fff9e6;
+    padding: 20px;
+    border-radius: 8px;
+    margin-bottom: 30px;
+    border-left: 5px solid #ff9800;
+  }
+
+  .aria-management-section ul {
+    padding-left: 20px;
+  }
+
+  .aria-management-section li {
+    margin-bottom: 8px;
+    line-height: 1.5;
+  }
+
   .tri-state-section,
   .parent-child-section {
     background-color: #f0f7ff;

package/src/components/Customs/SyCheckbox/tests/SyCheckbox.a11y.spec.ts

@@ -6,21 +6,153 @@ import { axe } from 'vitest-axe'
 import { assertNoA11yViolations } from '@tests/unit/accessibility/axeUtils'
 import SyCheckbox from '../SyCheckbox.vue'
 
-// Scénario d’accessibilité : case à cocher requise avec libellé.
+// Scénarios d'accessibilité : cases à cocher avec différents états et configurations.
 
 describe('SyCheckbox – accessibility (axe)', () => {
 	it('has no obvious axe violations for required checkbox with label', async () => {
 		const wrapper = mount(SyCheckbox, {
 			props: {
-				label: 'J’accepte les conditions générales',
+				label: 'J\'accepte les conditions générales',
 				modelValue: false,
 				required: true,
 			},
 		})
 
+		// Attendre que removeAriaAttributes soit exécuté
+		await wrapper.vm.$nextTick()
+		await wrapper.vm.$nextTick()
+
 		const results = await axe(wrapper.element as HTMLElement)
 		assertNoA11yViolations(results, 'SyCheckbox – required labelled checkbox', {
 			ignoreRules: ['region'],
 		})
 	})
+
+	it('has no axe violations for indeterminate checkbox (aria-checked="mixed")', async () => {
+		const wrapper = mount(SyCheckbox, {
+			props: {
+				label: 'Sélection partielle',
+				modelValue: false,
+				indeterminate: true,
+				controlsIds: ['child-1', 'child-2', 'child-3'],
+			},
+		})
+
+		// Attendre que removeAriaAttributes soit exécuté
+		await wrapper.vm.$nextTick()
+		await wrapper.vm.$nextTick()
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyCheckbox – indeterminate checkbox', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no axe violations for checked checkbox with aria-checked="true"', async () => {
+		const wrapper = mount(SyCheckbox, {
+			props: {
+				label: 'Option activée',
+				modelValue: true,
+				required: false,
+			},
+		})
+
+		// Attendre que removeAriaAttributes soit exécuté
+		await wrapper.vm.$nextTick()
+		await wrapper.vm.$nextTick()
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyCheckbox – checked checkbox', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no axe violations for unchecked checkbox with aria-checked="false"', async () => {
+		const wrapper = mount(SyCheckbox, {
+			props: {
+				label: 'Option désactivée',
+				modelValue: false,
+				required: false,
+			},
+		})
+
+		// Attendre que removeAriaAttributes soit exécuté
+		await wrapper.vm.$nextTick()
+		await wrapper.vm.$nextTick()
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyCheckbox – unchecked checkbox', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no axe violations for disabled checkbox', async () => {
+		const wrapper = mount(SyCheckbox, {
+			props: {
+				label: 'Option désactivée',
+				modelValue: true,
+				disabled: true,
+			},
+		})
+
+		// Attendre que removeAriaAttributes soit exécuté
+		await wrapper.vm.$nextTick()
+		await wrapper.vm.$nextTick()
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyCheckbox – disabled checkbox', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no axe violations for checkbox with custom aria-label', async () => {
+		const wrapper = mount(SyCheckbox, {
+			props: {
+				ariaLabel: 'Case à cocher personnalisée',
+				modelValue: false,
+			},
+		})
+
+		// Attendre que removeAriaAttributes soit exécuté
+		await wrapper.vm.$nextTick()
+		await wrapper.vm.$nextTick()
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyCheckbox – checkbox with aria-label', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no axe violations for checkbox with aria-labelledby', async () => {
+		// Créer un conteneur pour le test
+		const container = document.createElement('div')
+		document.body.appendChild(container)
+
+		// Créer un élément avec l'ID référencé
+		const labelElement = document.createElement('div')
+		labelElement.id = 'custom-label-id'
+		labelElement.textContent = 'Libellé personnalisé'
+		container.appendChild(labelElement)
+
+		const wrapper = mount(SyCheckbox, {
+			props: {
+				ariaLabelledby: 'custom-label-id',
+				modelValue: false,
+			},
+			attachTo: container,
+		})
+
+		// Attendre que removeAriaAttributes soit exécuté
+		await wrapper.vm.$nextTick()
+		await wrapper.vm.$nextTick()
+
+		const results = await axe(container as HTMLElement)
+		assertNoA11yViolations(results, 'SyCheckbox – checkbox with aria-labelledby', {
+			ignoreRules: ['region'],
+		})
+
+		// Nettoyer
+		wrapper.unmount()
+		document.body.removeChild(container)
+	})
 })