@cnamts/synapse 1.0.5 → 1.0.7

package/src/components/Customs/SyTextField/SyTextField.vue

@@ -3,9 +3,6 @@
 	defineOptions({
 		inheritAttrs: false,
 	})
-	import { computed, onMounted, ref, watch, nextTick, type ComponentPublicInstance } from 'vue'
-	import type { IconType, VariantStyle, ColorType } from './types'
-	import { useValidation, type ValidationRule } from '@/composables/validation/useValidation'
 	import {
 		mdiAlertOutline,
 		mdiCheck,
@@ -14,6 +11,10 @@
 		mdiInformation,
 		mdiCalendar,
 	} from '@mdi/js'
+	import { computed, onMounted, ref, watch, nextTick, type ComponentPublicInstance } from 'vue'
+	import type { IconType, VariantStyle, ColorType } from './types'
+	import { useValidation, type ValidationRule } from '@/composables/validation/useValidation'
+	import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
 
 	const props = withDefaults(
 		defineProps<{
@@ -84,6 +85,7 @@
 			disableErrorHandling?: boolean
 			disableClickButton?: boolean
 			autocomplete?: string
+			helpText?: string
 		}>(),
 		{
 			modelValue: undefined,
@@ -150,6 +152,7 @@
 			disableErrorHandling: false,
 			disableClickButton: true,
 			autocomplete: 'off',
+			helpText: '',
 		},
 	)
 
@@ -215,13 +218,19 @@
 		: [],
 	)
 
+	// Check if customRules contains a 'required' rule
+	const hasCustomRequiredRule = () => {
+		return props.customRules.some(rule => rule.type === 'required')
+	}
+
 	const validateField = (value: string | number | null) => {
 		if (props.readonly) {
 			validation.clearValidation()
 			return true
 		}
 
-		if (!value && !props.required) {
+		// Don't short-circuit if a custom required rule exists
+		if (!value && !props.required && !hasCustomRequiredRule()) {
 			validation.clearValidation()
 			return true
 		}
@@ -292,6 +301,40 @@
 		return isShouldDisplayAsterisk.value ? `${props.label} *` : props.label
 	})
 
