@cnamts/synapse 1.0.21 → 1.0.23

package/src/components/SearchListField/accessibilite/Accessibility.mdx

@@ -1,15 +1,75 @@
-import { Meta, Story } from '@storybook/addon-docs';
-import * as Stories from '../SearchListField.stories.ts';
+import { Meta, Story } from '@storybook/blocks';
+import * as Stories from '../SearchListField.stories';
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
 import '@/stories/styles/shared.css';
+import {
+	AccessibilityGuideLayout,
+	CriteriaSection,
+	CriteriaCard,
+	DemoSection,
+	BestPracticesSection,
+	ResourcesSection,
+	AuditSection,
+} from '@/stories/accessibility/AccessibilityGuideLayout.mdx';
 
 <Meta of={Stories} />
 
-<div className="header">
-  <h1>Accessibilité</h1>
-</div>
+<AccessibilityGuideLayout
+	componentName="SearchListField"
+	iconSrc={AccessibilityIcon}
+>
+	<AuditSection>
+		<div>Rapport d’audit manuel : <a href="/audits/SearchListField.xlsx" style={{ color:'#0C41BD' }}>Voir le rapport</a></div>
+		<div style={{ color: 'grey', fontSize: '14px', marginTop: '0px' }}>
+			Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/1499" target="_blank" style={{color:'#0C41BD'}}>issue #1499</a>)
+		</div>
+	</AuditSection>
 
+	<CriteriaSection>
+		<CriteriaCard icon="🏷️" title="Structure et rôles">
+			<ul>
+				<li>Le champ de recherche reste un champ texte natif (<code>SyTextField</code> sous-jacent) avec label obligatoire.</li>
+				<li>La liste est encapsulée dans un <code>fieldset</code> + <code>legend</code> (listLabel) et les résultats sont des <code>li</code> avec checkbox.</li>
+				<li>Les icônes de recherche sont décoratives (pas d’annonce superflue).</li>
+			</ul>
+		</CriteriaCard>
 
-<div class="mt-2">
-<p>Rapport d’audit manuel : <a href="/audits/SearchListField.xlsx" style={{ color:'#0C41BD' }}>Voir le rapport</a></p>
-		<p style={{ color: 'grey', fontSize: '14px', marginTop: '0px' }}>Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/1499" target="_blank" style={{color:'#0C41BD'}}>issue #1499</a>)</p>
-	</div>
+		<CriteriaCard icon="⌨️" title="Navigation clavier">
+			<ul>
+				<li>Tabulation : focus successif sur le champ puis chaque option ; activation par Espace/Entrée sur la checkbox.</li>
+				<li>Focus visible sur le champ et les cases à cocher ; suppression via la case déjà cochée.</li>
+				<li>Annonces SR : nombre de résultats via le <code>role="status"</code> conditionnel.</li>
+			</ul>
+		</CriteriaCard>
+
+		<CriteriaCard icon="🎨" title="Contraste et lisibilité">
+			<ul>
+				<li>Label et texte des options utilisent les couleurs du thème avec contrastes conformes.</li>
+				<li>État sélectionné signalé par classe <code>suggestion-item--selected</code> (fond/contour) + checkbox cochée.</li>
+				<li>Placeholder/texte d’aide : éviter les messages uniquement par couleur.</li>
+			</ul>
+		</CriteriaCard>
+	</CriteriaSection>
+
+	<DemoSection componentName="SearchListField">
+		<Story of={Stories.Default} />
+		<Story of={Stories.WithReturnObject} />
+	</DemoSection>
+
+	<BestPracticesSection>
+		<ul>
+			<li>Fournir un <code>label</code> et un <code>listLabel</code> explicites (champ + legend).</li>
+			<li>Utiliser des libellés uniques par option ; éviter les doublons qui compliquent l’annonce.</li>
+			<li>Garder le menu ouvert pour la sélection multiple ; ne pas masquer le focus.</li>
+			<li>Si l’ensemble d’options est long, guider la saisie avec un libellé contextualisé (“Rechercher une profession…”).</li>
+			<li>En retour objet (<code>returnObject</code>), vérifier que chaque item a un <code>label</code> et une <code>value</code> stables.</li>
+		</ul>
+	</BestPracticesSection>
+
+	<ResourcesSection>
+		<ul>
+			<li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/combobox/" target="_blank" rel="noopener noreferrer">WAI-ARIA APG – Combobox</a> (pour les champs de recherche avec liste)</li>
+			<li><a href="https://www.numerique.gouv.fr/publications/rgaa-accessibilite/" target="_blank" rel="noopener noreferrer">RGAA – critères 7.1 (ARIA) et 10.8 (éléments masqués)</a></li>
+		</ul>
+	</ResourcesSection>
+</AccessibilityGuideLayout>

