@cnamts/synapse 1.0.20 → 1.0.22

package/src/components/FileUpload/FileUpload.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 	import { useWidthable, type Widthable } from '@/composables/widthable'
-	import { ref, useId, watch } from 'vue'
+	import { ref, useAttrs, useId, watch } from 'vue'
 	import { useTheme } from 'vuetify'
 	import FileUploadContent, { type FileUploadContentSlots } from './FileUploadContent.vue'
 	import { locales as defaultLocales } from './locales'
@@ -33,6 +33,8 @@
 		default(): void
 	} & FileUploadContentSlots>()
 
+	const attrs = useAttrs()
+
 	const dragover = ref(false)
 	const id = 'file-upload-' + useId()
 	const dropZone = ref<HTMLElement | null>(null)
@@ -40,8 +42,16 @@
 	const fileList = ref<File[]>([])
 	const isDarkMode = useTheme().current.value.dark
 
+	function openFileDialog() {
+		if (props.disabled) {
+			return
+		}
+		fileInput.value?.click()
+	}
+
 	defineExpose({
 		fileInput,
+		openFileDialog,
 	})
 
 	watch(() => props.modelValue, (value) => {
@@ -93,61 +103,79 @@
 		;(e.target as HTMLInputElement).value = ''
 	}
 </script>
-<!-- eslint-disable vuejs-accessibility/no-static-element-interactions -->
+
 <template>
-	<label
-		ref="dropZone"
-		:for="id"
-		:class="[
-			{
-				dragover: dragover,
-				'sy-file-upload--disabled': disabled,
-				'dark-mode': isDarkMode,
-			},
-		]"
-		:style="widthStyles"
-		class="sy-file-upload d-block pa-4"
-		@dragover.prevent="dragover = true"
-		@dragleave="dragover = false"
+	<div
+		class="sy-file-upload-wrapper"
 	>
 		<input
 			:id="id"
 			ref="fileInput"
 			type="file"
-			:disabled="disabled"
-			:multiple="multiple"
+			tabindex="-1"
+			aria-hidden="true"
+			:disabled="disabled ? true : undefined"
+			:multiple="multiple ? true : undefined"
 			:accept="allowedExtensions.map(el=>`.${el}`).join(', ')"
 			class="sy-file-upload-input"
 			@change="onFileChange"
 		>
-		<slot>
-			<FileUploadContent
-				:allowed-extensions="allowedExtensions"
-				:multiple="multiple"
-				:file-size-max="fileSizeMax"
-				:file-size-units="fileSizeUnits"
-			>
-				<template
-					v-for="(_, slotName) in $slots"
-					#[slotName]="slotProps"
+		<div
+			ref="dropZone"
+			:aria-disabled="disabled ? true : undefined"
+			:title="locales.fileUploadTitle"
+			role="button"
+			:tabindex="disabled ? -1 : 0"
+			:class="[
+				{
+					dragover: dragover,
+					'sy-file-upload--disabled': disabled,
+					'dark-mode': isDarkMode,
+				},
+			]"
+			:style="widthStyles"
+			class="sy-file-upload d-block pa-4"
+			v-bind="attrs"
+			@click="openFileDialog"
+			@keydown.enter.prevent="openFileDialog"
+			@keydown.space.prevent="openFileDialog"
+			@dragover.prevent="dragover = true"
+			@dragleave="dragover = false"
+			@drop="dragover = false"
+		>
+			<slot>
+				<FileUploadContent
+					:allowed-extensions="allowedExtensions"
+					:multiple="multiple"
+					:file-size-max="fileSizeMax"
+					:file-size-units="fileSizeUnits"
 				>
-					<slot
-						:name="slotName"
-						v-bind="slotProps || {}"
-					/>
-				</template>
-			</FileUploadContent>
-		</slot>
-	</label>
+					<template
+						v-for="(_, slotName) in $slots"
+						#[slotName]="slotProps"
+					>
+						<slot
+							:name="slotName"
+							v-bind="slotProps || {}"
+						/>
+					</template>
+				</FileUploadContent>
+			</slot>
+		</div>
+	</div>
 </template>
 
 <style lang="scss" scoped>
 @use '@/assets/tokens';
 