+	// Détermine s'il y a des messages d'erreur ou d'état
+	const hasMessages = computed(() => {
+		if (props.disableErrorHandling) return false
+		return (props.errorMessages?.length ?? 0) > 0 || hasError.value || hasWarning.value || hasSuccess.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.areDetailsHidden
+	})
+
+	// Accessible label that includes prefix and suffix content for screen readers
+	const accessibleLabel = computed(() => {
+		let label = labelWithAsterisk.value
+
+		// Add prefix content if provided
+		if (props.prefix) {
+			label += ` ${props.prefix}`
+		}
+
+		// Add suffix content if provided
+		if (props.suffix) {
+			label += ` ${props.suffix}`
+		}
+
+		return label
+	})
+
 	const dividerProps = {
 		thickness: 2,
 		length: '25px',
@@ -343,11 +386,137 @@
 			addSrOnlySpan('.v-text-field__prefix')
 			addSrOnlySpan('.v-text-field__suffix')
 
-			// Remove aria-describedby attribute
-			const inputElement = syTextFieldRef.value?.$el?.querySelector('input')
-			if (inputElement) {
-				inputElement.removeAttribute('aria-describedby')
+			// RGAA compliance: Associate error messages with input via aria-describedby
+			const setupAriaDescribedby = () => {
+				const inputElement = syTextFieldRef.value?.$el?.querySelector('input')
+				const messagesContainer = syTextFieldRef.value?.$el?.querySelector('.v-messages')
+				const detailsContainer = syTextFieldRef.value?.$el?.querySelector('.v-input__details')
+
+				if (inputElement && messagesContainer) {
+					// Create unique ID for messages container only
+					const messagesId = `${inputElement.id || 'input'}-messages`
+					messagesContainer.id = messagesId
+
+					// Get existing aria-describedby value and combine with messages ID (avoid duplicates)
+					const existingDescribedby = inputElement.getAttribute('aria-describedby')
+					const existingIds = existingDescribedby ? existingDescribedby.split(' ').filter(id => id.trim()) : []
+
+					// Only add messagesId if it's not already present
+					if (!existingIds.includes(messagesId)) {
+						existingIds.push(messagesId)
+					}
+
+					const describedbyIds = existingIds.join(' ').trim()
+
+					// Associate input with messages via aria-describedby (preserve existing IDs)
+					inputElement.setAttribute('aria-describedby', describedbyIds)
+
+					// Remove problematic ARIA attributes from details container (parent)
+					if (detailsContainer) {
+						// Remove any existing ID to avoid duplicates
+						if (detailsContainer.id === messagesId) {
+							detailsContainer.removeAttribute('id')
+						}
+						detailsContainer.removeAttribute('role')
+						detailsContainer.removeAttribute('aria-live')
+						detailsContainer.removeAttribute('aria-atomic')
+					}
+
+					// Also remove from messages container itself
+					messagesContainer.removeAttribute('role')
+					messagesContainer.removeAttribute('aria-live')
+					messagesContainer.removeAttribute('aria-atomic')
+				}
+				else if (inputElement) {
+					// No messages container, but preserve existing aria-describedby values
+					const existingDescribedby = inputElement.getAttribute('aria-describedby')
+					const messagesId = `${inputElement.id || 'input'}-messages`
+
+					if (existingDescribedby) {
+						// Remove only the messages ID if it exists, keep other IDs
+						const describedbyIds = existingDescribedby
+							.split(' ')
+							.filter(id => id.trim() && id !== messagesId)
+							.join(' ')
+							.trim()
+
+						if (describedbyIds) {
+							inputElement.setAttribute('aria-describedby', describedbyIds)
+						}
+						else {
+							inputElement.removeAttribute('aria-describedby')
+						}
+					}
+				}
 			}
+
+			setupAriaDescribedby()
+		})
+
+		// Watch for error state changes to update aria-describedby dynamically
+		watch([hasError, errors], () => {
+			nextTick(() => {
+				const inputElement = syTextFieldRef.value?.$el?.querySelector('input')
+				const messagesContainer = syTextFieldRef.value?.$el?.querySelector('.v-messages')
+				const detailsContainer = syTextFieldRef.value?.$el?.querySelector('.v-input__details')
+
+				if (inputElement && messagesContainer) {
+					// Create unique ID for messages container only
+					const messagesId = `${inputElement.id || 'input'}-messages`
+					messagesContainer.id = messagesId
+
+					// Get existing aria-describedby value and combine with messages ID (avoid duplicates)
+					const existingDescribedby = inputElement.getAttribute('aria-describedby')
+					const existingIds = existingDescribedby ? existingDescribedby.split(' ').filter(id => id.trim()) : []
+
+					// Only add messagesId if it's not already present
+					if (!existingIds.includes(messagesId)) {
+						existingIds.push(messagesId)
+					}
+
+					const describedbyIds = existingIds.join(' ').trim()
+
+					// Associate input with messages via aria-describedby (preserve existing IDs)
+					inputElement.setAttribute('aria-describedby', describedbyIds)
+
+					// Remove problematic ARIA attributes from details container (parent)
+					if (detailsContainer) {
+						// Remove any existing ID to avoid duplicates
+						if (detailsContainer.id === messagesId) {
+							detailsContainer.removeAttribute('id')
+						}
+						detailsContainer.removeAttribute('role')
+						detailsContainer.removeAttribute('aria-live')
+						detailsContainer.removeAttribute('aria-atomic')
+					}
+
+					// Also remove from messages container itself
+					messagesContainer.removeAttribute('role')
+					messagesContainer.removeAttribute('aria-live')
+					messagesContainer.removeAttribute('aria-atomic')
+				}
+				else if (inputElement) {
+					// No messages container, but preserve existing aria-describedby values
+					const existingDescribedby = inputElement.getAttribute('aria-describedby')
+					const messagesId = `${inputElement.id || 'input'}-messages`
+
+					if (existingDescribedby) {
+						// Remove only the messages ID if it exists, keep other IDs
+						const describedbyIds = existingDescribedby
+							.split(' ')
+							.filter(id => id.trim() && id !== messagesId)
+							.join(' ')
+							.trim()
+
+						if (describedbyIds) {
+							inputElement.setAttribute('aria-describedby', describedbyIds)
+						}
+						else {
+							inputElement.removeAttribute('aria-describedby')
+						}
+					}
+				}
+			})
 		})
 	})
 
