@cnamts/synapse 1.0.21 → 1.0.22

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

@@ -1,15 +1,77 @@
-import { Meta, Story } from '@storybook/addon-docs';
-import * as Stories from '../DownloadBtn.stories.ts';
-import '@/stories/styles/shared.css';
+import { Meta, Primary } from '@storybook/blocks'
+import * as DownloadBtnStories from '../DownloadBtn.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={DownloadBtnStories}/>
 
-<div className="header">
-  <h1>Accessibilité</h1>
-</div>
+<AccessibilityGuideLayout componentName="DownloadBtn" iconSrc={AccessibilityIcon}>
 
+    <AuditSection>
+        <p>Rapport d’audit manuel : <a href="/audits/DownloadBtn.xlsx" style={{color: '#0C41BD'}}>Voir le rapport</a></p>
+    </AuditSection>
 
-<div class="mt-2">
-<p>Rapport d’audit manuel : <a href="/audits/DownloadBtn.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/4007" target="_blank" style={{color:'#0C41BD'}}>issue #4007</a>)</p>
-	</div>
+    <CriteriaSection>
+
+        <CriteriaCard icon="🏷️" title="Nom accessible explicite">
+            <ul>
+                <li>Le bouton doit avoir un texte visible explicite.</li>
+                <li>Si icône seule, un aria-label est obligatoire.</li>
+                <li>L’icône doit être décorative.</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="⌨️" title="Interaction clavier">
+            <ul>
+                <li>Activation via Entrée et Espace.</li>
+                <li>Ordre de tabulation cohérent.</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="🔄" title="Gestion des états">
+            <ul>
+                <li>Annonce du chargement via aria-live.</li>
+                <li>Message d’erreur accessible en cas d’échec.</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="👁️" title="Focus visible">
+            <ul>
+                <li>Focus clavier visible.</li>
+                <li>Ne pas supprimer le focus natif.</li>
+            </ul>
+        </CriteriaCard>
+
+    </CriteriaSection>
+
+    <DemoSection componentName="DownloadBtn">
+        <Primary/>
+    </DemoSection>
+
+    <BestPracticesSection>
+        <ul>
+            <li>Indiquer le format et le poids du fichier.</li>
+            <li>Fournir un fallbackFilename explicite.</li>
+            <li>Désactiver le bouton pendant le chargement.</li>
+        </ul>
+    </BestPracticesSection>
+
+    <ResourcesSection>
+        <ul>
+            <li>
+                <a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/" target="_blank" rel="noopener noreferrer">
+                    RGAA 4.1 – Critères
+                </a>
+            </li>
+        </ul>
+    </ResourcesSection>
+
+</AccessibilityGuideLayout>

package/src/components/DownloadBtn/config.ts

