@cnamts/synapse 1.0.23 → 1.0.24

package/src/components/Tables/common/usePinnedColumns.ts

@@ -0,0 +1,237 @@
+import { computed, nextTick, onMounted, onUnmounted, ref, type Ref } from 'vue'
+import type { DataTableHeaders, TableColumnHeader } from './types'
+
+// Fonction de throttling simple pour optimiser les performances
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const useThrottleFn = <T extends (...args: any[]) => void>(fn: T, delay: number): T => {
+	let lastCall = 0
+	return ((...args: Parameters<T>) => {
+		const now = Date.now()
+		if (now - lastCall >= delay) {
+			lastCall = now
+			return fn(...args)
+		}
+	}) as T
+}
+
+interface UsePinnedColumnsOptions {
+	displayHeaders: Ref<DataTableHeaders[] | undefined>
+	reactiveColumnWidths: Ref<Record<string, number | string>>
+	pinnedColumns: Ref<Array<string | { key: string, side?: 'left' | 'right' }> | undefined>
+	pinnedColumnKey: Ref<string | undefined>
+	stickySelect: Ref<boolean>
+	showSelect: Ref<boolean>
+	showSelectSingle: Ref<boolean>
+	tableRef: Ref<{ $el?: Element } | undefined>
+}
+
+export function usePinnedColumns({
+	displayHeaders,
+	reactiveColumnWidths,
+	pinnedColumns,
+	pinnedColumnKey,
+	stickySelect,
+	showSelect,
+	showSelectSingle,
+	tableRef,
+}: UsePinnedColumnsOptions) {
+	const tableWrapperEl = ref<HTMLElement | null>(null)
+	const showPinnedLeftShadow = ref(false)
+	const showPinnedRightShadow = ref(false)
+
+	// Stocker la référence de la fonction pour éviter les fuites mémoire
+	const updatePinnedShadowsRef = ref<(() => void) | null>(null)
+
+	const parseWidthPx = (val: unknown): number => {
+		if (typeof val === 'number' && Number.isFinite(val)) return val
+		if (typeof val === 'string') {
+			const trimmed = val.trim()
+			if (trimmed.endsWith('px')) {
+				const n = Number.parseFloat(trimmed.slice(0, -2))
+				return Number.isFinite(n) ? n : 0
+			}
+			const n = Number.parseFloat(trimmed)
+			return Number.isFinite(n) ? n : 0
+		}
+		return 0
+	}
+
+	const normalizedPinnedColumns = computed(() => {
+		const raw = pinnedColumns.value ?? (pinnedColumnKey.value ? [pinnedColumnKey.value] : [])
+		return raw.map((c) => {
+			if (typeof c === 'string') return { key: c, side: 'left' as const }
+			return { key: c.key, side: c.side ?? 'left' as const }
+		})
+	})
+
+	const pinnedLeftKeys = computed(() =>
+		normalizedPinnedColumns.value.filter(c => c.side !== 'right').map(c => c.key),
+	)
+
+	const pinnedRightKeys = computed(() =>
+		normalizedPinnedColumns.value.filter(c => c.side === 'right').map(c => c.key),
+	)
+
+	const stickySelectActive = computed(() => Boolean(stickySelect.value) && (showSelect.value || showSelectSingle.value))
+	const hasPinnedSelectLeft = computed(() => pinnedLeftKeys.value.includes('data-table-select') || stickySelectActive.value)
+
+	const getColumnWidthPx = (headersList: TableColumnHeader[], key: string): number => {
+		if (key === 'data-table-select' || key === 'data-table-expand' || key === 'data-table-group') return 48
+		const storedWidth = reactiveColumnWidths.value[key]
+		if (storedWidth != null) return parseWidthPx(storedWidth)
+		const h = headersList.find(x => (x.key ?? x.value) === key)
+		return parseWidthPx(h?.width ?? h?.minWidth ?? h?.maxWidth)
+	}
+
+	const pinnedMeta = computed(() => {
+		const headersList = displayHeaders.value
+		if (!headersList) return { left: {} as Record<string, number>, right: {} as Record<string, number>, totalLeft: 0, totalRight: 0 }
+
+		const left: Record<string, number> = {}
+		let accLeft = 0
+		if (hasPinnedSelectLeft.value) {
+			left['data-table-select'] = 0
+			accLeft = getColumnWidthPx(headersList as TableColumnHeader[], 'data-table-select')
+		}
+		for (const h of headersList) {
+			const key = (h.key ?? h.value) as string | undefined
+			if (!key) continue
+			if (pinnedLeftKeys.value.includes(key)) {
+				left[key] = accLeft
+				accLeft += getColumnWidthPx(headersList as TableColumnHeader[], key)
+			}
+		}
+
+		const right: Record<string, number> = {}
+		let accRight = 0
+		for (const h of [...headersList].reverse()) {
+			const key = (h.key ?? h.value) as string | undefined
+			if (!key) continue
+			if (pinnedRightKeys.value.includes(key)) {
+				right[key] = accRight
+				accRight += getColumnWidthPx(headersList as TableColumnHeader[], key)
+			}
+		}
+
+		return { left, right, totalLeft: accLeft, totalRight: accRight }
+	})
+
+	const updatePinnedShadows = () => {
+		const el = tableWrapperEl.value
+		if (!el) return
+		const max = el.scrollWidth - el.clientWidth
+		showPinnedLeftShadow.value = pinnedMeta.value.totalLeft > 0 && el.scrollLeft > 0
+		showPinnedRightShadow.value = pinnedMeta.value.totalRight > 0 && max > 0 && el.scrollLeft < max - 1
+	}
+
+	// Fonction pour trouver le wrapper du tableau avec retry
+	const findTableWrapper = (): HTMLElement | null => {
+		const el = tableRef.value?.$el as HTMLElement | undefined
+		return el?.querySelector('.v-table__wrapper') as HTMLElement | null
+	}
+
+	// Initialiser la référence de la fonction
+	updatePinnedShadowsRef.value = updatePinnedShadows
+
+	// Appliquer le throttling pour optimiser les performances (60fps)
+	const updatePinnedShadowsThrottled = useThrottleFn(updatePinnedShadows, 16)
+
+	const pinnedEdgeVars = computed<Record<string, string>>(() => {
+		const { totalLeft, totalRight } = pinnedMeta.value
+		return {
+			...(totalLeft > 0 ? { '--sy-pinned-left-edge': `${totalLeft}px` } : {}),
+			...(totalRight > 0 ? { '--sy-pinned-right-edge': `${totalRight}px` } : {}),
+		}
+	})
+
+	// Only cellProps are needed here — headerProps are applied inline in the #headers slot template
+	const displayHeadersWithPinned = computed(() => {
+		const headersList = displayHeaders.value
+		if (!headersList) return headersList
+
+		const leftOffsets = pinnedMeta.value.left
+		const rightOffsets = pinnedMeta.value.right
+
+		if (Object.keys(leftOffsets).length === 0 && Object.keys(rightOffsets).length === 0) return headersList
+
+		return headersList.map((h) => {
+			const key = (h.key ?? h.value) as string | undefined
+			if (!key) return h
+
+			const left = leftOffsets[key]
+			const right = rightOffsets[key]
+			if (left === undefined && right === undefined) return h
+
+			const cellProps = (h.cellProps ?? {}) as Record<string, unknown>
+			const cellStyle = (cellProps.style ?? {}) as Record<string, string | number>
+
+			const stickyCellStyle: Record<string, string | number> = {
+				position: 'sticky',
+				zIndex: 'var(--sy-table-z-pinned-cell)',
+				background: 'rgb(var(--v-theme-surface))',
+			}
+
+			const sideClass = left !== undefined ? 'sy-table__pinned--left' : 'sy-table__pinned--right'
+			if (left !== undefined) {
+				stickyCellStyle.left = `${left}px`
+			}
+			else if (right !== undefined) {
+				stickyCellStyle.right = `${right}px`
+			}
+
+			return {
+				...h,
+				cellProps: {
+					...cellProps,
+					class: ['sy-table__pinned', sideClass, 'v-data-table-column--fixed', cellProps.class].filter(Boolean),
+					style: { ...cellStyle, ...stickyCellStyle },
+				},
+			}
+		})
+	})
+
+	onMounted(() => {
+		nextTick(() => {
+			let attempts = 0
+			const maxAttempts = 5
+
+			const tryFindWrapper = () => {
+				tableWrapperEl.value = findTableWrapper()
+				if (tableWrapperEl.value || attempts >= maxAttempts) {
+					if (tableWrapperEl.value && updatePinnedShadowsRef.value) {
+						updatePinnedShadowsRef.value()
+						tableWrapperEl.value.addEventListener('scroll', updatePinnedShadowsThrottled, { passive: true })
+					}
+					if (updatePinnedShadowsRef.value) {
+						window.addEventListener('resize', updatePinnedShadowsThrottled)
+					}
+				}
+				else {
+					attempts++
+					setTimeout(tryFindWrapper, 50)
+				}
+			}
+
+			tryFindWrapper()
+		})
+	})
+
+	onUnmounted(() => {
+		if (tableWrapperEl.value && updatePinnedShadowsRef.value) {
+			tableWrapperEl.value.removeEventListener('scroll', updatePinnedShadowsThrottled)
+		}
+		if (updatePinnedShadowsRef.value) {
+			window.removeEventListener('resize', updatePinnedShadowsThrottled)
+		}
+		updatePinnedShadowsRef.value = null
+	})
+
+	return {
+		showPinnedLeftShadow,
+		showPinnedRightShadow,
+		hasPinnedSelectLeft,
+		pinnedMeta,
+		pinnedEdgeVars,
+		displayHeadersWithPinned,
+	}
+}

