@cnamts/synapse 1.0.2 → 1.0.3

package/src/components/index.ts

@@ -1,78 +1,172 @@
-export { default as DatePicker } from '@/components/DatePicker/DatePicker/DatePicker.vue'
-export { useDateFormat } from '../composables/date/useDateFormatDayjs'
-export { useFieldValidation } from '../composables/rules/useFieldValidation'
-export type { RuleOptions } from '../composables/rules/useFieldValidation'
-export { useValidation } from '../composables/validation/useValidation'
-export { useNotificationService } from '../services/NotificationService'
-export { default as Accordion } from './Accordion/Accordion.vue'
-export { default as BackBtn } from './BackBtn/BackBtn.vue'
-export { default as BackToTopBtn } from './BackToTopBtn/BackToTopBtn.vue'
-export { default as ChipList } from './ChipList/ChipList.vue'
-export * from './ChipList/types'
-export { default as CollapsibleList } from './CollapsibleList/CollapsibleList.vue'
-export { default as ContextualMenu } from './ContextualMenu/ContextualMenu.vue'
-export { default as CookieBanner } from './CookieBanner/CookieBanner.vue'
-export { default as CookiesInformation } from './CookiesSelection/CookiesInformation/CookiesInformation.vue'
-export { default as CookiesSelection } from './CookiesSelection/CookiesSelection.vue'
-export { default as CookiesTable } from './CookiesSelection/CookiesTable/CookiesTable.vue'
-export { default as CopyBtn } from './CopyBtn/CopyBtn.vue'
-export { default as SyBtnSelect } from './Customs/SyBtnSelect/SyBtnSelect.vue'
-export { default as SyInputSelect } from './Customs/SyInputSelect/SyInputSelect.vue'
-export { default as SySelect } from './Customs/SySelect/SySelect.vue'
-export { default as SyTextField } from './Customs/SyTextField/SyTextField.vue'
-export { default as DataList } from './DataList/DataList.vue'
-export { default as DataListGroup } from './DataListGroup/DataListGroup.vue'
-export { default as DataListItem } from './DataListItem/DataListItem.vue'
-export { default as DiacriticPicker } from './DiacriticPicker/DiacriticPicker.vue'
-export { default as DialogBox } from './DialogBox/DialogBox.vue'
-export { default as DownloadBtn } from './DownloadBtn/DownloadBtn.vue'
-export { default as ErrorPage } from './ErrorPage/ErrorPage.vue'
-export { default as ExternalLinks } from './ExternalLinks/ExternalLinks.vue'
-export { default as FileList } from './FileList/FileList.vue'
-export { default as FilePreview } from './FilePreview/FilePreview.vue'
-export { default as FileUpload } from './FileUpload/FileUpload.vue'
-export { default as FilterInline } from './FilterInline/FilterInline.vue'
-export { default as FilterSideBar } from './FilterSideBar/FilterSideBar.vue'
+// ===========================
+// Structure
+// ===========================
 export { default as FooterBar } from './FooterBar/FooterBar.vue'
-export { default as FranceConnectBtn } from './FranceConnectBtn/FranceConnectBtn.vue'
 export { default as HeaderBar } from './HeaderBar/HeaderBar.vue'
 export { default as HeaderBurgerMenu } from './HeaderBar/HeaderBurgerMenu/HeaderBurgerMenu.vue'
+export { default as HeaderLoading } from './HeaderLoading/HeaderLoading.vue'
+export { default as HeaderLogo } from './HeaderBar/HeaderLogo/HeaderLogo.vue'
+export { default as HeaderMenuBtn } from './HeaderBar/HeaderMenuBtn/HeaderMenuBtn.vue'
 export { default as HeaderMenuItem } from './HeaderBar/HeaderBurgerMenu/HeaderMenuItem/HeaderMenuItem.vue'
 export { default as HeaderMenuSection } from './HeaderBar/HeaderBurgerMenu/HeaderMenuSection/HeaderMenuSection.vue'
 export { default as HeaderSubMenu } from './HeaderBar/HeaderBurgerMenu/HeaderSubMenu/HeaderSubMenu.vue'