+.sy-file-upload-wrapper {
+	display: contents;
+}
+
 .sy-file-upload {
 	cursor: pointer;
 	position: relative;
-	border: 1px dashed tokens.$colors-border-accent;
+	border: 1px dashed tokens.$colors-border-accent-primary;
 	border-radius: tokens.$radius-rounded-lg;
 	transition: background 0.25s;
 

package/src/components/FileUpload/FileUploadContent.vue

@@ -60,7 +60,7 @@
 		</span>
 
 		<span
-			class="sy-file-upload-btn bg-primary text-white elevation-2"
+			class="sy-file-upload-btn bg-primary text-white"
 		>
 			<slot name="button-text">
 				{{ locales.chooseFile(multiple) }}

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

@@ -1,12 +1,55 @@
 import { Meta, Story } from '@storybook/addon-docs';
 import * as Stories from '../FileUpload.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>
-  <p>Cette page sera bientôt disponible</p>
-</div>
+<AccessibilityGuideLayout
+	componentName="FileUpload"
+  iconSrc={AccessibilityIcon}
+>
+  <CriteriaSection>
+    <CriteriaCard icon="🔍" title="Structure sémantique">
+      <ul>
+        <li><strong>Utilisation d'un boutton</strong> : Le composant utilise un élément avec le role <code>button</code> pour déclencher l'ouverture du sélecteur de fichiers. Ceci permet de gérer l'interaction avec le clavier, le clic souris ainsi que le glisser-déposer simultanément tout en gardant une bonne sémantique.</li>
+        <li><strong>Disabled</strong> : Utilisation de l'attribut <code>disabled</code> sur le bouton si le champ est désactivé.</li>
+      </ul>
+    </CriteriaCard>
+
+    <CriteriaCard icon="⌨️" title="Navigation clavier">
+      <ul>
+        <li><strong>Navigation au clavier</strong> : La zone d'upload de fichier est focusable, l'utilisateur peut utiliser le clic souris, le clavier ainsi que le glisser-déposer.</li>
+      </ul>
+    </CriteriaCard>
+  </CriteriaSection>
+
+  <DemoSection componentName="FileUpload">
+    <Story name="Default" />
+  </DemoSection>
 
+  <BestPracticesSection>
+    <ul>
+      <li><strong>Utiliser dans une balise de formulaire</strong> : Intégrer le composant dans une balise <code>form</code> ou le composant <code>SyForm</code> pour la sémantique et l'accessibilité.</li>
+      <li><strong>Fournir des messages d'erreur clairs</strong> : Utiliser des messages d'erreur explicites et accessibles pour informer les utilisateurs des problèmes de téléchargement.</li>
+      <li><strong>Gérer les états de téléchargement</strong> : Fournir des indications visuelles et textuelles pour les différents états de téléchargement, y compris les erreurs et les succès.</li>
+    </ul>
+  </BestPracticesSection>
 
+  	<ResourcesSection>
+		<ul>
+			<li><a href="https://react.carbondesignsystem.com/?path=/docs/components-fileuploader--overview" target="_blank" rel="noopener noreferrer">Design system d'IBM</a></li>
+			<li><a href="https://developer.mozilla.org/fr/docs/Web/HTML/Reference/Elements/input/file" target="_blank" rel="noopener noreferrer">MDN: input type="file"</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>
+		</ul>
+	</ResourcesSection>
+</AccessibilityGuideLayout>

package/src/components/FileUpload/locales.ts

@@ -1,4 +1,5 @@
 export const locales = {
+	fileUploadTitle: 'Téléverser un fichier',
 	or: 'Ou',
 	chooseFile: (multiple: boolean) => multiple ? 'Choisir des fichiers' : 'Choisir un fichier',
 	infoText: (max: string, ext: string[]): string =>

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

@@ -48,13 +48,13 @@ describe('FileUpload', () => {
 			},
 		})
 
-		const label = wrapper.find('label')
+		const label = wrapper.find('.sy-file-upload')
 		const labelClasses = label.classes()
 
-		await wrapper.find('input').trigger('dragover')
+		await wrapper.find('.sy-file-upload').trigger('dragover')
 		expect(label.classes()).not.toEqual(labelClasses)
 
-		await wrapper.find('input').trigger('dragleave')
+		await wrapper.find('.sy-file-upload').trigger('dragleave')
 		expect(label.classes()).toEqual(labelClasses)
 	})
 
