@cnamts/synapse 1.0.9 → 1.0.11

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

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

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-	import { type PropType, computed, onMounted } from 'vue'
+	import { type PropType, computed, onMounted, ref } from 'vue'
 	import { RatingEnum, useRating } from '../Rating'
 	import { locales } from './locales'
 	import { propValidator } from '@/utils/propValidator'
@@ -10,6 +10,7 @@
 	} from '@mdi/js'
 
 	import { useDisplay } from 'vuetify'
+	import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
 
 	const { smAndDown } = useDisplay()
 	const isMobile = computed(() => smAndDown.value)
@@ -47,10 +48,10 @@
 	})
 
 	const emit = defineEmits(['update:modelValue'])
-	const { hasAnswered, emitInputEvent } = useRating(props, emit)
+	const { internalValue, hasAnswered, emitInputEvent } = useRating(props, emit)
 
 	const isActive = (index: number) => {
-		return index === props.modelValue - 1
+		return index === internalValue.value
 	}
 
 	const getIcon = (index: number) => {
@@ -80,111 +81,150 @@
 		return props.itemLabels[value]
 	}
 
-	onMounted(() => {
-		const hiddenInputs = document.querySelectorAll('.v-rating__hidden')
-		hiddenInputs.forEach((input) => {
-			(input as HTMLElement).setAttribute('aria-hidden', 'true')
+	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()
+	}
+
+	function setFocus(index: number) {
+		ratingElement.value.forEach((el, i) => {
+			if (i === index) {
+				el?.setAttribute('tabindex', '0')
+			}
+			else {
+				el?.setAttribute('tabindex', '-1')
+			}
 		})
+	}
+
+	onMounted(() => {
+		ratingElement.value[0]?.setAttribute('tabindex', '0')
+		for (let i = 1; i < ratingElement.value.length; i++) {
+			ratingElement.value[i]?.setAttribute('tabindex', '-1')
+		}
 	})
+
 </script>
 
 <template>
-	<fieldset class="vd-emotion-picker">
+	<fieldset
+		class="sy-emotion-picker"
+		:aria-label="internalValue === -1 ? locales.toValidate : locales.validated"
+	>
 		<legend class="text-h6 mb-6">
 			<slot name="label">
 				{{ props.label }}
 			</slot>
 		</legend>
 
-		<VRating
-			:model-value="props.modelValue"
-			:length="props.length"
-			:readonly="props.readonly"
-			class="max-width-none mx-n1 mx-sm-n2"
-			@update:model-value="(value) => emit('update:modelValue', value)"
+		<div
+			role="radiogroup"
+			class="d-flex max-width-none mx-n1 mx-sm-n2"
 		>
-			<template #item="{ index }">
-				<VBtn
-					:disabled="props.readonly || hasAnswered"
-					:title="getEmotionLabel(index)"
-					:aria-pressed="isActive(index).toString()"
-					:class="[getColor(index), { 'v-btn--active': isActive(index) }]"
-					:min-height="btnSize"
-					:min-width="btnSize"
-					variant="text"
-					class="rounded-lg px-1 px-sm-4 mx-1 mx-sm-2"
-					@click="emitInputEvent(index + 1)"
+			<div
+				v-for="index in props.length"
+				:key="index"
+				ref="ratingElement"
+				v-ripple="!(props.readonly || hasAnswered)"
+				role="radio"
+				:aria-disabled="(props.readonly || hasAnswered) ? 'true' : undefined"
+				:aria-checked="isActive(index) ? 'true' : undefined"
+				:class="[getColor(index - 1), { 'sy-emotion-picker__item--active': isActive(index) }]"
+				:style="{
+					'min-height': btnSize,
+					'min-width': btnSize
+				}"
+				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)"
+			>
+				<SyIcon
+					:icon="getIcon(index - 1)"
+					size="40"
+					color="currentColor"
+					class="pa-0"
+					decorative
+				/>
+
+				<span
+					v-if="getEmotionLabel(index - 1)"
+					class="sy-emotion-picker__item-title mt-1"
 				>
-					<VIcon
-						size="40"
-						color="currentColor"
-						class="pa-0"
-					>
-						{{ getIcon(index) }}
-					</VIcon>
-
-					<span
-						v-if="getEmotionLabel(index)"
-						:class="{ 'text-secondary': !isActive(index) }"
-						class="text-subtitle-2 mt-1"
-					>
-						{{ getEmotionLabel(index) }}
-					</span>
-				</VBtn>
-			</template>
-		</VRating>
+					{{ getEmotionLabel(index - 1) }}
+				</span>
+			</div>
+		</div>
 	</fieldset>
 </template>
 
 <style lang="scss" scoped>
 @use '@/assets/tokens';
 
-.vd-emotion-picker {
+.sy-emotion-picker {
+	display: flex;
 	border: 0;
 }
 
-.v-rating .v-btn {
+.sy-emotion-picker__item:not([disabled]) {
+	cursor: pointer;
+}
+
+.sy-emotion-picker__item {
 	transition: 0.2s;
 	border: 1px solid transparent;
 	opacity: 1;
 	background: transparent;
-
-	:deep(.v-btn__content) {
-		flex-direction: column;
-	}
-
-	.text-secondary {
-		color: tokens.$grey-darken-20 !important;
-	}
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-direction: column;
 
 	&.sad {
-		color: tokens.$orange-darken-40 !important;
+		color: tokens.$orange-darken-20 !important;
 	}
 
 	&.neutral {
-		color: tokens.$yellow-darken-40 !important;
+		color: tokens.$yellow-darken-60 !important;
 	}
 
 	&.happy {
-		color: tokens.$turquoise-darken-40 !important;
+		color: tokens.$turquoise-darken-60 !important;
 	}
 
-	&--active.v-btn--disabled .v-icon {
+	&--active.sy-emotion-picker__item--disabled .v-icon {
 		color: currentcolor !important;
 	}
 
-	&:focus,
+	&:focus-visible {
+		outline: 2px solid currentcolor;
+	}
+
 	&--active {
 		border-color: currentcolor !important;
 	}
 
-	&:hover,
+	&--active,
 	&:focus,
-	&--active {
-		:deep(.v-btn__overlay, .v-btn__underlay) {
-			display: none;
-		}
-
+	&:hover {
 		&.sad {
 			background: tokens.$orange-lighten-90;
 		}
@@ -197,9 +237,22 @@
 			background: tokens.$turquoise-lighten-90;
 		}
 	}
+
+	&:hover[disabled='true']:not([aria-checked='true']),
+	&:focus[disabled='true']:not([aria-checked='true']) {
+		background-color: transparent;
+	}
 }
 
-.v-theme--light.v-btn--disabled :deep(.v-icon) {
-	color: tokens.$grey-lighten-20 !important;
+.sy-emotion-picker__item-title {
+	font-weight: 700;
+	font-size: 1rem;
+	line-height: 150%;
+	color: tokens.$colors-text-base;
 }
+
+.sy-emotion-picker__item--active .sy-emotion-picker__item-title {
+	color: currentcolor;
+}
+
 </style>

package/src/components/RatingPicker/EmotionPicker/locales.ts

@@ -1,3 +1,5 @@
 export const locales = {
 	defaultEmotionLabels: ['Pas du tout', 'Moyen', 'Parfait !'],
+	toValidate: 'Ce champ ne sera plus modifiable après saisie',
+	validated: 'Le champ a été complété et n\'est plus modifiable',
 }

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

@@ -1,15 +1,11 @@
 import { describe, it, expect } from 'vitest'
 import { mount } from '@vue/test-utils'
-import { vuetify } from '@tests/unit/setup'
 
 import EmotionPicker from '../EmotionPicker.vue'
 
 describe('EmotionPicker', () => {
 	it('renders correctly', () => {
 		const wrapper = mount(EmotionPicker, {
-			global: {
-				plugins: [vuetify],
-			},
 			propsData: {
 				label: 'Pourriez-vous donner une note ?',
 				itemLabels: ['Pas du tout', 'Peut-être', 'Oui super'],
@@ -25,9 +21,6 @@ describe('EmotionPicker', () => {
 
 	it('renders correctly with only 2 items', () => {
 		const wrapper = mount(EmotionPicker, {
-			global: {
-				plugins: [vuetify],
-			},
 			propsData: {
 				label: 'Pourriez-vous donner une note ?',
 				itemLabels: ['Pas du tout', 'Not used', 'Oui super'],
@@ -47,9 +40,6 @@ describe('EmotionPicker', () => {
 		window.happyDOM.setInnerWidth(600)
 
 		const wrapper = mount(EmotionPicker, {
-			global: {
-				plugins: [vuetify],
-			},
 			propsData: {
 				label: 'Pourriez-vous donner une note ?',
 				itemLabels: ['Pas du tout', 'Peut-être', 'Oui super'],
@@ -62,13 +52,9 @@ describe('EmotionPicker', () => {
 	})
 
 	it('emit the right value when an item is clicked', async () => {
-		const wrapper = mount(EmotionPicker, {
-			global: {
-				plugins: [vuetify],
-			},
-		})
+		const wrapper = mount(EmotionPicker)
 
-		const items = wrapper.findAll('button')
+		const items = wrapper.findAll('[role="radio"]')
 		await items[0].trigger('click')
 		expect(wrapper.emitted('update:modelValue')).toBeTruthy()
 		expect(wrapper.emitted('update:modelValue')?.[0]?.[0]).toBe(1)
@@ -76,29 +62,22 @@ describe('EmotionPicker', () => {
 
 	it('have no labels when no labels are provided', () => {
 		const wrapper = mount(EmotionPicker, {
-			global: {
-				plugins: [vuetify],
-			},
 			propsData: {
 				itemLabels: [],
 			},
 		})
 
-		wrapper.findAll('button').forEach((button) => {
+		wrapper.findAll('[role="radio"]').forEach((button) => {
 			expect(button.text()).toBe('')
 		})
 	})
 
 	it('change the style of the buttons when an item is clicked', async () => {
-		const wrapper = mount(EmotionPicker, {
-			global: {
-				plugins: [vuetify],
-			},
-		})
+		const wrapper = mount(EmotionPicker)
 
-		const items = wrapper.findAll('button')
+		const items = wrapper.findAll('[role="radio"]')
 
 		await wrapper.setProps({ modelValue: 1 })
-		expect(items[0].classes()).toContain('v-btn--active')
+		expect(items[0].classes()).toContain('sy-emotion-picker__item--active')
 	})
 })