@@ -365,8 +534,9 @@
 		v-model="model"
 		:autocomplete="props.autocomplete"
 		:active="props.isActive"
-		:title="props.label"
-		:aria-label="props.label"
+		:title="accessibleLabel"
+		:aria-label="accessibleLabel"
+		:aria-required="props.required ? 'true' : undefined"
 		:base-color="props.baseColor"
 		:bg-color="props.bgColor"
 		:center-affix="props.centerAffix"
@@ -382,9 +552,8 @@
 		:error-messages="errors"
 		:flat="props.isFlat"
 		:focused="props.isFocused"
-		:hide-details="props.areDetailsHidden"
-		:hide-spin-buttons="props.areSpinButtonsHidden"
-		:hint="props.hint"
+		:hide-details="props.areDetailsHidden && !showHelpTextAsMessage"
+		:hint="showHelpTextAsMessage ? props.helpText : props.hint"
 		:label="labelWithAsterisk"
 		:loading="props.loading"
 		:max-errors="props.maxErrors"
@@ -394,7 +563,7 @@
 		:name="props.name"
 		:persistent-clear="props.displayPersistentClear"
 		:persistent-counter="props.displayPersistentCounter"
-		:persistent-hint="props.displayPersistentHint"
+		:persistent-hint="props.displayPersistentHint || !!showHelpTextAsMessage"
 		:persistent-placeholder="props.displayPersistentPlaceholder"
 		:placeholder="props.placeholder"
 		:prefix="props.prefix"
@@ -430,24 +599,29 @@
 						:location="props.tooltipLocation"
 					>
 						<template #activator="{ props: tooltipProps }">
-							<VIcon
+							<SyIcon
 								v-bind="tooltipProps"
-								:aria-label="props.label ? `${props.label} - info` : 'Info'"
+								:label="props.label ? `${props.label} - info` : 'Info'"
 								:color="appendInnerIconColor"
 								:icon="ICONS.info"
 								role="button"
+								:decorative="false"
 							/>
 						</template>
 					</VTooltip>
 				</template>
-				<VIcon
+				<SyIcon
 					v-else-if="props.prependIcon && !props.noIcon"
-					:aria-label="disableClickButton ? (props.label ? props.label : props.prependIcon) : (props.label ? `${props.label} - bouton ${props.prependIcon}` : `Bouton ${props.prependIcon}`)"
+					:label="disableClickButton ? undefined : (props.label ? `${props.label} - bouton ${props.prependIcon}` : `Bouton ${props.prependIcon}`)"
 					:color="appendInnerIconColor"
 					:icon="ICONS[props.prependIcon]"
 					:role="disableClickButton ? 'presentation' : 'button'"
 					:class="disableClickButton ? 'cursor-default' : 'cursor-pointer'"
+					:decorative="disableClickButton"
+					:tabindex="disableClickButton ? undefined : '0'"
 					@click="handlePrependIconClick"
+					@keydown.enter.prevent="handlePrependIconClick"
+					@keydown.space.prevent="handlePrependIconClick"
 				/>
 			</slot>
 		</template>
@@ -464,24 +638,29 @@
 						:location="props.tooltipLocation"
 					>
 						<template #activator="{ props: tooltipProps }">
-							<VIcon
+							<SyIcon
 								v-bind="tooltipProps"
-								:aria-label="props.label ? `${props.label} - info` : 'Info'"
+								:label="props.label ? `${props.label} - info` : 'Info'"
 								:color="appendInnerIconColor"
 								:icon="ICONS.info"
 								role="button"
+								:decorative="false"
 							/>
 						</template>
 					</VTooltip>
 				</template>
-				<VIcon
+				<SyIcon
 					v-else-if="props.appendIcon && !props.noIcon"
-					:aria-label="disableClickButton ? (props.label ? props.label : props.appendIcon) : (props.label ? `${props.label} - bouton ${props.appendIcon}` : `Bouton ${props.appendIcon}`)"
+					:label="disableClickButton ? undefined : (props.label ? `${props.label} - bouton ${props.appendIcon}` : `Bouton ${props.appendIcon}`)"
 					:color="appendInnerIconColor"
 					:icon="ICONS[props.appendIcon]"
 					:role="disableClickButton ? 'presentation' : 'button'"
 					:class="disableClickButton ? 'cursor-default' : 'cursor-pointer'"
