@cnamts/synapse 1.0.25 → 1.0.27

package/src/components/Customs/SyRadioGroup/SyRadioGroup.vue

@@ -1,68 +1,51 @@
 <script lang="ts" setup>
 
-	import { computed, nextTick, onMounted, onUpdated, ref, watch } from 'vue'
+	import { computed, nextTick, onMounted, onUpdated, ref } from 'vue'
 	import type { VRadioGroup } from 'vuetify/components'
-	import { useValidation, type ValidationRule } from '@/composables/validation/useValidation'
+	import { VMessages } from 'vuetify/components'
+	import { validationPropsDefaults, type FieldValidationProps } from '@/composables/unifyValidation/useValidation'
 	import { useValidatable } from '@/composables/validation/useValidatable'
+	import { useSyRadioGroupValidation } from './composables/useSyRadioGroupValidation'
 	import { locales } from './locales'
 
 	const props = withDefaults(
 		defineProps<{
-			modelValue?: PropertyKey | null
-			label?: string
-			displayAsterisk?: boolean
 			ariaLabel?: string
 			ariaLabelledby?: string
-			title?: string
 			color?: string
-			disabled?: boolean
-			readonly?: boolean
-			hideDetails?: boolean | 'auto'
 			density?: 'default' | 'comfortable' | 'compact'
-			options?: Array<{ label: string, value: PropertyKey }>
-			name?: string
+			displayAsterisk?: boolean
+			helpText?: string
+			hideDetails?: boolean | 'auto'
 			id?: string
-			required?: boolean
-			errorMessages?: string[] | null
-			warningMessages?: string[] | null
-			successMessages?: string[] | null
-			customRules?: ValidationRule[]
-			customWarningRules?: ValidationRule[]
-			customSuccessRules?: ValidationRule[]
-			showSuccessMessages?: boolean
-			isValidateOnBlur?: boolean
-			disableErrorHandling?: boolean
-		}>(),
+			label?: string
+			modelValue?: PropertyKey | null
+			name?: string
+			options?: Array<{ label: string, value: PropertyKey }>
+			title?: string
+		} & FieldValidationProps>(),
 		{
-			modelValue: null,
-			label: undefined,
-			displayAsterisk: false,
 			ariaLabel: undefined,
 			ariaLabelledby: undefined,
-			title: undefined,
 			color: 'primary',
-			disabled: false,
-			readonly: false,
-			hideDetails: 'auto',
 			density: 'default',
-			options: () => [],
-			name: undefined,
+			displayAsterisk: false,
+			helpText: '',
+			hideDetails: 'auto',
 			id: undefined,
-			required: false,
-			errorMessages: null,
-			warningMessages: null,
-			successMessages: null,
-			customRules: () => [],
-			customWarningRules: () => [],
-			customSuccessRules: () => [],
-			showSuccessMessages: true,
-			isValidateOnBlur: false,
-			disableErrorHandling: false,
+			label: undefined,
+			modelValue: null,
+			name: undefined,
+			options: () => [],
+			title: undefined,
+			...validationPropsDefaults,
+			isValidateOnBlur: false, // La validation se déclenche immédiatement à la sélection pour les radios
 		},
 	)
 
 	const emit = defineEmits(['update:modelValue', 'change'])
 	const radioGroupRef = ref<VRadioGroup | null>(null)
