@cnamts/synapse 1.0.21 → 1.0.23

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

@@ -207,9 +207,6 @@ export const Default: Story = {
 		`,
 	}),
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -370,9 +367,6 @@ export const ChipFormat: Story = {
 		`,
 	}),
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -599,9 +593,6 @@ export const FilterCombination: Story = {
 		`,
 	}),
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		layout: 'fullscreen',
 		sourceCode: [
 			{
@@ -835,9 +826,6 @@ export const Boolean: Story = {
 		`,
 	}),
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -988,9 +976,6 @@ export const ManyFields: Story = {
 		`,
 	}),
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',

package/src/components/FilterInline/FilterInline.vue

@@ -45,6 +45,7 @@
 			<template #activator="{ props: menuProps, isActive }">
 				<VBtn
 					v-bind="menuProps"
+					:aria-controls="isActive ? menuProps['aria-controls'] : undefined"
 					:class="`sy-filter-${filter.name}`"
 					:variant="getFilterCount(filter) ? undefined : 'outlined'"
 					color="secondary"

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

@@ -1,12 +1,75 @@
-import { Meta, Story } from '@storybook/addon-docs';
-import * as Stories from '../FilterInline.stories.ts';
+import { Meta, Story } from '@storybook/blocks';
+import * as Stories from '../FilterInline.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>
-  <p>Cette page sera bientôt disponible</p>
-</div>
+<AccessibilityGuideLayout
+	componentName="FilterInline"
+	iconSrc={AccessibilityIcon}
+>
+	<AuditSection>
+		<div>Aucun audit externe spécifique à ce composant pour le moment.</div>
+		<div style={{ color: 'grey', fontSize: '14px', marginTop: '0px' }}>
+			Testez via l’addon a11y et les tests axe dédiés.
+		</div>
+	</AuditSection>
 
-<br />
+	<CriteriaSection>
+		<CriteriaCard icon="🏷️" title="Structure et rôles">
+			<ul>
+				<li>Chaque filtre est un <code>button</code> ouvrant un menu (<code>VMenu</code>) avec <code>aria-haspopup="menu"</code> et <code>aria-expanded</code> géré par Vuetify.</li>
+				<li><code>aria-controls</code> est présent uniquement quand le menu est ouvert pour éviter des références manquantes.</li>
+				<li>Les listes de valeurs utilisent des composants champs (Select, SearchListField, PeriodField…) conservant leurs rôles natifs.</li>
+				<li>Les puces récapitulatives (<code>ChipList</code>) exposent un libellé (<code>aria-label</code>) et des actions de suppression.</li>
+			</ul>
+		</CriteriaCard>
+
+		<CriteriaCard icon="⌨️" title="Navigation clavier">
+			<ul>
+				<li>Activation des menus au clavier (Entrée/Espace) via <code>VMenu</code>.</li>
+				<li>Focus visible sur les boutons de filtres et sur les items des listes.</li>
+				<li>Échappe (Esc) pour fermer les menus.</li>
+			</ul>
+		</CriteriaCard>
+
+		<CriteriaCard icon="🎨" title="Contraste et lisibilité">
+			<ul>
+				<li>Boutons par défaut en thème secondaire avec contrastes conformes aux tokens.</li>
+				<li>Badges de comptage lisibles et annoncés via <code>aria-label</code> localisé.</li>
+				<li>Textes des puces issus des valeurs choisies ; évitez les libellés trop longs.</li>
+			</ul>
+		</CriteriaCard>
+	</CriteriaSection>
+
+	<DemoSection componentName="FilterInline">
+		<Story of={Stories.Default} />
+	</DemoSection>
+
+	<BestPracticesSection>
+		<ul>
+			<li>Préférez des titres de filtres courts et explicites ; complétez avec une aide textuelle dans le menu si nécessaire.</li>
+			<li>Évitez de masquer les focus visibles : laisser les styles par défaut ou renforcer le contour si nécessaire.</li>
+			<li>Pour les listes multiples, assurez-vous que chaque option a un libellé unique et compréhensible.</li>
+			<li>Ne forcez pas la fermeture automatique du menu lors de la sélection multiple afin de laisser l’utilisateur compléter sa saisie.</li>
+			<li>Vérifiez l’ordre logique de tabulation quand vous combinez FilterInline et FilterSideBar sur une même page.</li>
+		</ul>
+	</BestPracticesSection>
+
+	<ResourcesSection>
+		<ul>
+			<li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/" target="_blank" rel="noopener noreferrer">WAI-ARIA Authoring Practices – Menu Button</a></li>
+			<li><a href="https://www.numerique.gouv.fr/publications/rgaa-accessibilite/" target="_blank" rel="noopener noreferrer">RGAA – critères 7.1 (attributs ARIA) et 10.8 (éléments masqués)</a></li>
+		</ul>
+	</ResourcesSection>
+</AccessibilityGuideLayout>

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

@@ -9,9 +9,9 @@ exports[`FilterInline > renders correctly with an active filter 1`] = `
   sy-filters-inline
 ">
   <button
-    aria-controls="v-menu-v-0"
     aria-expanded="false"
     aria-haspopup="menu"
+    aria-owns="v-menu-v-0"
     class="
       bg-secondary
       ma-2
@@ -90,9 +90,9 @@ exports[`FilterInline > renders correctly with multiple active filters 1`] = `
   sy-filters-inline
 ">
   <button
-    aria-controls="v-menu-v-0"
     aria-expanded="false"
     aria-haspopup="menu"
+    aria-owns="v-menu-v-0"
     class="
       bg-secondary
       ma-2
@@ -160,9 +160,9 @@ exports[`FilterInline > renders correctly with multiple active filters 1`] = `
   </button>
   <!---->
   <button
-    aria-controls="v-menu-v-2"
     aria-expanded="false"
     aria-haspopup="menu"
+    aria-owns="v-menu-v-2"
     class="
       bg-secondary
       ma-2

package/src/components/FilterSideBar/FilterSideBar.stories.ts

@@ -644,9 +644,6 @@ export const FilterCombination: Story = {
 		`,
 	}),
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',

package/src/components/FilterSideBar/FilterSideBar.vue

@@ -115,10 +115,11 @@
 				rail
 				rail-width="395"
 				disable-resize-watcher
-				tabindex="0"
+				:tabindex="drawer ? 0 : -1"
 				class="sy-filters-side-bar__content elevation-6 bg-white"
 				role="dialog"
 				:aria-hidden="drawer ? undefined : 'true'"
+				:inert="drawer ? undefined : 'true'"
 				:aria-modal="props.modale"
 				:aria-label="locales.modaleLabel"
 				@keydown.escape.prevent="drawer = false"

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

@@ -1,15 +1,76 @@
-import { Meta, Story } from '@storybook/addon-docs';
-import * as Stories from '../FilterSideBar.stories.ts';
+import { Meta, Story } from '@storybook/blocks';
+import * as Stories from '../FilterSideBar.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="FilterSideBar"
+	iconSrc={AccessibilityIcon}
+>
+	<AuditSection>
+		<div>Rapport d’audit manuel : <a href="/audits/FilterSideBar.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/913" target="_blank" style={{color:'#0C41BD'}}>issue #913</a>)
+		</div>
+	</AuditSection>
 
+	<CriteriaSection>
+		<CriteriaCard icon="🏷️" title="Structure et rôles">
+			<ul>
+				<li>Le bouton d’ouverture est un <code>button</code> avec badge de comptage et libellé localisé.</li>
+				<li>Le panneau est un <code>VNavigationDrawer</code> exposé en <code>role="dialog"</code> et <code>aria-modal</code> lorsque <code>modale</code> est activé.</li>
+				<li><code>aria-hidden</code>, <code>inert</code> et <code>tabindex=-1</code> appliqués lorsqu’il est fermé pour éviter le focus sur du contenu masqué.</li>
+				<li>Chaque groupe de filtres conserve le rôle natif des champs (Select, SearchListField, PeriodField…) et les puces (<code>ChipList</code>) exposent un libellé <code>aria-label</code> pour la liste.</li>
+			</ul>
+		</CriteriaCard>
 
-<div class="mt-2">
-<p>Rapport d’audit manuel : <a href="/audits/FilterSideBar.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/913" target="_blank" style={{color:'#0C41BD'}}>issue #913</a>)</p>
-	</div>
+		<CriteriaCard icon="⌨️" title="Navigation clavier">
+			<ul>
+				<li>Ouverture/fermeture du panneau via Entrée/Espace sur le bouton ; focus renvoyé au bouton à la fermeture.</li>
+				<li>Échappe (Esc) pour fermer le panneau.</li>
+				<li>Si <code>modale</code> est vrai, le focus est verrouillé dans le panneau via <code>v-lock-focus</code>.</li>
+				<li>Focus visible maintenu sur les boutons d’action (Appliquer, Réinitialiser, Fermer).</li>
+			</ul>
+		</CriteriaCard>
+
+		<CriteriaCard icon="🎨" title="Contraste et lisibilité">
+			<ul>
+				<li>Bouton d’ouverture et actions en thème primaire/secondaire avec halo focus contrasté.</li>
+				<li>Badges de comptage colorés et annoncés via <code>locales.badgeLabel</code>.</li>
+				<li>Texte et champs héritent du thème (fond blanc, ombre) pour une lecture claire.</li>
+			</ul>
+		</CriteriaCard>
+	</CriteriaSection>
+
+	<DemoSection componentName="FilterSideBar">
+		<Story of={Stories.Default} />
+	</DemoSection>
+
+	<BestPracticesSection>
+		<ul>
+			<li>Fournissez des titres courts pour chaque filtre et un texte d’aide si nécessaire.</li>
+			<li>Activez <code>modale</code> quand le focus doit rester dans le panneau (dialogue bloquant).</li>
+			<li>Évitez de cacher le focus visible ; renforcez-le si votre thème réduit les contours.</li>
+			<li>Utilisez des libellés uniques pour les options (Select, listes) afin d’éviter les ambiguïtés.</li>
+			<li>Vérifiez l’ordre de tabulation si vous combinez FilterSideBar et FilterInline dans la même vue.</li>
+		</ul>
+	</BestPracticesSection>
+
+	<ResourcesSection>
+		<ul>
+			<li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/" target="_blank" rel="noopener noreferrer">WAI-ARIA Authoring Practices – Dialog (Modal)</a></li>
+			<li><a href="https://www.numerique.gouv.fr/publications/rgaa-accessibilite/" target="_blank" rel="noopener noreferrer">RGAA – critères 7.1 (attributs ARIA) et 10.8 (éléments masqués)</a></li>
+		</ul>
+	</ResourcesSection>
+</AccessibilityGuideLayout>