+					:decorative="disableClickButton"
+					:tabindex="disableClickButton ? undefined : '0'"
 					@click="handleAppendIconClick"
+					@keydown.enter.prevent="handleAppendIconClick"
+					@keydown.space.prevent="handleAppendIconClick"
 				/>
 			</slot>
 		</template>
@@ -489,10 +668,11 @@
 		<!-- Prepend inner -->
 		<template #prepend-inner>
 			<slot name="prepend-inner">
-				<VIcon
+				<SyIcon
 					v-if="props.prependInnerIcon && !props.noIcon"
 					:icon="ICONS[props.prependInnerIcon]"
 					role="presentation"
+					:decorative="true"
 				/>
 				<VDivider
 					v-if="props.showDivider"
@@ -506,23 +686,31 @@
 		<!-- Append inner -->
 		<template #append-inner>
 			<slot name="append-inner">
-				<VIcon
+				<SyIcon
 					v-if="validationIcon && !props.appendInnerIcon"
 					:icon="validationIcon"
 					role="presentation"
+					:decorative="true"
 				/>
-				<VIcon
+				<SyIcon
 					v-if="props.appendInnerIcon && !props.noIcon"
 					:color="appendInnerIconColor"
 					role="presentation"
-				>
-					{{ ICONS[props.appendInnerIcon] }}
-				</VIcon>
+					:icon="ICONS[props.appendInnerIcon]"
+					:decorative="true"
+				/>
 			</slot>
 		</template>
 
 		<template #details>
 			<slot name="details" />
+			<div
+				v-if="showHelpTextBelow"
+				class="help-text-below px-4 mt-1"
+				:class="{ 'text-disabled': props.disabled }"
+			>
+				{{ props.helpText }}
+			</div>
 		</template>
 	</VTextField>
 </template>
@@ -599,8 +787,17 @@
 
 .basic-field {
 	:deep(.v-icon__svg) {
-		fill: rgb(0 0 0 / 100%);
+		fill: rgb(0 0 0 / 70%);
 	}
 }
 
+.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));
+}
 </style>

package/src/components/DataList/Accessibilite.stories.ts

