@cnamts/synapse 1.0.2 → 1.0.4

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

@@ -18,7 +18,7 @@ exports[`RatingPicker > renders correctly 1`] = `
       ">
         <label
           class=""
-          for="v-rating-0-0"
+          for="v-rating-v-0-0"
         >
           <span class="v-rating__hidden">
             Rating 0 of 10
@@ -28,8 +28,8 @@ exports[`RatingPicker > renders correctly 1`] = `
         <input
           checked=""
           class="v-rating__hidden"
-          id="v-rating-0-0"
-          name="v-rating-0"
+          id="v-rating-v-0-0"
+          name="v-rating-v-0"
           tabindex="-1"
           type="radio"
           value="0"
@@ -39,7 +39,7 @@ exports[`RatingPicker > renders correctly 1`] = `
           <div class="v-rating__item">
             <label
               class=""
-              for="v-rating-0-1"
+              for="v-rating-v-0-1"
             >
               <span class="v-rating__hidden">
                 Rating 1 of 10
@@ -75,8 +75,8 @@ exports[`RatingPicker > renders correctly 1`] = `
             </label>
             <input
               class="v-rating__hidden"
-              id="v-rating-0-1"
-              name="v-rating-0"
+              id="v-rating-v-0-1"
+              name="v-rating-v-0"
               tabindex="-1"
               type="radio"
               value="1"
@@ -89,7 +89,7 @@ exports[`RatingPicker > renders correctly 1`] = `
           <div class="v-rating__item">
             <label
               class=""
-              for="v-rating-0-2"
+              for="v-rating-v-0-2"
             >
               <span class="v-rating__hidden">
                 Rating 2 of 10
@@ -125,8 +125,8 @@ exports[`RatingPicker > renders correctly 1`] = `
             </label>
             <input
               class="v-rating__hidden"
-              id="v-rating-0-2"
-              name="v-rating-0"
+              id="v-rating-v-0-2"
+              name="v-rating-v-0"
               tabindex="-1"
               type="radio"
               value="2"
@@ -139,7 +139,7 @@ exports[`RatingPicker > renders correctly 1`] = `
           <div class="v-rating__item">
             <label
               class=""
-              for="v-rating-0-3"
+              for="v-rating-v-0-3"
             >
               <span class="v-rating__hidden">
                 Rating 3 of 10
@@ -175,8 +175,8 @@ exports[`RatingPicker > renders correctly 1`] = `
             </label>
             <input
               class="v-rating__hidden"
-              id="v-rating-0-3"
-              name="v-rating-0"
+              id="v-rating-v-0-3"
+              name="v-rating-v-0"
               tabindex="-1"
               type="radio"
               value="3"
@@ -189,7 +189,7 @@ exports[`RatingPicker > renders correctly 1`] = `
           <div class="v-rating__item">
             <label
               class=""
-              for="v-rating-0-4"
+              for="v-rating-v-0-4"
             >
               <span class="v-rating__hidden">
                 Rating 4 of 10
@@ -225,8 +225,8 @@ exports[`RatingPicker > renders correctly 1`] = `
             </label>
             <input
               class="v-rating__hidden"
-              id="v-rating-0-4"
-              name="v-rating-0"
+              id="v-rating-v-0-4"
+              name="v-rating-v-0"
               tabindex="-1"
               type="radio"
               value="4"
@@ -239,7 +239,7 @@ exports[`RatingPicker > renders correctly 1`] = `
           <div class="v-rating__item">
             <label
               class=""
-              for="v-rating-0-5"
+              for="v-rating-v-0-5"
             >
               <span class="v-rating__hidden">
                 Rating 5 of 10
@@ -275,8 +275,8 @@ exports[`RatingPicker > renders correctly 1`] = `
             </label>
             <input
               class="v-rating__hidden"
-              id="v-rating-0-5"
-              name="v-rating-0"
+              id="v-rating-v-0-5"
+              name="v-rating-v-0"
               tabindex="-1"
               type="radio"
               value="5"
@@ -289,7 +289,7 @@ exports[`RatingPicker > renders correctly 1`] = `
           <div class="v-rating__item">
             <label
               class=""
-              for="v-rating-0-6"
+              for="v-rating-v-0-6"
             >
               <span class="v-rating__hidden">
                 Rating 6 of 10
@@ -325,8 +325,8 @@ exports[`RatingPicker > renders correctly 1`] = `
             </label>
             <input
               class="v-rating__hidden"
-              id="v-rating-0-6"
-              name="v-rating-0"
+              id="v-rating-v-0-6"
+              name="v-rating-v-0"
               tabindex="-1"
               type="radio"
               value="6"
