@cnamts/synapse 1.0.22 → 1.0.24

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

@@ -1,15 +1,83 @@
-import { Meta, Story } from '@storybook/addon-docs';
-import * as Stories from '../RangeField.stories.ts';
-import '@/stories/styles/shared.css';
+import { Meta, Primary } from '@storybook/blocks';
+import * as RangeFieldStories from '../RangeField.stories.ts';
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
+import {
+  AccessibilityGuideLayout,
+  CriteriaSection,
+  CriteriaCard,
+  DemoSection,
+  BestPracticesSection,
+  ResourcesSection,
+} from '@/stories/accessibility/AccessibilityGuideLayout.mdx';
 
-<Meta of={Stories} />
+<Meta of={RangeFieldStories}/>
 
-<div className="header">
-  <h1>Accessibilité</h1>
-</div>
+<AccessibilityGuideLayout
+  componentName="RangeField"
+  iconSrc={AccessibilityIcon}
+  apgHref="https://www.w3.org/WAI/ARIA/apg/patterns/slider/"
+>
+  <div class="mt-8">
+    <p>Rapport d'audit manuel : <a href="/audits/RangeField.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/908" target="_blank" style={{color:'#0C41BD'}}>issue #908</a>)</p>
+  </div>
 
+  <CriteriaSection>
+    <CriteriaCard icon="🔍" title="Structure sémantique et regroupement">
+      <ul>
+        <li><strong>Fieldset/Legend</strong> : Utilisation de <code>&lt;fieldset&gt;</code> et <code>&lt;legend&gt;</code> lorsque <code>fieldsetLabel</code> est fourni pour regrouper sémantiquement les champs</li>
+        <li><strong>Double entrée</strong> : Composant hybride avec slider visuel et champs textuels pour une accessibilité maximale</li>
+        <li><strong>Labels explicites</strong> : Champs texte avec labels personnalisables via <code>textFieldMinLabel</code> et <code>textFieldMaxLabel</code></li>
+      </ul>
+    </CriteriaCard>
 
-<div class="mt-2">
-<p>Rapport d’audit manuel : <a href="/audits/RangeField.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/908" target="_blank" style={{color:'#0C41BD'}}>issue #908</a>)</p>
-	</div>
+    <CriteriaCard icon="⌨️" title="Navigation et interaction clavier">
+      <ul>
+        <li><strong>Input numérique</strong> : Champs texte avec <code>inputmode="numeric"</code> pour optimiser le clavier mobile</li>
+        <li><strong>Validation synchrone</strong> : Mise à jour bidirectionnelle entre slider et champs texte pour une cohérence immédiate</li>
+        <li><strong>Contraintes logiques</strong> : Validation automatique pour garantir min ≤ max avec corrections appropriées</li>
+      </ul>
+    </CriteriaCard>
+
+    <CriteriaCard icon="🎨" title="Masque saisie et formatage">
+      <ul>
+        <li><strong>vMaska</strong> : Masque de saisie personnalisé pour gérer nombres négatifs et décimaux</li>
+        <li><strong>Pattern flexible</strong> : Support des formats comme "-123.45" avec tokens adaptés</li>
+        <li><strong>Clamp automatique</strong> : Correction des valeurs hors limites avec <code>clamp()</code></li>
+      </ul>
+    </CriteriaCard>
+
+    <CriteriaCard icon="📱" title="Responsive et adaptabilité">
+      <ul>
+        <li><strong>Layout adaptatif</strong> : Orientation des champs qui passe de horizontal à vertical sur mobile</li>
+        <li><strong>Display Vuetify</strong> : Utilisation de <code>useDisplay()</code> pour détecter les tailles d'écran</li>
+        <li><strong>Options personnalisables</strong> : Composant entièrement configurable via <code>useCustomizableOptions</code></li>
+      </ul>
+    </CriteriaCard>
+  </CriteriaSection>
+
+  <DemoSection componentName="RangeField">
+    <Primary />
+  </DemoSection>
+
+  <BestPracticesSection>
+    <ul>
+      <li><strong>Labels descriptifs</strong> : Utilisez des labels clairs pour les champs min/max ("Prix minimum", "Âge maximum")</li>
+      <li><strong>Fieldset cohérent</strong> : Regroupez les champs avec un <code>fieldsetLabel</code> pertinent ("Fourchette de prix", "Plage d'âge")</li>
+      <li><strong>Valeurs par défaut</strong> : Initialisez toujours <code>modelValue</code> avec une plage valide [min, max]</li>
+      <li><strong>Step approprié</strong> : Choisissez un <code>step</code> logique (1 pour les entiers, 0.1 pour les décimales)</li>
+      <li><strong>Validation côté serveur</strong> : Complétez la validation client avec des vérifications serveur pour la sécurité</li>
+      <li><strong>Feedback utilisateur</strong> : Ajoutez des messages d'aide ou d'erreur pour guider l'utilisateur</li>
+    </ul>
+  </BestPracticesSection>
+
+  <ResourcesSection>
+    <ul>
+      <li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/slider/" target="_blank" rel="noopener noreferrer">Guide des pratiques WAI-ARIA : Sliders</a></li>
+      <li><a href="https://www.w3.org/WAI/WCAG21/quickref/" target="_blank" rel="noopener noreferrer">Référence rapide WCAG 2.1</a></li>
+      <li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#11.9" target="_blank" rel="noopener noreferrer">RGAA Critère 11.9 : Champs de saisie numérique</a></li>
+      <li><a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/Input/number" target="_blank" rel="noopener noreferrer">MDN : Champs input number et inputmode</a></li>
+    </ul>
+  </ResourcesSection>
+
+</AccessibilityGuideLayout>

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/StatusPage/StatusPage.stories.ts

