@cnamts/synapse 1.0.22 → 1.0.23

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')
+	})
+})

package/src/components/SyHeading/SyHeading.a11y.test.ts

@@ -0,0 +1,149 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { axe } from 'vitest-axe'
+import { assertNoA11yViolations } from '@tests/unit/accessibility/axeUtils'
+import SyHeading from './SyHeading.vue'
+
+describe('SyHeading - Accessibility', () => {
+	it('should not have any accessibility violations with default props', async () => {
+		const wrapper = mount(SyHeading, {
+			slots: {
+				default: 'Default heading',
+			},
+		})
+
+		const results = await axe(wrapper.element, {
+			rules: {
+				region: { enabled: false },
+			},
+		})
+		assertNoA11yViolations(results, 'SyHeading - default props')
+	})
+
+	it('should not have accessibility violations with all heading levels', async () => {
+		const levels = [1, 2, 3, 4, 5, 6] as const
+
+		for (const level of levels) {
+			const wrapper = mount(SyHeading, {
+				props: {
+					level,
+				},
+				slots: {
+					default: `Heading level ${level}`,
+				},
+			})
+
+			const results = await axe(wrapper.element, {
+				rules: {
+					region: { enabled: false },
+				},
+			})
+			assertNoA11yViolations(results, `SyHeading - level ${level}`)
+		}
+	})
+
+	it('should not have accessibility violations with complex content', async () => {
+		const wrapper = mount(SyHeading, {
+			props: {
+				level: 3,
+			},
+			slots: {
+				default: '<span>Heading with <em>emphasis</em> and <strong>strong text</strong></span>',
+			},
+		})
+
+		const results = await axe(wrapper.element, {
+			rules: {
+				region: { enabled: false },
+			},
+		})
+		assertNoA11yViolations(results, 'SyHeading - complex content')
+	})
+
+	it('should not have accessibility violations with very long content', async () => {
+		const longContent = 'This is a very long heading text that might wrap across multiple lines and should still be accessible to screen readers and other assistive technologies without any issues.'
+
+		const wrapper = mount(SyHeading, {
+			props: {
+				level: 2,
+			},
+			slots: {
+				default: longContent,
+			},
+		})
+
+		const results = await axe(wrapper.element, {
+			rules: {
+				region: { enabled: false },
+			},
+		})
+		assertNoA11yViolations(results, 'SyHeading - long content')
+	})
+
+	it('should not have accessibility violations with special characters', async () => {
+		const wrapper = mount(SyHeading, {
+			props: {
+				level: 1,
+			},
+			slots: {
+				default: 'Heading with special chars: éàüßñ & symbols @#$%',
+			},
+		})
+
+		const results = await axe(wrapper.element, {
+			rules: {
+				region: { enabled: false },
+			},
+		})
+		assertNoA11yViolations(results, 'SyHeading - special characters')
+	})
+
+	it('should use semantic heading elements correctly', async () => {
+		const levels = [1, 2, 3, 4, 5, 6] as const
+
+		for (const level of levels) {
+			const wrapper = mount(SyHeading, {
+				props: {
+					level,
+				},
+				slots: {
+					default: `Semantic heading level ${level}`,
+				},
+			})
+
+			// Verify the correct semantic heading element is used
+			expect(wrapper.find(`h${level}`).exists()).toBe(true)
+
+			// Verify no accessibility violations
+			const results = await axe(wrapper.element, {
+				rules: {
+					region: { enabled: false },
+				},
+			})
+			assertNoA11yViolations(results, `SyHeading - semantic level ${level}`)
+		}
+	})
+
+	it('should maintain heading hierarchy for screen readers', async () => {
+		const wrapper = mount(SyHeading, {
+			props: {
+				level: 2,
+			},
+			slots: {
+				default: 'Important section heading',
+			},
+		})
+
+		// Verify the heading is properly structured for screen readers
+		const heading = wrapper.find('h2')
+		expect(heading.exists()).toBe(true)
+		expect(heading.text()).toBe('Important section heading')
+
+		const results = await axe(wrapper.element, {
+			rules: {
+				region: { enabled: false },
+			},
+		})
+		assertNoA11yViolations(results, 'SyHeading - hierarchy')
+	})
+})

package/src/components/SyHeading/SyHeading.test.ts

@@ -0,0 +1,115 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { axe } from 'vitest-axe'
+import { assertNoA11yViolations } from '@tests/unit/accessibility/axeUtils'
+import SyHeading from './SyHeading.vue'
+
+describe('SyHeading', () => {
+	it('renders default heading level 2', () => {
+		const wrapper = mount(SyHeading, {
+			slots: {
+				default: 'Test heading',
+			},
+		})
+
+		expect(wrapper.find('h2').exists()).toBe(true)
+		expect(wrapper.text()).toBe('Test heading')
+		expect(wrapper.classes()).toContain('sy-heading')
+	})
+
+	it('renders custom heading levels', () => {
+		const levels = [1, 2, 3, 4, 5, 6] as const
+
+		levels.forEach((level) => {
+			const wrapper = mount(SyHeading, {
+				props: {
+					level,
+				},
+				slots: {
+					default: `Heading level ${level}`,
+				},
+			})
+
+			expect(wrapper.find(`h${level}`).exists()).toBe(true)
+			expect(wrapper.text()).toBe(`Heading level ${level}`)
+		})
+	})
+
+	it('applies correct CSS class', () => {
+		const wrapper = mount(SyHeading, {
+			slots: {
+				default: 'Test heading',
+			},
+		})
+
+		expect(wrapper.classes()).toContain('sy-heading')
+	})
+
+	it('renders complex content', () => {
+		const wrapper = mount(SyHeading, {
+			slots: {
+				default: '<span>Complex <strong>content</strong></span>',
+			},
+		})
+
+		expect(wrapper.text()).toBe('Complex content')
+	})
+
+	it('should not have any accessibility violations', async () => {
+		const wrapper = mount(SyHeading, {
+			props: {
+				level: 1,
+			},
+			slots: {
+				default: 'Main heading',
+			},
+		})
+
+		const results = await axe(wrapper.element, {
+			rules: {
+				region: { enabled: false },
+			},
+		})
+		assertNoA11yViolations(results, 'SyHeading - main heading')
+	})
+
+	it('should not have accessibility violations for all heading levels', async () => {
+		const levels = [1, 2, 3, 4, 5, 6] as const
+
+		for (const level of levels) {
+			const wrapper = mount(SyHeading, {
+				props: {
+					level,
+				},
+				slots: {
+					default: `Heading level ${level}`,
+				},
+			})
+
+			const results = await axe(wrapper.element, {
+				rules: {
+					region: { enabled: false },
+				},
+			})
+			assertNoA11yViolations(results, `SyHeading - level ${level}`)
+		}
+	})
+
+	it('should not have accessibility violations with complex content', async () => {
+		const wrapper = mount(SyHeading, {
+			props: {
+				level: 2,
+			},
+			slots: {
+				default: '<span>Heading with <em>emphasis</em> and <strong>strong text</strong></span>',
+			},
+		})
+
+		const results = await axe(wrapper.element, {
+			rules: {
+				region: { enabled: false },
+			},
+		})
+		assertNoA11yViolations(results, 'SyHeading - complex content')
+	})
+})