@@ -1,6 +1,6 @@
 export const config = {
 	btn: {
-		variant: 'outlined',
+		variant: 'outlined' as const,
 		color: 'primary',
 		class: 'text-wrap',
 		minHeight: '36px',

package/src/components/ErrorPage/ErrorPage.stories.ts

@@ -22,19 +22,19 @@ export const Default: Story = {
 			{
 				name: 'Template',
 				code: `
-				<template>
-					<div style="padding: 20px; background: rgb(231, 236, 245)">
-						<ErrorPage />
-					</div>
-				</template>
-				`,
+                <template>
+                    <div style="padding: 20px; background: rgb(231, 236, 245)">
+                        <ErrorPage />
+                    </div>
+                </template>
+                `,
 			}, {
 				name: 'Script',
 				code: `
-				<script setup lang="ts">
-					import { ErrorPage } from '@cnamts/synapse'
-				</script>
-				`,
+                <script setup lang="ts">
+                    import { ErrorPage } from '@cnamts/synapse'
+                </script>
+                `,
 			},
 		],
 	},
@@ -54,22 +54,57 @@ export const WithLink: Story = {
 			{
 				name: 'Template',
 				code: `
-				<template>
-					<div style="padding: 20px; background: rgb(231, 236, 245)">
-						<ErrorPage 
-							btn-href=""
-							btn-text="Retour à l'accueil"
-								/>
-					</div>
-				</template>
-				`,
+                <template>
+                    <div style="padding: 20px; background: rgb(231, 236, 245)">
+                        <ErrorPage 
+                            btn-href="/"
+                            btn-text="Retour à l'accueil"
+                        />
+                    </div>
+                </template>
+                `,
 			}, {
 				name: 'Script',
 				code: `
-				<script setup lang="ts">
-					import { ErrorPage } from '@cnamts/synapse'
-				</script>
-				`,
+                <script setup lang="ts">
+                    import { ErrorPage } from '@cnamts/synapse'
+                </script>
+                `,
+			},
+		],
+	},
+}
+
+export const WithRole: Story = {
+	args: {
+		...Default.args,
+		role: 'region',
+		uniqueId: 'error-page-region',
+	},
+	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)">
+                        <ErrorPage
+                            role="region"
+                            unique-id="error-page-region"
+                        />
+                    </div>
+                </template>
+                `,
+			}, {
+				name: 'Script',
+				code: `
+                <script setup lang="ts">
+                    import { ErrorPage } from '@cnamts/synapse'
+                </script>
+                `,
 			},
 		],
 	},
@@ -84,39 +119,39 @@ export const CustomIllustration: Story = {
 			{
 				name: 'Template',
 				code: `
-				<template>
-					<div style="padding: 20px; background: rgb(231, 236, 245)">
-						<ErrorPage>
-							<template #illustration>
-								<div style="width: 260px; height: 200px; display: grid; place-items: center; border-radius: 12px; background: white; border: 2px dashed #0D419A;">
-									<span style="font-weight: 700; color: #0D419A;">Illustration</span>
-								</div>
-							</template>
-						</ErrorPage>
-					</div>
-				</template>
-				`,
+                <template>
+                    <div style="padding: 20px; background: rgb(231, 236, 245)">
+                        <ErrorPage>
+                            <template #illustration>
+                                <div style="width: 260px; height: 200px; display: grid; place-items: center; border-radius: 12px; background: white; border: 2px dashed #0D419A;">
+                                    <span style="font-weight: 700; color: #0D419A;">Illustration</span>
+                                </div>
+                            </template>
+                        </ErrorPage>
+                    </div>
+                </template>
+                `,
 			},
 			{
 				name: 'Script',
 				code: `
-				<script setup lang="ts">
-					import { ErrorPage } from '@cnamts/synapse'
-				</script>
-				`,
+                <script setup lang="ts">
+                    import { ErrorPage } from '@cnamts/synapse'
+                </script>
+                `,
 			},
 		],
 	},
 	render: () => ({
 		components: { ErrorPage },
 		template: `
-			<ErrorPage>
-				<template #illustration>
-					<div style="width: 260px; height: 200px; display: grid; place-items: center; border-radius: 12px; background: white; border: 2px dashed #0D419A;">
-						<span style="font-weight: 700; color: #0D419A;">Illustration</span>
-					</div>
-				</template>
-			</ErrorPage>
-		`,
+            <ErrorPage>
+                <template #illustration>
+                    <div style="width: 260px; height: 200px; display: grid; place-items: center; border-radius: 12px; background: white; border: 2px dashed #0D419A;">
+                        <span style="font-weight: 700; color: #0D419A;">Illustration</span>
+                    </div>
+                </template>
+            </ErrorPage>
+        `,
 	}),
 }

package/src/components/ErrorPage/ErrorPage.vue

@@ -4,6 +4,7 @@
 	import { computed } from 'vue'
 	import type { RouteRecordRaw } from 'vue-router'
 	import { useThemeLocales } from '@/utils/theme'
+	import type { PageAriaRole } from '../types'
 
 	const props = defineProps<{
 		pageTitle?: string
@@ -14,6 +15,9 @@
 		btnHref?: string
 		btnLink?: RouteRecordRaw | string
 		hideBtn?: boolean
+		headingLevel: 1 | 2 | 3 | 4 | 5 | 6
+		uniqueId?: string
+		role?: PageAriaRole
 	}>()
 
 	const { themeLocales } = useThemeLocales(locales)