package/src/components/Tables/common/useTableHeaders.ts

@@ -124,13 +124,13 @@ export function useTableHeaders({
 	 */
 	function getHeaderForColumn(column: TableColumnHeader): TableColumnHeader | undefined {
 		if (!normalizedHeaders.value) return undefined
-		const key = column.key as string | undefined
+		const key = column.key ?? undefined
 		if (key) {
 			const byKey = normalizedHeaders.value.find(h => h.key === key)
 			if (byKey) return byKey
 		}
-		// Fallback: try matching by value when key is not present or didn’t match
-		const val = column.value as string | undefined
+		// Fallback: try matching by value when key is not present or didn't match
+		const val = typeof column.value === 'string' ? column.value : undefined
 		if (val) {
 			const byValue = normalizedHeaders.value.find(h => h.value === val)
 			if (byValue) return byValue

package/src/components/Tables/common/useTableRowCheckboxAccessibility.ts

@@ -0,0 +1,41 @@
+import { nextTick, onMounted, onUnmounted, ref } from 'vue'
+import { locales } from './locales'
+
+export function useTableRowCheckboxAccessibility({
+	uniqueTableId,
+}: {
+	uniqueTableId: string
+}) {
+	const timeouts = ref<ReturnType<typeof setTimeout>[]>([])
+
+	const accessibilityRowCheckboxes = () => {
+		nextTick(() => {
+			const timeoutId = setTimeout(() => {
+				if (typeof document === 'undefined') return
+
+				const tableElement = document.getElementById(uniqueTableId)
+				if (!tableElement) return
+
+				const rowCheckboxes = tableElement.querySelectorAll('td .v-selection-control input[type="checkbox"]')
+				rowCheckboxes.forEach((checkbox, index) => {
+					const rowLabel = `${locales.selectRow} ${index + 1}`
+					checkbox.setAttribute('aria-label', rowLabel)
+					checkbox.setAttribute('title', rowLabel)
+				})
+			}, 100)
+
+			timeouts.value.push(timeoutId)
+		})
+	}
+
+	onMounted(() => {
+		accessibilityRowCheckboxes()
+	})
+
+	onUnmounted(() => {
+		timeouts.value.forEach(clearTimeout)
+		timeouts.value = []
+	})
+
+	return { accessibilityRowCheckboxes }
+}

package/src/composables/date/tests/useDatePickerAccessibility.spec.ts

@@ -120,14 +120,10 @@ describe('useDatePickerAccessibility', () => {
 		expect(buttons[2]?.getAttribute('aria-label')).toBe(null) // Pas de chevron-righ
 	})
 
-	it('adds sr-only instructions to the CalendarMode', async () => {
-		// Appeler updateAccessibility
+	it('ne crée pas de bloc sr-only instructions (comportement actuel)', async () => {
 		await updateAccessibility()
-
-		// Vérifier que les instructions pour les lecteurs d'écran ont été ajoutées
 		const srOnlyEl = document.querySelector('.sr-only-instructions')
-		expect(srOnlyEl).not.toBeNull()
-		expect(srOnlyEl?.textContent).toBe('Utilisez tab pour naviguer entre les dates et Entrée ou Espace pour sélectionner une date')
+		expect(srOnlyEl).toBeNull()
 	})
 
 	describe('handleKeyDown', () => {

package/src/composables/date/useDatePickerAccessibility.ts

@@ -8,46 +8,6 @@ import { nextTick, onBeforeUnmount, onMounted } from 'vue'
  * @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é
-	let isProcessingEnterKey = false
-
-	/**
-	 * Gestionnaire d'événements clavier pour simuler le comportement de la touche espace avec la touche entrée
-	 * @param event L'événement clavier
-	 */
-	const handleKeyDown = (event: Event): void => {
-		const keyboardEvent = event as KeyboardEvent
-		// Si la touche entrée est pressée et que nous ne sommes pas déjà en train de traiter un événement
-		if (keyboardEvent.key === 'Enter' && !isProcessingEnterKey) {
-			// Marquer que nous sommes en train de traiter l'événement pour éviter les doublons
-			isProcessingEnterKey = true
-
-			// Empêcher le comportement par défaut de la touche entrée
-			keyboardEvent.preventDefault()
-
-			// Récupérer l'élément actuellement focalisé
-			const focusedElement = document.activeElement
-
-			// Simuler un événement de touche espace
-			if (focusedElement && focusedElement instanceof HTMLElement) {
-				// Créer et déclencher un événement de clic qui simule le comportement de l'espace
-				const clickEvent = new MouseEvent('click', {
-					bubbles: true,
-					cancelable: true,
-					view: window,
-				})
-
-				// Déclencher un seul événement de clic
-				focusedElement.dispatchEvent(clickEvent)
-			}
-
-			// Réinitialiser l'état après un délai pour permettre le traitement des autres événements
-			setTimeout(() => {
-				isProcessingEnterKey = false
-			}, 100)
-		}
-	}
-
 	/**
 	 * Met à jour les attributs d'accessibilité du CalendarMode
 	 * Ajoute des attributs ARIA et des instructions pour les lecteurs d'écran
@@ -60,189 +20,67 @@ export function useDatePickerAccessibility() {
 		const datePickerEl = document.querySelector('.v-date-picker')
 		if (!datePickerEl) return
 
-		// Ajouter un attribut role="application" au conteneur principal
-		datePickerEl.setAttribute('role', 'application')
-		datePickerEl.setAttribute('aria-label', 'Sélecteur de date')
-
-		// Sélectionner tous les boutons de navigation
-		const navigationButtons = datePickerEl.querySelectorAll('button')
-
-		// Attribuer des labels significatifs basés sur la position ou l'icône
-		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')
+		// Ajouter des labels de navigation sur les boutons comportant les icônes attendues
+		const navButtons = datePickerEl.querySelectorAll<HTMLButtonElement>('.v-date-picker-header button')
+		navButtons.forEach((button) => {
+			const icon = button.querySelector('i')
+			if (icon?.classList.contains('mdi-chevron-left')) {
+				button.setAttribute('aria-label', 'Mois précédent')
+				return
 			}
-			// Vérifier si le bouton contient un SVG ou une icône
-			const svgEl = button.querySelector('svg')
-			const iconEl = button.querySelector('.v-icon')
 
-			// Get any existing visible text content
-			const buttonText = button.textContent?.trim() || ''
-
-			// 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)
-				}
-			}
-			// 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)
-				}
+			if (icon?.classList.contains('mdi-chevron-right')) {
+				button.setAttribute('aria-label', 'Mois suivant')
+				return
 			}
+
+			button.removeAttribute('aria-label')
 		})
 
-		// Ajouter des instructions pour les lecteurs d'écran
-		let srOnlyEl = datePickerEl.querySelector('.sr-only-instructions')
-		if (!srOnlyEl) {
-			srOnlyEl = document.createElement('span')
-			srOnlyEl.className = 'sr-only-instructions'
-			srOnlyEl.setAttribute('aria-live', 'polite')
-			// Utiliser HTMLElement pour accéder aux propriétés de style
-			const srOnlyHtmlEl = srOnlyEl as HTMLElement
-			srOnlyHtmlEl.style.position = 'absolute'
-			srOnlyHtmlEl.style.width = '1px'
-			srOnlyHtmlEl.style.height = '1px'
-			srOnlyHtmlEl.style.padding = '0'
-			srOnlyHtmlEl.style.margin = '-1px'
-			srOnlyHtmlEl.style.overflow = 'hidden'
-			srOnlyHtmlEl.style.clip = 'rect(0, 0, 0, 0)'
-			srOnlyHtmlEl.style.whiteSpace = 'nowrap'
-			srOnlyHtmlEl.style.border = '0'
-			srOnlyEl.textContent = 'Utilisez tab pour naviguer entre les dates et Entrée ou Espace pour sélectionner une date'
-			datePickerEl.prepend(srOnlyEl)
-		}
+		// Ajouter les instructions pour lecteurs d'écran si elles n'existent pas déjà
+		// if (!datePickerEl.querySelector('.sr-only-instructions')) {
+		// 	const srOnly = document.createElement('div')
+		// 	srOnly.className = 'sr-only sr-only-instructions'
+		// 	srOnly.textContent = 'Utilisez tab pour naviguer entre les dates et Entrée ou Espace pour sélectionner une date'
+		// 	datePickerEl.prepend(srOnly)
+		// }
+
+		// Ajouter un attribut role="application" au conteneur principal
+		// Ne pas forcer role="application" ni aria-label générique : on laisse les rôles natifs du picker (grille/boutons) et les labels existants.
 
-		// Ajouter un gestionnaire d'événements clavier pour la touche entrée
-		// Utiliser des casts explicites pour rassurer TypeScript sur les types
-		datePickerEl.removeEventListener('keydown', handleKeyDown as EventListener) // Supprimer d'abord pour éviter les doublons
-		datePickerEl.addEventListener('keydown', handleKeyDown as EventListener)
+		// Ne pas surcharger Enter/Espace : laisser les comportements natifs des boutons
 	}
 
-	// Référence pour le MutationObserver
-	let observer: MutationObserver | null = null
+	// Référence pour le MutationObserver (désactivé)
+	// const observer: MutationObserver | null = null
 
 	/**
 	 * Corrige les attributs ARIA invalides dans le composant
-	 * Supprime les attributs aria-haspopup, aria-expanded et aria-controls inappropriés
+	 * Ici on ne supprime plus globalement aria-expanded/aria-haspopup pour éviter de casser la combobox.
 	 */
 	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
+		// Désormais no-op pour éviter de retirer des attributs utiles.
+	}
 
-				container.removeAttribute('aria-expanded')
-				container.removeAttribute('aria-haspopup')
-				// Find all elements with invalid ARIA attributes
-				const elementsWithAriaHaspopup = container.querySelectorAll('[aria-haspopup="menu"]')
-				elementsWithAriaHaspopup.forEach((element) => {
-					if (!element) return
-					element.removeAttribute('aria-haspopup')
-					// Intentionally keep aria-controls intact so valid popup relationships remain
-				})
+	/**
+	 * Simule un clic sur l'élément focalisé lorsque la touche Entrée est pressée.
+	 * Ne touche pas aux autres touches (espace, etc.).
+	 */
+	const handleKeyDown = (event: KeyboardEvent) => {
+		if (event.key !== 'Enter') return
 
-				// 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')
-					// Leave aria-controls untouched to avoid stripping required relationships
-				})
-			})
-		}
-		catch {
-			// Do nothing
+		event.preventDefault()
+		const target = document.activeElement
+		if (target instanceof HTMLElement) {
+			target.click()
 		}
 	}
 
 	/**
-	 * Configure un MutationObserver pour surveiller les changements dans le DOM
-	 * et réexécuter fixAriaAttributes lorsque nécessaire
+	 * (Observer désactivé) : on évite de muter globalement les attributs aria du document.
 	 */
 	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
-		})
+		// noop
 	}
 
 	// Configurer l'observateur au montage du composant
@@ -253,12 +91,9 @@ export function useDatePickerAccessibility() {
 		setupMutationObserver()
 	})
 
-	// Nettoyer l'observateur avant de démonter le composant
+	// Nettoyer l'observateur avant de démonter le composant (noop ici)
 	onBeforeUnmount(() => {
-		if (observer) {
-			observer.disconnect()
-			observer = null
-		}
+		/* noop */
 	})
 
 	return {