@cnamts/synapse 1.0.22 → 1.0.24

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

@@ -1,12 +1,88 @@
-import { Meta, Story } from '@storybook/addon-docs';
-import * as Stories from '../LogoBrandSection.stories.ts';
-import '@/stories/styles/shared.css';
+import { Meta, Story } from '@storybook/blocks';
+import * as LogoBrandSectionStories from '../LogoBrandSection.stories';
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
+import {
+	AccessibilityGuideLayout,
+	CriteriaSection,
+	CriteriaCard,
+	DemoSection,
+	BestPracticesSection,
+	ResourcesSection,
+	AuditSection,
+} from '@/stories/accessibility/AccessibilityGuideLayout.mdx';
 
-<Meta of={Stories} />
+<Meta of={LogoBrandSectionStories} />
 
-<div className="header">
-  <h1>Accessibilité</h1>
-  <p>Cette page sera bientôt disponible</p>
-</div>
+<AccessibilityGuideLayout
+	componentName="LogoBrandSection"
+	iconSrc={AccessibilityIcon}
+>
+	<AuditSection>
+		<div>Rapport d'audit manuel : <a href="/audits/LogoBrandSection.xlsx" style={{ color: '#0C41BD' }}>Voir le rapport</a></div>
+		<div style={{ color: 'grey', fontSize: '14px', marginTop: '0px' }}>
+			Aucune correction nécessaire.
+		</div>
+	</AuditSection>
+	
+	<CriteriaSection>
+		<CriteriaCard icon="🔗" title="Liens et navigation">
+			<ul>
+				<li><strong>Composant dynamique</strong> : Détecte automatiquement <code>router-link</code>, <code>&lt;a&gt;</code> ou <code>&lt;div&gt;</code> selon <code>homeLink</code>.</li>
+				<li><strong>Label du lien principal</strong> : <code>ariaLabel</code> concaténé avec " Retour vers accueil du site".</li>
+				<li><strong>Label du logo secondaire</strong> : Calculé avec <code>homeLinkPrefix</code> et <code>alt</code> du logo.</li>
+				<li><strong>Lien secondaire</strong> : Uniquement pour les thèmes <code>ameli-pro</code> et <code>ameli</code>.</li>
+			</ul>
+		</CriteriaCard>
 
