@cnamts/synapse 1.0.25 → 1.0.27

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

@@ -3,7 +3,6 @@
 exports[`RatingPicker > renders correctly 1`] = `
 <div class="sy-rating-picker">
   <fieldset class="sy-number-picker">
-    <legend class="d-sr-only"></legend>
     <legend class="
       mb-6
       text-h6
@@ -19,7 +18,7 @@ exports[`RatingPicker > renders correctly 1`] = `
         role="radiogroup"
       >
         <div
-          aria-label="Note de 1 sur 10."
+          aria-checked="false"
           class="
             pa-0
             sy-number-picker__item
@@ -29,9 +28,12 @@ exports[`RatingPicker > 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
@@ -41,9 +43,12 @@ exports[`RatingPicker > 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
@@ -53,9 +58,12 @@ exports[`RatingPicker > 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
@@ -65,9 +73,12 @@ exports[`RatingPicker > 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
@@ -77,9 +88,12 @@ exports[`RatingPicker > 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
@@ -89,9 +103,12 @@ exports[`RatingPicker > 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
@@ -101,9 +118,12 @@ exports[`RatingPicker > 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
@@ -113,9 +133,12 @@ exports[`RatingPicker > 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
@@ -125,9 +148,12 @@ exports[`RatingPicker > 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
@@ -137,6 +163,9 @@ exports[`RatingPicker > 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/useRatingFocus.ts

@@ -0,0 +1,97 @@
+import { nextTick, ref, watch, type Ref } from 'vue'
+
+type SelectValueFn = (value: number) => void
+
+interface UseRatingFocusOptions {
+	length: Ref<number>
+	modelValue: Ref<number>
+	selectValue: SelectValueFn
+	wrap?: boolean
+}
+
+export function useRatingFocus({
+	length,
+	modelValue,
+	selectValue,
+	wrap = true,
+}: UseRatingFocusOptions) {
+	const ratingElement = ref<HTMLElement[]>([])
+
+	function setFocus(index: number) {
+		ratingElement.value.forEach((el, i) => {
+			if (!el) return
+			el.setAttribute('tabindex', i === index ? '0' : '-1')
+		})
+
+		ratingElement.value[index]?.focus()
+	}
+
+	function getCurrentIndex() {
+		if (modelValue.value >= 1 && modelValue.value <= length.value) {
+			return modelValue.value - 1
+		}
+		return 0
+	}
+
+	function initFocus() {
+		setFocus(getCurrentIndex())
+	}
+
+	function selectAndFocus(index: number) {
+		const value = index + 1
+		selectValue(value)
+		nextTick(() => setFocus(index))
+	}
+
+	function focusNextElement(index: number) {
+		let nextIndex = index + 1
+
+		if (wrap) {
+			if (nextIndex >= length.value) {
+				nextIndex = 0
+			}
+		}
+		else {
+			nextIndex = Math.min(nextIndex, length.value - 1)
+		}
+
+		setFocus(nextIndex)
+	}
+
+	function focusPrevElement(index: number) {
+		let prevIndex = index - 1
+
+		if (wrap) {
+			if (prevIndex < 0) {
+				prevIndex = length.value - 1
+			}
+		}
+		else {
+			prevIndex = Math.max(prevIndex, 0)
+		}
+
+		setFocus(prevIndex)
+	}
+
+	function focus() {
+		nextTick(() => {
+			setFocus(getCurrentIndex())
+		})
+	}
+
+	watch(modelValue, () => {
+		nextTick(() => {
+			setFocus(getCurrentIndex())
+		})
+	})
+
+	return {
+		ratingElement,
+		setFocus,
+		initFocus,
+		selectAndFocus,
+		focusNextElement,
+		focusPrevElement,
+		focus,
+	}
+}

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

@@ -72,4 +72,153 @@ describe('StatusPage', () => {
 
 		expect(wrapper.html()).toContain('Contenu additionnel')
 	})
+
+	it('n\'affiche pas le bouton si hideBtn est true', () => {
+		const wrapper = mount(StatusPage, {
+			props: {
+				headingLevel: 1,
+				btnText: 'Retour',
+				btnLink: '/',
+				hideBtn: true,
+			},
+		})
+
+		expect(wrapper.find('.v-btn').exists()).toBe(false)
+	})
+
+	it('émet btn-click au clic sur le bouton', async () => {
+		const wrapper = mount(StatusPage, {
+			props: {
+				headingLevel: 1,
+				btnText: 'Retour',
+				btnHref: 'https://example.com',
+			},
+		})
+
+		await wrapper.find('.v-btn').trigger('click')
+		expect(wrapper.emitted('btn-click')).toBeTruthy()
+	})
+
+	it('affiche le slot illustration quand fourni', () => {
+		const wrapper = mount(StatusPage, {
+			props: { headingLevel: 1 },
+			slots: {
+				illustration: '<img src="test.svg" alt="illustration" />',
+			},
+		})
+
+		expect(wrapper.html()).toContain('illustration')
+	})
+
+	it('ajoute aria-labelledby quand role est défini', () => {
+		const wrapper = mount(StatusPage, {
+			props: {
+				headingLevel: 1,
+				pageTitle: 'Erreur',
+				role: 'main',
+				uniqueId: 'test-id',
+			},
+		})
+
+		const container = wrapper.find('[aria-labelledby]')
+		expect(container.exists()).toBe(true)
+		expect(container.attributes('aria-labelledby')).toBe('test-id-title')
+	})
+
+	it('applique la classe heading correcte pour headingLevel > 1', () => {
+		const wrapper = mount(StatusPage, {
+			props: {
+				headingLevel: 2,
+				pageTitle: 'Titre h2',
+			},
+		})
+
+		expect(wrapper.html()).toContain('Titre h2')
+	})
+
+	it('utilise btnLink comme navigation interne quand btnHref est absent', () => {
+		const wrapper = mount(StatusPage, {
+			props: {
+				headingLevel: 1,
+				btnText: 'Accueil',
+				btnLink: '/accueil',
+			},
+		})
+
+		const btn = wrapper.find('.v-btn')
+		expect(btn.exists()).toBe(true)
+	})
+
+	describe('splitMessage', () => {
+		it('retourne [] si message est undefined', () => {
+			const wrapper = mount(StatusPage, {
+				props: { headingLevel: 1 },
+			})
+
+			expect(wrapper.findAll('a[href^="tel:"]').length).toBe(0)
+		})
+
+		it('texte sans numéro → aucun lien tel:', () => {
+			const wrapper = mount(StatusPage, {
+				props: {
+					headingLevel: 1,
+					message: 'Contactez le support.',
+				},
+			})
+
+			expect(wrapper.findAll('a[href^="tel:"]').length).toBe(0)
+			expect(wrapper.text()).toContain('Contactez le support.')
+		})
+
+		it('numéro 4 chiffres → lien tel:', () => {
+			const wrapper = mount(StatusPage, {
+				props: {
+					headingLevel: 1,
+					message: 'Appelez le 3646.',
+				},
+			})
+
+			const telLinks = wrapper.findAll('a[href^="tel:"]')
+			expect(telLinks.length).toBe(1)
+			expect(telLinks[0]!.attributes('href')).toBe('tel:3646')
+		})
+
+		it('numéro 10 chiffres → lien tel:', () => {
+			const wrapper = mount(StatusPage, {
+				props: {
+					headingLevel: 1,
+					message: 'Appelez le 0123456789 pour de l\'aide.',
+				},
+			})
+
+			const telLinks = wrapper.findAll('a[href^="tel:"]')
+			expect(telLinks.length).toBe(1)
+			expect(telLinks[0]!.attributes('href')).toBe('tel:0123456789')
+		})
+
+		it('numéro en milieu de texte → texte avant + lien + texte après', () => {
+			const wrapper = mount(StatusPage, {
+				props: {
+					headingLevel: 1,
+					message: 'Contactez-nous au 0123456789 pour toute question.',
+				},
+			})
+
+			expect(wrapper.text()).toContain('Contactez-nous au')
+			expect(wrapper.text()).toContain('pour toute question.')
+			expect(wrapper.find('a[href="tel:0123456789"]').exists()).toBe(true)
+		})
+
+		it('plusieurs numéros dans le message', () => {
+			const wrapper = mount(StatusPage, {
+				props: {
+					headingLevel: 1,
+					message: 'Numéros : 3646 et 0123456789.',
+				},
+			})
+
+			const telLinks = wrapper.findAll('a[href^="tel:"]')
+			expect(telLinks.length).toBe(2)
+		})
+	})
 })

package/src/components/SubHeader/SubHeader.vue

@@ -220,7 +220,7 @@
 	}
 
 	.vd-data-list-item-action-btn {
-		color: rgb(var(--v-theme-textOnDark)) !important;
+		color: rgb(var(--v-theme-onPrimary)) !important;
 	}
 }
 

package/src/components/SyAlert/SyAlert.vue

@@ -168,7 +168,7 @@
 
 	&:focus-visible {
 		outline: solid 2px black !important;
-		outline-color: var(--v-primary-base) !important;
+		outline-color: var(--v-theme-primary) !important;
 		outline-offset: 2px !important;
 
 		&::after {
@@ -217,7 +217,7 @@
 @mixin redesign($type, $map) {
 	&.alert--#{$type}.v-alert--variant-tonal {
 		background: map.get($map, 'background') !important;
-		color: rgb(var(--v-theme-textBase)) !important;
+		color: rgb(var(--v-theme-onSurface)) !important;
 
 		:deep(.v-alert__border) {
 			border-color: map.get($map, 'border') !important;
@@ -241,7 +241,7 @@
 			background: map.get($map, 'icon-bg');
 
 			:deep(svg) {
-				fill: map.get($map, 'accent');
+				fill: map.get($map, 'icon');
 			}
 		}
 	}
@@ -256,41 +256,41 @@
 	@include redesign(
 		'warning',
 		(
-			'background': var(--alert-warning-background),
-			'accent': var(--alert-warning-accent),
-			'border': var(--alert-warning-border),
-			'icon':var(--alert-warning-icon),
-			'icon-bg': var(--alert-warning-icon-bg),
+			'background': rgb(var(--v-theme-warningVariant)),
+			'accent': rgb(var(--v-theme-onWarningVariant)),
+			'border': rgb(var(--v-theme-onWarningVariant)),
+			'icon': rgb(var(--v-theme-onWarningVariant)),
+			'icon-bg': rgb(var(--v-theme-warningVariant90)),
 		)
 	);
 	@include redesign(
 		'success',
 		(
-			'background': var(--alert-success-background),
-			'accent': var(--alert-success-accent),
-			'border': var(--alert-success-border),
-			'icon':var(--alert-success-icon),
-			'icon-bg': var(--alert-success-icon-bg),
+			'background': rgb(var(--v-theme-successVariant)),
+			'accent': rgb(var(--v-theme-onSuccessVariant)),
+			'border': rgb(var(--v-theme-onSuccessVariant)),
+			'icon':rgb(var(--v-theme-onSuccessVariant)),
+			'icon-bg': rgb(var(--v-theme-successVariant90)),
 		)
 	);
 	@include redesign(
 		'error',
 		(
-			'background': var(--alert-error-background),
-			'accent': var(--alert-error-accent),
-			'border': var(--alert-error-border),
-			'icon':var(--alert-error-icon),
-			'icon-bg': var(--alert-error-icon-bg),
+			'background': rgb(var(--v-theme-errorVariant)),
+			'accent': rgb(var(--v-theme-error)),
+			'border': rgb(var(--v-theme-error)),
+			'icon':rgb(var(--v-theme-error)),
+			'icon-bg': rgb(var(--v-theme-errorVariant90)),
 		)
 	);
 	@include redesign(
 		'info',
 		(
-			'background': var(--alert-info-background),
-			'accent': var(--alert-info-accent),
-			'border': var(--alert-info-border),
-			'icon':var(--alert-info-icon),
-			'icon-bg': var(--alert-info-icon-bg),
+			'background': rgb(var(--v-theme-infoVariant)),
+			'accent': rgb(var(--v-theme-info)),
+			'border': rgb(var(--v-theme-info)),
+			'icon':rgb(var(--v-theme-info)),
+			'icon-bg': rgb(var(--v-theme-infoVariant90)),
 		)
 	);
 }