@cnamts/synapse 1.0.25 → 1.0.26

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

@@ -1,14 +1,13 @@
-import { Meta, Story, Primary } from '@storybook/addon-docs';
+import { Meta } from '@storybook/addon-docs';
 import * as DialogBoxStories from '../DialogBox.stories.ts';
 import '@/stories/styles/shared.css';
 import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
+
 import {
-	AccessibilityGuideLayout,
-	CriteriaSection,
-	CriteriaCard,
-	DemoSection,
-	BestPracticesSection,
-	ResourcesSection,
+    AccessibilityGuideLayout,
+    CriteriaSection,
+    CriteriaCard,
+    AuditSection
 } from '@/stories/accessibility/AccessibilityGuideLayout.mdx';
 
 <Meta of={DialogBoxStories} />
@@ -16,20 +15,85 @@ import {
 	componentName="DialogBox"
 	iconSrc={AccessibilityIcon}
 >
-<div class="mt-2">
-<p>Rapport d’audit manuel : <a href="/audits/DialogBox.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/798" target="_blank" style={{color:'#0C41BD'}}>issue #798</a>)</p>
-	</div>
-<CriteriaSection>
-<CriteriaCard icon="🧩" title="Niveau de titre configurable via la prop headingLevel">
-  <ul>
-    <li>Le niveau du titre (h1 à h6) est défini grâce à la propriété <strong>headingLevel</strong> déclarée dans le composant. Si aucune valeur n’est fournie, le composant applique par défaut un titre de niveau h2, défini dans l’implémentation du composant.</li>
-      <code>&lt;DialogBox
-          :heading-level="2" /&gt; </code>
-    
-    <li><strong>Accessibilité</strong> : Permet que la hiérarchie entre les titres soit pertinente (critère 9.1.1 RGAA) </li>
-  </ul>
-</CriteriaCard>
-</CriteriaSection>
+    <AuditSection>
+        <div>Rapport d’audit manuel : <a href="/audits/DialogBox.xlsx" style={{color: '#0C41BD'}}>Voir le rapport</a></div>
+        <div style={{color: 'grey', fontSize: '14px', marginTop: '0px'}}>
+            Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/798" target="_blank" style={{color: '#0C41BD'}}>issue #798</a>)
+        </div>
+    </AuditSection>
+    <CriteriaSection>
+        <CriteriaCard icon="🧩" title="Niveau de titre configurable via la prop headingLevel">
+            <ul>
+                <li>Le niveau du titre (h1 à h6) est défini grâce à la propriété <strong>headingLevel</strong> déclarée dans le composant. Si aucune valeur n’est fournie, le composant applique par défaut un titre de niveau h2, défini dans l’implémentation du composant.</li>
+                <code>&lt;DialogBox
+                    :heading-level="2" /&gt; </code>
+
+                <li><strong>Accessibilité</strong> : Permet que la hiérarchie entre les titres soit pertinente (critère 9.1.1 RGAA) </li>
+
+                <li>Si aucune valeur n’est fournie, le composant applique par défaut un titre de niveau<strong> h2</strong>.</li>
+
+                <li>Ce titre est rendu via le composant<strong> SyHeading</strong>, ce qui garantit une structure sémantique correcte dans le DOM.</li>
+
+                <li><strong>Accessibilité :</strong> permet de respecter une hiérarchie de titres cohérente et pertinente pour les technologies d’assistance (critère 9.1.1 RGAA).</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="🎯" title="Gestion automatique du focus à l’ouverture et à la fermeture">
+            <ul>
+                <li>À l’ouverture de la modale, le focus est déplacé soit sur le bouton de validation (<strong>autofocusValidateBtn</strong>), soit sur la zone de titre si la modale est draggable.</li>
+
+                <li>À la fermeture, le focus est automatiquement restauré sur l’élément qui avait le focus avant l’ouverture.</li>
+
+                <li><strong>Accessibilité :</strong> évite la perte de contexte pour les utilisateurs clavier et lecteurs d’écran (critère 7.3 RGAA).</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="⌨️" title="Piégeage du focus dans la boîte de dialogue">
+            <ul>
+                <li>La navigation clavier avec la touche<strong> Tab </strong>est maintenue à l’intérieur de la modale.</li>
+
+                <li>Le focus boucle automatiquement entre le premier et le dernier élément interactif.</li>
+
+                <li>La combinaison<strong> Shift + Tab </strong>est également gérée.</li>
+
+                <li><strong>Accessibilité :</strong> empêche la sortie involontaire du focus hors de la fenêtre modale (critère 7.1 RGAA).</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="🏷️" title="Association correcte du titre avec aria-labelledby">
+            <ul>
+                <li>Le composant utilise un identifiant unique généré avec <strong>useId() </strong>.</li>
+
+                <li>Cet identifiant est appliqué au titre et référencé via <strong> aria-labelledby </strong>sur le composant dialog.</li>
+
+                <li>Le composant déclare également<strong> aria-modal="true" </strong>.</li>
+
+                <li><strong>Accessibilité :</strong> permet aux lecteurs d’écran d’annoncer correctement le contexte de la fenêtre modale (critère 7.1 RGAA).</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="✋" title="Support clavier du mode draggable">
+            <ul>
+                <li>Lorsque la prop<strong> draggable </strong>est activée, le titre devient focusable avec <strong>tabindex="0"</strong>.</li>
+
+                <li>Le déplacement peut être réalisé avec les flèches clavier (gauche, droite, haut, bas).</li>
+
+                <li>Des attributs<strong> title </strong>et <strong> aria-label </strong>expliquent l’usage aux utilisateurs.</li>
+
+                <li><strong>Accessibilité :</strong> rend le déplacement utilisable sans souris et améliore l’accessibilité fonctionnelle.</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="❌" title="Bouton de fermeture explicite et accessible">
+            <ul>
+                <li>Le bouton de fermeture possède un<strong> aria-label </strong>explicite.</li>
+
+                <li>L’icône est décorative (<strong>decorative=true</strong>) pour éviter une lecture redondante.</li>
+
+                <li>Le style de focus visible est renforcé pour garantir une navigation clavier claire.</li>
 
+                <li><strong>Accessibilité :</strong> assure une identification immédiate de l’action de fermeture (critère 11.10 RGAA).</li>
+            </ul>
+        </CriteriaCard>
+    </CriteriaSection>
 </AccessibilityGuideLayout>

package/src/components/FilterSideBar/FilterSideBar.vue

@@ -3,7 +3,8 @@
 	import useFilterable from '@/composables/useFilterable/useFilterable'
 	import { mdiFilterVariant } from '@mdi/js'
 	import { computed, onMounted, ref, toRef, watch } from 'vue'
-	import { type VBtn, type VNavigationDrawer } from 'vuetify/components'
+	import type { VBtn } from 'vuetify/components/VBtn'
+	import type { VNavigationDrawer } from 'vuetify/components/VNavigationDrawer'
 	import ChipList from '../ChipList/ChipList.vue'
 	import SyIcon from '../Customs/SyIcon/SyIcon.vue'
 	import { locales as defaultLocales } from './locales'

package/src/components/LangBtn/LangBtn.vue

@@ -6,7 +6,8 @@
 	import ISO6391 from 'iso-639-1'
 	import useCustomizableOptions, { type CustomizableOptions } from '@/composables/useCustomizableOptions'
 	import defaultOptions from './config'
-	import type { VBtn, VListItem } from 'vuetify/components'
+	import type { VBtn } from 'vuetify/components/VBtn'
+	import type { VListItem } from 'vuetify/components/VList'
 	import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
 
 	const props = withDefaults(defineProps<CustomizableOptions & {

package/src/components/NotificationBar/Notification/Notification.vue

@@ -147,10 +147,10 @@
 
 	.notification--success {
 		background-color: rgb(var(--v-theme-backgroundSuccessContrasted, '86, 194, 113'));
-		color: rgb(var(--v-theme-textBase, '0, 0, 0'));
+		color: rgb(var(--v-theme-feedbackOnSuccess));
 
 		.notification__close:focus-visible {
-			outline: 2px solid rgb(var(--v-theme-textBase, '0, 0, 0'));
+			outline: 2px solid rgb(var(--v-theme-feedbackOnSuccess));
 		}
 	}
 

package/src/components/PaginatedTable/PaginatedTable.vue

@@ -3,7 +3,7 @@
 	import type { DataOptions, SortOption, GroupOption } from './types'
 	import { LocalStorageUtility } from '@/utils/localStorageUtility'
 	import Pagination from './Pagination.vue'
-	import type { VDataTable } from 'vuetify/components'
+	import type { VDataTable } from 'vuetify/components/VDataTable'
 
 	const props = defineProps({
 		serverItemsLength: {

package/src/components/PaginatedTable/Pagination.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-	import { VPagination } from 'vuetify/components'
 	import { usePagination } from 'vuetify/lib/components/VDataTable/composables/paginate.mjs'
 	import SySelect from '../Customs/Selects/SySelect/SySelect.vue'
 	import { useLocale } from 'vuetify'
@@ -31,6 +30,7 @@
 				density="compact"
 				variant="outlined"
 				hide-details
+				disable-error-handling
 				@update:model-value="v => setItemsPerPage(Number(v))"
 			/>
 		</div>

package/src/components/PasswordField/PasswordField.vue

@@ -99,7 +99,7 @@
 	})
 
 	// Initialisation du composable de validation
-	const { errors, warnings, successes, validateField } = !props.readonly
+	const { errors, warnings, successes, displaySuccesses, validateField } = !props.readonly
 		? useValidation({
 			showSuccessMessages: props.showSuccessMessages,
 			fieldIdentifier: props.label || 'password',
@@ -109,12 +109,13 @@
 			errors: ref<string[]>([]),
 			warnings: ref<string[]>([]),
 			successes: ref<string[]>([]),
+			displaySuccesses: ref<string[]>([]),
 			validateField: () => ({ hasError: false, hasWarning: false, hasSuccess: false, state: { errors: [], warnings: [], successes: [] } }),
 		}
 
 	const hasError = computed(() => errors.value.length > 0)
 	const hasWarning = computed(() => warnings.value.length > 0)
-	const hasSuccess = computed(() => successes.value.length > 0 && props.showSuccessMessages)
+	const hasSuccess = computed(() => successes.value.length > 0 && !hasError.value && !hasWarning.value)
 
 	const validationIcon = computed(() => {
 		if (hasError.value) return mdiAlertCircle
@@ -254,7 +255,9 @@
 		:required="props.required"
 		:error-messages="errors"
 		:warning-messages="warnings"
-		:success-messages="successes"
+		:success-messages="displaySuccesses"
+		:has-success="hasSuccess"
+		:show-success-messages="props.showSuccessMessages"
 		:readonly="props.readonly"
 		:disabled="props.disabled"
 		:placeholder="props.placeholder"
@@ -283,6 +286,7 @@
 				class="d-flex align-center"
 			>
 				<SyIcon
+					v-if="validationIcon"
 					:icon="validationIcon"
 					:color="validationColor"
 					decorative

package/src/components/PhoneField/PhoneField.vue

@@ -36,6 +36,7 @@
 		isValidatedOnBlur: { type: Boolean, default: true },
 		displayAsterisk: { type: Boolean, default: false },
 		disableErrorHandling: { type: Boolean, default: false },
+		showSuccessMessages: { type: Boolean, default: true },
 		bgColor: { type: String, default: 'white' },
 		readonly: { type: Boolean, default: false },
 		disabled: { type: Boolean, default: false },
@@ -300,7 +301,7 @@
 	})
 
 	const validation = useValidation({
-		showSuccessMessages: true,
+		showSuccessMessages: props.showSuccessMessages,
 		disableErrorHandling: shouldDisableErrorHandling.value,
 	})
 
@@ -326,7 +327,7 @@
 	const successes = computed(() =>
 		shouldDisableErrorHandling.value || hasError.value || hasWarning.value
 			? []
-			: validation.successes.value,
+			: validation.displaySuccesses.value,
 	)
 
 	const showHelpTextBelow = computed(() => !!props.helpText?.trim())
@@ -475,6 +476,7 @@
 					:error-messages="errors"
 					:warning-messages="warnings"
 					:success-messages="successes"
+					:show-success-messages="props.showSuccessMessages"
 					:disable-error-handling="shouldDisableErrorHandling"
 					:variant="outlined ? 'outlined' : 'underlined'"
 					:display-asterisk="displayAsterisk"

package/src/components/RangeField/RangeSlider/RangeSlider.vue

@@ -3,7 +3,6 @@
 // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role
 
 <script setup lang="ts">
-	import { cnamColorsTokens } from '@/designTokens'
 	import { computed, ref, toRef, watch, type Ref } from 'vue'
 	import Tooltip from './Tooltip/Tooltip.vue'
 	import type { PropsStyle } from './types'
@@ -27,15 +26,12 @@
 				maxLabel?: string
 			}>(),
 		{
-			'modelValue': () => [],
-			'min': 0,
-			'max': 100,
-			'step': 1,
-			'minLabel': 'Minimum',
-			'maxLabel': 'Maximum',
-			'thumb-color': cnamColorsTokens.blue.base,
-			'track-color': cnamColorsTokens.blue.lighten60,
-			'track-fill-color': cnamColorsTokens.blue.lighten20,
+			modelValue: () => [],
+			min: 0,
+			max: 100,
+			step: 1,
+			minLabel: 'Minimum',
+			maxLabel: 'Maximum',
 		},
 	)
 
@@ -259,9 +255,6 @@ $virtual-thumb-size: 40px;
 .wrapper {
 	--sy-track-height: 4px;
 	--sy-thumb-size: 20px;
-	--sy-thumb-color: v-bind(props.thumbColor);
-	--sy-track-color: v-bind(props.trackColor);
-	--sy-track-fill-color: v-bind(props.trackFillColor);
 
 	position: relative;
 	margin-inline: var(--sy-thumb-size);
@@ -280,7 +273,7 @@ $virtual-thumb-size: 40px;
 		transform: translate(0, -50%);
 		width: 100%;
 		height: var(--sy-track-height);
-		background-color: var(--sy-track-color);
+		background-color: rgb(var(--v-theme-backgroundInfoSubdued));
 	}
 }
 
@@ -305,7 +298,7 @@ $virtual-thumb-size: 40px;
 		transform: translate(-50%, -50%);
 		width: var(--sy-thumb-size);
 		height: var(--sy-thumb-size);
-		background-color: var(--sy-thumb-color);
+		background-color: rgb(var(--v-theme-primary));
 		border-radius: 50%;
 		transform-origin: bottom right;
 		transition: transform 0.1s;
@@ -320,7 +313,7 @@ $virtual-thumb-size: 40px;
 		transform: translate(-50%, -50%);
 		width: var(--sy-thumb-size);
 		height: var(--sy-thumb-size);
-		background-color: var(--sy-thumb-color);
+		background-color: rgb(var(--v-theme-primary));
 		opacity: 0.4;
 		border-radius: 50%;
 		transform-origin: bottom right;
@@ -358,7 +351,7 @@ $virtual-thumb-size: 40px;
 	transform: translate(-50%, -50%);
 	width: var(--sy-thumb-size);
 	height: var(--sy-thumb-size);
-	background-color: var(--sy-thumb-color);
+	background-color: rgb(var(--v-theme-primary));
 	border-radius: 50%;
 	box-shadow: 0 1px 5px 0 #0000001f, 0 2px 2px 0 #00000024, 0 3px 1px -2px #0003;
 }
@@ -388,7 +381,7 @@ $virtual-thumb-size: 40px;
 	transform: translate(0, -50%);
 	width: 100%;
 	height: var(--sy-track-height);
-	background-color: var(--sy-track-fill-color);
+	background-color: rgb(var(--v-theme-accentPrimaryLight));
 	transition: all 0.1s;
 }
 