@@ -159,6 +159,10 @@ export const Legende: StoryObj = {
 				  </div>
 				</div>
 			  </div>
+			  <div class="mt-4">
+				  <p>Rapport d’audit manuel : <a href="/audits/DataList.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/issues/4030" target="_blank" style="color:#0C41BD;">issue #4030</a>)</p>
+			  </div>
             `,
 		}
 	},

package/src/components/DataList/DataList.vue

@@ -1,8 +1,6 @@
 <script lang="ts" setup>
-	import { computed } from 'vue'
 	import type { PropType } from 'vue'
 
-	import { locales } from './locales'
 	import DataListItem from '@/components/DataListItem/DataListItem.vue'
 	import DataListLoading from './DataListLoading/DataListLoading.vue'
 
@@ -26,6 +24,10 @@
 			type: String,
 			default: 'text-subtitle-1 font-weight-bold mb-3',
 		},
+		titleTag: {
+			type: String,
+			default: 'h4',
+		},
 		row: {
 			type: Boolean,
 			default: false,
@@ -64,12 +66,14 @@
 		},
 	})
 
+	const uniqueId = Math.random().toString(36).substr(2, 9)
+
+	const sectionTitleId = `data-list-section-title-${uniqueId}`
+
 	const { widthStyles } = useWidthable(props)
 
 	const emit = defineEmits(['click:item-action'])
 
-	const label = computed(() => (props.loading ? locales.loadingLabel : undefined))
-
 	const getIcon = (iconName?: string): string | undefined => {
 		if (!iconName || !props.icons) {
 			return
@@ -86,51 +90,52 @@
 </script>
 
 <template>
-	<div
-		:aria-label="label"
-		:style="widthStyles"
-		class="sy-data-list"
-	>
-		<VFadeTransition mode="out-in">
-			<DataListLoading
-				v-if="loading"
-				:items-number="itemsNumberLoading"
-				:heading="headingLoading"
-				:title-class="titleClass"
-				:row="row"
-			/>
+	<VFadeTransition mode="out-in">
+		<DataListLoading
+			v-if="loading"
+			:items-number="itemsNumberLoading"
+			:heading="headingLoading"
+			:row="row"
+		/>
 
-			<div v-else>
-				<slot name="title">
-					<h4
-						v-if="listTitle"
-						:class="titleClass"
-					>
-						{{ listTitle }}
-					</h4>
-				</slot>
+		<component
+			:is="listTitle ? 'section' : 'div'"
+			v-else
+			:aria-labelledby="listTitle ? sectionTitleId : undefined"
+			:style="widthStyles"
+			class="sy-data-list"
+		>
+			<slot name="title">
+				<component
+					:is="titleTag"
+					v-if="listTitle"
+					:id="sectionTitleId"
+					:class="titleClass"
+				>
+					{{ listTitle }}
+				</component>
+			</slot>
 
-				<ul v-if="items.length">
-					<DataListItem
-						v-for="(item, index) in items"
-						:key="index"
-						:label="item.key"
-						:value="item.value"
-						:action="item.action"
-						:chip="item.chip"
-						:row="row"
-						:render-html-value="renderHtmlValue"
-						:icon="getIcon(item.icon)"
-						:placeholder="placeholder"
-						:vuetify-options="item.options"
-						:class="getItemClass(index, item.class)"
-						class="sy-data-list-item text-body-1"
-						@click:action="emit('click:item-action', index)"
-					/>
-				</ul>
-			</div>
-		</VFadeTransition>
-	</div>
+			<dl v-if="items.length">
+				<DataListItem
+					v-for="(item, index) in items"
+					:key="index"
+					:label="item.key"
+					:value="item.value"
+					:action="item.action"
+					:chip="item.chip"
+					:row="row"
+					:render-html-value="renderHtmlValue"
+					:icon="getIcon(item.icon)"
+					:placeholder="placeholder"
+					:vuetify-options="item.options"
+					:class="getItemClass(index, item.class)"
+					class="sy-data-list-item text-body-1"
+					@click:action="emit('click:item-action', index)"
+				/>
+			</dl>
+		</component>
+	</VFadeTransition>
 </template>
 
 <style lang="scss" scoped>

package/src/components/DataListGroup/Accessibilite.stories.ts

@@ -218,6 +218,10 @@ export const Legende: StoryObj = {
 				  </div>
 				</div>
 			  </div>
+			<div class="mt-4">
+				  <p>Rapport d’audit manuel : <a href="/audits/DataListGroup.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/651" target="_blank" style="color:#0C41BD;">issue #651</a>)</p>
+			  </div>
             `,
 		}
 	},

package/src/components/DataListGroup/DataListGroup.vue

@@ -17,6 +17,10 @@
 			type: String,
 			default: '200px',
 		},
+		titlesTag: {
+			type: String,
+			default: 'h4',
+		},
 		loading: {
 			type: Boolean,
 			default: false,
@@ -40,20 +44,33 @@
 </script>
 
 <template>
-	<div class="vd-data-list-group d-flex flex-wrap max-width-none ma-n4">
-		<DataList
+	<ul class="sy-data-list-group d-flex max-width-none ma-n4">
+		<li
 			v-for="(dataList, index) in props.items"
-			:key="`vd-data-list-${index}`"
-			:loading="props.loading"
-			:render-html-value="props.renderHtmlValue"
-			:list-title="dataList.title"
-			:items="dataList.items"
-			:items-number-loading="dataList.itemsNumberLoading"
-			:heading-loading="dataList.headingLoading"
-			:width="props.itemWidth"
-			:icons="props.icons"
-			class="ma-4"
-			@click:item-action="emitItemAction(index, $event)"
-		/>
-	</div>
+			:key="`sy-data-list-${index}`"
+			class="sy-data-list-group-item"
+		>
+			<DataList
+				:loading="props.loading"
+				:render-html-value="props.renderHtmlValue"
+				:list-title="dataList.title"
+				:items="dataList.items"
+				:items-number-loading="dataList.itemsNumberLoading"
+				:heading-loading="dataList.headingLoading"
+				:title-tag="props.titlesTag"
+				:width="props.itemWidth"
+				:icons="props.icons"
+				class="ma-4"
+				@click:item-action="emitItemAction(index, $event)"
+			/>
+		</li>
+	</ul>
 </template>
+
+<style lang="scss" scoped>
+	.sy-data-list-group {
+		list-style: none;
+		padding: 0;
+		margin: 0;
+	}
+</style>