@cnamts/synapse 0.0.10-alpha → 0.0.12-alpha

package/src/composables/useFilterable/useFilterable.ts

@@ -0,0 +1,196 @@
+import { ref, watch, type Ref } from 'vue'
+import type { ChipItem } from '@/components/ChipList/types'
+import slugify from 'slugify'
+import { deepCopy } from '@/utils/functions/deepCopy'
+
+export type FilterItem = {
+	name: string
+	value?: unknown
+	formatChip?: (value: unknown) => ChipItem[]
+	chipOverflowLimit?: number
+	title?: string
+}
+
+export type FilterProp = FilterItem[]
+
+export default function useFilterable(model: Ref<FilterProp>, emits) {
+	const filters = ref<FilterProp>([])
+
+	watch(model, (newFilters) => {
+		filters.value = deepCopy(newFilters)
+	}, { deep: true, immediate: true })
+
+	function getFilterCount(filter: FilterItem): number {
+		return getChips(filter).length
+	}
+
+	function formatFilterName(name: string): string {
+		return slugify(name, { lower: true })
+	}
+
+	function getChips(toto: FilterItem): ChipItem[] {
+		const { value, formatChip } = toto
+
+		if (value !== undefined && formatChip) {
+			return formatChip(value)
+		}
+
+		const isString = typeof value === 'string'
+		const isNumber = typeof value === 'number'
+		const isObject = typeof value === 'object' && value !== null
+		const isArray = Array.isArray(value)
+
+		if (isString || isNumber) {
+			if (value === '') {
+				return []
+			}
+
+			return [
+				{
+					text: value.toString(),
+					value: value,
+				},
+			]
+		}
+
+		if (isArray) {
+			return value.map((item) => {
+				if (typeof item !== 'object') {
+					return {
+						text: item.toString(),
+						value: item,
+					}
+				}
+
+				return {
+					text: item.text || item.value.toString(),
+					value: item,
+				}
+			})
+		}
+
+		if (isObject) {
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			const typedValue = value as Record<string, any>
+			const isPeriodField
+				= typedValue.from !== undefined && typedValue.to !== undefined
+
+			if (isPeriodField) {
+				if (typedValue.from === null || typedValue.to === null) {
+					return []
+				}
+
+				return [
+					{
+						text: `${typedValue.from} – ${typedValue.to}`,
+						value: typedValue,
+					},
+				]
+			}
+
+			// Any object
+			return Object.keys(typedValue).map((key) => {
+				// Use text property if it exists, else use value property or default to key value
+				const text
+					= typedValue[key].text
+						|| typedValue[key].value?.toString()
+						|| typedValue[key].toString()
+
+				return {
+					text,
+					value: typedValue[key],
+				}
+			})
+		}
+
+		return []
+	}
+
+	function removeChip(filter: FilterItem, chip: ChipItem): void {
+		const value = filter.value
+		const isString = typeof value === 'string'
+		const isNumber = typeof value === 'number'
+		const isObject = typeof value === 'object' && value !== null
+		const isArray = Array.isArray(value)
+
+		if (isString || isNumber) {
+			filter.value = undefined
+		}
+
+		if (isArray) {
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			const typedValue = value as any[]
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			const chipValue = chip.value as any
+
+			const filteredValue = typedValue.filter((item) => {
+				if (Array.isArray(chipValue)) {
+					return !chipValue.includes(item)
+				}
+
+				if (typeof item === 'object') {
+					return item.value !== chipValue.value
+				}
+
+				return item !== chipValue
+			})
+
+			const newValue = filteredValue.length
+				? filteredValue
+				: undefined
+
+			filter.value = newValue
+			updateValue()
+
+			return
+		}
+
+		if (isObject) {
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			const typedValue = value as Record<string, any>
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			const chipValue = chip.value as any
+			const isPeriodField
+				= typedValue.from !== undefined && typedValue.to !== undefined
+
+			if (isPeriodField) {
+				filter.value = undefined
+				updateValue()
+
+				return
+			}
+
+			delete typedValue[chipValue]
+			filter.value = typedValue
+		}
+		updateValue()
+	}
+
+	function resetFilter(filter: FilterItem): void {
+		filter.value = undefined
+		updateValue()
+	}
+
+	function resetAllFilters(): void {
+		filters.value.forEach((filter) => {
+			filter.value = undefined
+		})
+
+		updateValue()
+	}
+
+	function updateValue(): void {
+		emits('update:modelValue', filters.value)
+	}
+
+	return {
+		filters,
+		updateValue,
+		removeChip,
+		resetFilter,
+		resetAllFilters,
+		getChips,
+		getFilterCount,
+		formatFilterName,
+	}
+}