package/src/components/RatingPicker/EmotionPicker/EmotionPicker.vue

@@ -1,8 +1,9 @@
 <script lang="ts" setup>
-	import { type PropType, computed, onMounted, ref } from 'vue'
+	import { type PropType, computed, onMounted, toRef } from 'vue'
 	import { RatingEnum, useRating } from '../Rating'
 	import { locales } from './locales'
 	import { propValidator } from '@/utils/propValidator'
+	import { useRatingFocus } from '../useRatingFocus'
 	import {
 		mdiEmoticonHappyOutline,
 		mdiEmoticonSadOutline,
@@ -81,45 +82,27 @@
 		return props.itemLabels[value]
 	}
 
-	const ratingElement = ref<HTMLDivElement[]>([])
-	function focusNextElement(index: number) {
-		const currentIndex = ratingElement.value?.findIndex(el => el === ratingElement.value[index]) ?? -1
-		const nextIndex = currentIndex < (props.length - 1) ? currentIndex + 1 : 0
-		const nextElem = ratingElement.value?.[nextIndex]
-
-		ratingElement.value[index]?.setAttribute('tabindex', '-1')
-		nextElem?.setAttribute('tabindex', '0')
-		nextElem?.focus()
-	}
-
-	function focusPrevElement(index: number) {
-		const currentIndex = ratingElement.value?.findIndex(el => el === ratingElement.value[index]) ?? -1
-		const prevIndex = currentIndex > 0 ? currentIndex - 1 : (props.length - 1)
-		const prevElem = ratingElement.value?.[prevIndex]
-
-		ratingElement.value[index]?.setAttribute('tabindex', '-1')
-		prevElem?.setAttribute('tabindex', '0')
-		prevElem?.focus()
-	}
+	const {
+		ratingElement,
+		initFocus,
+		selectAndFocus,
+		focusNextElement,
+		focusPrevElement,
+		focus,
+	} = useRatingFocus({
+		length: toRef(props, 'length'),
+		modelValue: internalValue,
+		selectValue: emitInputEvent,
+		wrap: true,
+	})
 