+	const focused = ref(false)
 	const model = computed({
 		get() {
 			return props.modelValue
@@ -74,81 +57,29 @@
 	})
 
 	const generatedLabel = computed(() =>
-		(props.label || '') + (props.displayAsterisk ? '*' : ''),
+		(props.label || '') + (props.displayAsterisk ? ' *' : ''),
 	)
 
-	// Initialisation du composable de validation
-	// Variable pour suivre si le formulaire a été soumis
-	const isSubmitted = ref(false)
-
-	const validation = useValidation({
-		showSuccessMessages: props.showSuccessMessages,
-		fieldIdentifier: props.label,
-		disableErrorHandling: props.disableErrorHandling,
-	})
+	// Utilisation du composable de validation dédié
+	const {
+		validateOnSubmit,
+		errors,
+		warnings,
+		successes,
+		hasError,
+		hasWarning,
+		hasSuccess,
+	} = useSyRadioGroupValidation(props, model, focused)
 
-	// Synchronisation des messages externes
-	watch(() => props.errorMessages, value => (validation.errors.value = value || []), { immediate: true })
-	watch(() => props.warningMessages, value => (validation.warnings.value = value || []), { immediate: true })
-	watch(() => props.successMessages, value => (validation.successes.value = value || []), { immediate: true })
+	// Intégration avec le système de validation du formulaire
+	useValidatable(validateOnSubmit)
 
-	// Construction des règles de validation
-	const defaultRules = computed<ValidationRule[]>(() =>
-		props.required
-			? [{
-				type: 'required',
-				options: {
-					message: `Le champ ${props.label || 'ce champ'} est requis.`,
-					fieldIdentifier: props.label,
-				},
-			}]
-			: [],
+	const hasMessages = computed(() =>
+		errors.value.length > 0 || warnings.value.length > 0 || successes.value.length > 0,
 	)
 
-	const validateField = async (value: PropertyKey | null) => {
-		// const stringValue = value != null ? String(value) : null
-
-		if (props.readonly) {
-			validation.clearValidation()
-			return true
-		}
-
-		if (value === null && !props.required) {
-			validation.clearValidation()
-			return true
-		}
-
-		const result = await validation.validateField(
-			value,
-			[...defaultRules.value, ...props.customRules],
-			props.customWarningRules,
-			props.customSuccessRules,
-		)
-		return !result.hasError
-	}
-
-	const validateOnSubmit = async () => {
-		isSubmitted.value = true
-		return await validateField(model.value)
-	}
-
-	const checkErrorOnBlur = () => {
-		validateField(model.value)
-	}
-
-	watch(model, (newValue) => {
-		if (!props.isValidateOnBlur) {
-			validateField(newValue)
-		}
-	})
-
-	const hasError = computed(() => validation.hasError.value)
-	const hasWarning = computed(() => validation.hasWarning.value)
-	const hasSuccess = computed(() => validation.hasSuccess.value)
-
-	const errors = computed(() => validation.errors.value)
-	const warnings = computed(() => validation.warnings.value)
-	const successes = computed(() => validation.successes.value)
+	const showHelpTextAsMessage = computed(() => !!props.helpText && !hasMessages.value)
+	const showHelpTextBelow = computed(() => !!props.helpText && hasMessages.value && props.hideDetails !== true)
 
 	const getAriaChecked = (value: PropertyKey) => {
 		return model.value === value ? 'true' : 'false'
@@ -167,6 +98,9 @@
 		return undefined
 	})
 
+	// Workaround Vuetify: Vuetify ajoute aria-disabled="false" sur tous les radios non désactivés
+	// Ce n'est pas nécessaire car la spécification ARIA ne requiert pas aria-disabled="false"
+	// On supprime cet attribut pour éviter le bruit dans les lecteurs d'écran
 	const removeAriaAttributesForRadio = () => {
 		nextTick(() => {
 			if (radioGroupRef.value) {
@@ -181,22 +115,14 @@
 	// Appliquer la correction lors du montage et de la mise à jour du composant
 	onMounted(() => {
 		removeAriaAttributesForRadio()
-		if (!props.isValidateOnBlur && !props.required) {
-			validateField(model.value)
-		}
 	})
 
 	onUpdated(() => {
 		removeAriaAttributesForRadio()
 	})
 
-	// Intégration avec le système de validation du formulaire
-	useValidatable(validateOnSubmit)
-
 	defineExpose({
-		validation,
 		validateOnSubmit,
-		checkErrorOnBlur,
 	})
 
 </script>
@@ -219,15 +145,11 @@
 		:color="props.color"
 		:disabled="props.disabled"
 		:readonly="props.readonly"
-		:hide-details="props.hideDetails"
+		:hide-details="showHelpTextAsMessage ? false : props.hideDetails"
 		:density="props.density"
 		:error="hasError"
 		:error-messages="hasError ? errors : undefined"
 		:aria-describedby="messageId"
-		:messages="hasError ? errors :
-			hasWarning ? warnings :
-			(hasSuccess && props.showSuccessMessages ? successes : [])
-		"
 	>
 		<v-radio
 			v-for="opt in props.options"
@@ -236,7 +158,8 @@
 			role="radio"
 			:label="opt.label"
 			:aria-checked="getAriaChecked(opt.value)"
-			@blur="checkErrorOnBlur"
+			@focus="focused = true"
+			@blur="focused = false"
 		/>
 		<template
 			v-if="$slots.label"
@@ -258,25 +181,71 @@
 			{{ locales.labelledbyMessage }} <span v-if="props.label">{{ props.label + (props.displayAsterisk ? '*' : '')
 			}}</span>.
 		</span>
+		<template
+			v-if="(!hasError && (hasWarning || hasSuccess) && props.showSuccessMessages) || showHelpTextAsMessage"
+			#details
+		>
+			<div class="v-input__details sy-radio-group__messages">
+				<VMessages
+					v-if="!hasError && (hasWarning || hasSuccess) && props.showSuccessMessages"
+					:active="hasWarning || (hasSuccess && successes.length > 0)"
+					:messages="hasWarning ? warnings : successes"
+				/>
+				<div
+					v-if="showHelpTextAsMessage"
+					class="sy-radio-group__help-text"
+					:class="{ 'text-disabled': props.disabled }"
+				>
+					{{ props.helpText }}
+				</div>
+			</div>
+		</template>
 	</v-radio-group>
+	<div
+		v-if="showHelpTextBelow"
+		class="help-text-below px-1 mt-1"
+		:class="{ 'text-disabled': props.disabled }"
+	>
+		{{ props.helpText }}
+	</div>
 </template>
 
 <style scoped>
+:deep(.v-input__details) {
+	display: block !important;
+	padding-inline: 0 !important;
+	margin-top: -10px !important;
+}
+
 :deep(.v-selection-control--error .v-selection-control__input) {
 	color: rgb(var(--v-theme-error));
 }
 
+:deep(.sy-radio-group__messages) {
+	align-items: flex-start;
+	margin-top: -22px !important;
+}
+
+.sy-radio-group__help-text {
+	font-size: 0.75rem;
+	color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+}
+
 .sb-show-main.sb-main-centered #storybook-root {
 	margin: none !important;
 }
 
+:deep(.v-messages) {
+	opacity: 1 !important;
+}
+
 .warning-field {
 	:deep(.v-messages__message) {
-		color: rgb(var(--v-theme-warning)) !important;
+		color: rgb(var(--v-theme-onWarningVariant)) !important;
 	}
 
 	:deep(.v-selection-control__input) {
-		color: rgb(var(--v-theme-warning));
+		color: rgb(var(--v-theme-onWarningVariant));
 	}
 }
 
@@ -288,7 +257,7 @@
 
 .success-field {
 	:deep(.v-messages__message) {
-		color: rgb(var(--v-theme-success)) !important;
+		color: rgb(var(--v-theme-onSuccessVariant)) !important;
 	}
 }
 
@@ -296,6 +265,10 @@
 	animation: sy-messages-in 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
 }
 
+:deep(.v-label) {
+	margin-inline-start: 0 !important;
+}
+
 @keyframes sy-messages-in {
 	from {
 		opacity: 0;

package/src/components/Customs/SyRadioGroup/composables/useSyRadioGroupValidation.ts

@@ -0,0 +1,127 @@
+import { computed, ref, toRef, type ComputedRef, type Ref } from 'vue'
+import { useValidation, type FieldValidationProps, type ValidationRule, type VuetifyValidationRule } from '@/composables/unifyValidation/useValidation'
+
+export interface SyRadioGroupValidationProps extends FieldValidationProps {
+	modelValue?: PropertyKey | null
+	required?: boolean
+	readonly?: boolean
+	disabled?: boolean
+	customRules?: ValidationRule[]
+	customWarningRules?: ValidationRule[]
+	customSuccessRules?: ValidationRule[]
+	isValidateOnBlur?: boolean
+	showSuccessMessages?: boolean
+	useVuetifyValidation?: boolean
+	rules?: VuetifyValidationRule[]
+	errorMessages?: string[] | null
+	warningMessages?: string[] | null
+	successMessages?: string[] | null
+	hasError?: boolean
+	hasWarning?: boolean
+	hasSuccess?: boolean
+	maxErrors?: number
+	disableErrorHandling?: boolean
+	fieldIdentifier?: string
+}
+
+export interface UseSyRadioGroupValidationReturn {
+	validate: () => Promise<boolean>
+	validateOnSubmit: () => Promise<boolean>
+	errors: Ref<string[]>
+	warnings: Ref<string[]>
+	successes: Ref<string[]>
+	hasError: ComputedRef<boolean | undefined>
+	hasWarning: ComputedRef<boolean | undefined>
+	hasSuccess: ComputedRef<boolean | undefined>
+	defaultRules: ComputedRef<ValidationRule[]>
+	focused: Ref<boolean>
+}
+
+/**
+ * Composable pour gérer la validation du composant SyRadioGroup
+ *
+ * Ce composable encapsule toute la logique de validation spécifique aux groupes de radios :
+ * - Validation required avec message personnalisé
+ * - Validation immédiate à la sélection (isValidateOnBlur = false par défaut)
+ * - Support des customRules, customWarningRules, customSuccessRules
+ * - Désactivation automatique des messages de succès en mode Vuetify
+ * - Intégration avec useValidation du design system
+ *
+ * @example
+ * const { validate, errors, hasError, defaultRules } = useSyRadioGroupValidation(props, model)
+ */
+export function useSyRadioGroupValidation(
+	props: SyRadioGroupValidationProps,
+	model: Ref<PropertyKey | null>,
+	focused?: Ref<boolean>,
+): UseSyRadioGroupValidationReturn {
+	// Utiliser la variable focused passée en paramètre, sinon en créer une locale
+	const focusedRef = focused || ref(false)
+
+	// Construction des règles de validation par défaut (required)
+	const defaultRules = computed<ValidationRule[]>(() =>
+		props.required
+			? [{
+					type: 'required',
+					options: {
+						message: `Le champ ${props.fieldIdentifier || props.label || 'ce champ'} est requis.`,
+						fieldIdentifier: props.label,
+					},
+				}]
+			: [],
+	)
+
+	// Vuetify ne gère pas les messages de succès, on désactive automatiquement en mode Vuetify
+	const effectiveShowSuccessMessages = computed(() =>
+		props.useVuetifyValidation ? false : (props.showSuccessMessages ?? true),
+	)
+
+	const {
+		validate,
+		errors,
+		warnings,
+		successes,
+		hasError,
+		hasWarning,
+		hasSuccess,
+	} = useValidation({
+		modelValue: model,
+		readonly: toRef(() => props.readonly ?? false),
+		disabled: toRef(() => props.disabled ?? false),
+		required: toRef(() => props.required ?? false),
+		isValidateOnBlur: toRef(() => props.isValidateOnBlur ?? false), // false par défaut pour les radios
+		showSuccessMessages: effectiveShowSuccessMessages,
+		disableErrorHandling: toRef(() => props.disableErrorHandling ?? false),
+		useVuetifyValidation: toRef(() => props.useVuetifyValidation ?? false),
+		label: toRef(() => props.label ?? ''),
+		rules: toRef(() => props.rules),
+		customRules: computed(() => [...defaultRules.value, ...(props.customRules || [])]),
+		customWarningRules: toRef(() => props.customWarningRules ?? []),
+		customSuccessRules: toRef(() => props.customSuccessRules ?? []),
+		errorMessages: toRef(() => props.errorMessages ?? null),
+		warningMessages: toRef(() => props.warningMessages ?? null),
+		successMessages: toRef(() => props.successMessages ?? null),
+		hasErrorProp: toRef(() => props.hasError ?? false),
+		hasWarningProp: toRef(() => props.hasWarning ?? false),
+		hasSuccessProp: toRef(() => props.hasSuccess ?? false),
+		maxErrors: toRef(() => props.maxErrors ?? 1),
+		focused: focusedRef,
+	})
+
+	const validateOnSubmit = async (): Promise<boolean> => {
+		return await validate()
+	}
+
+	return {
+		validate,
+		validateOnSubmit,
+		errors,
+		warnings,
+		successes,
+		hasError,
+		hasWarning,
+		hasSuccess,
+		defaultRules,
+		focused: focusedRef,
+	}
+}

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

@@ -6,7 +6,7 @@ import { axe } from 'vitest-axe'
 import { assertNoA11yViolations } from '@tests/unit/accessibility/axeUtils'
 import SyRadioGroup from '../SyRadioGroup.vue'
 
-// Scénario d’accessibilité : groupe de boutons radio requis avec label.
+// Scénarios d'accessibilité pour le groupe de boutons radio
 
 describe('SyRadioGroup – accessibility (axe)', () => {
 	it('has no obvious axe violations for required radio group', async () => {
@@ -27,4 +27,96 @@ describe('SyRadioGroup – accessibility (axe)', () => {
 			ignoreRules: ['region'],
 		})
 	})
+
+	it('has no obvious axe violations with error state', async () => {
+		const wrapper = mount(SyRadioGroup, {
+			props: {
+				label: 'Choisissez une option',
+				modelValue: null,
+				required: true,
+				errorMessages: ['Veuillez sélectionner une option'],
+				options: [
+					{ label: 'Option A', value: 'A' },
+					{ label: 'Option B', value: 'B' },
+				],
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyRadioGroup – error state', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations when disabled', async () => {
+		const wrapper = mount(SyRadioGroup, {
+			props: {
+				label: 'Choisissez une option',
+				modelValue: 'A',
+				disabled: true,
+				options: [
+					{ label: 'Option A', value: 'A' },
+					{ label: 'Option B', value: 'B' },
+				],
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyRadioGroup – disabled state', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations with aria-label', async () => {
+		const wrapper = mount(SyRadioGroup, {
+			props: {
+				ariaLabel: 'Groupe de boutons radio personnalisé',
+				label: 'Radio avec aria-label',
+				modelValue: null,
+				options: [
+					{ label: 'Option A', value: 'A' },
+					{ label: 'Option B', value: 'B' },
+				],
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyRadioGroup – avec aria-label', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations with aria-labelledby', async () => {
+		const container = document.createElement('div')
+		document.body.appendChild(container)
+
+		const heading = document.createElement('h2')
+		heading.id = 'custom-heading'
+		heading.textContent = 'Titre du groupe'
+		container.appendChild(heading)
+
+		const wrapper = mount(SyRadioGroup, {
+			attachTo: container,
+			props: {
+				ariaLabelledby: 'custom-heading',
+				label: 'Radio avec aria-labelledby',
+				modelValue: null,
+				options: [
+					{ label: 'Option A', value: 'A' },
+					{ label: 'Option B', value: 'B' },
+				],
+			},
+		})
+
+		try {
+			const results = await axe(container)
+			assertNoA11yViolations(results, 'SyRadioGroup – avec aria-labelledby', {
+				ignoreRules: ['region'],
+			})
+		}
+		finally {
+			wrapper.unmount()
+			document.body.removeChild(container)
+		}
+	})
 })