-export { default as HeaderLogo } from './HeaderBar/HeaderLogo/HeaderLogo.vue'
-export { default as HeaderMenuBtn } from './HeaderBar/HeaderMenuBtn/HeaderMenuBtn.vue'
-export { default as HeaderLoading } from './HeaderLoading/HeaderLoading.vue'
-export { default as HeaderNavigationBar } from './HeaderNavigationBar/HeaderNavigationBar.vue'
 export { default as HeaderToolbar } from './HeaderToolbar/HeaderToolbar.vue'
+export { default as SubHeader } from './SubHeader/SubHeader.vue'
+
+// ===========================
+// Layout
+// ===========================
+export { default as PageContainer } from './PageContainer/PageContainer.vue'
+export { default as ToolbarContainer } from './ToolbarContainer/ToolbarContainer.vue'
+
+// ===========================
+// Navigation
+// ===========================
+export { default as ContextualMenu } from './ContextualMenu/ContextualMenu.vue'
+export { default as ExternalLinks } from './ExternalLinks/ExternalLinks.vue'
+export { default as HeaderNavigationBar } from './HeaderNavigationBar/HeaderNavigationBar.vue'
+export { default as SkipLink } from './SkipLink/SkipLink.vue'
+export { default as SocialMediaLinks } from './SocialMediaLinks/SocialMediaLinks.vue'
+export { default as SyPagination } from './Customs/SyPagination/SyPagination.vue'
+
+// ===========================
+// Boutons
+// ===========================
+export { default as BackBtn } from './BackBtn/BackBtn.vue'
+export { default as BackToTopBtn } from './BackToTopBtn/BackToTopBtn.vue'
+export { default as CopyBtn } from './CopyBtn/CopyBtn.vue'
+export { default as DownloadBtn } from './DownloadBtn/DownloadBtn.vue'
+export { default as FranceConnectBtn } from './FranceConnectBtn/FranceConnectBtn.vue'
 export { default as LangBtn } from './LangBtn/LangBtn.vue'
-export { default as Logo } from './Logo/Logo.vue'
-export { default as LogoBrandSection } from './LogoBrandSection/LogoBrandSection.vue'
-export { default as MaintenancePage } from './MaintenancePage/MaintenancePage.vue'
+export { default as UserMenuBtn } from './UserMenuBtn/UserMenuBtn.vue'
+
+// ===========================
+// Formulaires
+// ===========================
+export { default as DatePicker } from '@/components/DatePicker/DatePicker/DatePicker.vue'
+export { default as DiacriticPicker } from './DiacriticPicker/DiacriticPicker.vue'
+export { default as FileUpload } from './FileUpload/FileUpload.vue'
 export { default as NirField } from './NirField/NirField.vue'
 export * from './NirField/nirValidation'
-export { default as NotFoundPage } from './NotFoundPage/NotFoundPage.vue'
-export { default as NotificationBar } from './NotificationBar/NotificationBar.vue'
-export * from './NotificationBar/types'
-export { default as PageContainer } from './PageContainer/PageContainer.vue'
-export { default as PaginatedTable } from './PaginatedTable/PaginatedTable.vue'
 export { default as PasswordField } from './PasswordField/PasswordField.vue'
 export { default as PeriodField } from './PeriodField/PeriodField.vue'
 export { indicatifs } from './PhoneField/indicatifs'
 export { default as PhoneField } from './PhoneField/PhoneField.vue'
 export { default as RangeField } from './RangeField/RangeField.vue'
-export { default as RatingPicker } from './RatingPicker/RatingPicker.vue'
 export { default as SearchListField } from './SearchListField/SearchListField.vue'