-	function setFocus(index: number) {
-		ratingElement.value.forEach((el, i) => {
-			if (i === index) {
-				el?.setAttribute('tabindex', '0')
-			}
-			else {
-				el?.setAttribute('tabindex', '-1')
-			}
-		})
-	}
+	defineExpose({
+		focus,
+	})
 
 	onMounted(() => {
-		ratingElement.value[0]?.setAttribute('tabindex', '0')
-		for (let i = 1; i < ratingElement.value.length; i++) {
-			ratingElement.value[i]?.setAttribute('tabindex', '-1')
-		}
+		initFocus()
 	})
-
 </script>
 
 <template>
@@ -142,22 +125,23 @@
 				:key="index"
 				ref="ratingElement"
 				v-ripple="!(props.readonly || hasAnswered)"
+				:tabindex="-1"
 				role="radio"
-				:aria-disabled="(props.readonly || hasAnswered) ? 'true' : undefined"
-				:aria-checked="isActive(index) ? 'true' : undefined"
+				:aria-checked="isActive(index) ? 'true' : 'false'"
 				:class="[getColor(index - 1), { 'sy-emotion-picker__item--active': isActive(index) }]"
 				:style="{
 					'min-height': btnSize,
 					'min-width': btnSize
 				}"
+				:aria-disabled="(props.readonly || hasAnswered) ? 'true' : undefined"
 				class="sy-emotion-picker__item rounded-lg px-1 px-sm-4 mx-1 mx-sm-2"