-<br />
+		<CriteriaCard icon="📝" title="Structure sémantique et titres">
+			<ul>
+				<li><strong>Titre principal</strong> : Utilise <code>SyHeading</code> avec <code>headingLevelTitle</code> (1-6).</li>
+				<li><strong>Sous-titre</strong> : Utilise <code>SyHeading</code> avec <code>headingLevelSubtitle</code> (1-4).</li>
+				<li><strong>Contenu conditionnel</strong> : Affichage du sous-titre uniquement si titre présent et non-mobile.</li>
+				<li><strong>Texte structuré</strong> : Support des titres avec <code>text</code> et <code>highlight</code>.</li>
+			</ul>
+		</CriteriaCard>
+
+		<CriteriaCard icon="🎨" title="Éléments décoratifs et styles">
+			<ul>
+				<li><strong>Séparateur SVG</strong> : <code>focusable="false"</code> et <code>aria-hidden="true"</code>.</li>
+				<li><strong>Couleur du séparateur</strong> : Adaptée selon le thème (secondaire, primaire, #cd545b).</li>
+				<li><strong>Dimensions adaptatives</strong> : Responsive selon <code>mobileVersion</code> et présence logo secondaire.</li>
+				<li><strong>Logo principal</strong> : Props transmises au composant Logo (avatar, taille, signature).</li>
+			</ul>
+		</CriteriaCard>
+
+		<CriteriaCard icon="🖼️" title="Images et logos secondaires">
+			<ul>
+				<li><strong>Logo secondaire</strong> : Balise <code>&lt;img&gt;</code> avec attribut <code>alt</code> descriptif.</li>
+				<li><strong>Mapping des thèmes</strong> : Association automatique du logo selon <code>secondaryLogoMapping</code>.</li>
+				<li><strong>Avatar conditionnel</strong> : Mode avatar si <code>reduceLogo</code> et logo secondaire présent.</li>
+			</ul>
+		</CriteriaCard>
+	</CriteriaSection>
+
+	<DemoSection componentName="LogoBrandSection">
+		<Story of={LogoBrandSectionStories.Default} />
+	</DemoSection>
+
+	<BestPracticesSection>
+		<ul>
+			<li>Fournissez toujours un <code>homeLink.ariaLabel</code> descriptif pour le lien vers l'accueil.</li>
+			<li>Choisissez des niveaux de titres cohérents avec la hiérarchie de votre page.</li>
+			<li>Utilisez <code>mobileVersion</code> pour adapter l'affichage sur petits écrans.</li>
+			<li>Activez <code>reduceLogo</code> dans les espaces contraints ou avec logo secondaire.</li>
+			<li>Vérifiez que les <code>serviceTitle</code> et <code>serviceSubTitle</code> sont pertinents pour le contexte.</li>
+			<li>Testez les différents thèmes pour vous assurer que les contrastes sont maintenus.</li>
+		</ul>
+	</BestPracticesSection>
+
+	<ResourcesSection>
+		<ul>
+			<li><a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html" target="_blank" rel="noopener noreferrer">WCAG : Contenu non textuel</a></li>
+			<li><a href="https://www.w3.org/WAI/WCAG21/Understanding/headings-and-labels.html" target="_blank" rel="noopener noreferrer">WCAG : Titres et étiquettes</a></li>
+			<li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/link/" target="_blank" rel="noopener noreferrer">Guide des pratiques WAI-ARIA : Liens</a></li>
+			<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#9.1" target="_blank" rel="noopener noreferrer">RGAA : Structuration de l'information</a></li>
+			<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#12.6" target="_blank" rel="noopener noreferrer">RGAA : Liens</a></li>
+		</ul>
+	</ResourcesSection>
+</AccessibilityGuideLayout>

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

@@ -1,10 +1,76 @@
-import { Meta, Story } from '@storybook/addon-docs';
-import * as LunarCalendar from '../LunarCalendar.stories';
-import '@/stories/styles/shared.css';
+import { Meta, Primary } from '@storybook/blocks';
+import * as Stories from '../LunarCalendar.stories';
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
+import {
+	AccessibilityGuideLayout,
+	CriteriaSection,
+	CriteriaCard,
+	DemoSection,
+	BestPracticesSection,
+	ResourcesSection,
+} from '@/stories/accessibility/AccessibilityGuideLayout.mdx';
 
-<Meta of={LunarCalendar} />
+<Meta of={Stories}/>
 
-<div className="header">
-  <h1>Accessibilité</h1>
-  <p>Cette page sera bientôt disponible</p>
-</div>
+<AccessibilityGuideLayout
+	componentName="LunarCalendar"
+	iconSrc={AccessibilityIcon}
+	apgHref="https://www.w3.org/WAI/ARIA/apg/patterns/textfield/"
+>
+
+<CriteriaSection>
+
+<CriteriaCard title="Structure sémantique">
+- **Champ de saisie natif** : Utilise un élément `input` de type texte avec masque de formatage
+- **Label associé** : Le label est correctement associé au champ via le composant SyTextField
+- **Masque de saisie** : Le format `JJ/MM/AAAA` est appliqué via la directive `v-maska`
+- **Icônes décoratives** : Les icônes calendrier sont marquées comme décoratives
+</CriteriaCard>
+
+<CriteriaCard title="États et feedback">
+- **Messages d'erreur** : Les erreurs de validation sont annoncées via `aria-describedby`
+- **Messages de succès** : Les confirmations sont également annoncées aux lecteurs d'écran
+- **Champ requis** : L'attribut `required` est correctement appliqué quand nécessaire
+- **Contraintes de dates** : Validation des années min/max avec feedback approprié
+</CriteriaCard>
+
+<CriteriaCard title="Navigation au clavier">
+- **Tabulation** : Navigation au clavier standard via le composant SyTextField
+- **Saisie guidée** : Le masque facilite la saisie en indiquant le format attendu
+- **Effacement** : Support du bouton d'effacement quand `isClearable` est activé
+- **Focus visible** : Indication claire du focus pour les utilisateurs clavier
+</CriteriaCard>
+
+</CriteriaSection>
+
+<DemoSection componentName="LunarCalendar">
+	<Primary />
+</DemoSection>
+
+## Bonnes pratiques
+
+<BestPracticesSection>
+	<ul>
+		<li><strong>Label descriptif</strong> : Utiliser un label qui explique clairement qu'il s'agit d'une date lunaire et indiquer le format attendu JJ/MM/AAAA.</li>
+		<li><strong>Messages clairs</strong> : Fournir des messages d'erreur qui expliquent le format attendu et les contraintes de validité.</li>
+		<li><strong>Contraintes pertinentes</strong> : Définir des plages d'années logiques pour le contexte d'utilisation.</li>
+		<li><strong>Feedback immédiat</strong> : Valider dès la perte du focus pour guider l'utilisateur dans sa saisie.</li>
+		<li><strong>Placeholder utile</strong> : Utiliser JJ/MM/AAAA comme placeholder pour renforcer le format attendu.</li>
+		<li><strong>Icônes appropriées</strong> : Les icônes calendrier aident à identifier visuellement le type de saisie attendue.</li>
+		<li><strong>Effacement facilité</strong> : Activer isClearable pour permettre aux utilisateurs de corriger facilement leur saisie.</li>
+	</ul>
+</BestPracticesSection>
+
+## Ressources
+
+<ResourcesSection>
+	<ul>
+		<li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/textfield/" target="_blank" rel="noopener noreferrer">WAI-ARIA Authoring Practices - Text Input</a></li>
+		<li><a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/input" target="_blank" rel="noopener noreferrer">MDN Web Docs - input element</a></li>
+		<li><a href="https://developer.mozilla.org/fr/docs/Web/Accessibility/ARIA/Roles/textbox_role" target="_blank" rel="noopener noreferrer">MDN Web Docs - ARIA: textbox role</a></li>
+		<li><a href="https://www.numerique.gouv.fr/publications/rgaa-accessibilite/#critere-118-champs-de-saisie" target="_blank" rel="noopener noreferrer">RGAA - Critère 11.8 - Champs de saisie</a></li>
+		<li><a href="/docs/components-customs-sytextfield--docs" target="_blank" rel="noopener noreferrer">Documentation SyTextField</a></li>
+	</ul>
+</ResourcesSection>
+
+</AccessibilityGuideLayout>

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

@@ -0,0 +1,163 @@
+// @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 LunarCalendar from '../LunarCalendar.vue'
+
+describe('LunarCalendar – accessibility (axe)', () => {
+	it('has no obvious axe violations with default props', async () => {
+		const wrapper = mount(LunarCalendar, {
+			props: {
+				label: 'Date de naissance lunaire',
+			},
+			modelValue: '',
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'LunarCalendar - default props', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations with value', async () => {
+		const wrapper = mount(LunarCalendar, {
+			props: {
+				label: 'Date de naissance lunaire',
+			},
+			modelValue: '15/08/2023',
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'LunarCalendar - with value', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations with required field', async () => {
+		const wrapper = mount(LunarCalendar, {
+			props: {
+				label: 'Date de naissance lunaire',
+				required: true,
+			},
+			modelValue: '',
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'LunarCalendar - required field', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations with error messages', async () => {
+		const wrapper = mount(LunarCalendar, {
+			props: {
+				label: 'Date de naissance lunaire',
+				required: true,
+			},
+			modelValue: 'invalid',
+		})
+
+		// Trigger validation
+		await wrapper.find('input').trigger('blur')
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'LunarCalendar - with errors', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations with success messages', async () => {
+		const wrapper = mount(LunarCalendar, {
+			props: {
+				label: 'Date de naissance lunaire',
+				successMessages: 'Date valide',
+			},
+			modelValue: '15/08/2023',
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'LunarCalendar - with success messages', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations with clearable field', async () => {
+		const wrapper = mount(LunarCalendar, {
+			props: {
+				label: 'Date de naissance lunaire',
+				isClearable: true,
+			},
+			modelValue: '15/08/2023',
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'LunarCalendar - clearable field', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations with prepend icon', async () => {
+		const wrapper = mount(LunarCalendar, {
+			props: {
+				label: 'Date de naissance lunaire',
+				displayPrependIcon: true,
+				displayAppendIcon: false,
+			},
+			modelValue: '',
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'LunarCalendar - with prepend icon', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations with append icon', async () => {
+		const wrapper = mount(LunarCalendar, {
+			props: {
+				label: 'Date de naissance lunaire',
+				displayPrependIcon: false,
+				displayAppendIcon: true,
+			},
+			modelValue: '',
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'LunarCalendar - with append icon', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations with year constraints', async () => {
+		const wrapper = mount(LunarCalendar, {
+			props: {
+				label: 'Date de naissance lunaire',
+				minYear: 1900,
+				maxYear: 2023,
+			},
+			modelValue: '15/08/2023',
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'LunarCalendar - with year constraints', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations with placeholder', async () => {
+		const wrapper = mount(LunarCalendar, {
+			props: {
+				label: 'Date de naissance lunaire',
+				placeholder: 'JJ/MM/AAAA',
+			},
+			modelValue: '',
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'LunarCalendar - with placeholder', {
+			ignoreRules: ['region'],
+		})
+	})
+})

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

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest'
 import LunarCalendar from '../LunarCalendar.vue'
-import { mount } from '@vue/test-utils'
+import { flushPromises, mount } from '@vue/test-utils'
 
 describe('LunarCalendar', () => {
 	it('renders correctly', () => {
@@ -56,6 +56,7 @@ describe('LunarCalendar', () => {
 			const input = wrapper.find('input')
 			await input.setValue('10/19/1995')
 			await input.trigger('blur')
+			await flushPromises()
 
 			expect(wrapper.html()).toContain('L\'année doit être supérieure ou égale à 1996.')
 		})
@@ -72,6 +73,7 @@ describe('LunarCalendar', () => {
 			const input = wrapper.find('input')
 			await input.setValue('10/19/1995')
 			await input.trigger('blur')
+			await flushPromises()
 
 			expect(wrapper.html()).toContain('L\'année doit être inférieure ou égale à 1994.')
 		})

package/src/components/LunarCalendar/useLunarCalendarValidation.ts

@@ -20,13 +20,12 @@ export function useLunarCalendarValidation(
 	)
 
 	const validation = useValidation({
-		customRules: rules.value,
 		showSuccessMessages: successMessage !== undefined,
 		fieldIdentifier: toValue(label),
 	})
 
-	function validateOnSubmit() {
-		const result = validation.validateField(
+	async function validateOnSubmit() {
+		const result = await validation.validateField(
 			modelValue.value,
 			rules.value,
 		)
@@ -36,8 +35,8 @@ export function useLunarCalendarValidation(
 
 	useValidatable(validateOnSubmit, validation.clearValidation)
 
-	function validate() {
-		return validation.validateField(
+	async function validate() {
+		return await validation.validateField(
 			modelValue.value,
 			rules.value,
 		)

package/src/components/MaintenancePage/MaintenancePage.vue

@@ -34,7 +34,7 @@
 <template>
 	<StatusPage
 		:heading-level="headingLevel"
-		:unique-id="props.uniqueId"
+		:unique-id="props.uniqueId ?? undefined"
 		:page-title="pageTitle"
 		:message="message"
 		:code="code"

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

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest'
-import { shallowMount } from '@vue/test-utils'
+import { mount, shallowMount } from '@vue/test-utils'
 import StatusPage from '../../StatusPage/StatusPage.vue'
 import MaintenancePage from '../MaintenancePage.vue'
 
@@ -26,11 +26,10 @@ describe('MaintenancePage', () => {
 		expect(statusPage.props('code')).toBeDefined()
 	})
 
-	it('passes a uniqueId prop to StatusPage', () => {
-		const wrapper = shallowMount(MaintenancePage)
-		const statusPage = wrapper.findComponent(StatusPage)
+	it('uses a generated uniqueId', () => {
+		const wrapper = mount(MaintenancePage)
 
-		expect(statusPage.props('uniqueId')).toBeDefined()
+		expect(wrapper.find('.vd-page-container').attributes('id')).toMatch(/^[-a-z0-9]+-container$/)
 	})
 
 	it('passes a custom uniqueId prop to StatusPage', () => {

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

@@ -9,6 +9,5 @@ exports[`MaintenancePage > renders correctly 1`] = `
   hidebtn="true"
   message="L’application n’est pas disponible pour le moment, veuillez nous excuser pour la gêne occasionnée."
   pagetitle="Maintenance en cours"
-  uniqueid=""
 ></status-page-stub>
 `;

package/src/components/MonthPicker/MonthPicker.mdx

@@ -0,0 +1,35 @@
+import { Controls, Canvas, Meta, Source } from '@storybook/blocks';
+import * as MonthPicker from './MonthPicker.stories';
+
+<Meta of={MonthPicker} />
+
+<div className="header">
+  <h1>MonthPicker</h1>
+  <p>L’élément `MonthPicker` est utilisé pour sélectionner un mois et une année. Il est composé d'un champ de saisie et d'un sélecteur visuel.</p>
+</div>
+
+<Canvas
+    of={MonthPicker.Default}
+/>
+
+# API
+
+<Controls of={MonthPicker.Default} />
+
+# Exemple d'utilisation
+
+<Source dark code={`
+<script setup lang="ts">
+    import { MonthPicker } from '@cnamts/synapse'
+    import { ref } from 'vue'
+
+    const selectedMonth = ref<string | undefined>(undefined) // format: MM/YYYY
+</script>
+
+<template>
+    <MonthPicker
+        label="Début du projet"
+        v-model="selectedMonth"
+    />
+</template>
+`} />