package/src/composables/validation/tests/useValidation.spec.ts

@@ -0,0 +1,154 @@
+import { describe, it, expect } from 'vitest'
+import { useValidation } from '../useValidation'
+
+describe('useValidation', () => {
+	it('should initialize with empty validation state', () => {
+		const validation = useValidation()
+
+		expect(validation.errors.value).toEqual([])
+		expect(validation.warnings.value).toEqual([])
+		expect(validation.successes.value).toEqual([])
+		expect(validation.hasError.value).toBe(false)
+		expect(validation.hasWarning.value).toBe(false)
+		expect(validation.hasSuccess.value).toBe(false)
+	})
+
+	it('should handle basic validation rules', () => {
+		const validation = useValidation()
+		const rules = [{
+			type: 'required',
+			options: {
+				message: 'Ce champ est requis',
+				successMessage: 'Champ valide',
+			},
+		}]
+
+		// Test avec une valeur vide
+		const emptyResult = validation.validateField('', rules)
+		expect(emptyResult.hasError).toBe(true)
+		expect(emptyResult.state.errors).toContain('Ce champ est requis')
+
+		// Test avec une valeur valide
+		const validResult = validation.validateField('test', rules)
+		expect(validResult.hasSuccess).toBe(true)
+		expect(validResult.state.successes).toContain('Champ valide')
+	})
+
+	it('should handle warning rules', () => {
+		const validation = useValidation()
+		const warningRules = [{
+			type: 'custom',
+			options: {
+				validate: (value: string) => value.length >= 8,
+				warningMessage: 'Le champ devrait contenir au moins 8 caractères',
+				isWarning: true,
+			},
+		}]
+
+		// Test avec une valeur courte
+		const shortResult = validation.validateField('test', [], warningRules)
+		expect(shortResult.hasWarning).toBe(true)
+		expect(shortResult.state.warnings[0]).toContain('8 caractères')
+
+		// Test avec une valeur valide
+		const validResult = validation.validateField('test_long', [], warningRules)
+		expect(validResult.hasWarning).toBe(false)
+		expect(validResult.state.warnings).toEqual([])
+	})
+
+	it('should handle multiple validation rules', () => {
+		const validation = useValidation()
+		const rules = [
+			{
+				type: 'required',
+				options: {
+					message: 'Ce champ est requis',
+				},
+			},
+			{
+				type: 'minLength',
+				options: {
+					length: 3,
+					message: 'Minimum 3 caractères requis',
+				},
+			},
+		]
+
+		// Test avec une valeur vide
+		const emptyResult = validation.validateField('', rules)
+		expect(emptyResult.hasError).toBe(true)
+		expect(emptyResult.state.errors).toContain('Ce champ est requis')
+
+		// Test avec une valeur trop courte
+		const shortResult = validation.validateField('ab', rules)
+		expect(shortResult.hasError).toBe(true)
+		expect(shortResult.state.errors).toContain('Minimum 3 caractères requis')
+
+		// Test avec une valeur valide
+		const validResult = validation.validateField('abc', rules)
+		expect(validResult.hasError).toBe(false)
+		expect(validResult.hasSuccess).toBe(true)
+	})
+
+	it('should respect showSuccessMessages option', () => {
+		const validation = useValidation({ showSuccessMessages: false })
+		const rules = [{
+			type: 'required',
+			options: {
+				message: 'Ce champ est requis',
+				successMessage: 'Champ valide',
+			},
+		}]
+
+		const result = validation.validateField('test', rules)
+		expect(result.hasSuccess).toBe(false)
+		expect(result.state.successes).toEqual([])
+	})
+
+	it('should use fieldIdentifier in messages', () => {
+		const validation = useValidation({ fieldIdentifier: 'Email' })
+		const rules = [{
+			type: 'required',
+			options: {
+				message: 'Le champ Email est requis',
+			},
+		}]
+
+		const result = validation.validateField('', rules)
+		expect(result.state.errors[0]).toContain('Email')
+	})
+
+	it('should clear validation state', () => {
+		const validation = useValidation()
+		const rules = [{
+			type: 'required',
+			options: {
+				message: 'Ce champ est requis',
+			},
+		}]
+
+		validation.validateField('', rules)
+		expect(validation.hasError.value).toBe(true)
+
+		validation.clearValidation()
+		expect(validation.errors.value).toEqual([])
+		expect(validation.warnings.value).toEqual([])
+		expect(validation.successes.value).toEqual([])
+	})
+
+	it('should validate on submit', async () => {
+		const validation = useValidation()
+		const rules = [{
+			type: 'required',
+			options: {
+				message: 'Ce champ est requis',
+			},
+		}]
+
+		validation.validateField('', rules)
+		expect(await validation.validateOnSubmit()).toBe(false)
+
+		validation.validateField('test', rules)
+		expect(await validation.validateOnSubmit()).toBe(true)
+	})
+})