-				@click="emitInputEvent(index); setFocus(index - 1)"
-				@keyup.enter="emitInputEvent(index); setFocus(index - 1)"
-				@keyup.space="emitInputEvent(index); setFocus(index - 1)"
-				@keyup.right="focusNextElement(index - 1)"
-				@keyup.left="focusPrevElement(index - 1)"
-				@keyup.up="focusPrevElement(index - 1)"
-				@keyup.down="focusNextElement(index - 1)"
+				@click="selectAndFocus(index - 1)"
+				@keydown.enter.prevent="selectAndFocus(index - 1)"
+				@keydown.space.prevent="selectAndFocus(index - 1)"
+				@keydown.right.prevent="focusNextElement(index - 1)"
+				@keydown.left.prevent="focusPrevElement(index - 1)"
+				@keydown.up.prevent="focusPrevElement(index - 1)"
+				@keydown.down.prevent="focusNextElement(index - 1)"
 			>
 				<SyIcon
 					:icon="getIcon(index - 1)"
@@ -184,7 +168,7 @@
 	border: 0;
 }
 
-.sy-emotion-picker__item:not([disabled]) {
+.sy-emotion-picker__item:not([aria-disabled='true']) {
 	cursor: pointer;
 }
 
@@ -238,8 +222,8 @@
 		}
 	}
 