@@ -199,6 +199,124 @@ 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',

package/src/components/StatusPage/StatusPage.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 	import type { RouteRecordRaw } from 'vue-router'
 	import PageContainer from '../PageContainer/PageContainer.vue'
-	import { useId } from 'vue'
+	import { computed, useId } from 'vue'
 	import type { PageAriaRole } from '../types'
 	import SyHeading from '../SyHeading/SyHeading.vue'
 
@@ -46,7 +46,7 @@
 		return parts
 	}
 
-	withDefaults(defineProps<{
+	const props = withDefaults(defineProps<{
 		pageTitle?: string
 		message?: string
 		code?: string
@@ -67,11 +67,13 @@
 		btnLink: '/',
 		btnHref: undefined,
 		hideBtn: false,
-		uniqueId: useId(),
+		uniqueId: undefined,
 		role: undefined,
 		headingLevel: 1,
 	})
 
+	const uniqueId = computed(() => props.uniqueId ?? useId())
+
 	const emit = defineEmits(['btn-click'])
 	const emitClickEvent = (): void => {
 		emit('btn-click')

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

@@ -27,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

@@ -50,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="
@@ -121,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="

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

@@ -0,0 +1,20 @@
+// @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 SubHeader from '../SubHeader.vue'
+
+describe('SubHeader – accessibility (axe)', () => {
+	it('has no obvious axe violations', async () => {
+		const wrapper = mount(SubHeader, {
+			slots: {
+				default: '<h1>Mon titre principal</h1>',
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SubHeader – default state')
+	})
+})

package/src/components/SyAlert/SyAlert.vue

@@ -10,6 +10,7 @@
 	} from '@mdi/js'
 	import type { VIcon } from 'vuetify/components'
 	import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
+	import { vRgaaSvgFix } from '@/directives/rgaaSvgFix'
 
 	defineOptions({
 		inheritAttrs: false,

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

@@ -1,12 +1,82 @@
-import { Meta, Story } from '@storybook/addon-docs';
-import * as SyAlertStorie from '../SyAlert.stories';
-import '@/stories/styles/shared.css';
+import { Meta, Primary } from '@storybook/blocks';
+import * as SyAlertStories from '../SyAlert.stories.ts';
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
+import {
+	AccessibilityGuideLayout,
+	CriteriaSection,
+	CriteriaCard,
+	DemoSection,
+	BestPracticesSection,
+	ResourcesSection,
+} from '@/stories/accessibility/AccessibilityGuideLayout.mdx';
 
-<Meta of={SyAlertStorie} />
+<Meta of={SyAlertStories}/>
 
-<div className="header">
-  <h1>Accessibilité</h1>
-</div>
+<AccessibilityGuideLayout
+	componentName="SyAlert"
+	iconSrc={AccessibilityIcon}
+	apgHref="https://www.w3.org/WAI/ARIA/apg/patterns/alert/"
+>
+	<div class="mt-8">
+		<p>Rapport d'audit manuel : <a href="/audits/SyAlert.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/4010" target="_blank" style={{color:'#0C41BD'}}>issue #4010</a>)</p>
+	</div>
 
-  <p>Rapport d’audit manuel : <a href="/audits/SyAlert.xlsx" style={{ color:'#0C41BD' }}>Voir le rapport</a></p>
-  <p style={{ color: 'grey', fontSize: '14px', margin: '0px' }}>Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/4010" target="_blank" style={{color:'#0C41BD'}}>issue #4010</a>)</p>
+	<CriteriaSection>
+		<CriteriaCard icon="🔍" title="Rôle ARIA et structure sémantique">
+			<ul>
+				<li><strong>Rôle alert</strong> : Le composant utilise <code>role="alert"</code> pour annoncer automatiquement le message aux lecteurs d'écran</li>
+				<li><strong>Types sémantiques</strong> : Quatre types disponibles (<code>success</code>, <code>info</code>, <code>warning</code>, <code>error</code>) avec icônes appropriées</li>
+				<li><strong>Gestion Vuetify</strong> : Le rôle <code>role="undefined"</code> sur VAlert évite les conflits de rôles avec le conteneur parent</li>
+			</ul>
+		</CriteriaCard>
+
+		<CriteriaCard icon="🎨" title="Icônes et éléments décoratifs">
+			<ul>
+				<li><strong>Rôle presentation</strong> : Les SVG des icônes reçoivent <code>role="presentation"</code> via <code>v-rgaa-svg-fix</code> pour éviter la lecture superflue</li>
+				<li><strong>Icône décorative</strong> : L'icône de fermeture utilise <code>decorative</code> pour être masquée aux lecteurs d'écran</li>
+				<li><strong>Texte visible</strong> : Le bouton de fermeture contient le texte "Fermer" pour une accessibilité complète</li>
+			</ul>
+		</CriteriaCard>
+
+		<CriteriaCard icon="⌨️" title="Interaction et fermeture">
+			<ul>
+				<li><strong>Bouton natif</strong> : Utilisation de <code>VBtn</code> pour la fermeture, garantissant un comportement clavier natif</li>
+				<li><strong>Focus visible</strong> : Style <code>:focus-visible</code> avec outline clair pour la navigation au clavier</li>
+				<li><strong>Contrôle modelValue</strong> : Fermeture gérée via <code>v-model</code> pour une cohérence réactive</li>
+			</ul>
+		</CriteriaCard>
+
+		<CriteriaCard icon="📱" title="Variantes et styles accessibles">
+			<ul>
+				<li><strong>Deux variantes</strong> : <code>tonal</code> (fond coloré) et <code>outlined</code> (contour) avec contrastes adaptés</li>
+				<li><strong>Thème sombre</strong> : Styles spécifiques pour le mode dark avec contrastes inversés</li>
+				<li><strong>Responsive</strong> : Adaptation mobile avec flexbox et espacement optimisé</li>
+			</ul>
+		</CriteriaCard>
+	</CriteriaSection>
+
+	<DemoSection componentName="SyAlert">
+		<Primary />
+	</DemoSection>
+
+	<BestPracticesSection>
+		<ul>
+			<li><strong>Type approprié</strong> : Choisissez <code>error</code> pour les erreurs bloquantes, <code>warning</code> pour les avertissements, <code>success</code> pour les confirmations, <code>info</code> pour les informations</li>
+			<li><strong>Fermeture conditionnelle</strong> : Utilisez <code>closable={true}</code> uniquement si l'utilisateur peut ignorer l'alerte en toute sécurité</li>
+			<li><strong>Messages concis</strong> : Gardez les textes clairs et directs pour une compréhension rapide</li>
+			<li><strong>Positionnement</strong> : Placez les alertes de manière visible mais non intrusive dans le flux de navigation</li>
+			<li><strong>Évitez les multiples</strong> : Ne cumulez pas plusieurs alertes simultanément pour éviter la surcharge cognitive</li>
+		</ul>
+	</BestPracticesSection>
+
+	<ResourcesSection>
+		<ul>
+			<li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/alert/" target="_blank" rel="noopener noreferrer">Guide des pratiques WAI-ARIA : Alertes</a></li>
+			<li><a href="https://www.w3.org/WAI/WCAG21/quickref/" target="_blank" rel="noopener noreferrer">Référence rapide WCAG 2.1</a></li>
+			<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#10.6" target="_blank" rel="noopener noreferrer">RGAA Critère 10.6 : Messages d'erreur</a></li>
+			<li><a href="https://inclusive-components.design/notifications/" target="_blank" rel="noopener noreferrer">Inclusive Components: Notifications</a></li>
+		</ul>
+	</ResourcesSection>
+
+</AccessibilityGuideLayout>

package/src/components/SyAlert/tests/SyAlert.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 SyAlert from '../SyAlert.vue'
+
+describe('SyAlert – accessibility (axe)', () => {
+	it('has no obvious axe violations', async () => {
+		const wrapper = mount(SyAlert, {
+			props: {
+				type: 'info',
+			},
+			slots: {
+				default: 'Ceci est un message d\'information.',
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyAlert – default state')
+	})
+})