@cnamts/synapse 1.0.24 → 1.0.26

package/src/components/RatingPicker/NumberPicker/NumberPicker.vue

@@ -1,13 +1,12 @@
 <script lang="ts" setup>
-	import { computed, onMounted, ref } from 'vue'
-	import { RatingEnum, useRating } from '../Rating'
+	import { computed, onMounted, toRef } from 'vue'
 	import { locales } from './locales'
 	import type { PropType } from 'vue'
 	import type { ItemType } from '@/components/Customs/Selects/SySelect/SySelect.vue'
-
+	import { useRatingFocus } from '../useRatingFocus'
 	import SySelect from '@/components/Customs/Selects/SySelect/SySelect.vue'
-
 	import { useDisplay } from 'vuetify'
+	import { RatingEnum, useRating } from '../Rating'
 
 	interface SelectItem extends ItemType {
 		text: string
@@ -44,52 +43,48 @@
 	const { hasAnswered, emitInputEvent } = useRating(props, emit)
 
 	const selectItems = computed<SelectItem[]>(() => {
-		return [...Array(props.length)].map((_, index) => ({
+		const length = props.length ?? 10
+
+		return [...Array(length)].map((_, index) => ({
 			text: `${index + 1}`,
 			value: index + 1,
 		}))
 	})
 
+	onMounted(() => {
+		if (!isMobile.value) {
+			initFocus()
+		}
+	})
+
 	const shouldDisplayLabels = computed(() => props.itemLabels.length === 2)
 
-	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]
-		nextElem?.focus()
-	}
+	const {
+		ratingElement,
+		initFocus,
+		selectAndFocus,
+		focusNextElement,
+		focusPrevElement,
+		focus,
+	} = useRatingFocus({
+		length: toRef(props, 'length'),
+		modelValue: toRef(props, 'modelValue'),
+		selectValue: emitInputEvent,
+		wrap: true,
+	})
 
-	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]
-		prevElem?.focus()
-	}
+	defineExpose({
+		focus,
+	})
 
-	function setFocus(index: number) {
-		ratingElement.value.forEach((el, i) => {
-			if (i === index) {
-				el.setAttribute('tabindex', '0')
-				el.focus()
-			}
-			else {
-				el.setAttribute('tabindex', '-1')
-			}
-		})
+	if (!isMobile.value) {
+		initFocus()
 	}
-
-	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="sy-number-picker">
-		<legend class="d-sr-only">
+		<legend :class="isMobile ? 'd-sr-only' : 'text-h6 mb-6'">
 			<slot name="label">
 				{{ props.label }}
 			</slot>
@@ -103,11 +98,6 @@
 			@update:model-value="(value) => emit('update:modelValue', value)"
 		/>
 		<template v-else>
-			<legend class="text-h6 mb-6">
-				<slot name="label">
-					{{ props.label }}
-				</slot>
-			</legend>
 			<div
 				v-if="!hasAnswered"
 				class="d-inline-block"
@@ -122,19 +112,22 @@
 						ref="ratingElement"
 						v-ripple="!(props.readonly || hasAnswered)"
 						role="radio"
-						:aria-checked="props.modelValue === index ? 'true' : undefined"
-						:aria-label="locales.ariaLabel(index, props.length)"
+						:tabindex="-1"
+						:aria-checked="props.modelValue === index ? 'true' : 'false'"
 						class="sy-number-picker__item text-body-2 pa-0"
 						:aria-disabled="(props.readonly || hasAnswered) ? 'true' : undefined"
-						@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)"
 					>
 						{{ index }}
+						<span class="d-sr-only">
+							{{ locales.ariaLabel(index, props.length) }}
+						</span>
 					</div>
 				</div>
 				<div
@@ -159,15 +152,17 @@
 			</div>
 			<div
 				v-else
-				:aria-label="locales.ariaLabel(props.modelValue, props.length)"
 				class="mb-0 d-flex align-center"
 			>
+				<span class="d-sr-only">
+					{{ locales.ariaLabel(props.modelValue, props.length) }}
+				</span>
 				<div
 					class="sy-btn-answer text-body-2 mr-1 pa-0"
 				>
 					{{ props.modelValue }}
 				</div>
-				<span>
+				<span aria-hidden="true">
 					/ {{ props.length }}
 				</span>
 			</div>
@@ -206,7 +201,7 @@
 	user-select: none;
 }
 
