@cnamts/synapse 1.0.20 → 1.0.21

package/src/components/DatePicker/ComplexDatePicker/ComplexDatePicker.stories.ts

@@ -345,6 +345,7 @@ export const Default: Story = {
 				<template>
 					<DatePicker
 						v-model="date"
+						label="Sélectionner une date"
 						placeholder="Sélectionner une date"
 						useCombinedMode
 						format="DD/MM/YYYY"
@@ -366,6 +367,7 @@ export const Default: Story = {
 		],
 	},
 	args: {
+		'label': 'Sélectionner une date',
 		'placeholder': 'Sélectionner une date',
 		'format': 'DD/MM/YYYY',
 		'isBirthDate': false,
@@ -417,6 +419,7 @@ export const Required: Story = {
 				<template>
 					<DatePicker
 						v-model="date"
+						label="Sélectionner une date"
 						placeholder="Sélectionner une date"
 						useCombinedMode
 						required
@@ -424,6 +427,7 @@ export const Required: Story = {
 					/>
 					<DatePicker
 						v-model="date"
+						label="Sélectionner une date"
 						placeholder="Sélectionner une date"
 						useCombinedMode
 						required
@@ -501,6 +505,7 @@ export const DateRange: Story = {
 				<template>
 					<DatePicker
 						v-model="dateRange"
+						label="Sélectionner une période"
 						placeholder="Sélectionner une période"
 						format="DD/MM/YYYY"
 						display-range
@@ -523,6 +528,7 @@ export const DateRange: Story = {
 		],
 	},
 	args: {
+		'label': 'Sélectionner une période',
 		'placeholder': 'Sélectionner une période',
 		'format': 'DD/MM/YYYY',
 		'dateFormatReturn': '',
@@ -572,6 +578,7 @@ export const BirthDate: Story = {
 				<template>
 					<DatePicker
 						v-model="date"
+						label="Date de naissance"
 						placeholder="Date de naissance"
 						format="DD/MM/YYYY"
 						isBirthDate
@@ -594,6 +601,7 @@ export const BirthDate: Story = {
 		],
 	},
 	args: {
+		label: 'Date de naissance',
 		placeholder: 'Date de naissance',
 		format: 'DD/MM/YYYY',
 		isBirthDate: true,
@@ -637,6 +645,7 @@ export const WithValidation: Story = {
 				<template>
 					<DatePicker
 						v-model="date"
+						label="Date requise"
 						placeholder="Date requise"
 						format="DD/MM/YYYY"
 						required
@@ -676,6 +685,7 @@ export const WithValidation: Story = {
 		],
 	},
 	args: {
+		label: 'Date requise',
 		placeholder: 'Date requise',
 		format: 'DD/MM/YYYY',
 		required: true,
@@ -726,6 +736,7 @@ export const DifferentFormats: Story = {
 					<div class="d-flex flex-column">
 						<DatePicker
 							v-model="europeanDate"
+							label="Format européen"
 							placeholder="Format européen"
 							format="DD/MM/YYYY"
 							class="mb-4"
@@ -733,6 +744,7 @@ export const DifferentFormats: Story = {
 						/>
 						<DatePicker
 							v-model="americanDate"
+							label="Format américain"
 							placeholder="Format américain"
 							format="MM/DD/YYYY"
 							class="mb-4"
@@ -740,6 +752,7 @@ export const DifferentFormats: Story = {
 						/>
 						<DatePicker
 							v-model="isoDate"
+							label="Format ISO"
 							placeholder="Format ISO"
 							format="YYYY-MM-DD"
 							useCombinedMode
@@ -777,6 +790,7 @@ export const DifferentFormats: Story = {
               <div class="d-flex flex-column pa-4">
                 <DatePicker
                   v-model="europeanDate"
+				  label="Format européen"
                   placeholder="Format européen"
                   format="DD/MM/YYYY"
                   class="mb-4"
@@ -784,6 +798,7 @@ export const DifferentFormats: Story = {
                 />
                 <DatePicker
                   v-model="americanDate"
+				  label="Format américain"
                   placeholder="Format américain"
                   format="MM/DD/YYYY"
                   class="mb-4"
@@ -791,6 +806,7 @@ export const DifferentFormats: Story = {
                 />
                 <DatePicker
                   v-model="isoDate"
+				  label="Format ISO"
                   placeholder="Format ISO"
                   format="YYYY-MM-DD"
 				  useCombinedMode
@@ -814,6 +830,7 @@ export const WithDateFormatReturn: Story = {
 					<div class="d-flex flex-column">
 						<DatePicker
 							v-model="date"
+							label="Format d'affichage: JJ/MM/AAAA, Format de retour: AAAA-MM-JJ"
 							placeholder="Format d'affichage: JJ/MM/AAAA, Format de retour: AAAA-MM-JJ"
 							format="DD/MM/YYYY"
 							dateFormatReturn="YYYY-MM-DD"
@@ -849,10 +866,10 @@ export const WithDateFormatReturn: Story = {
               <div class="d-flex flex-column pa-4">
                 <DatePicker
                   v-model="date"
+				  label="Format d'affichage: JJ/MM/AAAA, Format de retour: AAAA-MM-JJ"
                   placeholder="Format d'affichage: JJ/MM/AAAA, Format de retour: AAAA-MM-JJ"
                   format="DD/MM/YYYY"
                   dateFormatReturn="YYYY-MM-DD"
-                  class="mb-4"
 				  useCombinedMode
                 />
                 <div>Valeur du modèle: {{ date }}</div>
@@ -874,6 +891,7 @@ export const DisablePickerInteraction: Story = {
 				<template>
 					<DatePicker
 						v-model="date"
+						label="Saisie manuelle uniquement"
 						placeholder="Saisie manuelle uniquement"
 						format="DD/MM/YYYY"
 						useCombinedMode
@@ -896,6 +914,7 @@ export const DisablePickerInteraction: Story = {
 		],
 	},
 	args: {
+		label: 'Saisie manuelle uniquement',
 		placeholder: 'Saisie manuelle uniquement',
 		format: 'DD/MM/YYYY',
 		displayIcon: true,
@@ -935,6 +954,7 @@ export const AutoFormattingInput: Story = {
 					<div class="d-flex flex-column">
 						<DatePicker
 							v-model="date"
+							label="Saisie avec formatage automatique"
 							placeholder="Saisie avec formatage automatique"
 							format="DD-MM-YYYY"
 							useCombinedMode
@@ -957,6 +977,7 @@ export const AutoFormattingInput: Story = {
 		],
 	},
 	args: {
+		label: 'Saisie avec formatage automatique',
 		placeholder: 'Saisie avec formatage automatique',
 		format: 'DD-MM-YYYY',
 		useCombinedMode: true,
@@ -990,6 +1011,7 @@ export const CustomDateFormat: Story = {
 				<template>
 					<DatePicker
 						v-model="date"
+						label="Format AAAA.MM.JJ"
 						placeholder="Format AAAA.MM.JJ"
 						format="AAAA.MM.JJ"
 						useCombinedMode
@@ -1011,6 +1033,7 @@ export const CustomDateFormat: Story = {
 		],
 	},
 	args: {
+		label: 'Format AAAA.MM.JJ',
 		placeholder: 'Format AAAA.MM.JJ',
 		format: 'YYYY.MM.DD',
 		useCombinedMode: true,
@@ -1047,6 +1070,7 @@ export const ReadonlyMode: Story = {
 				<template>
 					<DatePicker
 						v-model="date"
+						label="Date en lecture seule"
 						placeholder="Date en lecture seule"
 						format="DD/MM/YYYY"
 						useCombinedMode
@@ -1074,6 +1098,7 @@ export const ReadonlyMode: Story = {
 		],
 	},
 	args: {
+		label: 'Date en lecture seule',
 		placeholder: 'Date en lecture seule',
 		format: 'DD/MM/YYYY',
 		useCombinedMode: true,
@@ -1116,6 +1141,7 @@ export const AppendIcon: Story = {
 				<template>
 					<DatePicker
 						v-model="date"
+						label="Date avec icône à la fin"
 						placeholder="Date avec icône à la fin"
 						format="DD/MM/YYYY"
 						useCombinedMode
@@ -1139,6 +1165,7 @@ export const AppendIcon: Story = {
 		],
 	},
 	args: {
+		label: 'Date avec icône à la fin',
 		placeholder: 'Date avec icône à la fin',
 		format: 'DD/MM/YYYY',
 		useCombinedMode: true,
@@ -1177,6 +1204,7 @@ export const WithCustomPeriod: Story = {
 				<template>
 					<DatePicker
 						v-model="date"
+						label="Date avec icône à la fin"
 						placeholder="Date avec icône à la fin"
 						format="DD/MM/YYYY"
 						useCombinedMode
@@ -1226,6 +1254,7 @@ export const WithCustomPeriod: Story = {
 		],
 	},
 	args: {
+		label: 'Date avec icône à la fin',
 		placeholder: 'Date avec icône à la fin',
 		format: 'DD/MM/YYYY',
 		useCombinedMode: true,
@@ -1292,6 +1321,7 @@ export const WithTextFieldActivator: Story = {
 				<template>
 					<DatePicker
 						v-model="date"
+						label="Cliquez sur le champ pour ouvrir"
 						placeholder="Cliquez sur le champ pour ouvrir"
 						format="DD/MM/YYYY"
 						useCombinedMode
@@ -1314,6 +1344,7 @@ export const WithTextFieldActivator: Story = {
 		],
 	},
 	args: {
+		label: 'Cliquez sur le champ pour ouvrir',
 		placeholder: 'Cliquez sur le champ pour ouvrir',
 		format: 'DD/MM/YYYY',
 		useCombinedMode: true,
@@ -1355,6 +1386,7 @@ export const AutoClampFeature: Story = {
 						<h4 class="mt-4">Format JJ/MM/AAAA (séparateur /)</h4>
 						<DatePicker
 							v-model="dateSlash"
+							label="Saisie avec auto clamp - séparateur /"
 							placeholder="Saisie avec auto clamp - séparateur /"
 							format="DD/MM/YYYY"
 							useCombinedMode
@@ -1364,6 +1396,7 @@ export const AutoClampFeature: Story = {
 						<h4 class="mt-4">Format JJ-MM-AAAA (séparateur -)</h4>
 						<DatePicker
 							v-model="dateDash"
+							label="Saisie avec auto clamp - séparateur -"
 							placeholder="Saisie avec auto clamp - séparateur -"
 							format="DD-MM-YYYY"
 							useCombinedMode
@@ -1373,6 +1406,7 @@ export const AutoClampFeature: Story = {
 						<h4 class="mt-4">Format AAAA.MM.JJ (séparateur .)</h4>
 						<DatePicker
 							v-model="dateDot"
+							label="Saisie avec auto clamp - séparateur ."
 							placeholder="Saisie avec auto clamp - séparateur ."
 							format="YYYY.MM.DD"
 							useCombinedMode
@@ -1414,6 +1448,7 @@ export const AutoClampFeature: Story = {
                 <h4 class="mb-2">Format JJ/MM/AAAA (séparateur /)</h4>
                 <DatePicker
                   v-model="dateSlash"
+				  label="Saisie avec auto clamp - séparateur /"
                   placeholder="Saisie avec auto clamp - séparateur /"
                   format="DD/MM/YYYY"
                   useCombinedMode
@@ -1424,6 +1459,7 @@ export const AutoClampFeature: Story = {
                 <h4 class="mb-2">Format JJ-MM-AAAA (séparateur -)</h4>
                 <DatePicker
                   v-model="dateDash"
+				  label="Saisie avec auto clamp - séparateur -"
                   placeholder="Saisie avec auto clamp - séparateur -"
                   format="DD-MM-YYYY"
                   useCombinedMode
@@ -1434,6 +1470,7 @@ export const AutoClampFeature: Story = {
                 <h4 class="mb-2">Format AAAA.MM.JJ (séparateur .)</h4>
                 <DatePicker
                   v-model="dateDot"
+				  label="Saisie avec auto clamp - séparateur ."
                   placeholder="Saisie avec auto clamp - séparateur ."
                   format="YYYY.MM.DD"
                   useCombinedMode
@@ -1460,6 +1497,7 @@ export const WithFormSubmission: Story = {
 						<DatePicker
 							ref="datePicker"
 							v-model="date"
+							label="Date requise"
 							placeholder="Date requise"
 							format="DD/MM/YYYY"
 							required
@@ -1524,10 +1562,11 @@ export const WithFormSubmission: Story = {
                   <DatePicker
                     ref="datePicker"
                     v-model="date"
+					label="Date requise"
                     placeholder="Date requise"
                     format="DD/MM/YYYY"
                     required
-                    class="mb-4"
+					class="mb-4"
 					useCombinedMode
                   />
                   <v-btn type="submit" color="primary">Soumettre</v-btn>
@@ -1553,6 +1592,7 @@ export const CustomRules: Story = {
 					<template>
 						<DatePicker
 							v-model="date"
+							label="Date de rendez-vous"
 							placeholder="Date requise"
 							format="DD/MM/YYYY"
 							required
@@ -1631,6 +1671,7 @@ export const CustomWarningRules: Story = {
 					<template>
 						<DatePicker
 							v-model="date"
+							label="Date requise"
 							placeholder="Date requise"
 							format="DD/MM/YYYY"
 							required

package/src/components/DatePicker/DateTextInput/DateTextInput.vue

@@ -103,30 +103,57 @@
 
 	/**
 	 * =====================
-	 * Validation setup (safe wrapper for readonly)
+	 * Validation setup (safe wrapper for readonly, reactive to toggles)
 	 * =====================
 	 */
-	const validationApi = !readonly.value
-		? useValidation({
-			showSuccessMessages: props.showSuccessMessages,
-			fieldIdentifier: props.label || props.placeholder,
-			disableErrorHandling: props.disableErrorHandling,
-		})
-		: {
-			errors: ref<string[]>([]),
-			warnings: ref<string[]>([]),
-			successes: ref<string[]>([]),
-			hasError: ref(false),
-			clearValidation: () => {},
-			validateField: () => ({
-				hasError: false,
-				hasWarning: false,
-				hasSuccess: false,
-				state: { errors: [], warnings: [], successes: [] },
-			} as ValidationResult),
-		}
+	const baseValidation = useValidation({
+		showSuccessMessages: props.showSuccessMessages,
+		fieldIdentifier: props.label || props.placeholder,
+		disableErrorHandling: props.disableErrorHandling,
+	})
 
-	const { errors, warnings, successes, hasError, clearValidation, validateField } = validationApi
+	const readonlyValidation = {
+		errors: ref<string[]>([]),
+		warnings: ref<string[]>([]),
+		successes: ref<string[]>([]),
+		hasError: ref(false),
+		clearValidation: () => {},
+		validateField: () => ({
+			hasError: false,
+			hasWarning: false,
+			hasSuccess: false,
+			state: { errors: [], warnings: [], successes: [] },
+		} as ValidationResult),
+	}
+
+	const validationApi = computed(() => (readonly.value ? readonlyValidation : baseValidation))
+
+	const errors = computed({
+		get: () => validationApi.value.errors.value,
+		set: (value) => { validationApi.value.errors.value = value },
+	})
+	const warnings = computed({
+		get: () => validationApi.value.warnings.value,
+		set: (value) => { validationApi.value.warnings.value = value },
+	})
+	const successes = computed({
+		get: () => validationApi.value.successes.value,
+		set: (value) => { validationApi.value.successes.value = value },
+	})
+	const hasError = computed(() => {
+		const api = validationApi.value
+		// baseValidation exposes a computed hasError, readonly stub exposes a ref
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- computed/ref dual shape
+		return (api as any).hasError?.value ?? api.errors.value.length > 0
+	})
+
+	const clearValidation = () => validationApi.value.clearValidation()
+
+	const validateField = (
+		value: unknown,
+		rules?: ValidationRule[],
+		warningRules?: ValidationRule[],
+	): ValidationResult => validationApi.value.validateField(value, rules, warningRules)
 
 	// Agrégation des erreurs internes et externes
 	const errorMessages = computed(() => [...errors.value, ...props.externalErrorMessages])

package/src/components/DatePicker/DateTextInput/NoCalendar.stories.ts

@@ -231,6 +231,45 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { ref } from 'vue'
+					import { DatePicker } from '@cnamts/synapse'
+
+					const date = ref<string | null>(null)
+				</script>
+				`,
+			},
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<div>
+						<DatePicker
+							v-model="date"
+							format="DD/MM/YYYY"
+							date-format-return=""
+							placeholder="JJ/MM/AAAA"
+							label="Date avec règles de validation"
+							required
+							is-outlined
+							display-icon
+							:no-icon="false"
+							:no-calendar="true"
+						/>
+						<div style="margin-top: 10px; font-family: monospace; color: #666;">
+							Valeur : {{ date }}
+						</div>
+					</div>
+				</template>
+				`,
+			},
+		],
+	},
 	args: {
 		'noCalendar': true,
 		'format': 'DD/MM/YYYY',
@@ -275,6 +314,51 @@ export const Default: Story = {
 }
 
 export const Required: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { ref } from 'vue'
+					import { DatePicker } from '@cnamts/synapse'
+
+					const date = ref<string | null>(null)
+				</script>
+				`,
+			},
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<div>
+						<h4 class="mb-4">Sans astérisque :</h4>
+						<DatePicker
+							v-model="date"
+							format="DD/MM/YYYY"
+							placeholder="JJ/MM/AAAA"
+							label="Date avec règles de validation"
+							required
+							is-outlined
+							:no-calendar="true"
+						/>
+						<h4 class="mb-4">Avec astérisque :</h4>
+						<DatePicker
+							v-model="date"
+							format="DD/MM/YYYY"
+							placeholder="JJ/MM/AAAA"
+							label="Date avec règles de validation"
+							required
+							is-outlined
+							:no-calendar="true"
+							display-asterisk
+						/>
+					</div>
+				</template>
+				`,
+			},
+		],
+	},
 	args: {
 		'noCalendar': true,
 		'format': 'DD/MM/YYYY',
@@ -359,6 +443,7 @@ export const EuropeanFormat: Story = {
 		'format': 'DD/MM/YYYY',
 		'dateFormatReturn': 'YYYY/MM/DD',
 		'placeholder': 'JJ/MM/AAAA',
+		'label': 'Date avec règles de validation',
 		'required': true,
 		'noIcon': true,
 		'onUpdate:modelValue': fn(),
@@ -421,6 +506,7 @@ export const CustomRules: Story = {
 		'noCalendar': true,
 		'format': 'DD/MM/YYYY',
 		'dateFormatReturn': 'DD/MM/YYYY',
+		'label': 'Date avec règles personnalisées',
 		'placeholder': 'DD/MM/YYYY',
 		'required': true,
 		'customRules': [{
@@ -492,6 +578,7 @@ export const WarningRules: Story = {
 		'noCalendar': true,
 		'format': 'DD/MM/YYYY',
 		'placeholder': 'JJ/MM/AAAA',
+		'label': 'Date avec règles d\'avertissement',
 		'customWarningRules': [{
 			type: 'custom',
 			options: {
@@ -553,6 +640,7 @@ export const WithAppendIcon: Story = {
 		'noCalendar': true,
 		'format': 'DD/MM/YYYY',
 		'placeholder': 'JJ/MM/AAAA',
+		'label': 'Date avec icône en suffixe',
 		'displayAppendIcon': true,
 		'onUpdate:modelValue': fn(),
 		'onFocus': fn(),
@@ -623,6 +711,7 @@ export const WithErrorDisabled: Story = {
 		format: 'DD/MM/YYYY',
 		dateFormatReturn: 'YYYY/MM/DD',
 		placeholder: 'Date requise sans erreur',
+		label: 'Date requise sans erreur',
 		required: true,
 		noIcon: true,
 		disableErrorHandling: true,
@@ -757,6 +846,7 @@ export const AutoClampFeature: Story = {
                 <DatePicker
                   v-model="dateSlash"
                   placeholder="Saisie avec auto clamp - séparateur /"
+				  label="Date"
                   format="DD/MM/YYYY"
                   noCalendar
                   autoClamp
@@ -767,6 +857,7 @@ export const AutoClampFeature: Story = {
                 <DatePicker
                   v-model="dateDash"
                   placeholder="Saisie avec auto clamp - séparateur -"
+				  label="Date"
                   format="DD-MM-YYYY"
                   noCalendar
                   autoClamp
@@ -777,6 +868,7 @@ export const AutoClampFeature: Story = {
                 <DatePicker
                   v-model="dateDot"
                   placeholder="Saisie avec auto clamp - séparateur ."
+				  label="Date"
                   format="YYYY.MM.DD"
                   noCalendar
                   autoClamp
@@ -787,6 +879,7 @@ export const AutoClampFeature: Story = {
                 <DatePicker
                   v-model="dateRange"
                   placeholder="Saisie plage avec auto clamp"
+				  label="Date"
                   format="DD/MM/YYYY"
                   displayRange
                   noCalendar
@@ -874,6 +967,7 @@ export const DifferentFormats: Story = {
                 <DatePicker
                     v-model="value1"
                     placeholder="Format JJ/MM/AAAA"
+					label="Date"
                     format="DD/MM/YYYY"
                     no-calendar
                     class="py-4"
@@ -881,6 +975,7 @@ export const DifferentFormats: Story = {
                 <DatePicker
                     v-model="value2"
                     placeholder="Format MM/JJ/AAAA"
+					label="Date"
                     format="MM/DD/YYYY"
 					no-calendar
 					class="py-4"
@@ -888,6 +983,7 @@ export const DifferentFormats: Story = {
                 <DatePicker
                     v-model="value3"
                     placeholder="Format AAAA-MM-JJ"
+					label="Date"
                     format="YYYY-MM-DD"
 					no-calendar
 					class="py-4"
@@ -895,6 +991,7 @@ export const DifferentFormats: Story = {
                 <DatePicker
                     v-model="value4"
                     placeholder="Format JJ-MM-AA"
+					label="Date"
                     format="DD-MM-YY"
 					no-calendar
 					class="py-4"
@@ -902,6 +999,7 @@ export const DifferentFormats: Story = {
                 <DatePicker
                     v-model="value5"
                     placeholder="Format JJ.MM.AAAA"
+					label="Date"
                     format="DD.MM.YYYY"
 					no-calendar
 					class="py-4"

package/src/components/DeclarationAccessibilityPage/DeclarationAccessibilityPage.mdx

@@ -0,0 +1,83 @@
+import { Controls, Canvas, Meta, Source } from '@storybook/blocks';
+
+import * as DeclarationAccessibilityPageStories from './DeclarationAccessibilityPage.stories.ts';
+
+<Meta of={DeclarationAccessibilityPageStories} />
+
+# DeclarationAccessibilityPage
+
+Le composant `DeclarationAccessibilityPage` permet de générer une déclaration d'accessibilité conforme aux exigences légales françaises (RGAA) pour un site ou une application web.
+
+<Canvas of={DeclarationAccessibilityPageStories.Default}  />
+
+## API
+
+<Controls />
+
+## Utilisation standard
+
+La version standard de la déclaration d'accessibilité contient les informations minimales requises.
+
+<Canvas of={DeclarationAccessibilityPageStories.Default} />
+
+## Cas simple
+
+Un exemple de déclaration avec les informations minimales requises.
+
+<Canvas of={DeclarationAccessibilityPageStories.SimpleCase} />
+
+## Avec non-conformités
+
+Exemple de déclaration incluant des non-conformités identifiées.
+
+<Canvas of={DeclarationAccessibilityPageStories.WithNonConformities} />
+
+## Avec dérogations
+
+Exemple de déclaration incluant des dérogations pour charge disproportionnée.
+
+<Canvas of={DeclarationAccessibilityPageStories.WithExemptions} />
+
+## Avec environnements de tests
+
+Exemple de déclaration incluant les environnements de tests utilisés pour l'audit d'accessibilité.
+
+<Canvas of={DeclarationAccessibilityPageStories.WithTestsEnvironement} />
+
+## Avec plan d'accessibilité
+
+Exemple de déclaration incluant un plan d'accessibilité avec des libellés personnalisés.
+
+<Canvas of={DeclarationAccessibilityPageStories.WithAccessibilityPlan} />
+
+## Accessibilité
+
+Le composant `DeclarationAccessibilityPage` est lui-même conçu pour être pleinement accessible :
+- Structure sémantique avec utilisation appropriée des balises HTML5
+- Contraste des couleurs conforme aux exigences RGAA
+- Navigation au clavier facilitée
+- Compatibilité avec les technologies d'assistance
+
+
+## Exemple d'utilisation
+
+<Source dark code={`
+<script setup lang="ts">
+import { DeclarationAccessibilityPage } from '@cnamts/synapse'
+</script>
+
+<template>
+  <DeclarationAccessibilityPage
+    entityName="L'Assurance Maladie"
+    siteName="ameli.fr"
+    siteUrl="https://www.ameli.fr"
+    :averageComplianceRate="78"
+    auditEntity="Société d'audit AccessiWeb"
+    contactEmail="accessibilite@ameli.fr"
+    :nonConformities="[
+      'La vidéo de présentation n\'a pas de transcription. Cette erreur sera corrigée avant le 31 mars 2023.',
+      'Le bouton d\'envoi du formulaire contient un intitulé incorrect. Cette erreur sera corrigée prochainement.'
+    ]"
+  />
+</template>
+`} />