@@ -339,7 +339,7 @@ exports[`RatingPicker > renders correctly 1`] = `
           <div class="v-rating__item">
             <label
               class=""
-              for="v-rating-0-7"
+              for="v-rating-v-0-7"
             >
               <span class="v-rating__hidden">
                 Rating 7 of 10
@@ -375,8 +375,8 @@ exports[`RatingPicker > renders correctly 1`] = `
             </label>
             <input
               class="v-rating__hidden"
-              id="v-rating-0-7"
-              name="v-rating-0"
+              id="v-rating-v-0-7"
+              name="v-rating-v-0"
               tabindex="-1"
               type="radio"
               value="7"
@@ -389,7 +389,7 @@ exports[`RatingPicker > renders correctly 1`] = `
           <div class="v-rating__item">
             <label
               class=""
-              for="v-rating-0-8"
+              for="v-rating-v-0-8"
             >
               <span class="v-rating__hidden">
                 Rating 8 of 10
@@ -425,8 +425,8 @@ exports[`RatingPicker > renders correctly 1`] = `
             </label>
             <input
               class="v-rating__hidden"
-              id="v-rating-0-8"
-              name="v-rating-0"
+              id="v-rating-v-0-8"
+              name="v-rating-v-0"
               tabindex="-1"
               type="radio"
               value="8"
@@ -439,7 +439,7 @@ exports[`RatingPicker > renders correctly 1`] = `
           <div class="v-rating__item">
             <label
               class=""
-              for="v-rating-0-9"
+              for="v-rating-v-0-9"
             >
               <span class="v-rating__hidden">
                 Rating 9 of 10
@@ -475,8 +475,8 @@ exports[`RatingPicker > renders correctly 1`] = `
             </label>
             <input
               class="v-rating__hidden"
-              id="v-rating-0-9"
-              name="v-rating-0"
+              id="v-rating-v-0-9"
+              name="v-rating-v-0"
               tabindex="-1"
               type="radio"
               value="9"
@@ -489,7 +489,7 @@ exports[`RatingPicker > renders correctly 1`] = `
           <div class="v-rating__item">
             <label
               class=""
-              for="v-rating-0-10"
+              for="v-rating-v-0-10"
             >
               <span class="v-rating__hidden">
                 Rating 10 of 10
@@ -525,8 +525,8 @@ exports[`RatingPicker > renders correctly 1`] = `
             </label>
             <input
               class="v-rating__hidden"
-              id="v-rating-0-10"
-              name="v-rating-0"
+              id="v-rating-v-0-10"
+              name="v-rating-v-0"
               tabindex="-1"
               type="radio"
               value="10"

package/src/components/SearchListField/SearchListField.mdx

@@ -8,7 +8,7 @@ import SearchListField from './SearchListField.vue';
 
 Le composant `SearchListField` est utilisé pour permettre à l’utilisateur de sélectionner des valeurs dans une liste.
 
-<Canvas story={{height: '150px'}} of={SearchListFieldStories.Default}/>
+<Canvas story={{height: '450px'}} of={SearchListFieldStories.Default}/>
 
 # API
 

package/src/components/SearchListField/SearchListField.stories.ts

@@ -65,7 +65,13 @@ export const Default: Story = {
 				return { args }
 			},
 			template: `
-                <SearchListField v-bind="args" v-model="args.modelValue"/>
+                <div>
+                    <SearchListField v-bind="args" v-model="args.modelValue"/>
+                    <div style="margin-top: 20px;">
+                        <strong>Valeur(s) sélectionnée(s) :</strong>
+                        <pre>{{ args.modelValue }}</pre>
+                    </div>
+                </div>
             `,
 		}
 	},

package/src/components/SearchListField/SearchListField.vue

@@ -5,7 +5,7 @@
 	import type { SearchListItem } from './types'
 	import { locales } from './locales'
 