package/src/composables/validation/useValidation.ts

@@ -0,0 +1,165 @@
+import { ref, computed } from 'vue'
+import { useFieldValidation, type RuleOptions } from '../rules/useFieldValidation'
+
+export type ValidationRule = {
+	type: string
+	options: RuleOptions
+}
+
+export interface ValidationOptions {
+	showSuccessMessages?: boolean
+	fieldIdentifier?: string
+	customRules?: ValidationRule[]
+	warningRules?: ValidationRule[]
+	successRules?: ValidationRule[]
+}
+
+export interface ValidationState {
+	errors: string[]
+	warnings: string[]
+	successes: string[]
+}
+
+export interface ValidationResult {
+	hasError: boolean
+	hasWarning: boolean
+	hasSuccess: boolean
+	state: ValidationState
+}
+
+/**
+ * Composable pour gérer la validation des champs de formulaire
+ * @param options Options de configuration de la validation
+ * @returns Un objet contenant les états et méthodes de validation
+ */
+export function useValidation(options: ValidationOptions = { showSuccessMessages: true }) {
+	const errors = ref<string[]>([])
+	const warnings = ref<string[]>([])
+	const successes = ref<string[]>([])
+
+	const { generateRules } = useFieldValidation()
+
+	const hasError = computed(() => errors.value.length > 0)
+	const hasWarning = computed(() => warnings.value.length > 0)
+	const hasSuccess = computed(() =>
+		successes.value.length > 0 && !hasError.value && !hasWarning.value,
+	)
+
+	const clearValidation = () => {
+		errors.value = []
+		warnings.value = []
+		successes.value = []
+	}
+
+	const validateField = (
+		value: unknown,
+		rules: ValidationRule[] = [],
+		warningRules: ValidationRule[] = [],
+		successRules: ValidationRule[] = [],
+	): ValidationResult => {
+		clearValidation()
+
+		// Validation des règles normales
+		const normalRules = rules.map(rule => ({
+			type: rule.type,
+			options: {
+				...rule.options,
+				fieldIdentifier: options.fieldIdentifier || rule.options.fieldIdentifier,
+			},
+		}))
+
+		const validationRules = generateRules(normalRules)
+		let hasValidationError = false
+		validationRules.forEach((validationRule) => {
+			const result = validationRule(value)
+			if (result.error) {
+				errors.value.push(result.error)
+				hasValidationError = true
+			}
+		})
+
+		// Si pas d'erreur, ajouter le message de succès ou un message par défaut
+		if (!hasValidationError && value && options.showSuccessMessages !== false) {
+			const customSuccessMessage = rules.find(rule => rule.options.successMessage)?.options.successMessage
+			if (customSuccessMessage) {
+				successes.value.push(customSuccessMessage)
+			}
+			else {
+				const defaultMessage = options.fieldIdentifier ? `Le champ ${options.fieldIdentifier} est valide.` : 'Champ valide'
+				successes.value.push(defaultMessage)
+			}
+		}
+
+		// Validation des règles d'avertissement
+		if (!hasValidationError) {
+			const warningValidationRules = generateRules(
+				warningRules.map(rule => ({
+					type: rule.type,
+					options: {
+						...rule.options,
+						isWarning: true,
+						fieldIdentifier: options.fieldIdentifier || rule.options.fieldIdentifier,
+					},
+				})),
+			)
+
+			warningValidationRules.forEach((validationRule) => {
+				const result = validationRule(value)
+				if (result.warning) {
+					warnings.value.push(result.warning)
+				}
+			})
+		}
+
+		// Validation des règles de succès
+		if (!hasValidationError && !hasWarning.value) {
+			const successValidationRules = generateRules(
+				successRules.map(rule => ({
+					type: rule.type,
+					options: {
+						...rule.options,
+						isSuccess: true,
+						fieldIdentifier: options.fieldIdentifier || rule.options.fieldIdentifier,
+					},
+				})),
+			)
+
+			successValidationRules.forEach((validationRule) => {
+				const result = validationRule(value)
+				if (result.success && options.showSuccessMessages !== false) {
+					successes.value.push(result.success)
+				}
+			})
+		}
+
+		return {
+			hasError: hasError.value,
+			hasWarning: hasWarning.value,
+			hasSuccess: hasSuccess.value,
+			state: {
+				errors: errors.value,
+				warnings: warnings.value,
+				successes: successes.value,
+			},
+		}
+	}
+
+	const validateOnSubmit = async (): Promise<boolean> => {
+		return !hasError.value
+	}
+
+	return {
+		// États
+		errors,
+		warnings,
+		successes,
+		hasError,
+		hasWarning,
+		hasSuccess,
+
+		// Méthodes
+		validateField,
+		validateOnSubmit,
+		clearValidation,
+	}
+}