-.sy-number-picker__item[disabled] {
+.sy-number-picker__item[aria-disabled='true'] {
 	pointer-events: none;
 	opacity: 0.26;
 

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

@@ -15,7 +15,8 @@ describe('NumberPicker', () => {
 
 		expect(btns).toHaveLength(10)
 		btns.forEach((btn, i) => {
-			expect(btn.text()).toBe((i + 1).toString())
+			expect(btn.text()).toContain((i + 1).toString())
+			expect(btn.attributes('aria-checked')).toBe('false')
 		})
 		expect(wrapper.html()).toMatchSnapshot()
 	})

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

@@ -2,9 +2,6 @@
 
 exports[`NumberPicker > renders correctly 1`] = `
 <fieldset class="sy-number-picker">
-  <legend class="d-sr-only">
-    Pourriez-vous donner une note ?
-  </legend>
   <legend class="
     mb-6
     text-h6
@@ -22,7 +19,7 @@ exports[`NumberPicker > renders correctly 1`] = `
       role="radiogroup"
     >
       <div
-        aria-label="Note de 1 sur 10."
+        aria-checked="false"
         class="
           pa-0
           sy-number-picker__item
@@ -32,9 +29,12 @@ exports[`NumberPicker > renders correctly 1`] = `
         tabindex="0"
       >
         1
+        <span class="d-sr-only">
+          Note de 1 sur 10.
+        </span>
       </div>
       <div
-        aria-label="Note de 2 sur 10."
+        aria-checked="false"
         class="
           pa-0
           sy-number-picker__item
@@ -44,9 +44,12 @@ exports[`NumberPicker > renders correctly 1`] = `
         tabindex="-1"
       >
         2
+        <span class="d-sr-only">
+          Note de 2 sur 10.
+        </span>
       </div>
       <div
-        aria-label="Note de 3 sur 10."
+        aria-checked="false"
         class="
           pa-0
           sy-number-picker__item
@@ -56,9 +59,12 @@ exports[`NumberPicker > renders correctly 1`] = `
         tabindex="-1"
       >
         3
+        <span class="d-sr-only">
+          Note de 3 sur 10.
+        </span>
       </div>
       <div
-        aria-label="Note de 4 sur 10."
+        aria-checked="false"
         class="
           pa-0
           sy-number-picker__item
@@ -68,9 +74,12 @@ exports[`NumberPicker > renders correctly 1`] = `
         tabindex="-1"
       >
         4
+        <span class="d-sr-only">
+          Note de 4 sur 10.
+        </span>
       </div>
       <div
-        aria-label="Note de 5 sur 10."
+        aria-checked="false"
         class="
           pa-0
           sy-number-picker__item
@@ -80,9 +89,12 @@ exports[`NumberPicker > renders correctly 1`] = `
         tabindex="-1"
       >
         5
+        <span class="d-sr-only">
+          Note de 5 sur 10.
+        </span>
       </div>
       <div
-        aria-label="Note de 6 sur 10."
+        aria-checked="false"
         class="
           pa-0
           sy-number-picker__item
@@ -92,9 +104,12 @@ exports[`NumberPicker > renders correctly 1`] = `
         tabindex="-1"
       >
         6
+        <span class="d-sr-only">
+          Note de 6 sur 10.
+        </span>
       </div>
       <div
-        aria-label="Note de 7 sur 10."
+        aria-checked="false"
         class="
           pa-0
           sy-number-picker__item
@@ -104,9 +119,12 @@ exports[`NumberPicker > renders correctly 1`] = `
         tabindex="-1"
       >
         7
+        <span class="d-sr-only">
+          Note de 7 sur 10.
+        </span>
       </div>
       <div
-        aria-label="Note de 8 sur 10."
+        aria-checked="false"
         class="
           pa-0
           sy-number-picker__item
@@ -116,9 +134,12 @@ exports[`NumberPicker > renders correctly 1`] = `
         tabindex="-1"
       >
         8
+        <span class="d-sr-only">
+          Note de 8 sur 10.
+        </span>
       </div>
       <div
-        aria-label="Note de 9 sur 10."
+        aria-checked="false"
         class="
           pa-0
           sy-number-picker__item
@@ -128,9 +149,12 @@ exports[`NumberPicker > renders correctly 1`] = `
         tabindex="-1"
       >
         9
+        <span class="d-sr-only">
+          Note de 9 sur 10.
+        </span>
       </div>
       <div
-        aria-label="Note de 10 sur 10."
+        aria-checked="false"
         class="
           pa-0
           sy-number-picker__item
@@ -140,6 +164,9 @@ exports[`NumberPicker > renders correctly 1`] = `
         tabindex="-1"
       >
         10
+        <span class="d-sr-only">
+          Note de 10 sur 10.
+        </span>
       </div>
     </div>
     <!-- v-if -->

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

@@ -1,8 +1,8 @@
 import type { StoryObj, Meta } from '@storybook/vue3'
 import RatingPicker from './RatingPicker.vue'
-import SySelect from '@/components/Customs/Selects/SySelect/SySelect.vue'
 import { VBtn, VSpacer } from 'vuetify/components'
 import { fn } from '@storybook/test'
+import SyTextArea from '../SyTextArea/SyTextArea.vue'
 
 const meta = {
 	title: 'Composants/Feedback/RatingPicker',
@@ -100,6 +100,16 @@ const meta = {
 				},
 			},
 		},
+		freeTextLabel: {
+			description: 'Le libellé du champ de texte libre. Ajouter aria-label ou aria-labelledby au <textarea> : <textarea :aria-label="props.freeTextLabel" …> . Ce champ doit être utilisé en slot pour être pris en compte. Voir l’exemple de la story "DefaultSlot".',
+			control: 'text',
+			default: null,
+			table: {
+				type: {
+					summary: 'string | null',
+				},
+			},
+		},
 	},
 } satisfies Meta<typeof RatingPicker>
 
