@cnamts/synapse 1.0.9 → 1.0.10

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

@@ -18,10 +18,9 @@ const meta = {
 	argTypes: {
 		type: {
 			description: 'Le type de notation.',
-			control: {
-				type: 'select',
-				options: ['emotion', 'number', 'stars'],
-			},
+			control: 'select',
+			options: ['emotion', 'number', 'stars'],
+			default: 'emotion',
 			table: {
 				type: {
 					summary: 'emotion, number, stars',
@@ -253,7 +252,7 @@ const ratingNumber = ref(-1)
 
 export const Stars: Story = {
 	args: {
-		'type': 'star',
+		'type': 'stars',
 		'label': 'Êtes-vous satisfait de ce service ?',
 		'readonly': false,
 		'hideAlert': false,
@@ -280,7 +279,7 @@ export const Stars: Story = {
 	<RatingPicker
 		v-model="ratingStar"
 		label="Êtes-vous satisfait de ce service ?"
-		type="star"
+		type="stars"
 	/>
 </template>
         `,

package/src/components/RatingPicker/RatingPicker.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-	import { type PropType, computed, ref } from 'vue'
+	import { type PropType, computed, ref, watch } from 'vue'
 
 	import EmotionPicker from './EmotionPicker/EmotionPicker.vue'
 	import NumberPicker from './NumberPicker/NumberPicker.vue'
@@ -85,10 +85,14 @@
 		showAdditionalContent(value)
 		emit('update:modelValue', value)
 	}
+
+	watch(() => props.modelValue, (newVal) => {
+		internalValue.value = newVal
+	}, { immediate: true })
 </script>
 
 <template>
-	<div class="vd-rating-picker">
+	<div class="sy-rating-picker">
 		<component
 			:is="ratingComponent"
 			:model-value="internalValue"
@@ -111,6 +115,7 @@
 				:class="{ 'mb-4': displayAdditionalContent }"
 				outlined
 				:type="alertTypeEnumRef.SUCCESS"
+				role="status"
 				class="mt-4"
 			>
 				{{ locales.thanks }}

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

@@ -2,6 +2,8 @@
 	import { ref, type PropType, onMounted } 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'
 
 	const props = defineProps({
 		label: {
@@ -30,74 +32,108 @@
 	const hoverIndex = ref<number | null>(-1)
 
 	function isActive(index: number): boolean {
-		return props.modelValue - 1 === index
+		return props.modelValue === index
 	}
 
 	function isFilled(index: number): boolean {
-		const isHovered = hoverIndex.value !== null && hoverIndex.value >= index
-		const isActive = props.modelValue - 1 >= index
-		return isHovered || isActive
+		const isHovered = hoverIndex.value !== null && hoverIndex.value >= index && !props.readonly
+		const isActive = props.modelValue >= index
+		return (isHovered && !hasAnswered.value) || isActive
 	}
 
-	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 : 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()
+	}
+
+	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-stars-picker">
+	<fieldset class="sy-stars-picker">
 		<legend class="text-h6 mb-6">
 			<slot name="label">
 				{{ props.label }}
 			</slot>
 		</legend>
 
-		<VRating
-			:model-value="props.modelValue"
-			:length="props.length"
-			:readonly="props.readonly || hasAnswered"
-			class="d-flex flex-wrap max-width-none mx-n3"
-			@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 }">
-				<button
-					:disabled="props.readonly"
-					:aria-pressed="isActive(index)"
-					:aria-label="`${index + 1} star`"
-					@mouseover="hoverIndex = index"
-					@focus="hoverIndex = index"
-					@mouseleave="hoverIndex = -1"
-					@blur="hoverIndex = -1"
-					@click="emitInputEvent(index + 1)"
-				>
-					<VIcon
-						:class="
-							isFilled(index)
-								? 'text-primary'
-								: 'text-blue-lighten'
-						"
-						size="36px"
-						class="py-0 px-2"
-					>
-						{{ isFilled(index) ? starIcon : starOutlineIcon }}
-					</VIcon>
-				</button>
-			</template>
-		</VRating>
+			<div
+				v-for="index in props.length"
+				:key="index"
+				ref="ratingElement"
+				class="sy-stars-picker__item d-flex align-center justify-center"
+				role="radio"
+				:aria-disabled="(props.readonly || hasAnswered) ? 'true' : undefined"
+				:aria-checked="isActive(index) ? 'true' : undefined"
+				@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)"
+			>
+				<span class="d-sr-only">{{ locales.etoiles(index) }}</span>
+				<SyIcon
+					:icon="isFilled(index) ? starIcon : starOutlineIcon"
+					:class="
+						isFilled(index)
+							? 'text-primary'
+							: 'text-blue-lighten'
+					"
+					size="36px"
+					class="py-0 px-2"
+					decorative
+				/>
+			</div>
+		</div>
 	</fieldset>
 </template>
 
 <style lang="scss" scoped>
 @use '@/assets/tokens';
 
-.vd-stars-picker {
+.sy-stars-picker {
 	border: 0;
 }
 
-.v-rating .v-icon {
+.sy-stars-picker__item:not([disabled]) {
+	cursor: pointer;
+}
+
+.sy-stars-picker__item .v-icon {
 	width: 52px !important;
 	height: 36px !important;
 

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

@@ -27,7 +27,7 @@ describe('StarsPicker', () => {
 			},
 		})
 
-		await wrapper.findAll('button')!.at(3)!.trigger('click')
+		await wrapper.findAll('[role="radio"]')!.at(3)!.trigger('click')
 
 		expect(wrapper.emitted('update:modelValue')![0]).toEqual([4])
 	})
@@ -43,14 +43,14 @@ describe('StarsPicker', () => {
 		})
 
 		await wrapper.setProps({ modelValue: 4 })
-		expect(wrapper.findAll('button')[3].attributes('aria-pressed')).toBe(
+		expect(wrapper.findAll('[role="radio"]')[3].attributes('aria-checked')).toBe(
 			'true',
 		)
 		await wrapper.setProps({ modelValue: 1 })
-		expect(wrapper.findAll('button')[3].attributes('aria-pressed')).toBe(
-			'false',
+		expect(wrapper.findAll('[role="radio"]')[3].attributes('aria-checked')).toBe(
+			undefined,
 		)
-		expect(wrapper.findAll('button')[0].attributes('aria-pressed')).toBe(
+		expect(wrapper.findAll('[role="radio"]')[0].attributes('aria-checked')).toBe(
 			'true',
 		)
 	})
@@ -62,7 +62,7 @@ describe('StarsPicker', () => {
 			},
 		})
 
-		const buttons = wrapper.findAll('button')
+		const buttons = wrapper.findAll('[role="radio"]')
 		await buttons.at(3)!.trigger('mouseover')
 
 		const icon = buttons!.at(3)!.findComponent(VIcon)
@@ -81,7 +81,7 @@ describe('StarsPicker', () => {
 			},
 		})
 
-		const buttons = wrapper.findAll('button')
+		const buttons = wrapper.findAll('[role="radio"]')
 		await buttons.at(3)!.trigger('focus')
 
 		const icon = buttons!.at(3)!.findComponent(VIcon)