package/src/constants/icons.ts

@@ -0,0 +1,5 @@
+import { mdiCheck, mdiLink, mdiClose } from '@mdi/js'
+
+export const checkIcon = mdiCheck
+export const croixIcon = mdiClose
+export const linkICon = mdiLink

package/src/designTokens/index.ts

@@ -4,6 +4,8 @@ import { cnamColorsTokens } from './tokens/cnam/cnamColors'
 import { cnamLightTheme } from './tokens/cnam/cnamLightTheme'
 import { cnamDarkTheme } from './tokens/cnam/cnamDarkTheme'
 import { paColorsTokens } from './tokens/pa/paColors'
+import { paSemanticTokens } from './tokens/pa/paSemantic'
+import { paContextualTokens } from './tokens/pa/paContextual'
 import { paLightTheme } from './tokens/pa/paLightTheme'
 import { paDarkTheme } from './tokens/pa/paDarkTheme'
 
@@ -14,6 +16,8 @@ export {
 	cnamLightTheme,
 	cnamDarkTheme,
 	paColorsTokens,
+	paSemanticTokens,
+	paContextualTokens,
 	paLightTheme,
 	paDarkTheme,
 }

package/src/designTokens/tokens/cnam/cnamLightTheme.ts

@@ -29,10 +29,10 @@ export const cnamLightTheme = {
 	backgroundMain: cnamSemanticTokens.colors.background.main,
 	backgroundSurface: cnamSemanticTokens.colors.background.surface,
 	backgroundSurfaceAlt: cnamSemanticTokens.colors.background.surfaceAlt,
-	backgroungMainAlt: cnamSemanticTokens.colors.background.mainAlt,
-	backgroungRaised: cnamSemanticTokens.colors.background.raised,
+	backgroundMainAlt: cnamSemanticTokens.colors.background.mainAlt,
+	backgroundRaised: cnamSemanticTokens.colors.background.raised,
 	backgroundAccent: cnamSemanticTokens.colors.background.accent,
-	backgroungAccentContrasted: cnamSemanticTokens.colors.background.accentContrasted,
+	backgroundAccentContrasted: cnamSemanticTokens.colors.background.accentContrasted,
 	backgroundAccentAlt: cnamSemanticTokens.colors.background.accentAlt,
 	backgroundInfo: cnamSemanticTokens.colors.background.info,
 	backgroundInfoSubdued: cnamSemanticTokens.colors.background.infoSubdued,

package/src/stories/Accessibilite/Aculturation/SensibilisationAccessibilite.mdx

@@ -0,0 +1,63 @@
+import {Meta} from '@storybook/addon-docs/blocks';
+
+<Meta title="Accessibilité/Aculturation/Sensibilisation à l’accessibilité numérique"/>
+
+# 1. L’accessibilité concerne tout le monde
+## **1.1 La CNAM doit respecter le RGAA**
+
+En tant que personne morale de droit public, nous avons l'obligation légale de concevoir les composants de notre Design System en respectant les enjeux d’accessibilité. En conformité avec la Direction Interministérielle du Numérique (DINUM), il est demandé de respecter le   Référentiel Général d'Amélioration de l'Accessibilité (RGAA) pour le desktop et Référentiel d’Accessibilité des Applications Mobiles (RAAM) pour le mobile. 
+#
+
+## 1.2 Une diversité de handicap
+
+Bien que l’accessibilité concerne tout le monde, il est particulièrement pertinent pour l’inclusion des personnes avec des **handicaps qu’ils soient** 
+
+- **visuels** (ex: les aveugles ou les malvoyants)
+- **auditifs** (ex: les sourds ou les malentendants)
+- **moteurs** (ex: ceux qui ont des difficultés à bouger à cause de maladies ou d'accidents)
+- **cognitifs** (ex: ceux avec des troubles de l'apprentissage ou des troubles psychiques).
+
+L’enjeu de l’accessibilité est de s'assurer que les sites web, les applications et autres outils numériques soient **faciles à utiliser pour tout le monde, peu importe leurs capacités.**
+
+## 1.3 Nous outils s’adressent à tous (assurés, agents, professionnels de santé), une partie significative de nos utilisateurs sont donc concernés.
+
+En France, 14% de la population, soit 7,6 millions de personnes de 15 ans ou plus, sont en situation de handicap. Cependant, l'accessibilité ne concerne pas seulement ces personnes. Toute situation où l'environnement n'est pas adapté aux capacités d'une personne peut créer un handicap. 
+
+Par exemple, une personne en fauteuil roulant n'est pas en situation de handicap dans un environnement accessible. 
+De plus, certaines personnes peuvent ne pas se considérer comme handicapées même si elles rencontrent des difficultés. Ainsi, tous nos utilisateurs peuvent être concernés par des situations de handicap, qu'elles soient permanentes ou temporaires.
+<img alt="handicap" src={'/handicap1.jpg'} style={{ padding: '10px',  border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0'}} />
+
+<aside>
+
+Tester la navigation du point de vue des utilisateurs en situation de handicap
+
+- [Atalan Simulateur](https://www.atalan.fr/agissons/fr/daltonisme.html)
+- [Inria Simulateur de vision sur une interface](https://simulation-accessibilite.inria.fr/public/fr/daltonisme.html)
+</aside>
+# 2. Comment mettre en place l’accessibilité ?
+
+On dit souvent que l’accessibilité ce n’est pas pour tel ou tel service car cela serait trop long, couteux ou encore qu’on n’a pas l’expertise. Pourtant de nombreuses actions sont faciles et à portée de main pour initier une démarche d’accessibilité. 
+<img alt="processusAccessibilite" src={'/processusAccessibilite.jpg'} style={{ padding: '10px',  border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0'}} />
+
+## **2.1 L’accessibilité s’intègre tout au long de votre processus de conception**
+
+Etre accessible est un travail en continu qui s’intègre à plusieurs niveaux de votre processus de conception. C’est un travail de collaboration qui mêlent plusieurs expertises, chef de projet, designer et développeurs. 
+
+## 2.2 Vous pouvez pré-auditer un service
+
+Un pré-audit est une évaluation préparatoire réalisée par les équipes-produits pour vérifier la conformité d'un produit aux critères du RGAA. À l'aide d’outil et de méthodologie, ces équipes peuvent identifier la moitié des critères requis avant un audit complet. Ces équipes peuvent compter sur un accompagnement pour la prise en main de cet outil ainsi que du conseil pour la résolution des défauts constatés. L’objectif premier du pré-audit est de réduire la quantité de correctif relevée par l’audit complet en donnant un meilleur contrôle aux produits sur leur gestion de projet.
+
+**[Guide du pré-audit](/docs/accessibilité-kit-de-pré-audit-pré-audit--docs)**
+
+## 2.3 Prêt pour soumettre une demande d’audit  ?
+
+**Vous avez fait votre pré audit et vous êtes prêts à le soumettre ?** 
+
+Une fois le pré-audit effectué, un audit complet est réalisé par une équipe dédiée à la Filière Digital sur la totalité des critères évalués sur les pages retenues. Le résultat de cet audit donne à la fois les correctifs à apporter et le taux de conformité. En complément l’équipe FD délivre un template de déclaration d’accessibilité à compléter par le produit selon les correctifs réalisés. Les correctifs sont à réaliser par l’équipe-produit. Il est demandé à cette dernière de publier la page de déclaration d’accessibilité dès qu’elle en a les moyens.
+
+Pour demander un audit complet de votre site web, vous devez compléter <a href="/documents/Checklist_pre-audit_CNAM_NOM_DU_PRODUIT.xlsx" target="_blank">ce fichier</a> et le soumettre à [valentin.becquet@assurance-maladie.fr](mailto:valentin.becquet@assurance-maladie.fr).
+L'acceptance de la demande est soumise à la démonstration de l'effort engagé par l'équipe-produit. Cette appréciation fera l'objet d'une discussion.
+
+
+
+

package/src/stories/Accessibilite/Audit/RGAA.mdx

@@ -0,0 +1,29 @@
+import {Meta} from '@storybook/addon-docs/blocks';
+
+<Meta title="Accessibilité/Audit/RGAA"/>
+
+## Le RGAA, le référentiel français d’accessibilité numérique
+
+Le RGAA est un outil méthodologique de certification permettant d'assurer par le respect de ses critères une manipulation des produits numériques dans le domaine du Web de manière égale entre chaque citoyen, qu'il soit ou non en situation de handicap (visuel, auditif, moteur, trouble dys...). Basé sur les travaux du W3C Web Accessibility Initiative (WAI) il vise à garantir quatre indices de performance : **la bonne perceptibilité de l'information**, une **manipulation efficiente dans la navigation**, une **bonne compréhension** et une **robustesse efficace** dans l'usage des produits numériques. Actuellement le RGAA (version 4) est constitué de 106 critères répartis dans 13 catégories
+
+[En savoir plus sur le RGAA](https://www.numerique.gouv.fr/publications/rgaa-accessibilite/#contenu)
+
+[En savoir plus sur le W3C WAI](https://www.w3.org/WAI/fundamentals/)
+
+[Accéder à la liste des critères du RGAA](https://www.numerique.gouv.fr/publications/rgaa-accessibilite/methode-rgaa/criteres/#contenu)
+
+### Résultats
+
+ 
+La conduite d'une évaluation pour attester de la conformité du produit numérique avec le RGAA peut être menée par un audit en auto-évaluation ou par un organisme tiers. Au terme de cette évaluation vous recevez un score et des informations complémentaires permettant de définir l'état de conformité de votre produit. Il existe 3 états:
+
+- **Conformité totale :** si tous les critères de contrôle du RGAA sont respectés
+- **Conformité partielle :** si au moins 50 % des critères de contrôle du RGAA sont respectés
+- **Non-conformité :** s'il n'existe aucun résultat d'audit en cours de validité permettant de mesurer le respect des critères ou si moins de 50 % des critères de contrôle du RGAA sont respectés
+
+Vous garantissant d'un respect de ces critères, l'usage sans modification de notre Design System vous assure d'abord un gain de temps dans le développement mais surtout une augmentation du pourcentage de succès dans l'évaluation de votre produit.
+
+<aside>
+- [En savoir plus sur les obligations légales françaises](https://accessibilite.numerique.gouv.fr/obligations/)
+- [En savoir plus sur les recommandations web de Orange](https://a11y-guidelines.orange.com/fr/web/)
+</aside>

package/src/stories/Accessibilite/Introduction.mdx

@@ -0,0 +1,27 @@
+import {Meta} from '@storybook/addon-docs/blocks';
+
+<Meta title="Accessibilité/Introduction"/>
+
+
+# Accessibilité numérique
+
+Pour répondre aux objectifs de mise en conformité des interfaces utilisateurs avec les normes réglementaires de l’accessibilité numérique, la Filière Digital propose une offre accessibilité numérique basée sur trois éléments clés :
+
+- la mise à disposition d’un Design System performant pour des produits web embarquant déjà ce qui peut l'être à un niveau design system
+- une documentation spécifique d’aide à la conception comportant des outils d’autocontrôle
+- un accompagnement des équipes-produits sur le sujet
+
+Face à l’ampleur du parc numérique de la Cnam et pour atteindre puis maintenir dans la durée la conformité requise par la DINUM nous pensons que la prise de conscience des enjeux de l’accessibilité numérique doit être partagé entre tous les acteurs de la conception à la fabrication des produits numériques.<br/>
+C'est pourquoi et sauf exception motivée, toute nouvelle demande d'audit d'accessibilité numérique sera soumise à la validation de critères d'éligibilité définis dans le kit de pré-audit.<br/>
+L'objectif ici est d'anticiper les erreurs et diluer l'effort de mise en conformité tout au long du processus de fabrication afin de ne pas attendre le résultat de l'audit pour réécrire le produit.<br/>
+Une fois le produit éligible, l'équipe experte de la Filière Digital réalise un audit et communique à l'équipe-produit un rapport comportant des recommandations. Si le produit utilise le DS CNAM et que des problèmes sont identifiés associés à ce dernier, les évolutions seront portés directement par la Filière Digital, en cas contraire il est demandé à l'équipe-produit de corriger les anomalies et de mettre à jour en autonomie le rapport d'audit pour atteindre la pleine conformité.
+
+Conscient que tous les produits ne peuvent pas utiliser dans l’immédiat le Design System thème Cnam ou thème Portail Agent, nous avons conçu le kit de pré-audit pour qu’il puisse fonctionner en autonomie.<br/>
+Si vous avez besoin d’un accompagnement sur le sujet, merci de prendre contact avec valentin.becquet@assurance-maladie.fr.
+
+Vous trouverez dans ce dossier 3 principales rubriques :
+
+- [Sensibilisation à l'accessibilité numérique](/docs/accessibilité-aculturation-sensibilisation-à-l-accessibilité-numérique--docs)
+- [Kit du Pré-Audit](/docs/accessibilité-kit-de-pré-audit-introduction--docs)
+- [Audit](/docs/accessibilité-audit-rgaa--docs)
+