@cnamts/synapse 1.0.25 → 1.0.26

package/src/components/RatingPicker/RatingPicker.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-	import { type PropType, computed, ref, watch } from 'vue'
+	import { type PropType, computed, ref, watch, nextTick } from 'vue'
 
 	import EmotionPicker from './EmotionPicker/EmotionPicker.vue'
 	import NumberPicker from './NumberPicker/NumberPicker.vue'
@@ -44,13 +44,19 @@
 			type: Boolean,
 			default: false,
 		},
+		freeTextLabel: {
+			type: String,
+			default: 'Pouvez-vous nous en dire plus ?',
+		},
 	})
 
-	const emit = defineEmits(['update:modelValue'])
+	const emit = defineEmits<{
+		(e: 'update:modelValue', value: number): void
+	}>()
 
-	const alertTypeEnumRef = ref(AlertTypeEnum)
 	const internalValue = ref(-1)
 	const displayAdditionalContent = ref(false)
+	const ratingPickerRef = ref<{ focus?: () => void } | null>(null)
 
 	const ratingComponent = computed(() => {
 		if (props.type === RatingEnum.EMOTION) {
@@ -71,17 +77,29 @@
 		return undefined
 	})
 
-	const hasAnswered = computed(() => props.modelValue !== -1)
-
+	const hasAnswered = computed(() => internalValue.value !== -1)
 	function showAdditionalContent(value: number): void {
-		const starsUnsatisfied = props.type === RatingEnum.STARS && value <= 3
-		const numberUnsatisfied = props.type === RatingEnum.NUMBER && value <= 7
-		const isEmotion = props.type === RatingEnum.EMOTION
-		const isEmotionLow = props.twoEmotions ? value < 2 : value < 3
-		const emotionUnsatisfied = isEmotion && isEmotionLow
-		if (starsUnsatisfied || numberUnsatisfied || emotionUnsatisfied) {
-			displayAdditionalContent.value = true
+		const max = props.type === RatingEnum.EMOTION
+			? (props.twoEmotions ? 2 : 3)
+			: props.type === RatingEnum.STARS
+				? 5
+				: 10
+
+		if (value < 1 || value > max) {
+			displayAdditionalContent.value = false
+			return
 		}
+
+		const starsUnsatisfied = props.type === RatingEnum.STARS && value <= 2
+		const numberUnsatisfied = props.type === RatingEnum.NUMBER && value <= 7
+		const emotionUnsatisfied = props.type === RatingEnum.EMOTION
+			&& (
+				(props.twoEmotions && value < 2)
+				|| (!props.twoEmotions && value < 3)
+			)
+
+		displayAdditionalContent.value
+			= starsUnsatisfied || numberUnsatisfied || emotionUnsatisfied
 	}
 
 	function setValue(value: number): void {
@@ -92,7 +110,18 @@
 
 	watch(() => props.modelValue, (newVal) => {
 		internalValue.value = newVal
+		showAdditionalContent(newVal)
 	}, { immediate: true })
+
+	// focus auto
+	watch(
+		() => props.type,
+		async () => {
+			await nextTick()
+			ratingPickerRef.value?.focus?.()
+		},
+		{ immediate: true },
+	)
 </script>
 
 <template>
@@ -104,9 +133,10 @@
 	>
 		<component
 			:is="ratingComponent"
+			ref="ratingPickerRef"
 			:model-value="internalValue"
 			:label="props.label"
-			:length="length"
+			:length="length || undefined"
 			:readonly="props.readonly || hasAnswered"
 			:item-labels="props.itemLabels || undefined"
 			@update:model-value="setValue"
@@ -123,14 +153,22 @@
 				v-if="!props.hideAlert"
 				:class="{ 'mb-4': displayAdditionalContent }"
 				outlined
-				:type="alertTypeEnumRef.SUCCESS"
+				:type="AlertTypeEnum.SUCCESS"
 				role="status"
+				aria-live="polite"
 				class="mt-4"
 			>
 				{{ locales.thanks }}
 			</SyAlert>
 
-			<slot v-if="displayAdditionalContent" />
+			<div
+				v-if="displayAdditionalContent"
+				role="region"
+				aria-live="polite"
+				class="mt-4"
+			>
+				<slot />
+			</div>
 		</template>
 	</div>
 </template>
@@ -146,4 +184,22 @@
 	text-align: center;
 }
 
+.sy-rating-picker__free-text {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+}
+
+.sy-rating-picker__free-text-label {
+	font-weight: 600;
+}
+
+.sy-rating-picker__free-text-textarea {
+	min-height: 120px;
+	padding: 0.75rem;
+	border: 1px solid #ccc;
+	border-radius: 0.375rem;
+	resize: vertical;
+	font: inherit;
+}
 </style>

package/src/components/RatingPicker/StarsPicker/StarsPicker.vue

@@ -1,9 +1,10 @@
 <script lang="ts" setup>
-	import { ref, type PropType, onMounted } from 'vue'
+	import { ref, type PropType, onMounted, toRef } from 'vue'
 	import { RatingEnum, useRating } from '../Rating'
 	import { mdiStarOutline, mdiStar } from '@mdi/js'
 	import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
 	import { locales } from '../locales'
+	import { useRatingFocus } from '../useRatingFocus'
 
 	const props = defineProps({
 		label: {
@@ -41,37 +42,26 @@
 		return (isHovered && !hasAnswered.value) || isActive
 	}
 
-	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 : props.length - 1
-		const nextElem = ratingElement.value?.[nextIndex]
-		nextElem?.focus()
-	}
-
-	function focusPrevElement(index: number) {
-		const currentIndex = ratingElement.value?.findIndex(el => el === ratingElement.value[index]) ?? -1
-		const prevIndex = currentIndex > 0 ? currentIndex - 1 : 0
-		const prevElem = ratingElement.value?.[prevIndex]
-		prevElem?.focus()
-	}
+	const {
+		ratingElement,
+		initFocus,
+		selectAndFocus,
+		focusNextElement,
+		focusPrevElement,
+		focus,
+	} = useRatingFocus({
+		length: toRef(props, 'length'),
+		modelValue: toRef(props, 'modelValue'),
+		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>
 
@@ -93,19 +83,20 @@
 				ref="ratingElement"
 				class="sy-stars-picker__item d-flex align-center justify-center"
 				role="radio"
+				:tabindex="-1"
 				:aria-disabled="(props.readonly || hasAnswered) ? 'true' : undefined"
-				:aria-checked="isActive(index) ? 'true' : undefined"
+				:aria-checked="isActive(index) ? 'true' : 'false'"
 				@mouseover="hoverIndex = index"
 				@focus="hoverIndex = index"
 				@mouseleave="hoverIndex = -1"
 				@blur="hoverIndex = -1"
-				@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)"
 			>
 				<span class="d-sr-only">{{ locales.etoiles(index) }}</span>
 				<SyIcon

package/src/components/RatingPicker/StarsPicker/tests/StarsPicker.spec.ts

@@ -37,7 +37,7 @@ describe('StarsPicker', () => {
 		)
 		await wrapper.setProps({ modelValue: 1 })
 		expect(wrapper.findAll('[role="radio"]')[3]?.attributes('aria-checked')).toBe(
-			undefined,
+			'false',
 		)
 		expect(wrapper.findAll('[role="radio"]')[0]?.attributes('aria-checked')).toBe(
 			'true',

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

@@ -18,6 +18,7 @@ exports[`StarsPicker > renders correctly 1`] = `
     role="radiogroup"
   >
     <div
+      aria-checked="false"
       class="
         align-center
         d-flex
@@ -50,6 +51,7 @@ exports[`StarsPicker > renders correctly 1`] = `
       ></i>
     </div>
     <div
+      aria-checked="false"
       class="
         align-center
         d-flex
@@ -82,6 +84,7 @@ exports[`StarsPicker > renders correctly 1`] = `
       ></i>
     </div>
     <div
+      aria-checked="false"
       class="
         align-center
         d-flex
@@ -114,6 +117,7 @@ exports[`StarsPicker > renders correctly 1`] = `
       ></i>
     </div>
     <div
+      aria-checked="false"
       class="
         align-center
         d-flex
@@ -146,6 +150,7 @@ exports[`StarsPicker > renders correctly 1`] = `
       ></i>
     </div>
     <div
+      aria-checked="false"
       class="
         align-center
         d-flex

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

@@ -1,15 +1,143 @@
-import { Meta, Story } from '@storybook/addon-docs';
-import * as RatingPickerStories from '../RatingPicker.stories.ts';
+import { Meta, Primary } from '@storybook/addon-docs';
+import * as Stories from '../RatingPicker.stories.ts';
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
 import '@/stories/styles/shared.css';
+import {
+    AccessibilityGuideLayout,
+    CriteriaSection,
+    CriteriaCard,
+    BestPracticesSection,
+    ResourcesSection,
+    DemoSection
+} from '@/stories/accessibility/AccessibilityGuideLayout.mdx';
 
-<Meta of={RatingPickerStories} />
+<Meta of={Stories} />
 
-<div className="header">
-  <h1>Accessibilité</h1>
+<AccessibilityGuideLayout
+    componentName="RatingPicker"
+    iconSrc={AccessibilityIcon}
+>
+
+<div class="mt-2">
+    <p>
+        Rapport d’audit manuel : <a href="/audits/RatingPicker.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/pull/1159"
+            target="_blank"
+            style={{ color:'#0C41BD' }}
+        >#1159</a>
+        )
+    </p>
 </div>
 
+<CriteriaSection>
+    <CriteriaCard icon="🎯" title="Choisir une seule note">
+        <ul>
+            <li>Le composant permet de sélectionner <strong>une seule valeur</strong> (comme une note).</li>
+            <li>On recommande d’utiliser un <code>fieldset</code> avec un <code>legend</code> pour donner le contexte.</li>
+            <li>Le comportement attendu est celui d’un <strong>groupe de boutons radio</strong>.</li>
+            <li>Le libellé doit être clair, par exemple : <code>Êtes-vous satisfait ?</code>.</li>
+            <li>Éviter les structures trop complexes qui rendent le composant difficile à comprendre (surtout pour les lecteurs d’écran).</li>
+        </ul>
+    </CriteriaCard>
 
-<div class="mt-2">
-<p>Rapport d’audit manuel : <a href="/audits/RatingPicker.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/910" target="_blank" style={{color:'#0C41BD'}}>issue #910</a>)</p>
-	</div>
+    <CriteriaCard icon="⌨️" title="Navigation au clavier">
+        <ul>
+            <li>Le composant doit être utilisable <strong>entièrement au clavier</strong>.</li>
+            <li>On doit pouvoir se déplacer entre les notes facilement.</li>
+            <li>Les flèches du clavier sont attendues pour naviguer entre les options.</li>
+            <li>Quand une note est sélectionnée, cela doit être clairement annoncé.</li>
+            <li>Si la note ne peut être choisie qu’une seule fois, il faut le préciser à l’utilisateur.</li>
+        </ul>
+    </CriteriaCard>
+
+    <CriteriaCard icon="🗣️" title="Message après la sélection">
+        <ul>
+            <li>Après avoir choisi une note, un message s’affiche (ex : <code>Merci pour votre réponse</code>).</li>
+            <li>Ce message doit être annoncé automatiquement, sans déplacer le focus.</li>
+            <li>On utilise pour ça <code>role="status"</code>.</li>
+            <li>Ne pas utiliser <code>role="alert"</code> pour ce type de message.</li>
+        </ul>
+    </CriteriaCard>
+
+    <CriteriaCard icon="📝" title="Champ de commentaire">
+        <ul>
+            <li>Un champ texte peut apparaître selon la note choisie.</li>
+            <li>Ce champ doit avoir un <strong>label clair</strong> (ex : <code>Pouvez-vous nous en dire plus ?</code>).</li>
+            <li>Le label doit être visible et bien associé au champ.</li>
+            <li>Le champ ne doit exister que quand il est utile (pas caché mais toujours présent pour les lecteurs d’écran).</li>
+        </ul>
+    </CriteriaCard>
+
+    <CriteriaCard icon="🎨" title="Focus et visibilité">
+        <ul>
+            <li>Quand on navigue au clavier, le focus doit être <strong>bien visible</strong>.</li>
+            <li>Attention au contraste : le focus doit ressortir clairement.</li>
+            <li>Ne pas confondre visuellement un élément sélectionné et un élément en focus.</li>
+        </ul>
+    </CriteriaCard>
+
+    <CriteriaCard icon="🖼️" title="Icônes décoratives">
+        <ul>
+            <li>Les icônes (étoiles, emojis, etc.) sont souvent décoratives.</li>
+            <li>Elles ne doivent pas être lues par les lecteurs d’écran si elles n’apportent pas d’info.</li>
+            <li>Attention à ne pas mélanger <code>aria-hidden</code> avec un <code>role="img"</code>.</li>
+        </ul>
+    </CriteriaCard>
+
+    <CriteriaCard icon="🧱" title="Code propre et valide">
+        <ul>
+            <li>Le HTML doit rester simple et valide.</li>
+            <li>Éviter les attributs non autorisés (ex : <code>readonly</code> sur un radio).</li>
+            <li>Une structure claire améliore la compatibilité avec les outils d’accessibilité.</li>
+        </ul>
+    </CriteriaCard>
+</CriteriaSection>
+
+<DemoSection componentName="RatingPicker">
+    <Primary />
+</DemoSection>
+
+<BestPracticesSection>
+    <ul>
+        <li>Utiliser <code>fieldset</code> + <code>legend</code> pour structurer le composant.</li>
+        <li>Garder un comportement de <strong>groupe radio</strong>.</li>
+        <li>Assurer une navigation clavier complète et fluide.</li>
+        <li>Afficher un focus bien visible.</li>
+        <li>Masquer correctement les éléments décoratifs.</li>
+        <li>Utiliser <code>role="status"</code> pour le message de confirmation.</li>
+        <li>Ajouter un label clair pour le champ de commentaire.</li>
+        <li>Rester simple : moins de complexité = meilleure accessibilité.</li>
+    </ul>
+</BestPracticesSection>
+
+<ResourcesSection>
+    <ul>
+        <li>
+            <a
+                href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/"
+                target="_blank"
+                style={{ color: '#0C41BD' }}
+            >RGAA 4.1.2 – Critères et tests</a>
+        </li>
+        <li>
+            <a
+                href="https://www.accede-web.com/notices/html-et-css/formulaires/regrouper-et-titrer-les-champs-de-meme-nature-avec-fieldset-et-legend/"
+                target="_blank"
+                style={{ color: '#0C41BD' }}
+            >AcceDe Web – fieldset et legend</a>
+        </li>
+        <li>
+            <a
+                href="https://www.accede-web.com/notices/interface-riche/message-de-notification/"
+                target="_blank"
+                style={{ color: '#0C41BD' }}
+            >AcceDe Web – Messages de notification</a>
+        </li>
+    </ul>
+</ResourcesSection>
+
+</AccessibilityGuideLayout>

package/src/components/RatingPicker/tests/RatingPicker.a11y.spect.ts

@@ -0,0 +1,123 @@
+// @vitest-environment jsdom
+
+import { describe, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { axe } from 'vitest-axe'
+
+import { assertNoA11yViolations } from '@tests/unit/accessibility/axeUtils'
+import RatingPicker from '../RatingPicker.vue'
+import { RatingEnum } from '../Rating'
+
+describe('RatingPicker – accessibility (axe)', () => {
+	it('has no obvious axe violations with emotion picker and fieldset label', async () => {
+		const wrapper = mount(RatingPicker, {
+			props: {
+				type: RatingEnum.EMOTION,
+				label: 'Êtes-vous satisfait de votre expérience ?',
+				itemLabels: ['Pas satisfait', 'Moyen', 'Satisfait'],
+				modelValue: -1,
+			},
+			global: {
+				stubs: {
+					EmotionPicker: {
+						template: `
+							<fieldset>
+								<legend><slot name="label" /></legend>
+								<input id="e1" type="radio" name="emotion" />
+								<label for="e1">Option</label>
+							</fieldset>
+						`,
+					},
+					StarsPicker: true,
+					NumberPicker: true,
+					SyAlert: {
+						template: `<div role="status"><slot /></div>`,
+					},
+				},
+			},
+			attachTo: document.body,
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'RatingPicker – emotion picker with label', {
+			ignoreRules: ['region'],
+		})
+
+		wrapper.unmount()
+	})
+
+	it('has no obvious axe violations when free text is displayed for a low stars rating', async () => {
+		const wrapper = mount(RatingPicker, {
+			props: {
+				type: RatingEnum.STARS,
+				label: 'Comment évaluez-vous votre expérience ?',
+				modelValue: 2,
+				enableFreeText: true,
+				freeTextLabel: 'Pouvez-vous nous en dire plus ?',
+				freeTextValue: 'Le parcours était peu clair.',
+			},
+			global: {
+				stubs: {
+					EmotionPicker: true,
+					StarsPicker: {
+						template: `
+							<fieldset>
+								<legend><slot name="label" /></legend>
+								<input id="s1" type="radio" name="stars" />
+								<label for="s1">1 étoile</label>
+							</fieldset>
+						`,
+					},
+					NumberPicker: true,
+					SyAlert: {
+						template: `<div role="status"><slot /></div>`,
+					},
+				},
+			},
+			attachTo: document.body,
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'RatingPicker – stars picker with free text', {
+			ignoreRules: ['region'],
+		})
+
+		wrapper.unmount()
+	})
+
+	it('has no obvious axe violations with number picker', async () => {
+		const wrapper = mount(RatingPicker, {
+			props: {
+				type: RatingEnum.NUMBER,
+				label: 'Notez votre expérience de 1 à 10',
+				modelValue: 5,
+			},
+			global: {
+				stubs: {
+					EmotionPicker: true,
+					StarsPicker: true,
+					NumberPicker: {
+						template: `
+						<fieldset>
+							<legend><slot name="label" /></legend>
+							<input id="n1" type="radio" name="number" />
+							<label for="n1">1</label>
+						</fieldset>
+					`,
+					},
+					SyAlert: {
+						template: `<div role="status"><slot /></div>`,
+					},
+				},
+			},
+			attachTo: document.body,
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'RatingPicker – number picker', {
+			ignoreRules: ['region'],
+		})
+
+		wrapper.unmount()
+	})
+})

package/src/components/RatingPicker/tests/RatingPicker.spec.ts

@@ -51,6 +51,7 @@ describe('RatingPicker', () => {
 		const wrapper = mount(RatingPicker, {
 			stubs: {
 				StarsPicker: {
+					name: 'StarsPicker',
 					template: '<div />',
 				},
 			},
@@ -62,8 +63,8 @@ describe('RatingPicker', () => {
 			},
 		})
 
-		wrapper.findComponent(StarsPicker).vm.$emit('update:modelValue', 3)
-		await wrapper.setProps({ modelValue: 3 })
+		wrapper.findComponent(StarsPicker).vm.$emit('update:modelValue', 2)
+		await wrapper.setProps({ modelValue: 2 })
 
 		expect(wrapper.text()).toContain(locales.thanks)
 		expect(wrapper.text()).toContain('Additional content')