-export { default as SelectBtnField } from './SelectBtnField/SelectBtnField.vue'
-export { default as SkipLink } from './SkipLink/SkipLink.vue'
-export { default as SocialMediaLinks } from './SocialMediaLinks/SocialMediaLinks.vue'
-export { default as SubHeader } from './SubHeader/SubHeader.vue'
-export { default as SyAlert } from './SyAlert/SyAlert.vue'
+export { default as SelectBtnField } from './Customs/Selects/SelectBtnField/SelectBtnField.vue'
+export { default as SyBtnSelect } from './Customs/Selects/SyBtnSelect/SyBtnSelect.vue'
 export { default as SyCheckbox } from './Customs/SyCheckbox/SyCheckbox.vue'
+export { default as SyInputSelect } from './Customs/Selects/SyInputSelect/SyInputSelect.vue'
+export { default as SySelect } from './Customs/Selects/SySelect/SySelect.vue'
 export { default as SyTextArea } from './SyTextArea/SyTextArea.vue'
+export { default as SyTextField } from './Customs/SyTextField/SyTextField.vue'
+export { default as UploadWorkflow } from './UploadWorkflow/UploadWorkflow.vue'
+
+// ===========================
+// Tableaux
+// ===========================
+export { default as PaginatedTable } from './PaginatedTable/PaginatedTable.vue'
 export { default as SyServerTable } from './Tables/SyServerTable/SyServerTable.vue'
 export { default as SyTable } from './Tables/SyTable/SyTable.vue'
 export { default as TableToolbar } from './TableToolbar/TableToolbar.vue'