-	&:hover[disabled='true']:not([aria-checked='true']),
-	&:focus[disabled='true']:not([aria-checked='true']) {
+	&:hover[aria-disabled='true']:not([aria-checked='true']),
+	&:focus[aria-disabled='true']:not([aria-checked='true']) {
 		background-color: transparent;
 	}
 }

package/src/components/RatingPicker/EmotionPicker/tests/__snapshots__/EmotionPicker.spec.ts.snap

@@ -21,6 +21,7 @@ exports[`EmotionPicker > renders correctly 1`] = `
     role="radiogroup"
   >
     <div
+      aria-checked="false"
       class="
         mx-1
         mx-sm-2
@@ -110,6 +111,7 @@ exports[`EmotionPicker > renders correctly 1`] = `
       </span>
     </div>
     <div
+      aria-checked="false"
       class="
         mx-1
         mx-sm-2
@@ -199,6 +201,7 @@ exports[`EmotionPicker > renders correctly 1`] = `
       </span>
     </div>
     <div
+      aria-checked="false"
       class="
         happy
         mx-1
@@ -312,6 +315,7 @@ exports[`EmotionPicker > renders correctly with only 2 items 1`] = `
     role="radiogroup"
   >
     <div
+      aria-checked="false"
       class="
         mx-1
         mx-sm-2
@@ -401,6 +405,7 @@ exports[`EmotionPicker > renders correctly with only 2 items 1`] = `
       </span>
     </div>
     <div
+      aria-checked="false"
       class="
         happy
         mx-1