-	import { SyTextField } from '@/components'
+	import { SyTextField, SyCheckbox } from '@/components'
 
 	const props = defineProps({
 		modelValue: {
@@ -31,6 +31,7 @@
 	const search = ref<string | null>(null)
 	const internalValue = ref<unknown[]>(props.modelValue)
 	const searchIcon = mdiMagnify
+	const checkboxListRef = ref<HTMLElement | null>(null)
 
 	watch(
 		() => props.modelValue,
@@ -53,10 +54,23 @@
 		emit('update:modelValue', value)
 	}
 
+	const toggleSelection = (itemValue: unknown) => {
+		const newValue = [...internalValue.value]
+		const index = newValue.indexOf(itemValue)
+		if (index === -1) {
+			newValue.push(itemValue)
+		}
+		else {
+			newValue.splice(index, 1)
+		}
+		emitChangeEvent(newValue)
+	}
+
 	defineExpose({
 		filteredItems,
 		search,
 		emitChangeEvent,
+		toggleSelection,
 	})
 </script>
 
@@ -97,6 +111,7 @@
 
 		<VList
 			id="search-list"
+			ref="checkboxListRef"
 			v-model:selected="internalValue"
 			title="search-list"
 			select-strategy="classic"
@@ -118,40 +133,29 @@
 				:value="item.value"
 				role="option"
 				:aria-selected="internalValue.includes(item.value)"
-				:aria-labelledby="`search-list-item-${index}`"
 				:tabindex="0"
 				active-class="text-primary"
 				class="d-flex align-center justify-start mx-4"
 			>
-				<span
-					:id="`search-list-item-label-${index}`"
-					class="d-sr-only"
-				>
-					{{ item.label }}
-				</span>
 				<template #prepend="{ isActive }">
 					<VListItemAction start>
-						<input
+						<SyCheckbox
 							:id="`checkbox-${index}`"
-							type="checkbox"
-							role="option"
-							:checked="isActive"
-							:aria-selected="isActive"
+							:model-value="isActive"
+							label=""
 							:aria-label="`${locales.checkboxLabel} ${item.label}`"
-							:aria-labelledby="`checkbox-${index}`"
 							:title="`${locales.checkboxLabel} ${item.label}`"
-							class="custom-checkbox ml-2"
-						>
-						<!-- eslint-disable-next-line  vuejs-accessibility/label-has-for -->
-						<label
-							:for="`checkbox-${index}`"
-							class="d-sr-only"
-						>
-							{{ locales.checkboxLabel }}
-						</label>
+							:aria-labelledby="`list-item-title-${index}`"
+							hide-details
+							class="ml-2 search-list-checkbox"
+							density="compact"
+							@click="toggleSelection(item.value)"
+						/>
 					</VListItemAction>
 
-					<VListItemTitle>{{ item.label }}</VListItemTitle>
+					<VListItemTitle :id="`list-item-title-${index}`">
+						{{ item.label }}
+					</VListItemTitle>
 				</template>
 			</VListItem>
 		</VList>
@@ -169,31 +173,11 @@
 	opacity: 0;
 }
 
-.custom-checkbox {
-	appearance: none;
-	width: 20px;
-	height: 20px;
-	border: 2px solid rgb(0 0 0 / 50%);
-	border-radius: 2px;
-	outline: none;
-	cursor: pointer;
-	transition: all 0.3s ease;
-}
-
-.custom-checkbox:checked {
-	background-color: tokens.$primary-base !important;
-	border-color: tokens.$primary-base !important;
-
-	&::before {
-		content: '\2713';
-		display: block;
-		text-align: center;
-		line-height: 15px;
-		color: #fff;
+/* Hide duplicate labels for accessibility */
+.search-list-checkbox {
+	/* Hide the label from screen readers but keep the checkbox visible */
+	::v-deep(.v-label) {
+		display: none;
 	}
 }
-
-.custom-checkbox:hover {
-	border-color: tokens.$primary-darker !important;
-}
 </style>

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

@@ -162,6 +162,14 @@ export const Legende: StoryObj = {
 					Problèmes relevés par Tanaguru
 				  </div>
 				</div>
+				  <div class="mt-4">
+					  <p>Rapport d’audit manuel : <a href="/audits/SocialMediaLinks.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/790" target="_blank"
+						  style="color:#0C41BD;"
+					  >issue #790</a>)</p>
+				  </div>
 			  </div>
             `,
 		}

package/src/components/SocialMediaLinks/SocialMediaLinks.stories.ts

@@ -8,6 +8,11 @@ const meta = {
 	parameters: {
 		layout: 'fullscreen',
 		controls: { exclude: ['socialMediaLinks'] },
+		docs: {
+			description: {
+				component: 'Affiche une liste de liens vers les réseaux sociaux avec un titre configurable.',
+			},
+		},
 	},
 	args: {
 		socialMediaLinks: [
@@ -24,11 +29,30 @@ const meta = {
 				href: 'https://twitter.com/Assur_Maladie',
 			},
 		],
+		headingLevel: 6,
+		useNativeHeading: true,
 	},
 	argTypes: {
 		socialMediaLinks: {
 			control: { type: 'object' },
 		},
+		headingLevel: {
+			control: { type: 'select' },
+			options: [1, 2, 3, 4, 5, 6],
+			description: 'Niveau de titre HTML à utiliser pour le libellé "Suivez-nous". Valeurs acceptées de 1 à 6.',
+			table: {
+				type: { summary: 'Number' },
+				defaultValue: { summary: '6' },
+			},
+		},
+		useNativeHeading: {
+			control: { type: 'boolean' },
+			description: 'Détermine si le libellé "Suivez-nous" doit utiliser une balise HTML native (h1-h6) ou un élément span avec les attributs ARIA appropriés.',
+			table: {
+				type: { summary: 'Boolean' },
+				defaultValue: { summary: 'true' },
+			},
+		},
 	},
 } as Meta<typeof SocialMediaLinks>
 
@@ -42,7 +66,11 @@ export const Default: Story = {
 			{
 				name: 'Template',
 				code: `<template>
-	<SocialMediaLinks :links="links" />
+	<SocialMediaLinks 
+		:links="links" 
+		:heading-level="6"
+		:use-native-heading="true"
+	/>
 </template>
 				`,
 			},
@@ -101,7 +129,11 @@ export const Default: Story = {
 			},
 			template: `
 				<div class="d-flex flex-wrap align-center pa-4">
-                	<SocialMediaLinks :links="args.links" />
+                	<SocialMediaLinks 
+						:links="args.links"
+						:heading-level="args.headingLevel"
+						:use-native-heading="args.useNativeHeading"
+					/>
 				</div>
             `,
 		}

package/src/components/SocialMediaLinks/SocialMediaLinks.vue

@@ -2,20 +2,35 @@
 	import type { PropType } from 'vue'
 	import { locales } from './locales'
 	import type { SocialMediaLink } from './types'
+	import SyIcon from '../Customs/SyIcon/SyIcon.vue'
 
 	const props = defineProps({
 		links: {
 			type: Array as PropType<SocialMediaLink[]>,
 			default: null,
 		},
+		headingLevel: {
+			type: Number,
+			default: 6,
+			validator: (value: number) => value >= 1 && value <= 6,
+		},
+		useNativeHeading: {
+			type: Boolean,
+			default: true,
+		},
 	})
 </script>
 
 <template>
 	<div class="d-flex flex-column">
-		<span class="vd-social-media-links-label text-subtitle-2 text--primary">
+		<component
+			:is="props.useNativeHeading ? `h${props.headingLevel}` : 'span'"
+			class="vd-social-media-links-label text--primary"
+			:role="!props.useNativeHeading ? 'heading' : undefined"
+			:aria-level="!props.useNativeHeading ? props.headingLevel : undefined"
+		>
 			{{ locales.followUs }}
-		</span>
+		</component>
 
 		<ul class="vd-social-media-links-content d-flex max-width-none">
 			<li
@@ -31,12 +46,12 @@
 					:aria-label="`Lien vers ${social.name}`"
 					variant="text"
 				>
-					<VIcon
+					<SyIcon
+						:icon="social.icon"
 						size="30px"
 						class="vd-social-media-links-icon"
-					>
-						{{ social.icon }}
-					</VIcon>
+						decorative
+					/>
 				</VBtn>
 			</li>
 		</ul>
@@ -58,6 +73,14 @@ li {
 .vd-social-media-links-label.text--primary {
 	color: tokens.$blue-base;
 	font-weight: 600;
+	margin: 0;
+	padding: 0;
+	font-family: inherit;
+	font-size: 0.875rem;
+	line-height: 1.375rem;
+
+	/* Removed fixed letter-spacing of Vuetify */
+	letter-spacing: normal;
 }
 
 .v-theme--dark .vd-social-media-links-label.text--primary {
@@ -72,10 +95,22 @@ li {
 	width: calc(var(--v-btn-height) + 5px);
 	height: calc(var(--v-btn-height) + 5px);
 	border: 0;
+
+	&:focus-visible {
+		outline: 3px solid tokens.$blue-base;
+		outline-offset: -1px;
+	}
 }
 
-.v-theme--dark .v-btn--variant-text:hover :deep() {
-	background: rgba(white, 0.1);
+.v-theme--dark {
+	.v-btn--variant-text:hover :deep() {
+		background: rgba(white, 0.1);
+	}
+
+	.v-btn--icon:focus-visible {
+		outline: 3px solid white;
+		outline-offset: -1px;
+	}
 }
 
 @media (width >= 768px) {

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

@@ -26,9 +26,17 @@ describe('SocialMediaLinks', () => {
 			},
 			props: {
 				links: undefined,
+				headingLevel: 6,
+				useNativeHeading: true,
 			},
 		})
-		expect(wrapper.html()).toMatchSnapshot()
+
+		// Verify component structure
+		expect(wrapper.find('.d-flex.flex-column').exists()).toBe(true)
+		expect(wrapper.find('h6.vd-social-media-links-label').exists()).toBe(true)
+		expect(wrapper.find('h6.vd-social-media-links-label').text()).toBe('Suivez-nous :')
+		expect(wrapper.find('ul.vd-social-media-links-content').exists()).toBe(true)
+		expect(wrapper.findAll('li').length).toBe(0)
 	})
 
 	it('renders correctly with provided links', () => {
@@ -42,9 +50,28 @@ describe('SocialMediaLinks', () => {
 			},
 			props: {
 				links,
+				headingLevel: 6,
+				useNativeHeading: true,
 			},
 		})
-		expect(wrapper.html()).toMatchSnapshot()
+
+		// Verify component structure
+		expect(wrapper.find('.d-flex.flex-column').exists()).toBe(true)
+		expect(wrapper.find('h6.vd-social-media-links-label').exists()).toBe(true)
+
+		// Verify links are rendered correctly
+		const listItems = wrapper.findAll('li')
+		expect(listItems.length).toBe(2)
+
+		// Check first link
+		const firstLink = listItems[0].find('a')
+		expect(firstLink.attributes('href')).toBe('https://twitter.com')
+		expect(firstLink.attributes('aria-label')).toBe('Lien vers Twitter')
+
+		// Check second link
+		const secondLink = listItems[1].find('a')
+		expect(secondLink.attributes('href')).toBe('https://facebook.com')
+		expect(secondLink.attributes('aria-label')).toBe('Lien vers Facebook')
 	})
 
 	it('renders the correct number of social media links', () => {
@@ -58,6 +85,8 @@ describe('SocialMediaLinks', () => {
 			},
 			props: {
 				links,
+				headingLevel: 6,
+				useNativeHeading: true,
 			},
 		})
 		expect(wrapper.findAll('li').length).toBe(links.length)
@@ -70,6 +99,8 @@ describe('SocialMediaLinks', () => {
 			},
 			props: {
 				links: [],
+				headingLevel: 6,
+				useNativeHeading: true,
 			},
 		})
 		expect(wrapper.findAll('li').length).toBe(0)
@@ -82,8 +113,73 @@ describe('SocialMediaLinks', () => {
 			},
 			props: {
 				links: undefined,
+				headingLevel: 6,
+				useNativeHeading: true,
 			},
 		})
 		expect(wrapper.findAll('li').length).toBe(0)
 	})
+
+	it('renders with correct heading level when headingLevel prop is provided', () => {
+		const headingLevel = 3
+		wrapper = mount(SocialMediaLinks, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				links: [],
+				headingLevel,
+				useNativeHeading: true,
+			},
+		})
+		expect(wrapper.find(`h${headingLevel}`).exists()).toBe(true)
+	})
+
+	it('renders with span and ARIA attributes when useNativeHeading is false', () => {
+		const headingLevel = 4
+		wrapper = mount(SocialMediaLinks, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				links: [],
+				headingLevel,
+				useNativeHeading: false,
+			},
+		})
+		const heading = wrapper.find('span.vd-social-media-links-label')
+		expect(heading.exists()).toBe(true)
+		expect(heading.attributes('role')).toBe('heading')
+		expect(heading.attributes('aria-level')).toBe(headingLevel.toString())
+	})
+
+	it('has proper focus styles for accessibility', () => {
+		const links = [
+			{ href: 'https://twitter.com', name: 'Twitter', icon: 'mdi-twitter' },
+		]
+		wrapper = mount(SocialMediaLinks, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				links,
+				headingLevel: 6,
+				useNativeHeading: true,
+			},
+		})
+
+		// Verify that the button exists
+		const button = wrapper.find('.v-btn--icon')
+		expect(button.exists()).toBe(true)
+
+		// Verify the button has proper accessibility attributes
+		const link = wrapper.find('a')
+		expect(link.attributes('href')).toBe('https://twitter.com')
+		expect(link.attributes('aria-label')).toBe('Lien vers Twitter')
+
+		// Check that the component has the necessary CSS classes for focus styles
+		// We can't test the actual CSS properties, but we can verify the structure is there
+		const socialMediaLinks = wrapper.find('.d-flex.flex-column')
+		expect(socialMediaLinks.exists()).toBe(true)
+	})
 })