-export { default as ToolbarContainer } from './ToolbarContainer/ToolbarContainer.vue'
-export { default as UploadWorkflow } from './UploadWorkflow/UploadWorkflow.vue'
-export { default as UserMenuBtn } from './UserMenuBtn/UserMenuBtn.vue'
+
+// ===========================
+// Filtres
+// ===========================
+export { default as FilterInline } from './FilterInline/FilterInline.vue'
+export { default as FilterSideBar } from './FilterSideBar/FilterSideBar.vue'
+
+// ===========================
+// Données
+// ===========================
+export { default as Accordion } from './Accordion/Accordion.vue'
+export { default as ChipList } from './ChipList/ChipList.vue'
+export * from './ChipList/types'
+export { default as CollapsibleList } from './CollapsibleList/CollapsibleList.vue'
+export { default as DataList } from './DataList/DataList.vue'
+export { default as DataListGroup } from './DataListGroup/DataListGroup.vue'
+export { default as DataListItem } from './DataListItem/DataListItem.vue'
+export { default as FileList } from './FileList/FileList.vue'
+export { default as FilePreview } from './FilePreview/FilePreview.vue'
+export { default as Logo } from './Logo/Logo.vue'
+export { default as LogoBrandSection } from './LogoBrandSection/LogoBrandSection.vue'
+export { default as SyIcon } from './Customs/SyIcon/SyIcon.vue'
+
+// ===========================
+// Feedback
+// ===========================
+export { default as CookieBanner } from './CookieBanner/CookieBanner.vue'
+export { default as CookiesInformation } from './CookiesSelection/CookiesInformation/CookiesInformation.vue'
+export { default as CookiesSelection } from './CookiesSelection/CookiesSelection.vue'
+export { default as CookiesTable } from './CookiesSelection/CookiesTable/CookiesTable.vue'
+export { default as DialogBox } from './DialogBox/DialogBox.vue'
+export { default as NotificationBar } from './NotificationBar/NotificationBar.vue'
+export * from './NotificationBar/types'
+export { default as RatingPicker } from './RatingPicker/RatingPicker.vue'
+export { default as SyAlert } from './SyAlert/SyAlert.vue'
+
+// ===========================
+// Templates
+// ===========================
+export { default as ErrorPage } from './ErrorPage/ErrorPage.vue'
+export { default as MaintenancePage } from './MaintenancePage/MaintenancePage.vue'
+export { default as NotFoundPage } from './NotFoundPage/NotFoundPage.vue'
+
+// ===========================
+// Amelipro
+// ===========================
+export { default as AmeliproAutoCompleteField } from './Amelipro/AmeliproAutoCompleteField/AmeliproAutoCompleteField.vue'
+export { default as AmeliproBreadcrumb } from './Amelipro/AmeliproBreadcrumb/AmeliproBreadcrumb.vue'
+export { default as AmeliproBtn } from './Amelipro/AmeliproBtn/AmeliproBtn.vue'
+export { default as AmeliproCard } from './Amelipro/AmeliproCard/AmeliproCard.vue'
+export { default as AmeliproCallback } from './Amelipro/AmeliproCallback/AmeliproCallback.vue'
+export { default as AmeliproCheckbox } from './Amelipro/AmeliproCheckbox/AmeliproCheckbox.vue'
+export { default as AmeliproCheckboxGroup } from './Amelipro/AmeliproCheckboxGroup/AmeliproCheckboxGroup.vue'
+export { default as AmeliproChips } from './Amelipro/AmeliproChips/AmeliproChips.vue'
+export { default as AmeliproDialog } from './Amelipro/AmeliproDialog/AmeliproDialog.vue'
+export { default as AmeliproDisclosure } from './Amelipro/AmeliproDisclosure/AmeliproDisclosure.vue'
+export { default as AmeliproFooter } from './Amelipro/AmeliproFooter/AmeliproFooter.vue'
+export { default as AmeliproHeader } from './Amelipro/AmeliproHeader/AmeliproHeader.vue'
+export { default as AmeliproIcon } from './Amelipro/AmeliproIcon/AmeliproIcon.vue'
+export { default as AmeliproIconBtn } from './Amelipro/AmeliproIconBtn/AmeliproIconBtn.vue'
+export { default as AmeliproIllustratedDataTile } from './Amelipro/AmeliproIllustratedDataTile/AmeliproIllustratedDataTile.vue'
+export { default as AmeliproIllustratedRadioGroup } from './Amelipro/AmeliproIllustratedRadioGroup/AmeliproIllustratedRadioGroup.vue'
+export { default as AmeliproMailTile } from './Amelipro/AmeliproMailTile/AmeliproMailTile.vue'
+export { default as AmeliproMenu } from './Amelipro/AmeliproMenu/AmeliproMenu.vue'
+export { default as AmeliproMessage } from './Amelipro/AmeliproMessage/AmeliproMessage.vue'
+export { default as AmeliproMultipleFoldingCard } from './Amelipro/AmeliproMultipleFoldingCard/AmeliproMultipleFoldingCard.vue'
+export { default as AmeliproNumberedCard } from './Amelipro/AmeliproNumberedCard/AmeliproNumberedCard.vue'
+export { default as AmeliproOnboarding } from './Amelipro/AmeliproOnboarding/AmeliproOnboarding.vue'
+export { default as AmeliproPageLayout } from './Amelipro/AmeliproPageLayout/AmeliproPageLayout.vue'
+export { default as AmeliproPagination } from './Amelipro/AmeliproPagination/AmeliproPagination.vue'
+export { default as AmeliproPatientBanner } from './Amelipro/AmeliproPatientBanner/AmeliproPatientBanner.vue'
+export { default as AmeliproRadioGroup } from './Amelipro/AmeliproRadioGroup/AmeliproRadioGroup.vue'
+export { default as AmeliproSelect } from './Amelipro/AmeliproSelect/AmeliproSelect.vue'
+export { default as AmeliproStateTile } from './Amelipro/AmeliproStateTile/AmeliproStateTile.vue'
+export { default as AmeliproStatus } from './Amelipro/AmeliproStatus/AmeliproStatus.vue'
+export { default as AmeliproStepper } from './Amelipro/AmeliproStepper/AmeliproStepper.vue'
+export { default as AmeliproTabs } from './Amelipro/AmeliproTabs/AmeliproTabs.vue'
+export { default as AmeliproTextArea } from './Amelipro/AmeliproTextArea/AmeliproTextArea.vue'
+export { default as AmeliproTextField } from './Amelipro/AmeliproTextField/AmeliproTextField.vue'
+export { default as AmeliproTileBtn } from './Amelipro/AmeliproTileBtn/AmeliproTileBtn.vue'
+export { default as AmeliproTooltips } from './Amelipro/AmeliproTooltips/AmeliproTooltips.vue'
+export { default as AmeliproTransmission } from './Amelipro/AmeliproTransmission/AmeliproTransmission.vue'
+export { default as StructureMenu } from './Amelipro/StructureMenu/StructureMenu.vue'
+export { default as ServiceMenu } from './Amelipro/ServiceMenu/ServiceMenu.vue'
+export { default as UserInformationSummary } from './Amelipro/UserInformationSummary/UserInformationSummary.vue'
+export { default as UserMenu } from './Amelipro/UserMenu/UserMenu.vue'
+
+// ===========================
+// Composables and services
+// ===========================
+export { useDateFormat } from '../composables/date/useDateFormatDayjs'
+export { useFieldValidation } from '../composables/rules/useFieldValidation'
+export { useNotificationService } from '../services/NotificationService'
+export { useValidation } from '../composables/validation/useValidation'
+export type { RuleOptions } from '../composables/rules/useFieldValidation'
+
+// ===========================
+// Directives
+// ===========================
+export { vRgaaSvgFix } from '../directives/rgaaSvgFix'