@@ -35,6 +39,8 @@
 		:btn-href="props.btnHref"
 		:btn-link="props.btnLink"
 		:hide-btn="props.hideBtn"
+		:unique-id="props.uniqueId"
+		:role="props.role"
 	>
 		<template
 			v-if="src || $slots.illustration"

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

@@ -32,6 +32,14 @@ import {
             </ul>
         </CriteriaCard>
 
+        <CriteriaCard icon="🏷️" title="Rôle et identifiant ARIA">
+            <ul>
+                <li><strong>Prop <code>role</code></strong> : permet de définir le rôle ARIA de la page d'erreur — deux valeurs acceptées : <code>main</code> ou <code>region</code></li>
+                <li><strong>Prop <code>uniqueId</code></strong> : permet de définir un identifiant unique sur le conteneur, facilitant le ciblage par <code>aria-labelledby</code> ou <code>aria-describedby</code> depuis d'autres éléments</li>
+                <li><strong>Usage recommandé</strong> : utiliser <code>role="main"</code> si la page d'erreur constitue le contenu principal, ou <code>role="region"</code> si elle est intégrée dans une section d'une mise en page plus complexe</li>
+            </ul>
+        </CriteriaCard>
+
         <CriteriaCard icon="🔗" title="Liens et boutons">
             <ul>
                 <li><strong>Bouton de retour</strong> : rendu via <code>btn-href</code> (balise <code>a</code>) ou <code>btn-link</code> (balise <code>router-link</code>)</li>
@@ -55,6 +63,10 @@ import {
         <Story of={Stories.Default} />
     </DemoSection>
 
+    <DemoSection title="Avec rôle et identifiant ARIA" componentName="ErrorPage">
+        <Story of={Stories.WithRole} />
+    </DemoSection>
+
     <BestPracticesSection>
         <ul>
             <li>Les valeurs par défaut de <code>page-title</code>, <code>message</code> et <code>code</code> proviennent du thème — les surcharger uniquement si le contexte métier le nécessite</li>
@@ -62,6 +74,8 @@ import {
             <li>Ne pas masquer le bouton (<code>hide-btn</code>) sans proposer une alternative de navigation claire</li>
             <li>Les illustrations doivent toujours être décoratives (<code>aria-hidden="true"</code>) — ne jamais y placer d'information essentielle</li>
             <li>Personnaliser <code>code-error-text</code> si le contexte métier nécessite une formulation différente de <em>"Code d'erreur : "</em></li>
+            <li>Utiliser <code>role</code> pour préciser le rôle sémantique du composant dans son contexte d'intégration — préférer <code>role="main"</code> pour le contenu principal ou <code>role="region"</code> pour une section d'une mise en page plus complexe</li>
+            <li>Utiliser <code>unique-id</code> pour permettre à d'autres éléments de référencer la page d'erreur via <code>aria-labelledby</code> ou <code>aria-describedby</code></li>
         </ul>
     </BestPracticesSection>
 
@@ -71,6 +85,7 @@ import {
             <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context.html" target="_blank" style={{ color: '#0C41BD' }}>WCAG 2.4.4 – Link Purpose</a></li>
             <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html" target="_blank" style={{ color: '#0C41BD' }}>WCAG 1.1.1 – Non-text Content</a></li>
             <li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/" target="_blank" style={{ color: '#0C41BD' }}>ARIA Authoring Practices Guide</a></li>
+            <li><a href="https://www.w3.org/TR/wai-aria-1.2/#landmark_roles" target="_blank" style={{ color: '#0C41BD' }}>WAI-ARIA 1.2 – Landmark Roles</a></li>
         </ul>
     </ResourcesSection>
 

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

@@ -5,8 +5,10 @@ exports[`ErrorPage > renders correctly 1`] = `
   btnlink="/"
   code="500"
   codeerrortext="Code d'erreur : "
+  headinglevel="1"
   hidebtn="false"
   message="Une erreur est survenue de notre côté, veuillez réessayer plus tard."
   pagetitle="Une erreur est survenue"
+  uniqueid=""
 ></status-page-stub>
 `;

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

@@ -7,6 +7,7 @@ exports[`ExternalLinks > opens the menu when the button is clicked 1`] = `
     aria-expanded="true"
     aria-haspopup="menu"
     aria-label="Menu : Consulter les données externes"
+    aria-owns="sy-external-links-menu-v-0"
     class="
       d-flex
       px-3
@@ -94,7 +95,7 @@ exports[`ExternalLinks > opens the menu when the button is clicked 1`] = `
       css="true"
       name="fade-transition"
       persisted="true"
-      target="<button data-v-353763df="" type="button" class="v-btn v-btn--elevated v-theme--light v-btn--density-default rounded-0 v-btn--size-default v-btn--variant-elevated d-flex px-3 sy-external-links-btn" style="background-color: #0c419a; color: #fff; caret-color: #fff; min-height: 48px; min-width: 328px; transform: translateX(0); position: absolute; flex-direction: row; top: 0px; bottom: auto; left: 0px; right: auto; z-index: 4;" aria-haspopup="menu" aria-expanded="true" aria-label="Menu : Consulter les données externes" aria-controls="sy-external-links-menu-v-0"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span><!----><span class="v-btn__content" data-no-activator=""><span data-v-353763df="" class="mr-3 sy-external-links-btn-text white--text">Consulter les données externes</span><i data-v-353763df="" class="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white" aria-hidden="true"></i></span><!----><!----></button>"
+      target="<button data-v-353763df="" type="button" class="v-btn v-btn--elevated v-theme--light v-btn--density-default rounded-0 v-btn--size-default v-btn--variant-elevated d-flex px-3 sy-external-links-btn" style="background-color: #0c419a; color: #fff; caret-color: #fff; min-height: 48px; min-width: 328px; transform: translateX(0); position: absolute; flex-direction: row; top: 0px; bottom: auto; left: 0px; right: auto; z-index: 4;" aria-haspopup="menu" aria-expanded="true" aria-owns="sy-external-links-menu-v-0" aria-label="Menu : Consulter les données externes" aria-controls="sy-external-links-menu-v-0"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span><!----><span class="v-btn__content" data-no-activator=""><span data-v-353763df="" class="mr-3 sy-external-links-btn-text white--text">Consulter les données externes</span><i data-v-353763df="" class="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white" aria-hidden="true"></i></span><!----><!----></button>"
     >
       <div
         class="v-overlay__content"
@@ -304,6 +305,7 @@ exports[`ExternalLinks > renders correctly 1`] = `
   <v-menu-stub
     activatorprops="[object Object]"
     attach="true"
+    capturefocus="true"
     class="
       sy-external-links
       sy-external-links--left
@@ -325,10 +327,13 @@ exports[`ExternalLinks > renders correctly 1`] = `
     openonhover="false"
     origin="auto"
     persistent="false"
+    retainfocus="false"
     scrim="false"
     scrollstrategy="reposition"
+    sticktotarget="false"
     submenu="false"
     transition="fade-transition"
+    viewportmargin="12"
     zindex="4"
   ></v-menu-stub>
 </div>
@@ -341,6 +346,7 @@ exports[`ExternalLinks > renders correctly with fixed prop 1`] = `
     aria-expanded="true"
     aria-haspopup="menu"
     aria-label="Menu : Consulter les données externes"
+    aria-owns="sy-external-links-menu-v-0"
     class="
       d-flex
       px-3
@@ -428,7 +434,7 @@ exports[`ExternalLinks > renders correctly with fixed prop 1`] = `
       css="true"
       name="fade-transition"
       persisted="true"
-      target="<button data-v-353763df="" type="button" class="v-btn v-btn--elevated v-theme--light v-btn--density-default rounded-0 v-btn--size-default v-btn--variant-elevated d-flex px-3 sy-external-links-btn" style="background-color: #0c419a; color: #fff; caret-color: #fff; min-height: 48px; min-width: 328px; transform: translateX(0); position: fixed; flex-direction: row-reverse; top: auto; bottom: 0px; left: auto; right: 0px; z-index: 5;" aria-haspopup="menu" aria-expanded="true" aria-label="Menu : Consulter les données externes" aria-controls="sy-external-links-menu-v-0"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span><!----><span class="v-btn__content" data-no-activator=""><span data-v-353763df="" class="ml-3 sy-external-links-btn-text white--text">Consulter les données externes</span><i data-v-353763df="" class="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white" aria-hidden="true"></i></span><!----><!----></button>"
+      target="<button data-v-353763df="" type="button" class="v-btn v-btn--elevated v-theme--light v-btn--density-default rounded-0 v-btn--size-default v-btn--variant-elevated d-flex px-3 sy-external-links-btn" style="background-color: #0c419a; color: #fff; caret-color: #fff; min-height: 48px; min-width: 328px; transform: translateX(0); position: fixed; flex-direction: row-reverse; top: auto; bottom: 0px; left: auto; right: 0px; z-index: 5;" aria-haspopup="menu" aria-expanded="true" aria-owns="sy-external-links-menu-v-0" aria-label="Menu : Consulter les données externes" aria-controls="sy-external-links-menu-v-0"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span><!----><span class="v-btn__content" data-no-activator=""><span data-v-353763df="" class="ml-3 sy-external-links-btn-text white--text">Consulter les données externes</span><i data-v-353763df="" class="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white" aria-hidden="true"></i></span><!----><!----></button>"
     >
       <div
         class="v-overlay__content"
@@ -639,6 +645,7 @@ exports[`ExternalLinks > slides on hover or focus 1`] = `
     aria-expanded="false"
     aria-haspopup="menu"
     aria-label="Menu : Consulter les données externes"
+    aria-owns="sy-external-links-menu-v-0"
     class="
       d-flex
       px-3
@@ -708,6 +715,7 @@ exports[`ExternalLinks > slides on hover or focus 2`] = `
     aria-expanded="false"
     aria-haspopup="menu"
     aria-label="Menu : Consulter les données externes"
+    aria-owns="sy-external-links-menu-v-0"
     class="
       d-flex
       px-3
@@ -777,6 +785,7 @@ exports[`ExternalLinks > slides on hover or focus 3`] = `
     aria-expanded="false"
     aria-haspopup="menu"
     aria-label="Menu : Consulter les données externes"
+    aria-owns="sy-external-links-menu-v-0"
     class="
       d-flex
       px-3
@@ -846,6 +855,7 @@ exports[`ExternalLinks > slides on hover or focus 4`] = `
     aria-expanded="false"
     aria-haspopup="menu"
     aria-label="Menu : Consulter les données externes"
+    aria-owns="sy-external-links-menu-v-0"
     class="
       d-flex
       px-3
@@ -915,6 +925,7 @@ exports[`ExternalLinks > slides on hover or focus 5`] = `
     aria-expanded="false"
     aria-haspopup="menu"
     aria-label="Menu : Consulter les données externes"
+    aria-owns="sy-external-links-menu-v-0"
     class="
       d-flex
       px-3

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

@@ -42,8 +42,12 @@ const meta = {
 					detail: `{
 	optionalDocument: 'Document facultatif',
 	see: 'Voir',
+	import: 'Importer',
 	delete: 'Supprimer',
 	uploading: 'En cours',
+	importLabel: (title: string) => string,
+	seeLabel: (title: string) => string,
+	deleteLabel: (title: string) => string,
 	success: 'Téléchargé',
 	error: 'Erreur',
 	errorOccurred: 'Une erreur est survenue pendant le téléchargement.',

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

@@ -118,10 +118,12 @@
 						{{ message ?? locales.optionalDocument }}
 					</div>
 					<div
-						v-if="state === 'error'"
 						class="file-item__error-message text-error"
+						role="status"
 					>
-						{{ locales.error }}
+						<div v-if="state === 'error'">
+							{{ locales.error }}
+						</div>
 					</div>
 				</div>
 			</div>
@@ -130,9 +132,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)"
 					@click="$emit('upload', itemId)"
 				>
-					<span>Importer</span>
+					<span>{{ locales.import }}</span>
 					<template #prepend>
 						<SyIcon
 							color="primary"
@@ -145,6 +148,7 @@
 					v-if="state === 'success' && showPreviewBtn"
 					class="file-item__action file-item__action-preview text-primary"
 					variant="text"
+					:aria-label="locales.seeLabel(title)"
 					@click="$emit('preview', itemId)"
 				>
 					<span>{{ locales.see }}</span>
@@ -160,6 +164,7 @@
 					v-if="state === 'success' && showDeleteBtn"
 					class="file-item__action file-item__action-delete text-error"
 					variant="text"
+					:aria-label="locales.deleteLabel(title)"
 					@click="$emit('delete', itemId)"
 				>
 					<span>{{ locales.delete }}</span>

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

@@ -1,7 +1,17 @@
 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}`
+	},
 	uploading: 'En cours',
 	success: 'Téléchargé',
 	error: 'Erreur',

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

@@ -1,12 +1,60 @@
-import { Meta, Story } from '@storybook/addon-docs';
+import { Meta, Primary } from '@storybook/addon-docs';
 import * as Stories from '../FileList.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="FileList"
+  iconSrc={AccessibilityIcon}
+>
+  <CriteriaSection>
+    <CriteriaCard icon="🔍" title="Structure sémantique">
+      <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>
+      </ul>
+    </CriteriaCard>
 
-<br />
+
+    <CriteriaCard icon="⌨️" title="Navigation clavier complète">
+      <ul>
+        <li><strong>Navigation entre les éléments</strong> : Utilisation des touches Tab et Shift+Tab pour naviguer entre les fichiers et les actions associées.</li>
+        <li><strong>Activation des actions</strong> : Utilisation de la touche Entrée ou Espace pour activer les boutons d'action (télécharger, supprimer, etc.).</li>
+      </ul>
+    </CriteriaCard>
+
+    <CriteriaCard icon="📱" title="États et retours d'information">
+      <ul>
+        <li><strong>Indication de l'état de téléchargement</strong> : Utilisation d'icônes ou de messages pour indiquer si un fichier est en cours de téléchargement, téléchargé avec succès ou en échec.</li>
+        <li><strong>Indication de l'état d'erreur</strong> : Affichage d'un message d'erreur dans un élément avec le rôle <code>status</code> pour informer les utilisateurs de l'erreur.</li> 
+      </ul>
+    </CriteriaCard>
+
+    <DemoSection componentName="FileList">
+      <Primary />
+    </DemoSection>
+
+    <BestPracticesSection>
+      <ul>
+        <li><strong>Labels clairs et descriptifs</strong> : Assurez-vous que les titres des fichiers requis sont assez descriptifs pour que les utilisateurs comprennent facilement ce qui est attendu d'eux.</li>
+        <li><strong>Progression</strong> : Fournissez une indication de la progression du téléchargement pour les fichiers volumineux.</li>
+      </ul>
+    </BestPracticesSection>
+  </CriteriaSection>
+  <ResourcesSection>
+    <ul>
+      <li><a href="https://developer.mozilla.org/fr/docs/Web/HTML/Reference/Elements/button">Documentation MDN sur les boutons</a></li>
+      <li><a href="https://developer.mozilla.org/fr/docs/Web/Accessibility/ARIA/Reference/Roles/status_role">Documentation MDN sur le rôle ARIA "status"</a></li>
+      <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/status_role">MDN documentation on ARIA "status" role</a></li>
+    </ul>
+  </ResourcesSection>
+</AccessibilityGuideLayout>