@cnamts/synapse 0.0.12-alpha → 0.0.13-alpha

package/src/composables/rules/tests/useFieldValidation.spec.ts

@@ -1,8 +1,37 @@
-import { describe, it, expect } from 'vitest'
-import { useFieldValidation } from '../useFieldValidation'
+import { describe, it, expect, beforeEach, afterEach } from 'vitest'
+import { useFieldValidation, EMAIL_REGEXP } from '../useFieldValidation'
 
 describe('useFieldValidation', () => {
-	const { generateRules } = useFieldValidation()
+	const { generateRules, parseDate } = useFieldValidation()
+
+	// Mock Date pour les tests liés à la date
+	let originalDate: typeof Date
+
+	beforeEach(() => {
+		// Sauvegarder la Date originale
+		originalDate = global.Date
+		// Mock de la date actuelle à 2023-01-15
+		// Pas besoin de stocker mockDate car nous utilisons directement la classe
+		global.Date = class extends Date {
+			constructor(...args: unknown[]) {
+				if (args.length === 0) {
+					super(2023, 0, 15)
+				}
+				else {
+					super(...args as [number, number, number])
+				}
+			}
+
+			static now() {
+				return new Date(2023, 0, 15).getTime()
+			}
+		} as typeof Date
+	})
+
+	afterEach(() => {
+		// Restaurer la Date originale
+		global.Date = originalDate
+	})
 
 	it('should validate required rule', () => {
 		const rules = generateRules([{ type: 'required', options: { message: 'This field is required.' } }])
@@ -10,6 +39,9 @@ describe('useFieldValidation', () => {
 
 		expect(rule('')).toEqual({ error: 'This field is required.' })
 		expect(rule('value')).toEqual({ success: 'Le champ est valide.' })
+		expect(rule(new Date())).toEqual({ success: 'Le champ est valide.' })
+		expect(rule({ key: 'value' })).toEqual({ success: 'Le champ est valide.' })
+		expect(rule(null)).toEqual({ error: 'This field is required.' })
 	})
 
 	it('should validate min rule', () => {
@@ -18,6 +50,8 @@ describe('useFieldValidation', () => {
 
 		expect(rule(3)).toEqual({ error: 'Value must be at least 5.' })
 		expect(rule(5)).toEqual({ success: 'Le champ est valide.' })
+		expect(rule(10)).toEqual({ success: 'Le champ est valide.' })
+		expect(rule('')).toEqual({}) // Empty string should be ignored
 	})
 
 	it('should validate max rule', () => {
@@ -26,6 +60,8 @@ describe('useFieldValidation', () => {
 
 		expect(rule(15)).toEqual({ error: 'Value must be at most 10.' })
 		expect(rule(10)).toEqual({ success: 'Le champ est valide.' })
+		expect(rule(5)).toEqual({ success: 'Le champ est valide.' })
+		expect(rule('')).toEqual({}) // Empty string should be ignored
 	})
 
 	it('should validate minLength rule', () => {
@@ -34,6 +70,23 @@ describe('useFieldValidation', () => {
 
 		expect(rule('1234')).toEqual({ error: 'Minimum length is 5.' })
 		expect(rule('12345')).toEqual({ success: 'Le champ est valide.' })
+		expect(rule('123456')).toEqual({ success: 'Le champ est valide.' })
+		expect(rule('')).toEqual({}) // Empty string should be ignored
+	})
+
+	it('should validate minLength rule with ignoreSpace option', () => {
+		const rules = generateRules([{
+			type: 'minLength',
+			options: {
+				length: 5,
+				message: 'Minimum length is 5.',
+				ignoreSpace: true,
+			},
+		}])
+		const rule = rules[0]
+
+		expect(rule('1 2 3 4')).toEqual({ error: 'Minimum length is 5.' }) // Length without spaces is 4
+		expect(rule('1 2 3 4 5')).toEqual({ success: 'Le champ est valide.' }) // Length without spaces is 5
 	})
 
 	it('should validate maxLength rule', () => {
@@ -42,6 +95,23 @@ describe('useFieldValidation', () => {
 
 		expect(rule('123456')).toEqual({ error: 'Maximum length is 5.' })
 		expect(rule('12345')).toEqual({ success: 'Le champ est valide.' })
+		expect(rule('1234')).toEqual({ success: 'Le champ est valide.' })
+		expect(rule('')).toEqual({}) // Empty string should be ignored
+	})
+
+	it('should validate maxLength rule with ignoreSpace option', () => {
+		const rules = generateRules([{
+			type: 'maxLength',
+			options: {
+				length: 5,
+				message: 'Maximum length is 5.',
+				ignoreSpace: true,
+			},
+		}])
+		const rule = rules[0]
+
+		expect(rule('1 2 3 4 5 6')).toEqual({ error: 'Maximum length is 5.' }) // Length without spaces is 6
+		expect(rule('1 2 3 4 5')).toEqual({ success: 'Le champ est valide.' }) // Length without spaces is 5
 	})
 
 	it('should validate exactLength rule', () => {
@@ -49,15 +119,41 @@ describe('useFieldValidation', () => {
 		const rule = rules[0]
 
 		expect(rule('1234')).toEqual({ error: 'Length must be exactly 5.' })
+		expect(rule('123456')).toEqual({ error: 'Length must be exactly 5.' })
 		expect(rule('12345')).toEqual({ success: 'Le champ est valide.' })
+		expect(rule('')).toEqual({}) // Empty string should be ignored
+	})
+
+	it('should validate exactLength rule with ignoreSpace option', () => {
+		const rules = generateRules([{
+			type: 'exactLength',
+			options: {
+				length: 5,
+				message: 'Length must be exactly 5.',
+				ignoreSpace: true,
+			},
+		}])
+		const rule = rules[0]
+
+		expect(rule('1 2 3 4')).toEqual({ error: 'Length must be exactly 5.' }) // Length without spaces is 4
+		expect(rule('1 2 3 4 5 6')).toEqual({ error: 'Length must be exactly 5.' }) // Length without spaces is 6
+		expect(rule('1 2 3 4 5')).toEqual({ success: 'Le champ est valide.' }) // Length without spaces is 5
 	})
 
 	it('should validate email rule', () => {
+		// Vérifions d'abord que la regex EMAIL_REGEXP fonctionne comme prévu
+		expect(EMAIL_REGEXP.test('invalid-email')).toBe(false)
+		// Note: La regex actuelle considère test@example comme valide
+		expect(EMAIL_REGEXP.test('test@example')).toBe(true)
+		expect(EMAIL_REGEXP.test('test@example.com')).toBe(true)
+
 		const rules = generateRules([{ type: 'email', options: { message: 'Invalid email address.' } }])
 		const rule = rules[0]
 
 		expect(rule('invalid-email')).toEqual({ error: 'Invalid email address.' })
 		expect(rule('test@example.com')).toEqual({ success: 'Le champ est valide.' })
+		expect(rule('test.name@example.co.uk')).toEqual({ success: 'Le champ est valide.' })
+		expect(rule('')).toEqual({}) // Empty string should be ignored
 	})
 
 	it('should validate matchPattern rule', () => {
@@ -68,17 +164,302 @@ describe('useFieldValidation', () => {
 		const rule = rules[0]
 
 		expect(rule('123')).toEqual({ error: 'Invalid format.' })
+		expect(rule('aBc')).toEqual({ error: 'Invalid format.' })
 		expect(rule('abc')).toEqual({ success: 'Le champ est valide.' })
+		expect(rule('')).toEqual({}) // Empty string should be ignored
+	})
+
+	it('should validate notWeekend rule', () => {
+		const rules = generateRules([{
+			type: 'notWeekend',
+			options: { message: 'Date cannot be on a weekend.' },
+		}])
+		const rule = rules[0]
+
+		// 15 janvier 2023 est un dimanche (jour 0)
+		expect(rule(new Date(2023, 0, 15))).toEqual({ error: 'Date cannot be on a weekend.' })
+		// 14 janvier 2023 est un samedi (jour 6)
+		expect(rule(new Date(2023, 0, 14))).toEqual({ error: 'Date cannot be on a weekend.' })
+		// 13 janvier 2023 est un vendredi (jour 5)
+		expect(rule(new Date(2023, 0, 13))).toEqual({ success: 'Le champ est valide.' })
+		expect(rule('')).toEqual({}) // Empty string should be ignored
+	})
+
+	it('should validate notBeforeToday rule', () => {
+		const rules = generateRules([{
+			type: 'notBeforeToday',
+			options: { message: 'Date cannot be before today.' },
+		}])
+		const rule = rules[0]
+
+		// 14 janvier 2023 est avant aujourd'hui (15 janvier 2023)
+		expect(rule(new Date(2023, 0, 14))).toEqual({ error: 'Date cannot be before today.' })
+		// 15 janvier 2023 est aujourd'hui
+		expect(rule(new Date(2023, 0, 15))).toEqual({ success: 'Le champ est valide.' })
+		// 16 janvier 2023 est après aujourd'hui
+		expect(rule(new Date(2023, 0, 16))).toEqual({ success: 'Le champ est valide.' })
+		expect(rule('')).toEqual({}) // Empty string should be ignored
+	})
+
+	it('should validate notAfterToday rule', () => {
+		const rules = generateRules([{
+			type: 'notAfterToday',
+			options: { message: 'Date cannot be after today.' },
+		}])
+		const rule = rules[0]
+
+		// 16 janvier 2023 est après aujourd'hui (15 janvier 2023)
+		expect(rule(new Date(2023, 0, 16))).toEqual({ error: 'Date cannot be after today.' })
+		// 15 janvier 2023 est aujourd'hui
+		expect(rule(new Date(2023, 0, 15))).toEqual({ success: 'Le champ est valide.' })
+		// 14 janvier 2023 est avant aujourd'hui
+		expect(rule(new Date(2023, 0, 14))).toEqual({ success: 'Le champ est valide.' })
+		expect(rule('')).toEqual({}) // Empty string should be ignored
+	})
+
+	it('should test parseDate function directly', () => {
+		// Test with valid date string
+		expect(parseDate('15/01/2023')).toEqual(new Date(2023, 0, 15))
+
+		// Test with Date object
+		const dateObj = new Date(2023, 0, 15)
+		expect(parseDate(dateObj)).toEqual(dateObj)
+
+		// Test with different format
+		expect(parseDate('2023-01-15', 'YYYY-MM-DD')).toEqual(new Date(2023, 0, 15))
+
+		// Test with YY format
+		expect(parseDate('15/01/23', 'DD/MM/YY')).toEqual(new Date(2023, 0, 15))
+
+		// Test with invalid date
+		expect(parseDate('invalid-date')).toBeNull()
+
+		// Test with empty string
+		expect(parseDate('')).toBeNull()
+
+		// Test with null
+		expect(parseDate(null as unknown as string | Date)).toBeNull()
+
+		// Test with mismatched format parts
+		expect(parseDate('15/01', 'DD/MM/YYYY')).toBeNull()
+
+		// Test with invalid parts
+		expect(parseDate('aa/bb/cccc', 'DD/MM/YYYY')).toBeNull()
+
+		// Test with invalid month (out of range)
+		expect(parseDate('15/13/2023', 'DD/MM/YYYY')).toBeNull()
+
+		// Test with invalid day (out of range)
+		expect(parseDate('32/01/2023', 'DD/MM/YYYY')).toBeNull()
+
+		// Test with invalid year (out of range)
+		expect(parseDate('15/01/1800', 'DD/MM/YYYY')).toBeNull()
+
+		// Test with invalid date (e.g., 31 February)
+		expect(parseDate('31/02/2023', 'DD/MM/YYYY')).toBeNull()
+	})
+
+	it('should validate notBeforeDate rule', () => {
+		const rules = generateRules([{
+			type: 'notBeforeDate',
+			options: {
+				date: '10/01/2023', // 10 janvier 2023
+				message: 'Date cannot be before reference date.',
+			},
+		}])
+		const rule = rules[0]
+
+		// 9 janvier 2023 est avant la date de référence
+		expect(rule(new Date(2023, 0, 9))).toEqual({ error: 'Date cannot be before reference date.' })
+		// 10 janvier 2023 est la date de référence
+		expect(rule(new Date(2023, 0, 10))).toEqual({ success: 'Le champ est valide.' })
+		// 11 janvier 2023 est après la date de référence
+		expect(rule(new Date(2023, 0, 11))).toEqual({ success: 'Le champ est valide.' })
+		// Test avec une date invalide
+		expect(rule('invalid-date')).toEqual({ error: 'Date invalide' })
+		// Test sans option date
+		const ruleWithoutDate = generateRules([{
+			type: 'notBeforeDate',
+			options: { message: 'Date cannot be before reference date.' },
+		}])[0]
+		expect(ruleWithoutDate(new Date())).toEqual({ error: 'Configuration de la règle invalide' })
+		expect(rule('')).toEqual({}) // Empty string should be ignored
+	})
+
+	it('should throw when date reference is not a string in notBeforeDate rule', () => {
+		expect(() => {
+			const invalidRule = generateRules([{
+				type: 'notBeforeDate',
+				options: {
+					date: new Date() as unknown as string, // Date object instead of string
+					message: 'Date cannot be before reference date.',
+				},
+			}])[0]
+			invalidRule(new Date())
+		}).toThrow('Date reference must be a string in DD/MM/YYYY format')
+	})
+
+	it('should validate notAfterDate rule', () => {
+		const rules = generateRules([{
+			type: 'notAfterDate',
+			options: {
+				date: '20/01/2023', // 20 janvier 2023
+				message: 'Date cannot be after reference date.',
+			},
+		}])
+		const rule = rules[0]
+
+		// 21 janvier 2023 est après la date de référence
+		expect(rule(new Date(2023, 0, 21))).toEqual({ error: 'Date cannot be after reference date.' })
+		// 20 janvier 2023 est la date de référence
+		expect(rule(new Date(2023, 0, 20))).toEqual({ success: 'Le champ est valide.' })
+		// 19 janvier 2023 est avant la date de référence
+		expect(rule(new Date(2023, 0, 19))).toEqual({ success: 'Le champ est valide.' })
+		// Test avec une date invalide
+		expect(rule('invalid-date')).toEqual({ error: 'Date invalide' })
+		// Test sans option date
+		const ruleWithoutDate = generateRules([{
+			type: 'notAfterDate',
+			options: { message: 'Date cannot be after reference date.' },
+		}])[0]
+		expect(ruleWithoutDate(new Date())).toEqual({ error: 'Configuration de la règle invalide' })
+		expect(rule('')).toEqual({}) // Empty string should be ignored
+	})
+
+	it('should throw when date reference is not a string in notAfterDate rule', () => {
+		expect(() => {
+			const invalidRule = generateRules([{
+				type: 'notAfterDate',
+				options: {
+					date: new Date() as unknown as string, // Date object instead of string
+					message: 'Date cannot be after reference date.',
+				},
+			}])[0]
+			invalidRule(new Date())
+		}).toThrow('Date reference must be a string in DD/MM/YYYY format')
+	})
+
+	it('should validate dateExact rule', () => {
+		const rules = generateRules([{
+			type: 'dateExact',
+			options: {
+				date: '15/01/2023', // 15 janvier 2023
+				message: 'Date must be exactly the reference date.',
+			},
+		}])
+		const rule = rules[0]
+
+		// 14 janvier 2023 n'est pas la date exacte
+		expect(rule(new Date(2023, 0, 14))).toEqual({ error: 'Date must be exactly the reference date.' })
+		// 15 janvier 2023 est la date exacte
+		expect(rule(new Date(2023, 0, 15))).toEqual({ success: 'Le champ est valide.' })
+		// 16 janvier 2023 n'est pas la date exacte
+		expect(rule(new Date(2023, 0, 16))).toEqual({ error: 'Date must be exactly the reference date.' })
+		// Test avec une date invalide
+		expect(rule('invalid-date')).toEqual({ error: 'Date invalide' })
+		// Test sans option date
+		const ruleWithoutDate = generateRules([{
+			type: 'dateExact',
+			options: { message: 'Date must be exactly the reference date.' },
+		}])[0]
+		expect(ruleWithoutDate(new Date())).toEqual({ error: 'Configuration de la règle invalide' })
+		expect(rule('')).toEqual({}) // Empty string should be ignored
+	})
+
+	it('should throw when date reference is not a string in dateExact rule', () => {
+		expect(() => {
+			const invalidRule = generateRules([{
+				type: 'dateExact',
+				options: {
+					date: new Date() as unknown as string, // Date object instead of string
+					message: 'Date must be exactly the reference date.',
+				},
+			}])[0]
+			invalidRule(new Date())
+		}).toThrow('Date reference must be a string in DD/MM/YYYY format')
 	})
 
 	it('should validate custom rule', () => {
 		const rules = generateRules([{
 			type: 'custom',
-			options: { validate: value => value === 'valid', message: 'Custom validation failed.' },
+			options: { validate: (value: unknown) => value === 'valid', message: 'Custom validation failed.' },
 		}])
 		const rule = rules[0]
 
 		expect(rule('invalid')).toEqual({ error: 'Custom validation failed.' })
 		expect(rule('valid')).toEqual({ success: 'Le champ est valide.' })
+		expect(rule('')).toEqual({}) // Empty string should be ignored
+
+		// Test avec un message personnalisé
+		const customMessageRule = generateRules([{
+			type: 'custom',
+			options: { validate: (value: unknown) => value === 'valid' ? true : 'Custom error message' },
+		}])[0]
+		expect(customMessageRule('invalid')).toEqual({ error: 'Custom error message' })
+	})
+
+	it('should handle warning mode instead of error', () => {
+		const rules = generateRules([{
+			type: 'required',
+			options: {
+				message: 'This field is required.',
+				isWarning: true,
+			},
+		}])
+		const rule = rules[0]
+
+		expect(rule('')).toEqual({ warning: 'This field is required.' })
+
+		// Test avec un message d'avertissement personnalisé
+		const warningMessageRule = generateRules([{
+			type: 'required',
+			options: {
+				warningMessage: 'Warning: this field should be filled.',
+				isWarning: true,
+			},
+		}])[0]
+		expect(warningMessageRule('')).toEqual({ warning: 'Warning: this field should be filled.' })
+	})
+
+	it('should handle custom field identifiers', () => {
+		const rules = generateRules([{
+			type: 'required',
+			options: {
+				fieldName: 'Email',
+			},
+		}])
+		const rule = rules[0]
+
+		expect(rule('')).toEqual({ error: 'Vous devez renseigner Email.' })
+
+		const fieldIdentifierRule = generateRules([{
+			type: 'required',
+			options: {
+				fieldIdentifier: 'l\'adresse email',
+			},
+		}])[0]
+		expect(fieldIdentifierRule('')).toEqual({ error: 'Vous devez renseigner l\'adresse email.' })
+	})
+
+	it('should handle success messages', () => {
+		const rules = generateRules([{
+			type: 'required',
+			options: {
+				successMessage: 'Field is valid!',
+			},
+		}])
+		const rule = rules[0]
+
+		expect(rule('value')).toEqual({ success: 'Field is valid!' })
+	})
+
+	it('should handle invalid rule types', () => {
+		const rules = generateRules([{
+			type: 'invalidRuleType',
+			options: { message: 'This should show an error.' },
+		}])
+		const rule = rules[0]
+
+		expect(rule('any value')).toEqual({ error: 'La règle spécifiée pour ce champ n\'existe pas.' })
 	})
 })

package/src/composables/useFilterable/useFilterable.ts

@@ -28,8 +28,8 @@ export default function useFilterable(model: Ref<FilterProp>, emits) {
 		return slugify(name, { lower: true })
 	}
 
-	function getChips(toto: FilterItem): ChipItem[] {
-		const { value, formatChip } = toto
+	function getChips(filter: FilterItem): ChipItem[] {
+		const { value, formatChip } = filter
 
 		if (value !== undefined && formatChip) {
 			return formatChip(value)
@@ -63,7 +63,7 @@ export default function useFilterable(model: Ref<FilterProp>, emits) {
 				}
 
 				return {
-					text: item.text || item.value.toString(),
+					text: item.title || item.text || item.value.toString(),
 					value: item,
 				}
 			})
@@ -92,7 +92,8 @@ export default function useFilterable(model: Ref<FilterProp>, emits) {
 			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].title
+						|| typedValue[key].text
 						|| typedValue[key].value?.toString()
 						|| typedValue[key].toString()
 

package/src/composables/validation/useValidation.ts

@@ -12,6 +12,7 @@ export interface ValidationOptions {
 	customRules?: ValidationRule[]
 	warningRules?: ValidationRule[]
 	successRules?: ValidationRule[]
+	disableErrorHandling?: boolean
 }
 
 export interface ValidationState {
@@ -59,6 +60,20 @@ export function useValidation(options: ValidationOptions = { showSuccessMessages
 	): ValidationResult => {
 		clearValidation()
 
+		// Si la gestion des erreurs est désactivée, on retourne un résultat sans erreurs
+		if (options.disableErrorHandling) {
+			return {
+				hasError: false,
+				hasWarning: false,
+				hasSuccess: false,
+				state: {
+					errors: [],
+					warnings: [],
+					successes: [],
+				},
+			}
+		}
+
 		// Validation des règles normales
 		const normalRules = rules.map(rule => ({
 			type: rule.type,

package/src/main.ts

@@ -4,3 +4,4 @@ import '../src/assets/settings.scss'
 export * from './components'
 export * from './services'
 export * from './composables'
+export * from './utils/rules'

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

@@ -0,0 +1,28 @@
+import {Meta} from '@storybook/addon-docs/blocks';
+
+<Meta title="Accessibilité/Aculturation/Audit du Design System"/>
+
+# Audit du Design System
+
+## Objectifs
+
+Le Design System Synapse offre de nombreux avantages en matière d'accessibilité pour les services qui l'adoptent. En veillant à ce que les composants respectent les normes d'accessibilité, il assure une conformité optimale avec les critères du <abbr title="Référentiel Général d’Amélioration de l’Accessibilité">RGAA</abbr> pour les produits. Cela simplifie la mise en œuvre de l'accessibilité à grande échelle sur les services numériques, réduisant ainsi les erreurs humaines et améliorant l'expérience utilisateur pour tous, et pas seulement pour les personnes en situation de handicap.
+
+Nous réalisons actuellement un audit d'accessibilité du Design System afin d’évaluer sa conformité au <abbr title="Référentiel Général d’Amélioration de l’Accessibilité">RGAA</abbr>. Cet audit vise à identifier les points d'amélioration pour garantir que tous les composants sont accessibles.
+
+## Couverture des critères
+
+Le Design System ne garantit pas à lui seul l'accessibilité des services qui l'implémente, car il ne couvre pas l'ensemble des critères du <abbr title="Référentiel Général d’Amélioration de l’Accessibilité">RGAA</abbr>. En effet, le Design System se concentre sur l'aspect visuel et interactif des composants (comme les couleurs, la typographie, les interactions avec l'interface, etc.), tandis que le service doit respecter des critères plus larges. Par exemple, il doit veiller à la structure sémantique des contenus, aux alternatives textuelles, à la gestion des erreurs de formulaire, à l'accessibilité des contenus multimédia, etc. Le Design System facilite l'intégration des bonnes pratiques d’accessibilité, mais pour une conformité totale, des ajustements et une validation supplémentaires sont nécessaires au niveau du design, du contenu et de la mise en œuvre technique.
+
+## Documentation et rapports
+
+Chaque composant possède une page "Accessibilité" qui vous renseignera sur les critères du <abbr title="Référentiel Général d’Amélioration de l’Accessibilité">RGAA</abbr> remontées par l'audit Tanaguru ainsi qu'un rapport complet d'un audit manuel. Vous pourrez ainsi suivre les correctifs réalisés et identifier la méthodologie appliquée.
+
+<figure>
+  <img
+    src={"/capture-page-accessibilite-composant.png"}
+    aria-labelledby="capture-page-accessibilite-alt"
+    style={{ marginTop: '20px', padding: '10px',  border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0'}}
+  />
+  <figcaption id="capture-page-accessibilite-alt" class={'text-caption text-center'}>Capture d'écran de la page Accessibilité du composant NotificationBar.<br/>Celle-ci donne des éléments sur les audits Tanaguru et manuels.</figcaption>
+</figure>

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

@@ -3,7 +3,7 @@ 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**
+## **1.1 La CNAM doit respecter le <abbr title="Référentiel Général d’Amélioration de l’Accessibilité">RGAA</abbr>**
 
 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. 
 #
@@ -45,7 +45,7 @@ Etre accessible est un travail en continu qui s’intègre à plusieurs niveaux
 
 ## 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.
+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 <abbr title="Référentiel Général d’Amélioration de l’Accessibilité">RGAA</abbr>. À 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)**
 

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

@@ -2,9 +2,9 @@ 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 <abbr title="Référentiel Général d’Amélioration de l’Accessibilité">RGAA</abbr>, 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
+Le <abbr title="Référentiel Général d’Amélioration de l’Accessibilité">RGAA</abbr> 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 <abbr title="Référentiel Général d’Amélioration de l’Accessibilité">RGAA</abbr> (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)
 
@@ -15,11 +15,11 @@ Le RGAA est un outil méthodologique de certification permettant d'assurer par l
 ### 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:
+La conduite d'une évaluation pour attester de la conformité du produit numérique avec le <abbr title="Référentiel Général d’Amélioration de l’Accessibilité">RGAA</abbr> 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
+- **Conformité totale :** si tous les critères de contrôle du <abbr title="Référentiel Général d’Amélioration de l’Accessibilité">RGAA</abbr> sont respectés
+- **Conformité partielle :** si au moins 50 % des critères de contrôle du <abbr title="Référentiel Général d’Amélioration de l’Accessibilité">RGAA</abbr> 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 <abbr title="Référentiel Général d’Amélioration de l’Accessibilité">RGAA</abbr> 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.
 

package/src/stories/Accessibilite/Introduction.mdx

@@ -21,7 +21,8 @@ Si vous avez besoin d’un accompagnement sur le sujet, merci de prendre contact
 
 Vous trouverez dans ce dossier 3 principales rubriques :
 
-- [Sensibilisation à l'accessibilité numérique](/docs/accessibilité-aculturation-sensibilisation-à-l-accessibilité-numérique--docs)
+- [Aculturation - 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)
 
+Le Design System Synapse réalise un audit de conformité au <abbr title="Référentiel Général d’Amélioration de l’Accessibilité">RGAA</abbr> facilitant la prise en compte de l'accessibilité dans vos produits. Pour en savoir plus, vous pouvez consulter [la page dédiée à l'audit d'accessibilité du Design System](/docs/accessibilité-aculturation-audit-du-design-system--docs).

package/src/stories/Accessibilite/KitDePreAudit/Echantillonnage.mdx

@@ -4,7 +4,7 @@ import {Meta} from '@storybook/addon-docs/blocks';
 
 # Échantillonnage
 
-Le RGAA exige que l’audit d’accessibilité soit effectué sur un ensemble représentatif de pages et des fonctionnalités de votre service. Il serait difficile et très chronophage de tester l’intégralité des contenus. La définition d’un périmètre est un compromis pertinent pour auditer efficacement un service et respecter les exigences légales.
+Le <abbr title="Référentiel Général d’Amélioration de l’Accessibilité">RGAA</abbr> exige que l’audit d’accessibilité soit effectué sur un ensemble représentatif de pages et des fonctionnalités de votre service. Il serait difficile et très chronophage de tester l’intégralité des contenus. La définition d’un périmètre est un compromis pertinent pour auditer efficacement un service et respecter les exigences légales.
 
 L’objectif est donc de que vous déterminiez quels pages seront concernées par l’audit (et ce pré-audit).
 

package/src/stories/Accessibilite/KitDePreAudit/Introduction.mdx

@@ -6,7 +6,7 @@ import {Meta} from '@storybook/addon-docs/blocks';
 
 ## Objectif
 
-L’objectif du pré-audit est d’obtenir un premier avis sur le taux de conformité de votre service web avant de convenir d’un réel audit RGAA. La procédure se fait en autonomie par l’équipe de développement.
+L’objectif du pré-audit est d’obtenir un premier avis sur le taux de conformité de votre service web avant de convenir d’un réel audit <abbr title="Référentiel Général d’Amélioration de l’Accessibilité">RGAA</abbr>. La procédure se fait en autonomie par l’équipe de développement.
 #
 La restitution consiste à s’assurer que toutes les exigences du pré-audit sont remplies et que vous ayez un minimum d’erreur en lançant les tests automatisés avec Tanaguru.
 Vous pouvez nous solliciter pour un accompagnement si vous rencontrez des difficultés techniques à résoudre les non-conformités relevées par Tanaguru.