@cnamts/synapse 1.0.22 → 1.0.23

package/src/components/ExternalLinks/tests/ExternalLinks.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 ExternalLinks from '../ExternalLinks.vue'
+
+describe('ExternalLinks – accessibility (axe)', () => {
+	it('has no obvious axe violations', async () => {
+		const wrapper = mount(ExternalLinks, {
+			props: {
+				items: [
+					{ text: 'ameli.fr', href: 'https://ameli.fr' },
+					{ text: 'Legifrance', href: 'https://legifrance.gouv.fr' },
+				],
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'ExternalLinks – default state')
+	})
+})

package/src/components/FileList/FileList.stories.ts

@@ -161,6 +161,44 @@ const meta = {
 				},
 			},
 		},
+		'seeLabel': {
+			description: 'Label du bouton de prévisualisation',
+			control: 'text',
+			table: {
+				category: 'props',
+				type: {
+					summary: 'string',
+				},
+				defaultValue: {
+					summary: 'Voir le fichier',
+				},
+			},
+		},
+		'deleteLabel': {
+			description: 'Label du bouton de suppression',
+			control: 'text',
+			table: {
+				category: 'props',
+				type: { summary: 'string',
+				},
+				defaultValue: {
+					summary: 'Supprimer le fichier',
+				},
+			},
+		},
+		'importLabel': {
+			description: 'Label du bouton d\'upload',
+			control: 'text',
+			table: {
+				category: 'props',
+				type: {
+					summary: 'string',
+				},
+				defaultValue: {
+					summary: 'Importer le fichier',
+				},
+			},
+		},
 	},
 	parameters: {
 		controls: {
@@ -197,6 +235,9 @@ export const Default: Story = {
 		onPreview: fn(),
 	},
 	parameters: {
+		a11y: {
+			disable: false,
+		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -267,7 +308,7 @@ export const States: Story = {
 	},
 	parameters: {
 		a11y: {
-			disable: true,
+			disable: false,
 		},
 		sourceCode: [
 			{
@@ -339,6 +380,9 @@ export const OptionalDocument: Story = {
 		onPreview: fn(),
 	},
 	parameters: {
+		a11y: {
+			disable: false,
+		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -415,6 +459,9 @@ export const Actions: Story = {
 		onPreview: fn(),
 	},
 	parameters: {
+		a11y: {
+			disable: false,
+		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -512,6 +559,9 @@ export const Customization: Story = {
 		`,
 	}),
 	parameters: {
+		a11y: {
+			disable: false,
+		},
 		sourceCode: [
 			{
 				name: 'Template',

package/src/components/FileList/UploadItem/UploadItem.vue

@@ -32,6 +32,9 @@
 		showPreviewBtn?: boolean
 		tag?: string
 		locales?: typeof defaultLocales
+		seeLabel?: string
+		deleteLabel?: string
+		importLabel?: string
 	}>(), {
 		fileName: undefined,
 		message: undefined,
@@ -43,6 +46,9 @@
 		showPreviewBtn: false,
 		tag: 'div',
 		locales: () => defaultLocales,
+		seeLabel: defaultLocales.see,
+		deleteLabel: defaultLocales.delete,
+		importLabel: defaultLocales.import,
 	})
 
 	defineSlots<{
@@ -132,10 +138,10 @@
 					v-if="(state === 'initial' || state == 'error') && showUploadBtn"
 					class="file-item__action file-item__action-upload text-primary"
 					variant="text"
-					:aria-label="locales.importLabel(title)"
+					:aria-label="`${locales.import} ${title}`"
 					@click="$emit('upload', itemId)"
 				>
-					<span>{{ locales.import }}</span>
+					<span>{{ importLabel }}</span>
 					<template #prepend>
 						<SyIcon
 							color="primary"
@@ -148,10 +154,10 @@
 					v-if="state === 'success' && showPreviewBtn"
 					class="file-item__action file-item__action-preview text-primary"
 					variant="text"
-					:aria-label="locales.seeLabel(title)"
+					:aria-label="`${locales.see} ${fileName}`"
 					@click="$emit('preview', itemId)"
 				>
-					<span>{{ locales.see }}</span>
+					<span>{{ seeLabel }}</span>
 					<template #prepend>
 						<SyIcon
 							color="primary"
@@ -164,10 +170,10 @@
 					v-if="state === 'success' && showDeleteBtn"
 					class="file-item__action file-item__action-delete text-error"
 					variant="text"
-					:aria-label="locales.deleteLabel(title)"
+					:aria-label="`${locales.delete} ${fileName}`"
 					@click="$emit('delete', itemId)"
 				>
-					<span>{{ locales.delete }}</span>
+					<span>{{ deleteLabel }}</span>
 					<template #prepend>
 						<SyIcon
 							color="error"
@@ -193,6 +199,7 @@
 				height="7"
 				color="primary"
 				rounded="true"
+				:aria-label="title ? `Chargement de ${title}` : 'Chargement en cours'"
 			/>
 		</div>
 	</component>

package/src/components/FileList/UploadItem/locales.ts

@@ -1,17 +1,8 @@
 export const locales = {
 	optionalDocument: 'Document facultatif',
-	import: 'Importer',
-	see: 'Voir',
-	delete: 'Supprimer',
-	importLabel(title: string) {
-		return `Importer le fichier ${title}`
-	},
-	seeLabel(title: string) {
-		return `Voir le fichier ${title}`
-	},
-	deleteLabel(title: string) {
-		return `Supprimer le fichier ${title}`
-	},
+	see: 'Voir le fichier',
+	delete: 'Supprimer le fichier',
+	import: 'Importer le fichier',
 	uploading: 'En cours',
 	success: 'Téléchargé',
 	error: 'Erreur',

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

@@ -21,6 +21,9 @@ import {
       <ul>
         <li><strong>Formattage sous forme de liste  </strong> : Utilisation de balises HTML sémantiques pour structurer les éléments de la liste de fichiers.</li>
         <li><strong>Boutons</strong> : Utilisation de <code>&lt;button&gt;</code> pour les actions associées à chaque fichier, avec des étiquettes claires qui reprennent l'action et le nom du fichier.</li>
+        <li><strong>Aria-label</strong>: On utilise les méthodes <code>importAriaLabel()</code> pour générer les etiquettes ARIA des champs avec le titre et  <code>seeAriaLabel()</code> et <code>deleteAriaLabel()</code> pour les étiquettes ARIA avec le nom du fichier.</li>
+        <li><strong>SeeLabel, ImportLabel, DeleteLabel </strong> : Utilisation de ces propriétés pour fournir des étiquettes claires et descriptives pour les actions associées à chaque fichier.</li>
+
       </ul>
     </CriteriaCard>
 

package/src/components/FileUpload/FileUpload.vue

@@ -74,7 +74,7 @@
 			files = files.slice(0, 1)
 		}
 		const { errors, validFiles } = validateFiles(
-			files, props.fileSizeMax, props.allowedExtensions, props.fileSizeUnits,
+			files, props.fileSizeMax, props.allowedExtensions, props.fileSizeUnits, props.locales,
 		)
 
 		if (errors.length) {
@@ -149,6 +149,7 @@
 					:multiple="multiple"
 					:file-size-max="fileSizeMax"
 					:file-size-units="fileSizeUnits"
+					:locales="locales"
 				>
 					<template
 						v-for="(_, slotName) in $slots"

package/src/components/FileUpload/FileUploadContent.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 	import { calcHumanFileSize } from '@/utils/calcHumanFileSize'
-	import { locales } from './locales'
+	import { locales as defaultLocales } from './locales'
 	import { mdiCloudUpload } from '@mdi/js'
 	import { computed } from 'vue'
 	import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
@@ -10,6 +10,7 @@
 		fileSizeUnits: Array<string>
 		fileSizeMax: number
 		multiple: boolean
+		locales: typeof defaultLocales
 	}>()
 
 	export interface FileUploadContentSlots {

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

@@ -268,6 +268,53 @@ describe('FileUpload', () => {
 		expect(wrapper.emitted('error')).toBeFalsy()
 	})
 
+	it('accepts a file whose extension is uppercase (case-insensitive check)', async () => {
+		const wrapper = mount(FileUpload, {
+			props: {
+				modelValue: [],
+				allowedExtensions: ['png'],
+			},
+		})
+
+		const file: File = new File([''], 'image.PNG', { type: 'image/png' })
+
+		await wrapper.find('.sy-file-upload').trigger('drop', {
+			dataTransfer: { files: [file] },
+		})
+
+		expect(wrapper.emitted('error')).toBeFalsy()
+		expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([[file]])
+	})
+
+	it('uses custom locales error message when provided', async () => {
+		const customLocales = {
+			or: 'Ou',
+			chooseFile: (multiple: boolean) => multiple ? 'Choisir des fichiers' : 'Choisir un fichier',
+			infoText: (max: string, ext: string[]) => `Taille max. : ${max}. Formats : ${ext.join(', ')}`,
+			fileSizeUnits: ['o', 'Ko', 'Mo', 'Go', 'To'],
+			dropFilesHere: (multiple: boolean) => multiple ? 'Déposer vos fichiers ici' : 'Déposer votre fichier ici',
+			errorSize: (fileName: string, max: string) => `Fichier ${fileName} trop lourd. Max : ${max}`,
+			errorExtension: () => `Message erreur custom !`,
+			fileUploadTitle: '',
+		}
+
+		const wrapper = mount(FileUpload, {
+			props: {
+				modelValue: [],
+				allowedExtensions: ['pdf'],
+				locales: customLocales,
+			},
+		})
+
+		const file: File = new File([''], 'image.PNG', { type: 'image/png' })
+
+		await wrapper.find('.sy-file-upload').trigger('drop', {
+			dataTransfer: { files: [file] },
+		})
+
+		expect(wrapper.emitted('error')?.[0]).toEqual([['Message erreur custom !']])
+	})
+
 	it('add the new files to the existing ones when the input changes in multiple mode', async () => {
 		const file1 = new File([''], 'filename1.jpg', { type: 'image/jpeg' })
 		const file2 = new File([''], 'filename2.jpg', { type: 'image/jpeg' })

package/src/components/FileUpload/validateFiles.ts

@@ -1,14 +1,16 @@
 import { calcHumanFileSize } from '@/utils/calcHumanFileSize'
-import { locales } from './locales'
+import { locales as defaultLocales } from './locales'
 
 export default function validateFiles(
 	files: File[],
 	maxFileSize: number,
 	allowedExtensions: string[],
 	fileSizeUnits: string[],
+	locales: typeof defaultLocales = defaultLocales,
 ) {
 	const errors: string[] = []
 	const validFiles: File[] = []
+	const normalizedExtensions = allowedExtensions.map(ext => ext.toLowerCase())
 	for (const file of files) {
 		let isValid = true
 		if (file.size > maxFileSize) {
@@ -18,8 +20,9 @@ export default function validateFiles(
 			isValid = false
 		}
 
+		const fileExt = (file.name.split('.').pop() || '').toLowerCase()
 		if (
-			!allowedExtensions.includes(file.name.split('.').pop() || '')
+			!normalizedExtensions.includes(fileExt)
 			&& allowedExtensions.length > 0
 		) {
 			errors.push(

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

@@ -1,15 +1,68 @@
-import { Meta, Story } from '@storybook/addon-docs';
+import { Meta, Primary } from '@storybook/blocks';
 import * as Stories from '../FranceConnectBtn.stories.ts';
-import '@/stories/styles/shared.css';
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
+import {
+	AccessibilityGuideLayout,
+	CriteriaSection,
+	CriteriaCard,
+	DemoSection,
+	BestPracticesSection,
+	ResourcesSection,
+} from '@/stories/accessibility/AccessibilityGuideLayout.mdx';
 
 <Meta of={Stories} />
 
-<div className="header">
-  <h1>Accessibilité</h1>
-</div>
-
-
-<div class="mt-2">
-<p>Rapport d’audit manuel : <a href="/audits/FranceConnectBtn.xlsx" style={{ color:'#0C41BD' }}>Voir le rapport</a></p>
+<AccessibilityGuideLayout
+	componentName="FranceConnectBtn"
+	iconSrc={AccessibilityIcon}
+	apgHref="https://www.w3.org/WAI/ARIA/apg/patterns/button/"
+>
+	<div class="mt-8">
+		<p>Rapport d’audit manuel : <a href="/audits/FranceConnectBtn.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/4005" target="_blank" style={{color:'#0C41BD'}}>issue #4005</a>)</p>
 	</div>
+
+	<CriteriaSection>
+		<CriteriaCard icon="🔍" title="Structure sémantique et attributs">
+			<ul>
+				<li><strong>Liens natifs</strong> : Utilisation de balises <code>&lt;a&gt;</code> pour le bouton principal et le lien d'information, garantissant une sémantique correcte.</li>
+				<li><strong>Labels explicites</strong> : Utilisation de l'attribut <code>aria-label</code> sur les liens pour fournir une description claire aux lecteurs d'écran (ex: "S'identifier avec FranceConnect" ou "S'identifier avec FranceConnect+").</li>
+				<li><strong>SVG masqué</strong> : Le logo SVG complexe est masqué aux technologies d'assistance avec <code>aria-hidden="true"</code> et <code>role="presentation"</code> car l'information est déjà portée par l'attribut <code>aria-label</code> du lien parent.</li>
+				<li><strong>Ouverture de fenêtre</strong> : Le lien externe informe l'utilisateur de l'ouverture d'un nouvel onglet, avec une icône explicitement masquée (<code>decorative=true</code>).</li>
+			</ul>
+		</CriteriaCard>
+
+		<CriteriaCard icon="⌨️" title="Navigation et interaction clavier">
+			<ul>
+				<li><strong>Focus natif</strong> : Les liens sont naturellement accessibles via la touche <kbd>Tab</kbd>.</li>
+				<li><strong>Indicateur de focus</strong> : Un style de focus clair, visible et avec un décalage (<code>outline-offset</code>) est implémenté pour garantir une bonne visibilité lors de la navigation au clavier.</li>
+			</ul>
+		</CriteriaCard>
+
+		<CriteriaCard icon="🎨" title="Styles et contrastes">
+			<ul>
+				<li><strong>Couleurs institutionnelles</strong> : Respect strict des couleurs et contrastes de la charte FranceConnect (Bleu France), garantissant un ratio de contraste suffisant.</li>
+				<li><strong>Adaptation au thème sombre</strong> : Ajustement des couleurs de fond (ex: <code>#8585f6</code>) et de texte en mode sombre pour maintenir la lisibilité et l'accessibilité visuelle.</li>
+			</ul>
+		</CriteriaCard>
+	</CriteriaSection>
+
+	<DemoSection componentName="FranceConnectBtn">
+		<Primary />
+	</DemoSection>
+
+	<BestPracticesSection>
+		<ul>
+			<li><strong>Positionnement</strong> : Placez toujours ce bouton dans un contexte de connexion ou d'authentification.</li>
+			<li><strong>Respect de la charte</strong> : Ne modifiez pas les proportions, les couleurs (en dehors du mode sombre) ou les libellés de ce bouton, car ils sont soumis aux règles strictes de la direction interministérielle du numérique (DINUM).</li>
+			<li>Assurez-vous que le lien <code>href</code> fourni pointe vers la véritable interface de redirection d'authentification.</li>
+		</ul>
+	</BestPracticesSection>
+
+	<ResourcesSection>
+		<ul>
+			<li><a href="https://franceconnect.gouv.fr/partenaires" target="_blank" rel="noopener noreferrer">Documentation et charte FranceConnect</a></li>
+			<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#6.1" target="_blank" rel="noopener noreferrer">RGAA : Liens et navigation</a></li>
+		</ul>
+	</ResourcesSection>
+</AccessibilityGuideLayout>

package/src/components/HeaderBar/HeaderBar.vue

@@ -23,7 +23,7 @@
 			to?: RouteLocationRaw
 			href?: string
 		}
-		headingLevelTitle: 1 | 2 | 3 | 4 | 5 | 6
+		headingLevelTitle?: 1 | 2 | 3 | 4 | 5 | 6
 	}
 
 	defineSlots<{
@@ -58,6 +58,7 @@
 			serviceSubtitle: undefined,
 			homeLink: undefined,
 			width: '1712px',
+			headingLevelTitle: 1,
 		})
 
 	function registerHeaderMenu(childMenuStatus: DeepReadonly<Ref<boolean>>) {

package/src/components/HeaderBar/HeaderLogo/HeaderLogo.vue

@@ -17,7 +17,7 @@
 			to?: RouteLocationRaw
 			href?: string
 		}
-		headingLevelTitle: 1 | 2 | 3 | 4 | 5 | 6
+		headingLevelTitle?: 1 | 2 | 3 | 4 | 5 | 6
 	}>(), {
 		ariaLabel: locales.ariaLabel,
 		serviceTitle: undefined,
@@ -25,6 +25,7 @@
 		homeLink: () => ({
 			href: '/',
 		}),
+		headingLevelTitle: 1,
 	})
 
 	defineSlots<{

package/src/components/HeaderNavigationBar/HeaderNavigationBar.vue

@@ -41,7 +41,7 @@
 			confirmationMessage?: boolean
 			/** Largeur interne */
 			width?: string
-			headingLevelTitle: 1 | 2 | 3 | 4 | 5 | 6
+			headingLevelTitle?: 1 | 2 | 3 | 4 | 5 | 6
 		}>(),
 		{
 			// Confirmation related defaults
@@ -57,6 +57,7 @@
 			maxHorizontalMenuItems: 6,
 			items: undefined,
 			width: '1712px',
+			headingLevelTitle: 1,
 		})
 
 	// Définition des événements émis

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>