package/src/composables/date/useDatePickerAccessibility.ts

@@ -1,7 +1,7 @@
 /**
  * Composable pour améliorer l'accessibilité du DatePicker
  */
-import { nextTick } from 'vue'
+import { nextTick, onBeforeUnmount, onMounted } from 'vue'
 
 /**
  * Améliore l'accessibilité du DatePicker en ajoutant des attributs ARIA et des instructions pour les lecteurs d'écran
@@ -51,6 +51,7 @@ export function useDatePickerAccessibility() {
 	/**
 	 * Met à jour les attributs d'accessibilité du DatePicker
 	 * Ajoute des attributs ARIA et des instructions pour les lecteurs d'écran
+	 * Corrige également les attributs ARIA invalides
 	 */
 	const updateAccessibility = async (): Promise<void> => {
 		await nextTick()
@@ -67,23 +68,50 @@ export function useDatePickerAccessibility() {
 		const navigationButtons = datePickerEl.querySelectorAll('button')
 
 		// Attribuer des labels significatifs basés sur la position ou l'icône
-		navigationButtons.forEach((button) => {
+		navigationButtons.forEach(async (button) => {
+			// find btn with aria-label contain item
+			if (button.className.includes('v-date-picker-controls__mode-btn')) {
+				button.removeAttribute('aria-label')
+			}
+			// Vérifier si le bouton contient un SVG ou une icône
+			const svgEl = button.querySelector('svg')
 			const iconEl = button.querySelector('.v-icon')
-			if (!iconEl) return
 
-			// Utiliser le contenu de l'icône pour déterminer sa fonction
-			const iconContent = iconEl.textContent || ''
-			const iconClasses = iconEl.className || ''
+			// Get any existing visible text content
+			const buttonText = button.textContent?.trim() || ''
 
-			if (iconClasses.includes('mdi-chevron-left') || iconContent.includes('chevron-left')) {
-				button.setAttribute('aria-label', 'Mois précédent')
-			}
-			else if (iconClasses.includes('mdi-chevron-right') || iconContent.includes('chevron-right')) {
-				button.setAttribute('aria-label', 'Mois suivant')
+			// Traiter les boutons avec SVG
+			if (svgEl) {
+				const svgContent = svgEl.innerHTML
+
+				// Left arrow (previous month)
+				if (svgContent.includes('M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z')) {
+					const accessibleName = buttonText ? `${buttonText} (Mois précédent)` : 'Mois précédent'
+					button.setAttribute('aria-label', accessibleName)
+				}
+				// Right arrow (next month)
+				else if (svgContent.includes('M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z')) {
+					const accessibleName = buttonText ? `${buttonText} (Mois suivant)` : 'Mois suivant'
+					button.setAttribute('aria-label', accessibleName)
+				}
+				// Calendar icon
+				else if (svgContent.includes('M19,19H5V8H19M16,1V3H8V1H6V3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3H18V1M17,12H12V17H17V12Z')) {
+					const accessibleName = buttonText ? `${buttonText} (Ouvrir le calendrier)` : 'Ouvrir le calendrier'
+					button.setAttribute('aria-label', accessibleName)
+				}
 			}
-			else if (iconClasses.includes('mdi-chevron-down') || iconContent.includes('chevron-down')
-				|| iconClasses.includes('mdi-menu-down') || iconContent.includes('menu-down')) {
-				button.setAttribute('aria-label', 'Changer de vue')
+			// Traiter les boutons avec icônes Material Design
+			else if (iconEl) {
+				// Left arrow (previous month)
+				if (iconEl.classList.contains('mdi-chevron-left')) {
+					const accessibleName = buttonText ? `${buttonText} (Mois précédent)` : 'Mois précédent'
+					button.setAttribute('aria-label', accessibleName)
+				}
+				// Right arrow (next month)
+				else if (iconEl.classList.contains('mdi-chevron-right')) {
+					const accessibleName = buttonText ? `${buttonText} (Mois suivant)` : 'Mois suivant'
+					button.setAttribute('aria-label', accessibleName)
+				}
 			}
 		})
 
@@ -114,9 +142,130 @@ export function useDatePickerAccessibility() {
 		datePickerEl.addEventListener('keydown', handleKeyDown as EventListener)
 	}
 
+	// Référence pour le MutationObserver
+	let observer: MutationObserver | null = null
+
+	/**
+	 * Corrige les attributs ARIA invalides dans le composant
+	 * Supprime les attributs aria-haspopup, aria-expanded et aria-controls inappropriés
+	 */
+	const fixAriaAttributes = () => {
+		try {
+			// Rechercher dans tout le document les éléments avec des attributs ARIA invalides
+			// Cibler les éléments dans les conteneurs DatePicker et DateTextInput
+			const containers = document.querySelectorAll('.date-picker-container, .v-date-picker')
+
+			if (containers.length === 0) {
+				return
+			}
+
+			const allInputsWithAriaExpanded = document.querySelectorAll('input[aria-expanded]')
+			allInputsWithAriaExpanded.forEach((input) => {
+				if (input) {
+					input.removeAttribute('aria-expanded')
+				}
+			})
+
+			// Pour chaque conteneur, rechercher et corriger les attributs ARIA invalides
+			containers.forEach((container) => {
+				if (!container) return
+
+				container.removeAttribute('aria-expanded')
+				container.removeAttribute('aria-haspopup')
+				container.removeAttribute('aria-controls')
+				// Find all elements with invalid ARIA attributes
+				const elementsWithAriaHaspopup = container.querySelectorAll('[aria-haspopup="menu"]')
+				elementsWithAriaHaspopup.forEach((element) => {
+					if (!element) return
+					element.removeAttribute('aria-haspopup')
+					element.removeAttribute('aria-controls')
+				})
+
+				// Find input elements with invalid ARIA attributes
+				const inputElements = container.querySelectorAll('input[aria-haspopup="menu"]')
+				inputElements.forEach((input) => {
+					if (!input) return
+					input.removeAttribute('aria-haspopup')
+					input.removeAttribute('aria-expanded')
+					input.removeAttribute('aria-controls')
+				})
+			})
+		}
+		catch {
+			// Do nothing
+		}
+	}
+
+	/**
+	 * Configure un MutationObserver pour surveiller les changements dans le DOM
+	 * et réexécuter fixAriaAttributes lorsque nécessaire
+	 */
+	const setupMutationObserver = () => {
+		// Nettoyer l'observateur existant s'il y en a un
+		if (observer) {
+			observer.disconnect()
+		}
+
+		// Créer un nouvel observateur
+		observer = new MutationObserver((mutations) => {
+			if (!Array.isArray(mutations)) return
+			// Vérifier si les mutations concernent des attributs ARIA ou des éléments pertinents
+			const shouldFix = mutations.some((mutation) => {
+				if (!mutation) return false
+				// Vérification défensive pour s'assurer que mutation.el existe avant d'accéder à ses propriétés
+				if (mutation.target === undefined || mutation.target === null) return false
+
+				// Si un attribut a été modifié
+				if (mutation.type === 'attributes') {
+					const attributeName = mutation.attributeName
+					return attributeName && (
+						attributeName.startsWith('aria-')
+						|| attributeName === 'class'
+						|| attributeName === 'style'
+					)
+				}
+				// Si des nœuds ont été ajoutés ou supprimés
+				return mutation.type === 'childList'
+			})
+
+			// Si des modifications pertinentes ont été détectées, corriger les attributs ARIA
+			if (shouldFix) {
+				// Utiliser nextTick pour s'assurer que le DOM est stable avant de faire les corrections
+				nextTick(() => {
+					fixAriaAttributes()
+				})
+			}
+		})
+
+		// Observer le document entier pour les changements
+		observer.observe(document.body, {
+			childList: true, // Observer les ajouts/suppressions d'enfants
+			subtree: true, // Observer les descendants
+			attributes: true, // Observer les changements d'attributs
+			attributeFilter: ['aria-expanded', 'aria-haspopup', 'aria-controls', 'class'], // Filtrer les attributs à observer
+		})
+	}
+
+	// Configurer l'observateur au montage du composant
+	onMounted(() => {
+		// Exécuter une première fois pour nettoyer les attributs initiaux
+		fixAriaAttributes()
+		// Configurer l'observateur pour les changements futurs
+		setupMutationObserver()
+	})
+
+	// Nettoyer l'observateur avant de démonter le composant
+	onBeforeUnmount(() => {
+		if (observer) {
+			observer.disconnect()
+			observer = null
+		}
+	})
+
 	return {
 		updateAccessibility,
 		handleKeyDown,
+		fixAriaAttributes,
 	}
 }
 

package/src/composables/useError.ts

@@ -0,0 +1,9 @@
+export interface TUseError {
+	propError: (msg: string) => void
+}
+export const useError = (): TUseError => {
+	const propError = (msg: string): void => {
+		throw new Error(msg)
+	}
+	return { propError }
+}

package/src/designTokens/apColors.md

@@ -0,0 +1,66 @@
+# Color Palette Amelipro Light
+
+## Primary
+
+<span style="background-color:#084298"></span>
+
+## Secondary
+
+<span style="background-color:#801F4F"></span>
+
+## Accent
+
+<span style="background-color:#0dcaf0"></span>
+
+## Error
+
+<span style="background-color:#B02A37"></span>
+
+## Info
+
+<span style="background-color:#052C64"></span>
+
+## Success
+
+<span style="background-color:#479F76"></span>
+
+## Warning
+
+<span style="background-color:#FFF2CD"></span>
+
+## Risque Pro
+
+<span style="background-color:#dc3545"></span>
+
+## Light
+
+<span style="background-color:#DEE2E6"></span>
+
+## Dark
+
+<span style="background-color:#212529"></span>
+
+## Brand
+
+<span style="background-color:#4a3f59"></span>
+
+## BrandSecondary
+
+<span style="background-color:#ac1c81"></span>
+
+## BrandMuted
+
+<span style="background-color:#b7cbd6"></span>
+
+## BrandMutedLite
+
+<span style="background-color:#E7F3F9"></span>
+
+
+## HilitePrimary
+
+<span style="background-color:#0062ac"></span>
+
+## HiliteSecondary
+
+<span style="background-color:#e6bebf"></span>

package/src/designTokens/index.ts

@@ -10,6 +10,11 @@ import { paSemanticTokens } from './tokens/pa/paSemantic'
 import { paContextualTokens } from './tokens/pa/paContextual'
 import { paLightTheme } from './tokens/pa/paLightTheme'
 import { paDarkTheme } from './tokens/pa/paDarkTheme'
+import { apColorsTokens } from './tokens/amelipro/apColors'
+import { apSemanticTokens } from './tokens/amelipro/apSemantic'
+import { apContextualTokens } from './tokens/amelipro/apContextual'
+import { apLightTheme } from './tokens/amelipro/apLightTheme'
+import { apDarkTheme } from './tokens/amelipro/apDarkTheme'
 
 export {
 	cnamColorsTokens,
@@ -24,4 +29,9 @@ export {
 	paContextualTokens,
 	paLightTheme,
 	paDarkTheme,
+	apColorsTokens,
+	apSemanticTokens,
+	apContextualTokens,
+	apLightTheme,
+	apDarkTheme,
 }

package/src/designTokens/tokens/amelipro/apColors.ts

@@ -0,0 +1,81 @@
+import type { IndexedObject } from '@/components/Amelipro/types'
+
+export const apColorsTokens = {
+	apBlack: { base: '#000000' },
+	apBlue: {
+		base: '#0C419A',
+		darken1: '#00749C',
+		darken2: '#00516D',
+		lighten1: '#99DBF2',
+		lighten2: '#CCEDF9',
+		lighten3: '#E6F6FC',
+		lighten4: '#F3FBFE',
+	},
+	apGreen: {
+		base: '#56C271',
+		darken1: '#459B5A',
+		darken2: '#337343',
+		lighten1: '#78CE8D',
+		lighten2: '#DDF3E3',
+	},
+	apGrey: {
+		base: '#545859',
+		darken1: '#1A1B1B',
+		lighten1: '#CCCDCE',
+		lighten2: '#DDDEDE',
+		lighten3: '#EEEEEE',
+		lighten4: '#F3F4F4',
+		lighten5: '#FAFAFA',
+		lighten6: '#F4F8F9',
+	},
+	apParme: {
+		base: '#C8D1E6',
+		darken1: '#4D547D',
+	},
+	apPink: { base: '#D00063' },
+	apRed: {
+		base: '#B33F2E',
+		darken1: '#9D3728',
+		darken2: '#70281C',
+		lighten1: '#E67261',
+		lighten2: '#EC9588',
+		lighten3: '#F9DCD7',
+		lighten4: '#FDF0EE',
+	},
+	apTurquoise: {
+		base: '#33BCA5',
+		darken1: '#007863',
+		darken2: '#006654',
+		darken3: '#005647',
+		lighten1: '#CCEEE8',
+		lighten2: '#E6F7F4',
+	},
+	apWhite: { base: '#FFFFFF' },
+	apYellow: {
+		base: '#F0B323',
+		darken1: '#D8A120',
+		darken2: '#C08F1C',
+		darken3: '#A87D19',
+		darken4: '#906C16',
+		lighten1: '#F3C24F',
+		lighten2: '#FED66D',
+		lighten3: '#F7D990',
+		lighten4: '#F9E1A7',
+		lighten5: '#FCF0D3',
+	},
+}
+
+export const apColorClasses: IndexedObject = {}
+
+export function toKebabCase(value: string): string {
+	return value.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase()
+}
+
+Object.entries(apColorsTokens).forEach(([colorName, colorValues]) => {
+	Object.entries(colorValues).forEach(([variationName, colorValue]) => {
+		const colorClass = toKebabCase(`${colorName}-${variationName}`
+			.replace(/\d+/, '-$&')
+			.replace('-base', ''))
+		apColorClasses[colorClass] = colorValue as string
+	})
+})