package/src/components/SearchListField/tests/SearchListField.a11y.spec.ts

@@ -0,0 +1,37 @@
+// @vitest-environment jsdom
+
+import { describe, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { defineComponent } from 'vue'
+import { axe } from 'vitest-axe'
+import { assertNoA11yViolations } from '@tests/unit/accessibility/axeUtils'
+import SearchListField from '../SearchListField.vue'
+
+describe('SearchListField – accessibility (axe)', () => {
+	it('has no obvious axe violations on default list', async () => {
+		const wrapper = mount(defineComponent({
+			components: { SearchListField },
+			setup() {
+				const props = {
+					label: 'Rechercher une profession',
+					listLabel: 'Résultats',
+					items: [
+						{ label: 'Infirmier', value: 'infirmier' },
+						{ label: 'Pharmacien', value: 'pharmacien' },
+					],
+					modelValue: [],
+				}
+
+				return { props }
+			},
+			template: `
+				<main>
+					<SearchListField v-bind="props" />
+				</main>
+			`,
+		}))
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SearchListField – default list')
+	})
+})

package/src/components/SkipLink/tests/SkipLink.a11y.spec.ts

@@ -0,0 +1,23 @@
+// @vitest-environment jsdom
+
+import { describe, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { axe } from 'vitest-axe'
+import { assertNoA11yViolations } from '@tests/unit/accessibility/axeUtils'
+import SkipLink from '../SkipLink.vue'
+
+describe('SkipLink – accessibility (axe)', () => {
+	it('has no obvious axe violations', async () => {
+		const wrapper = mount(SkipLink, {
+			props: {
+				links: [
+					{ label: 'Aller au contenu', href: '#main' },
+					{ label: 'Aller à la navigation', href: '#nav' },
+				],
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SkipLink – default state')
+	})
+})

package/src/components/SocialMediaLinks/SocialMediaLinks.vue

@@ -91,7 +91,7 @@ li {
 }
 
 .vd-social-media-links-icon {
-	color: tokens.$grey-base;
+	color: tokens.$grey-base !important;
 }
 
 .vd-social-media-links-icon--x {

package/src/components/StatusPage/StatusPage.mdx

@@ -15,8 +15,17 @@ import * as StatusPageStories from './StatusPage.stories'
 
 <Controls of={StatusPageStories.Default} />
 
+## Rôle et identifiant ARIA
+
+Les props `role` et `unique-id` permettent de préciser le rôle sémantique du composant et de lier le titre au conteneur via `aria-labelledby`.
+
+Lorsque `role` est défini, l'attribut `aria-labelledby` est automatiquement appliqué sur le `PageContainer` en pointant vers le `h1`.
+
+<Canvas of={StatusPageStories.WithRole} />
+
 ## Lien de retour
 
-Vous pouvez mettre un lien vers une autre page avec les props `btn-text` et `btn-link` ou `btn-href`.
+Vous pouvez mettre un lien vers une autre page avec les props `btn-text` et `btn-link` ou `btn-href`.<br/>
+L'événement `btn-click` est émis lorsque l'utilisateur clique sur le bouton.
 
 <Canvas of={StatusPageStories.WithLink} />

package/src/components/StatusPage/StatusPage.stories.ts

@@ -8,6 +8,10 @@ const meta = {
 		layout: 'fullscreen',
 	},
 	argTypes: {
+		'headingLevel': {
+			control: { type: 'select' },
+			options: [1, 2, 3, 4, 5, 6],
+		},
 		'code': {
 			description: 'Code d\'erreur affiché en premier plan',
 		},
@@ -58,6 +62,7 @@ type Story = StoryObj<typeof StatusPage>
 
 export const Default: Story = {
 	args: {
+		headingLevel: 1,
 		pageTitle: 'une erreur est survenue',
 		code: '500',
 		message: 'Une erreur est survenue de notre côté, veuillez réessayer plus tard. Si le problème persiste veuillez nous contacter par téléphone au 3646',
@@ -96,6 +101,7 @@ export const Default: Story = {
 export const WithLink: Story = {
 	args: {
 		...Default.args,
+		headingLevel: 1,
 		btnHref: '/',
 		btnText: 'Retour à l\'accueil',
 	},
@@ -137,6 +143,7 @@ export const CustomIllustration: Story = {
 		...Default.args,
 		btnHref: '/',
 		btnText: 'Retour à l\'accueil',
+		headingLevel: 1,
 	},
 	parameters: {
 		sourceCode: [
@@ -191,3 +198,157 @@ export const CustomIllustration: Story = {
 		`,
 	}),
 }
+
+export const SlotAction: Story = {
+	args: {
+		...Default.args,
+		headingLevel: 1,
+		hideBtn: true,
+	},
+	decorators: [
+		() => ({ template: '<div style="padding: 20px; background: rgb(231, 236, 245)"><story /></div>' }),
+	],
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<div style="padding: 20px; background: rgb(231, 236, 245)">
+						<StatusPage
+							page-title="une erreur est survenue"
+							code="500"
+							message="Une erreur est survenue de notre côté, veuillez réessayer plus tard."
+							:hide-btn="true"
+						>
+							<template #action>
+								<div style="display: flex; gap: 8px; margin-top: 16px;">
+									<VBtn href="/" color="primary">Retour à l'accueil</VBtn>
+									<VBtn variant="outlined" color="primary">Déconnexion</VBtn>
+								</div>
+							</template>
+						</StatusPage>
+					</div>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { StatusPage } from '@cnamts/synapse'
+				</script>
+				`,
+			},
+		],
+	},
+	render: args => ({
+		components: { StatusPage },
+		setup() {
+			return { args }
+		},
+		template: `
+			<StatusPage v-bind="args">
+				<template #action>
+					<div style="display: flex; gap: 8px; margin-top: 16px;">
+						<VBtn href="/" color="primary">Retour à l'accueil</VBtn>
+						<VBtn variant="outlined" color="primary">Déconnexion</VBtn>
+					</div>
+				</template>
+			</StatusPage>
+		`,
+	}),
+}
+
+export const SlotAdditionalContent: Story = {
+	args: {
+		...Default.args,
+		headingLevel: 1,
+	},
+	decorators: [
+		() => ({ template: '<div style="padding: 20px; background: rgb(231, 236, 245)"><story /></div>' }),
+	],
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<div style="padding: 20px; background: rgb(231, 236, 245)">
+						<StatusPage
+							page-title="une erreur est survenue"
+							code="500"
+							message="Une erreur est survenue de notre côté, veuillez réessayer plus tard."
+						>
+							<template #additional-content>
+								<p style="text-align: center; color: #555;">
+									Si le problème persiste, veuillez contacter le support technique.
+								</p>
+							</template>
+						</StatusPage>
+					</div>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { StatusPage } from '@cnamts/synapse'
+				</script>
+				`,
+			},
+		],
+	},
+	render: args => ({
+		components: { StatusPage },
+		setup() {
+			return { args }
+		},
+		template: `
+			<StatusPage v-bind="args">
+				<template #additional-content>
+					<p style="text-align: center; color: #555;">
+						Si le problème persiste, veuillez contacter le support technique.
+					</p>
+				</template>
+			</StatusPage>
+		`,
+	}),
+}
+
+export const WithRole: Story = {
+	args: {
+		pageTitle: 'Une erreur est survenue',
+		message: 'Veuillez réessayer ultérieurement.',
+		code: '500',
+		role: 'main',
+		uniqueId: 'status-page-main',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<StatusPage
+						page-title="Une erreur est survenue"
+						message="Veuillez réessayer ultérieurement."
+						code="500"
+						role="main"
+						unique-id="status-page-main"
+					/>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { StatusPage } from '@cnamts/synapse'
+				</script>
+				`,
+			},
+		],
+	},
+}

package/src/components/StatusPage/StatusPage.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
 	import type { RouteRecordRaw } from 'vue-router'
 	import PageContainer from '../PageContainer/PageContainer.vue'
+	import { computed, useId } from 'vue'
+	import type { PageAriaRole } from '../types'
+	import SyHeading from '../SyHeading/SyHeading.vue'
 
 	type MessagePart =
 		| { type: 'text', value: string }
@@ -43,7 +46,7 @@
 		return parts
 	}
 
-	withDefaults(defineProps<{
+	const props = withDefaults(defineProps<{
 		pageTitle?: string
 		message?: string
 		code?: string
@@ -52,6 +55,9 @@
 		btnHref?: string
 		btnLink?: RouteRecordRaw | string
 		hideBtn?: boolean
+		uniqueId?: string
+		role?: PageAriaRole
+		headingLevel?: 1 | 2 | 3 | 4 | 5 | 6
 	}>(), {
 		pageTitle: undefined,
 		message: undefined,
@@ -61,11 +67,26 @@
 		btnLink: '/',
 		btnHref: undefined,
 		hideBtn: false,
+		uniqueId: undefined,
+		role: undefined,
+		headingLevel: 1,
 	})
+
+	const uniqueId = computed(() => props.uniqueId ?? useId())
+
+	const emit = defineEmits(['btn-click'])
+	const emitClickEvent = (): void => {
+		emit('btn-click')
+	}
 </script>
 
 <template>
-	<PageContainer size="md">
+	<PageContainer
+		size="md"
+		:unique-id="uniqueId"
+		:role="role"
+		:aria-labelledby="role ? `${uniqueId}-title` : undefined"
+	>
 		<VCard
 			:elevation="0"
 			class="pa-6 pa-sm-16"
@@ -84,12 +105,14 @@
 						{{ code }}
 					</div>
 
-					<h1
+					<SyHeading
 						v-if="pageTitle"
-						class="mb-2 font-weight-bold text-h5 mb-4"
+						:id="role ? `${uniqueId}-title` : undefined"
+						:class="headingLevel === 1 ? 'mb-2 font-weight-bold text-h5 mb-4' : 'mb-2 font-weight-bold mb-4'"
+						:level="headingLevel"
 					>
 						{{ pageTitle }}
-					</h1>
+					</SyHeading>
 
 					<p v-if="message">
 						<template
@@ -117,6 +140,7 @@
 							:href="btnHref"
 							color="primary"
 							class="mt-6"
+							@click="emitClickEvent"
 						>
 							{{ btnText }}
 						</VBtn>

package/src/components/StatusPage/accessibilite/Accessibility.mdx

@@ -18,14 +18,19 @@ import {
 >
 
     <CriteriaSection>
+    		<CriteriaCard icon="🧩" title="Niveau de titre configurable via la prop headingLevel">
+  <ul>
+    <li>Le niveau du titre (h1 à h6) est défini grâce à la propriété <strong>headingLevel</strong> déclarée dans le composant. Si aucune valeur n’est fournie, le composant applique par défaut un titre de niveau h1, défini dans l’implémentation du composant.</li>
+      <code>&lt;StatusPage
+          :heading-level="1" /&gt; </code>
+    
+    <li><strong>Accessibilité</strong> : Permet que la hiérarchie entre les titres soit pertinente (critère 9.1.1 RGAA) </li>
+  </ul>
+</CriteriaCard>
         <CriteriaCard icon="🔍" title="Structure sémantique">
             <ul>
-                <li><strong>Titre de page</strong> : le titre est rendu dans une balise <code>h1</code>, unique et descriptif</li>
+                <li><strong>Titre de page</strong> : le titre est rendu dans une balise <code>h1</code>, unique et descriptif — lié au conteneur via <code>aria-labelledby</code> lorsque <code>role</code> est défini</li>
                 <li><strong>Code d'erreur</strong> : le code (ex. <code>500</code>, <code>404</code>) est précédé du texte masqué visuellement <code>codeErrorText</code> (par défaut <em>"Code d'erreur : "</em>) pour les lecteurs d'écran</li>
-                <li><strong>Rôles ARIA hérités</strong> via <code>PageContainer</code> :</li>
-                <ul>
-                    <li>exemple : <code>role="main"</code> représente le contenu principal de la page</li>
-                </ul>
             </ul>
         </CriteriaCard>
 
@@ -52,12 +57,24 @@ import {
                 <li><strong>Slot <code>action</code></strong> : permet d'ajouter des actions supplémentaires accessibles au clavier</li>
             </ul>
         </CriteriaCard>
+
+        <CriteriaCard icon="🏷️" title="Rôle et identifiant ARIA">
+            <ul>
+                <li><strong>Prop <code>role</code></strong> : deux valeurs acceptées: <code>main</code> ou <code>region</code> — propagé au <code>PageContainer</code></li>
+                <li><strong>Prop <code>uniqueId</code></strong> : identifiant unique du conteneur, généré automatiquement via <code>useId()</code> si non fourni — utilisé pour lier le <code>h1</code> au conteneur via <code>aria-labelledby</code> lorsque <code>role</code> est défini</li>
+                <li><strong>Liaison automatique</strong> : quand <code>role</code> est défini, <code>aria-labelledby</code> est automatiquement appliqué sur le <code>PageContainer</code> et l'<code>id</code> correspondant sur le <code>h1</code></li>
+            </ul>
+        </CriteriaCard>
     </CriteriaSection>
 
     <DemoSection title="Avec illustration personnalisée" componentName="StatusPage">
         <Story of={StatusPageStories.CustomIllustration} />
     </DemoSection>
 
+    <DemoSection title="Avec rôle défini" componentName="StatusPage">
+        <Story of={StatusPageStories.WithRole} />
+    </DemoSection>
+
     <BestPracticesSection>
         <ul>
             <li>Toujours renseigner <code>page-title</code> avec un titre clair et unique décrivant l'erreur</li>
@@ -66,6 +83,8 @@ import {
             <li>Ne pas masquer le bouton (<code>hide-btn</code>) sans proposer une alternative de navigation claire</li>
             <li>Les illustrations doivent toujours être décoratives (<code>aria-hidden="true"</code>) — ne jamais y placer d'information essentielle</li>
             <li>Le contenu dans <code>additional-content</code> doit être lisible par les lecteurs d'écran : éviter le contenu purement visuel</li>
+            <li>Utiliser la prop <code>role</code> pour définir le rôle ARIA approprié au contexte</li>
+            <li>Fournir un <code>uniqueId</code> explicite si nécessaire pour garantir une liaison correcte entre le conteneur et le titre</li>
         </ul>
     </BestPracticesSection>
 

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

@@ -13,6 +13,7 @@ describe('StatusPage – accessibility (axe)', () => {
 	it('has no obvious axe violations with title, message and action button', async () => {
 		const wrapper = mount(StatusPage, {
 			props: {
+				headingLevel: 1,
 				pageTitle: 'Une erreur est survenue',
 				message: 'Un problème technique est survenu. Merci de réessayer plus tard.',
 				code: '500',
@@ -26,4 +27,26 @@ describe('StatusPage – accessibility (axe)', () => {
 			ignoreRules: ['region'],
 		})
 	})
+
+	it('has no obvious axe violations with #action slot', async () => {
+		const wrapper = mount(StatusPage, {
+			attachTo: document.body,
+			props: {
+				headingLevel: 1,
+				pageTitle: 'Une erreur est survenue',
+				message: 'Un problème technique est survenu.',
+				hideBtn: true,
+			},
+			slots: {
+				action: '<button>Retour à l\'accueil</button>',
+			},
+		})
+
+		const results = await axe(document.body)
+		assertNoA11yViolations(results, 'StatusPage – action slot', {
+			ignoreRules: ['region'],
+		})
+
+		wrapper.unmount()
+	})
 })

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

@@ -6,6 +6,7 @@ describe('StatusPage', () => {
 	it('renders correctly', () => {
 		const wrapper = mount(StatusPage, {
 			props: {
+				headingLevel: 1,
 				pageTitle: 'Something went wrong',
 				message: 'Error message',
 			},
@@ -19,6 +20,7 @@ describe('StatusPage', () => {
 	it('renders correctly with undefined route', () => {
 		const wrapper = mount(StatusPage, {
 			props: {
+				headingLevel: 1,
 				code: '501',
 				pageTitle: 'Error',
 				message: 'Error message',
@@ -34,6 +36,7 @@ describe('StatusPage', () => {
 	it('uses href without router navigation when only btnHref is provided', () => {
 		const wrapper = mount(StatusPage, {
 			props: {
+				headingLevel: 1,
 				code: '401',
 				pageTitle: 'Auth error',
 				message: 'You are not authorized',
@@ -47,4 +50,26 @@ describe('StatusPage', () => {
 		expect(link.attributes('href')).toBe('https://google.com')
 		expect(link.attributes('to')).toBeUndefined()
 	})
+
+	it('renders #action slot content', () => {
+		const wrapper = mount(StatusPage, {
+			props: { headingLevel: 1 },
+			slots: {
+				action: '<button>Retour à l\'accueil</button>',
+			},
+		})
+
+		expect(wrapper.html()).toContain('Retour à l\'accueil')
+	})
+
+	it('renders #additional-content slot content', () => {
+		const wrapper = mount(StatusPage, {
+			props: { headingLevel: 1 },
+			slots: {
+				'additional-content': '<p>Contenu additionnel</p>',
+			},
+		})
+
+		expect(wrapper.html()).toContain('Contenu additionnel')
+	})
 })

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

@@ -1,19 +1,23 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`StatusPage > renders correctly 1`] = `
-<div class="
-  d-flex
-  justify-center
-  px-14
-  py-10
-  vd-page-container
-">
+<div
+  class="
+    d-flex
+    justify-center
+    px-14
+    py-10
+    vd-page-container
+  "
+  id="v-0-container"
+>
   <div
     class="
       bg-transparent
       v-sheet
       v-theme--light
     "
+    id="v-0-content"
     style="width: 800px;"
   >
     <div class="
@@ -98,6 +102,7 @@ exports[`StatusPage > renders correctly 1`] = `
             font-weight-bold
             mb-2
             mb-4
+            sy-heading
             text-h5
           ">
             Something went wrong
@@ -120,19 +125,23 @@ exports[`StatusPage > renders correctly 1`] = `
 `;
 
 exports[`StatusPage > renders correctly with undefined route 1`] = `
-<div class="
-  d-flex
-  justify-center
-  px-14
-  py-10
-  vd-page-container
-">
+<div
+  class="
+    d-flex
+    justify-center
+    px-14
+    py-10
+    vd-page-container
+  "
+  id="v-0-container"
+>
   <div
     class="
       bg-transparent
       v-sheet
       v-theme--light
     "
+    id="v-0-content"
     style="width: 800px;"
   >
     <div class="
@@ -226,6 +235,7 @@ exports[`StatusPage > renders correctly with undefined route 1`] = `
             font-weight-bold
             mb-2
             mb-4
+            sy-heading
             text-h5
           ">
             Error