@@ -132,9 +142,6 @@ export const Default: Story = {
 		}
 	},
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -185,9 +192,6 @@ export const TwoEmotions: Story = {
 		}
 	},
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -238,9 +242,6 @@ export const Numbers: Story = {
 		}
 	},
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -290,9 +291,6 @@ export const Stars: Story = {
 		}
 	},
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -343,9 +341,6 @@ export const ReadOnly: Story = {
 		}
 	},
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -397,9 +392,6 @@ export const HideAlert: Story = {
 		}
 	},
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -436,54 +428,42 @@ export const DefaultSlot: Story = {
 		'readonly': false,
 		'twoEmotions': false,
 		'hideAlert': false,
-		'modelValue': -1,
-		'onUpdate:modelValue': fn(),
-	},
+		'modelValue': 2,
+		'freeTextLabel': 'Pouvez-vous nous en dire plus ?',
+		'onUpdate:modelValue': fn() },
 	render: (args) => {
 		return {
-			components: { RatingPicker, SySelect, VBtn, VSpacer },
+			components: { RatingPicker, VBtn, VSpacer, SyTextArea },
 			setup() {
-				const items = [
-					{
-						text: 'Via une recherche internet',
-						value: 'internet',
-					},
-					{
-						text: 'Via un professionnel de santé',
-						value: 'professional',
-					},
-					{
-						text: 'Via un ami',
-						value: 'friend',
-					},
-				]
-				return { args, items }
+				return { args }
 			},
 			template: `
-                <RatingPicker v-bind="args" v-model="args.modelValue">
-					<SySelect
-						:items="items"
-						label="Comment avez-vous connu ce service ?"
-						class="mt-8"
-					/>
-					<div class="d-flex">
-						<VSpacer/>
+				<RatingPicker v-bind="args" v-model="args.modelValue">
+					<div class="mt-8">
+
+						<SyTextArea
+							id="rating-picker-comment"
+							class="w-100 pa-3"
+							:label="args.freeTextLabel"
+							rows="4"
+						/>
 
-						<VBtn
-							right
-							color="primary"
-						>
-							Terminé
-						</VBtn>
+						<div class="d-flex mt-4">
+							<VSpacer />
+
+							<VBtn
+								right
+								color="primary"
+							>
+								Terminé
+							</VBtn>
+						</div>
 					</div>
 				</RatingPicker>
-            `,
+			`,
 		}
 	},
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -493,52 +473,49 @@ export const DefaultSlot: Story = {
 		v-model="ratingEmotion"
 		label="Êtes-vous satisfait de ce service ?"
 		type="emotion"
+		:free-text-label="'Pouvez-vous nous en dire plus ?'"
 	>
-		<SySelect
-			:items="items"
-			label="Comment avez-vous connu ce service ?"
-			class="mt-8"
-		/>
-		<div class="d-flex">
-			<VSpacer/>
-
-			<VBtn
-				right
-				color="primary"
+		<div class="mt-8">
+			<label
+				for="rating-picker-comment"
+				class="d-block mb-2"
 			>
-				Terminé
-			</VBtn>
+				{{ freeTextLabel }}
+			</label>
+
+			<textarea
+				id="rating-picker-comment"
+				class="w-100 pa-3"
+				rows="4"
+			/>
+
+			<div class="d-flex mt-4">
+				<VSpacer />
+
+				<VBtn
+					right
+					color="primary"
+				>
+					Terminé
+				</VBtn>
+			</div>
 		</div>
 	</RatingPicker>
 </template>
-        `,
+				`,
 			},
 			{
 				name: 'Script',
 				code: `
 <script setup lang="ts">
 import { ref } from 'vue'
-import { RatingPicker, SySelect } from '@cnamts/synapse'
+import { RatingPicker } from '@cnamts/synapse'
 import { VBtn, VSpacer } from 'vuetify/components'
 
-const ratingEmotion = ref(-1)
-
-const items = [
-	{
-		text: 'Via une recherche internet',
-		value: 'internet'
-	},
-	{
-		text: 'Via un professionnel de santé',
-		value: 'professional'
-	},
-	{
-		text: 'Via un ami',
-		value: 'friend'
-	}
-]
+const ratingEmotion = ref(2)
+const freeTextLabel = 'Pouvez-vous nous en dire plus ?'
 </script>
-        `,
+				`,
 			},
 		],
 	},