@@ -68,7 +68,7 @@ describe('FileUpload', () => {
 
 		const file: File = new File([''], 'filename.pdf', { type: 'application/pdf' })
 
-		await wrapper.find('input').trigger('drop', {
+		await wrapper.find('.sy-file-upload').trigger('drop', {
 			dataTransfer: {
 				files: [file],
 			},
@@ -89,13 +89,13 @@ describe('FileUpload', () => {
 
 		const file: File = new File([''], 'filename.pdf', { type: 'application/pdf' })
 
-		await wrapper.find('label').trigger('drop', {
+		await wrapper.find('.sy-file-upload').trigger('drop', {
 			dataTransfer: {
 				files: [file],
 			},
 		})
 
-		await wrapper.find('label').trigger('drop', {
+		await wrapper.find('.sy-file-upload').trigger('drop', {
 			dataTransfer: {
 				files: [file, file],
 			},
@@ -115,7 +115,7 @@ describe('FileUpload', () => {
 
 		const file: File = new File([''], 'filename.jpg', { type: 'image/jpeg' })
 
-		await wrapper.find('input').trigger('drop', {
+		await wrapper.find('.sy-file-upload').trigger('drop', {
 			dataTransfer: {
 				files: [file],
 			},
@@ -137,7 +137,7 @@ describe('FileUpload', () => {
 			},
 		})
 
-		await wrapper.find('label').trigger('drop', {
+		await wrapper.find('.sy-file-upload').trigger('drop', {
 			dataTransfer: {
 				files: [jpgFile],
 			},
@@ -146,7 +146,7 @@ describe('FileUpload', () => {
 		expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(undefined)
 		expect(wrapper.emitted('error')?.[0]).toEqual([['Le fichier filename.jpg a une extension invalide. Extensions acceptées : pdf']])
 
-		await wrapper.find('label').trigger('drop', {
+		await wrapper.find('.sy-file-upload').trigger('drop', {
 			dataTransfer: {
 				files: [pdfFile],
 			},
@@ -166,7 +166,7 @@ describe('FileUpload', () => {
 
 		const file: File = new File(['42'], 'filename.jpg', { type: 'image/jpeg' })
 
-		await wrapper.find('label').trigger('drop', {
+		await wrapper.find('.sy-file-upload').trigger('drop', {
 			dataTransfer: {
 				files: [file],
 			},
@@ -183,7 +183,7 @@ describe('FileUpload', () => {
 			},
 		})
 
-		await wrapper.find('label').trigger('drop', {
+		await wrapper.find('.sy-file-upload').trigger('drop', {
 			dataTransfer: {
 				files: [],
 			},
@@ -203,7 +203,7 @@ describe('FileUpload', () => {
 
 		const file: File = new File([''], 'filename.xyz', { type: 'unknown' })
 
-		await wrapper.find('label').trigger('drop', {
+		await wrapper.find('.sy-file-upload').trigger('drop', {
 			dataTransfer: {
 				files: [file],
 			},
@@ -221,7 +221,7 @@ describe('FileUpload', () => {
 			},
 		})
 
-		await wrapper.find('label').trigger('drop', {
+		await wrapper.find('.sy-file-upload').trigger('drop', {
 			dataTransfer: {
 				files: [file],
 			},
@@ -241,7 +241,7 @@ describe('FileUpload', () => {
 		const file1: File = new File([''], 'filename1.jpg', { type: 'image/jpeg' })
 		const file2: File = new File([''], 'filename2.jpg', { type: 'image/jpeg' })
 
-		await wrapper.find('label').trigger('drop', {
+		await wrapper.find('.sy-file-upload').trigger('drop', {
 			dataTransfer: {
 				files: [file1, file2],
 			},

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>