@cnamts/synapse 1.0.2 → 1.0.4

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/CalendarMode/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/tests/useDatePickerAccessibility.spec.ts

@@ -91,7 +91,7 @@ describe('useDatePickerAccessibility', () => {
 		expect(buttons[2].getAttribute('aria-label')).toBe(null) // Pas de chevron-righ
 	})
 
-	it('adds sr-only instructions to the DatePicker', async () => {
+	it('adds sr-only instructions to the CalendarMode', async () => {
 		// Appeler updateAccessibility
 		await updateAccessibility()
 

package/src/composables/date/useDateInitialization.ts

@@ -1,5 +1,5 @@
 /**
- * Composable pour l'initialisation des dates dans le DatePicker
+ * Composable pour l'initialisation des dates dans le CalendarMode
  */
 import { parseDate } from './useDateFormat'
 

package/src/composables/date/useDateInitializationDayjs.ts

@@ -1,5 +1,5 @@
 /**
- * Composable pour l'initialisation des dates dans le DatePicker avec dayjs
+ * Composable pour l'initialisation des dates dans le CalendarMode avec dayjs
  */
 import dayjs from 'dayjs'
 import customParseFormat from 'dayjs/plugin/customParseFormat'

package/src/composables/date/useDatePickerAccessibility.ts

@@ -1,11 +1,11 @@
 /**
- * Composable pour améliorer l'accessibilité du DatePicker
+ * Composable pour améliorer l'accessibilité du CalendarMode
  */
-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
- * @returns Des fonctions pour mettre à jour l'accessibilité du DatePicker et gérer les événements clavier
+ * Améliore l'accessibilité du CalendarMode en ajoutant des attributs ARIA et des instructions pour les lecteurs d'écran
+ * @returns Des fonctions pour mettre à jour l'accessibilité du CalendarMode et gérer les événements clavier
  */
 export function useDatePickerAccessibility() {
 	// Référence pour suivre si l'événement a déjà été traité
@@ -49,8 +49,9 @@ export function useDatePickerAccessibility() {
 	}
 
 	/**
-	 * Met à jour les attributs d'accessibilité du DatePicker
+	 * Met à jour les attributs d'accessibilité du CalendarMode
 	 * 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 CalendarMode 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/composables/useFilterable/useFilterable.spec.ts

@@ -626,10 +626,18 @@ describe('Filterable', () => {
 			resetAllFilters()
 
 			expect(emitsFunction).toHaveBeenCalledTimes(1)
-			expect(emitsFunction).toHaveBeenCalledWith('update:modelValue', [
+			const emittedCall = emitsFunction.mock.calls[0]
+			expect(emittedCall[0]).toBe('update:modelValue')
+
+			// Use JSON serialization for robust comparison in CI environments
+			const emittedArray = emittedCall[1]
+			const expectedArray = [
 				{ name: 'Test', value: undefined },
 				{ name: 'Test 2', value: undefined },
-			])
+			]
+
+			// Compare as JSON strings to avoid reference/prototype issues
+			expect(JSON.stringify(emittedArray)).toBe(JSON.stringify(expectedArray))
 		})
 	})
 })

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,
 }