@cnamts/synapse 1.0.18 → 1.0.19

package/src/components/{Customs/Selects/SyBtnSelect/SyBtnSelect.vue → SyBtnMenu/SyBtnMenu.vue}

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
-	import { ref, watch, computed, onMounted, useSlots, type PropType } from 'vue'
+	import { ref, watch, computed, onMounted, useSlots, type PropType, nextTick } from 'vue'
 	import { useDisplay } from 'vuetify'
+	import slugify from 'slugify'
 
 	type Item = string | Record<string, unknown>
 
@@ -15,7 +16,7 @@
 		},
 		label: {
 			type: String,
-			default: 'Sélectionnez une option',
+			default: 'Menu utilisateur',
 		},
 		required: {
 			type: Boolean,
@@ -69,10 +70,6 @@
 
 	const isOpen = ref(false)
 	const selectedItem = ref<Record<string, unknown> | string | null>(props.modelValue as Record<string, unknown> | string | null)
-	const toggleMenu = () => {
-		isOpen.value = !isOpen.value
-	}
-
 	const buttonRef = ref<HTMLElement | null>(null)
 	const buttonWidth = ref('')
 
@@ -101,7 +98,7 @@
 		if (props.hideIcon) {
 			return 'pa-1 pa-sm-2'
 		}
-		return isMobileVersion.value ? 'pa-0' : 'pa-1 pa-sm-3'
+		return isMobileVersion.value ? 'pa-1' : 'pa-1 pa-sm-3'
 	})
 
 	const hasListContent = computed(() => {
@@ -118,6 +115,27 @@
 
 	const generatedId = ref(`custom-btn-select-${Math.random().toString(36).substring(7)}`)
 
+	function getSelectedValue() {
+		if (!selectedItem.value) return undefined
+		if (typeof selectedItem.value === 'string') return selectedItem.value
+		return selectedItem.value[props.textKey] as string
+	}
+
+	const menu = ref<InstanceType<typeof import('vuetify/components').VList> | null>(null)
+
+	watch(isOpen, async (newVal) => {
+		if (newVal) {
+			await nextTick()
+			if (menu.value?.$el) {
+				menu.value.$el.querySelector('[role="menuitem"]')?.focus()
+			}
+		}
+		else {
+			await nextTick()
+			document.getElementById(generatedId.value)!.focus()
+		}
+	})
+
 	defineExpose({
 		isOpen,
 		formattedItems,
@@ -131,7 +149,9 @@
 		class="sy-user-menu-btn-ctn d-inline-block"
 	>
 		<VMenu
-			:id="generatedId"
+			:id="$props.menuId"
+			v-model="isOpen"
+			class="sy-user-menu"
 			:disabled="!hasListContent"
 			location="bottom end"
 			transition="fade-transition"
@@ -152,17 +172,16 @@
 						...menuProps,
 						...props.options['btn'],
 					}"
-					@click="toggleMenu"
 				>
-					<div
+					<span
 						:class="['text-'+props?.options['btn']?.color]"
-						class="d-flex align-center"
+						class="d-flex align-center ga-2"
 					>
 						<slot name="prepend-icon" />
 						<span class="d-sr-only">{{ props.label }}</span>
 						<span
 							v-if="!isMobileVersion && !iconOnly"
-							class="d-flex flex-column align-end py-1 mr-2"
+							class="d-flex flex-column align-end py-1"
 						>
 							<span
 								:class="`text-${props?.options['btn']?.textColor}`"
@@ -172,7 +191,7 @@
 							</span>
 							<span
 								:class="`text-${props?.options['btn']?.textColor}`"
-								class="text-grey text-darken-2 text-h7 font-weight-regular"
+								class="subtitle text-grey text-darken-2 font-weight-regular"
 							>
 								{{ props.secondaryInfo }}
 							</span>
@@ -185,27 +204,41 @@
 							{{ props.primaryInfo }}
 						</span>
 						<slot name="append-icon" />
-					</div>
+					</span>
 				</VBtn>
 			</template>
 			<slot name="content">
 				<VList
 					v-if="hasListContent"
+					ref="menu"
+					tag="ul"
+					role="menu"
 					v-bind="props.options['list']"
+					:aria-labelledby="generatedId"
+					:aria-activedescendant="getSelectedValue() ? `item-${slugify(getSelectedValue()!)}` : undefined"
 				>
-					<VListItem
+					<li
 						v-for="(item, index) in formattedItems"
+						:id="`item-${slugify(item[props.textKey] as string)}`"
 						:key="index"
-						:class="`text-${props?.options['list']?.textColor}`"
-						v-bind="props.options['list']"
-						:href="item.link"
-						:to="item.to"
-						@click="selectItem(item)"
 					>
-						<VListItemTitle v-bind="props.options['list']">
-							{{ item[props.textKey] }}
-						</VListItemTitle>
-					</VListItem>
+						<VListItem
+							:class="`text-${props?.options['list']?.textColor}`"
+							v-bind="props.options['list']"
+							:href="item.link"
+							:to="item.to"
+							:tabindex="0"
+							role="menuitem"
+							:aria-current="selectedItem === item ? 'page' : undefined"
+							@click="selectItem(item)"
+						>
+							<VListItemTitle
+								class="item-title"
+							>
+								{{ item[props.textKey] }}
+							</VListItemTitle>
+						</VListItem>
+					</li>
 					<slot />
 					<slot name="footer-list-item" />
 				</VList>
@@ -247,9 +280,36 @@
 	&:focus {
 		background: rgba(tokens.$blue-base, 0.08) !important;
 	}
+
+	.subtitle {
+		font-size: 0.875rem;
+		line-height: 1.5;
+	}
 }
 
 :deep(.sy-user-menu-btn:focus > .v-btn__overlay) {
 	opacity: 0 !important;
 }
+
+.v-btn:focus-visible {
+	outline: 2px solid rgb(var(--v-theme-primary));
+	outline-offset: 2px;
+
+	:deep(.v-btn__overlay) {
+		opacity: 0;
+	}
+
+	&::after {
+		opacity: 0;
+	}
+}
+
+:global(.sy-user-menu .v-list-item:focus) {
+	outline: 2px solid rgb(var(--v-theme-primary));
+	outline-offset: -2px;
+}
+
+.item-title {
+	white-space: wrap;
+}
 </style>

package/src/components/SyBtnMenu/accessibilite/AccessibilityGuide.mdx

@@ -0,0 +1,77 @@
+import { Meta, Primary } from '@storybook/blocks';
+import * as SyBtnMenuStories from '../SyBtnMenu.stories.ts';
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
+import {
+  AccessibilityGuideLayout,
+  CriteriaSection,
+  CriteriaCard,
+  DemoSection,
+  BestPracticesSection,
+  ResourcesSection,
+} from '@/stories/accessibility/AccessibilityGuideLayout.mdx';
+
+<Meta of={SyBtnMenuStories} />
+
+<AccessibilityGuideLayout
+	componentName="SyBtnMenu"
+	iconSrc={AccessibilityIcon}
+	apgHref="https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/"
+>
+	<CriteriaSection>
+		<CriteriaCard icon="🔍" title="Structure sémantique">
+			<ul>
+				   <li><strong>Rôles ARIA appropriés</strong> : <code>role="menu"</code> pour la liste (<code>&lt;ul&gt;</code>), <code>role="menuitem"</code> pour chaque option (<code>&lt;li&gt;</code>)</li>
+				   <li><strong>Attributs ARIA</strong> : <code>aria-haspopup</code>, <code>aria-expanded</code>, <code>aria-controls</code> sur le bouton, <code>aria-activedescendant</code> sur le menu</li>
+				<li><strong>Liens sémantiques</strong> : <code>aria-labelledby</code> pour relier le menu au bouton</li>
+			</ul>
+		</CriteriaCard>
+
+		<CriteriaCard icon="⌨️" title="Navigation clavier complète">
+			<ul>
+				<li><strong>Tabulation</strong> : Accès au bouton puis navigation dans le menu</li>
+				<li><strong>Touches fléchées</strong> : Navigation verticale dans les options</li>
+				<li><strong>Entrée/Espace</strong> : Activation d'une option</li>
+				<li><strong>Échappement</strong> : Fermeture du menu et retour au bouton</li>
+			</ul>
+		</CriteriaCard>
+
+		<CriteriaCard icon="📱" title="États et retours d'information">
+			<ul>
+				<li><strong>État d'ouverture</strong> : <code>aria-expanded</code> reflète l'état du menu</li>
+				<li><strong>Focus visible</strong> : Indication claire de l'élément focalisé</li>
+				<li><strong>Retour visuel</strong> : Styles pour l'état actif/sélectionné</li>
+			</ul>
+		</CriteriaCard>
+
+		<CriteriaCard icon="🎨" title="Personnalisation accessible">
+			<ul>
+				<li><strong>Options de personnalisation</strong> : Couleurs, tailles, et icônes adaptables</li>
+				<li><strong>Compatibilité mobile</strong> : Utilisation adaptée sur petits écrans</li>
+			</ul>
+		</CriteriaCard>
+	</CriteriaSection>
+
+	<DemoSection componentName="SyBtnMenu">
+		<Primary />
+	</DemoSection>
+
+	<BestPracticesSection>
+		<ul>
+			<li>Utilisez un libellé explicite pour le bouton d'ouverture du menu</li>
+			<li>Utiliser des libellés explicites pour les options du menu</li>
+			<li>Évitez de surcharger le menu avec trop d'options</li>
+		</ul>
+	</BestPracticesSection>
+
+	<ResourcesSection>
+		<ul>
+			<li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/" target="_blank" rel="noopener noreferrer">WAI-ARIA Authoring Practices: Menu Button</a></li>
+			<li><a href="https://inclusive-components.design/menus-menu-buttons/" target="_blank" rel="noopener noreferrer">Inclusive Components: Menus & Menu Buttons</a></li>
+		</ul>
+	</ResourcesSection>
+
+	<div class="mt-8">
+		<p>Rapport d’audit manuel : <a href="/audits/SyBtnMenu.xlsx" style={{ color:'#0C41BD' }}>Voir le rapport</a></p>
+		<p style={{ color: 'grey', fontSize: '14px', marginTop: '0px' }}>Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/918" target="_blank" style={{color:'#0C41BD'}}>issue #918</a>)</p>
+	</div>
+</AccessibilityGuideLayout>

package/src/components/{Customs/Selects/SyBtnSelect/tests/SyBtnSelect.spec.ts → SyBtnMenu/tests/SyBtnMenu.spec.ts}

@@ -1,32 +1,38 @@
 import { describe, it, expect } from 'vitest'
 import { mount } from '@vue/test-utils'
-import SyBtnSelect from '../SyBtnSelect.vue'
+import SyBtnMenu from '../SyBtnMenu.vue'
 
-describe('SyBtnSelect', () => {
+describe('SyBtnMenu', () => {
 	it('renders the component with default props', () => {
-		const wrapper = mount(SyBtnSelect, {
+		const wrapper = mount(SyBtnMenu, {
 			props: {
 				primaryInfo: 'John Doe',
 			},
+			attachTo: document.body,
 		})
 
 		expect(wrapper.exists()).toBe(true)
 		expect(wrapper.text()).toContain('John Doe')
+
+		wrapper.unmount()
 	})
 
 	it('shows secondaryInfo if provided', () => {
-		const wrapper = mount(SyBtnSelect, {
+		const wrapper = mount(SyBtnMenu, {
 			props: {
 				primaryInfo: 'John Doe',
 				secondaryInfo: 'Additional Info',
 			},
+			attachTo: document.body,
 		})
 
 		expect(wrapper.text()).toContain('Additional Info')
+
+		wrapper.unmount()
 	})
 
 	it('emits "update:modelValue" when an item is selected', async () => {
-		const wrapper = mount(SyBtnSelect, {
+		const wrapper = mount(SyBtnMenu, {
 			props: {
 				modelValue: null,
 				menuItems: [
@@ -35,6 +41,7 @@ describe('SyBtnSelect', () => {
 				],
 				primaryInfo: 'John Doe',
 			},
+			attachTo: document.body,
 		})
 
 		const button = wrapper.find('.sy-user-menu-btn')
@@ -50,13 +57,16 @@ describe('SyBtnSelect', () => {
 		expect(wrapper.emitted('update:modelValue')![0]).toEqual([
 			{ text: 'Option 1', value: 'option1' },
 		])
+
+		wrapper.unmount()
 	})
 
 	it('toggles the menu open and closed', async () => {
-		const wrapper = mount(SyBtnSelect, {
+		const wrapper = mount(SyBtnMenu, {
 			props: {
 				primaryInfo: 'John Doe',
 			},
+			attachTo: document.body,
 		})
 
 		const button = wrapper.find('.sy-user-menu-btn')
@@ -67,14 +77,17 @@ describe('SyBtnSelect', () => {
 
 		await button.trigger('click')
 		expect(wrapper.vm.isOpen).toBe(false)
+
+		wrapper.unmount()
 	})
 
 	it('formats menu items correctly', () => {
-		const wrapper = mount(SyBtnSelect, {
+		const wrapper = mount(SyBtnMenu, {
 			props: {
 				primaryInfo: 'John Doe',
 				menuItems: ['Option 1', 'Option 2'],
 			},
+			attachTo: document.body,
 		})
 
 		const formattedItems = wrapper.vm.formattedItems
@@ -82,59 +95,73 @@ describe('SyBtnSelect', () => {
 			{ text: 'Option 1', value: 'Option 1' },
 			{ text: 'Option 2', value: 'Option 2' },
 		])
+
+		wrapper.unmount()
 	})
 
 	it('updates selectedItem when modelValue changes', async () => {
-		const wrapper = mount(SyBtnSelect, {
+		const wrapper = mount(SyBtnMenu, {
 			props: {
 				modelValue: 'initial-value',
 				primaryInfo: 'John Doe',
 			},
+			attachTo: document.body,
 		})
 
 		expect(wrapper.vm.selectedItem).toBe('initial-value')
 
 		await wrapper.setProps({ modelValue: 'new-value' })
 		expect(wrapper.vm.selectedItem).toBe('new-value')
+
+		wrapper.unmount()
 	})
 
 	it('renders the primaryInfo in a span when isMobileVersion and hideIcon are true', async () => {
-		const wrapper = mount(SyBtnSelect, {
+		const wrapper = mount(SyBtnMenu, {
 			props: {
 				primaryInfo: 'John Doe',
 				isMobileView: true,
 				hideIcon: true,
 			},
+			attachTo: document.body,
 		})
 
 		const span = wrapper.find('span.font-weight-bold.text-caption')
 
 		expect(span.text()).toBe('John Doe')
+
+		wrapper.unmount()
 	})
 
 	it('does not render the span if isMobileVersion is false', () => {
-		const wrapper = mount(SyBtnSelect, {
+		const wrapper = mount(SyBtnMenu, {
 			props: {
 				primaryInfo: 'John Doe',
 				isMobileView: false,
 				hideIcon: true,
 			},
+			attachTo: document.body,
 		})
 
 		const span = wrapper.find('span.font-weight-bold.text-sm-caption')
 		expect(span.exists()).toBe(false)
+
+		wrapper.unmount()
 	})
 
 	it('does not render the span if hideIcon is false', () => {
-		const wrapper = mount(SyBtnSelect, {
+		const wrapper = mount(SyBtnMenu, {
 			props: {
 				primaryInfo: 'John Doe',
 				isMobileView: true,
 				hideIcon: false,
 			},
+			attachTo: document.body,
 		})
 
 		const span = wrapper.find('span.font-weight-bold.text-sm-caption')
 		expect(span.exists()).toBe(false)
+
+		wrapper.unmount()
 	})
 })

package/src/components/UserMenuBtn/UserMenuBtn.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 	import { computed } from 'vue'
 	import type { RouteLocationRaw } from 'vue-router'
-	import SyBtnSelect from '@/components/Customs/Selects/SyBtnSelect/SyBtnSelect.vue'
+	import SyBtnMenu from '@/components/SyBtnMenu/SyBtnMenu.vue'
 	import { useDisplay } from 'vuetify'
 	import { mdiAccount, mdiLoginVariant } from '@mdi/js'
 	import useCustomizableOptions, { type CustomizableOptions } from '@/composables/useCustomizableOptions'
@@ -43,7 +43,7 @@
 </script>
 
 <template>
-	<SyBtnSelect
+	<SyBtnMenu
 		v-model="modelValue"
 		:hide-icon="hideUserIcon"
 		:icon-only="isMobileView"
@@ -85,7 +85,7 @@
 				</VListItem>
 			</slot>
 		</template>
-	</SyBtnSelect>
+	</SyBtnMenu>
 </template>
 
 <style scoped lang="scss">

package/src/components/UserMenuBtn/tests/UserMenuBtn.spec.ts

@@ -91,9 +91,9 @@ describe('UserMenuBtn', () => {
 			},
 		})
 
-		const SyBtnSelect = wrapper.findComponent({ name: 'SyBtnSelect' })
-		// Utiliser le format camelCase pour l'événement, comme déclaré dans le composant SyBtnSelect
-		await SyBtnSelect.vm.$emit('update:modelValue', 'test-value')
+		const SyBtnMenu = wrapper.findComponent({ name: 'SyBtnMenu' })
+		// Utiliser le format camelCase pour l'événement, comme déclaré dans le composant SyBtnMenu
+		await SyBtnMenu.vm.$emit('update:modelValue', 'test-value')
 
 		expect(wrapper.emitted('update:modelValue')).toBeTruthy()
 		expect(wrapper.emitted('update:modelValue')![0]).toEqual(['test-value'])

package/src/components/index.ts

@@ -4,12 +4,12 @@
 export { default as FooterBar } from './FooterBar/FooterBar.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 HeaderToolbar } from './HeaderToolbar/HeaderToolbar.vue'
 export { default as SubHeader } from './SubHeader/SubHeader.vue'
 
@@ -23,12 +23,13 @@ export { default as ToolbarContainer } from './ToolbarContainer/ToolbarContainer
 // Navigation
 // ===========================
 export { default as ContextualMenu } from './ContextualMenu/ContextualMenu.vue'
+export { default as SyPagination } from './Customs/SyPagination/SyPagination.vue'
+export { default as SyTabs } from './Customs/SyTabs/SyTabs.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'
-export { default as SyTabs } from './Customs/SyTabs/SyTabs.vue'
+export { default as SyBtnMenu } from './SyBtnMenu/SyBtnMenu.vue'
 
 // ===========================
 // Boutons
@@ -45,6 +46,14 @@ export { default as UserMenuBtn } from './UserMenuBtn/UserMenuBtn.vue'
 // Formulaires
 // ===========================
 export { default as DatePicker } from '@/components/DatePicker/CalendarMode/DatePicker.vue'
+export { default as Captcha } from './Captcha/Captcha.vue'
+export { default as SelectBtnField } from './Customs/Selects/SelectBtnField/SelectBtnField.vue'
+export { default as SyInputSelect } from './Customs/Selects/SyInputSelect/SyInputSelect.vue'
+export { default as SySelect } from './Customs/Selects/SySelect/SySelect.vue'
+export { default as SyCheckbox } from './Customs/SyCheckbox/SyCheckbox.vue'
+export { default as SyForm } from './Customs/SyForm/SyForm.vue'
+export { default as SyRadioGroup } from './Customs/SyRadioGroup/SyRadioGroup.vue'
+export { default as SyTextField } from './Customs/SyTextField/SyTextField.vue'
 export { default as DiacriticPicker } from './DiacriticPicker/DiacriticPicker.vue'
 export { default as FileUpload } from './FileUpload/FileUpload.vue'
 export { default as LunarCalendar } from './LunarCalendar/LunarCalendar.vue'
@@ -56,17 +65,8 @@ export { indicatifs } from './PhoneField/indicatifs'
 export { default as PhoneField } from './PhoneField/PhoneField.vue'
 export { default as RangeField } from './RangeField/RangeField.vue'
 export { default as SearchListField } from './SearchListField/SearchListField.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'
-export { default as Captcha } from './Captcha/Captcha.vue'
-export { default as SyForm } from './Customs/SyForm/SyForm.vue'
-export { default as SyRadioGroup } from './Customs/SyRadioGroup/SyRadioGroup.vue'
 
 // ===========================
 // Tableaux
@@ -89,6 +89,7 @@ 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 SyIcon } from './Customs/SyIcon/SyIcon.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'
@@ -96,7 +97,6 @@ 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
@@ -122,8 +122,8 @@ export { default as NotFoundPage } from './NotFoundPage/NotFoundPage.vue'
 // Amelipro
 // ===========================
 export { default as AmeliproAccordion } from './Amelipro/AmeliproAccordion/AmeliproAccordion.vue'
-export { default as AmeliproAccordionGroup } from './Amelipro/AmeliproAccordionGroup/AmeliproAccordionGroup.vue'
 export { default as AmeliproAccordionFrieze } from './Amelipro/AmeliproAccordionFrieze/AmeliproAccordionFrieze.vue'
+export { default as AmeliproAccordionGroup } from './Amelipro/AmeliproAccordionGroup/AmeliproAccordionGroup.vue'
 export { default as AmeliproAccordionList } from './Amelipro/AmeliproAccordionList/AmeliproAccordionList.vue'
 export { default as AmeliproAccordionResult } from './Amelipro/AmeliproAccordionResult/AmeliproAccordionResult.vue'
 export { default as AmeliproAccordionResultList } from './Amelipro/AmeliproAccordionResultList/AmeliproAccordionResultList.vue'
@@ -131,10 +131,10 @@ export { default as AmeliproAutoCompleteField } from './Amelipro/AmeliproAutoCom
 export { default as AmeliproBadge } from './Amelipro/AmeliproBadge/AmeliproBadge.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 AmeliproCarousel } from './Amelipro/AmeliproCarousel/AmeliproCarousel.vue'
 export { default as AmeliproCaptcha } from './Amelipro/AmeliproCaptcha/AmeliproCaptcha.vue'
+export { default as AmeliproCard } from './Amelipro/AmeliproCard/AmeliproCard.vue'
+export { default as AmeliproCarousel } from './Amelipro/AmeliproCarousel/AmeliproCarousel.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'
@@ -179,8 +179,8 @@ export { default as AmeliproTextField } from './Amelipro/AmeliproTextField/Ameli
 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 StructureMenu } from './Amelipro/StructureMenu/StructureMenu.vue'
 export { default as UserInformationSummary } from './Amelipro/UserInformationSummary/UserInformationSummary.vue'
 export { default as UserMenu } from './Amelipro/UserMenu/UserMenu.vue'
 
@@ -189,10 +189,10 @@ export { default as UserMenu } from './Amelipro/UserMenu/UserMenu.vue'
 // ===========================
 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'
 export { useValidatable } from '../composables/validation/useValidatable'
+export { useValidation } from '../composables/validation/useValidation'
+export { useNotificationService } from '../services/NotificationService'
 
 // ===========================
 // Directives

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

@@ -0,0 +1,19 @@
+import { describe, it, expect } from 'vitest'
+import { formatDate, parseDate } from '../useDateFormatDayjs'
+
+describe('useDateFormatDayjs', () => {
+	describe('parseDate', () => {
+		it('keeps the same calendar day when formatting back in a negative timezone (UTC-4)', () => {
+			const previousTz = process.env.TZ
+			process.env.TZ = 'America/Guadeloupe'
+			try {
+				const parsed = parseDate('2023-01-15', 'YYYY-MM-DD')
+				expect(parsed).toBeInstanceOf(Date)
+				expect(formatDate(parsed, 'YYYY-MM-DD')).toBe('2023-01-15')
+			}
+			finally {
+				process.env.TZ = previousTz
+			}
+		})
+	})
+})

package/src/composables/date/useDateFormatDayjs.ts

@@ -49,10 +49,10 @@ export const parseDate = (dateString: string | Date | null | undefined, format:
 		return null
 	}
 
-	// Extraire les composants de la date pour créer une date UTC
-	// Cela évite les problèmes de décalage de fuseau horaire et garantit
-	// que les dates au format dd/mm/yyyy sont correctement interprétées
-	return dayjs.utc()
+	// Extraire les composants de la date pour créer une date à minuit en timezone locale.
+	// On évite ainsi les décalages jour-1/jour+1 quand on formate la Date en local,
+	// notamment dans les fuseaux négatifs (ex: UTC-4).
+	return dayjs()
 		.year(parsedDate.year())
 		.month(parsedDate.month())
 		.date(parsedDate.date())

package/src/stories/Accessibilite/Avancement/Avancement.stories.ts

@@ -43,7 +43,7 @@ const ITEMS: AuditItem[] = [
 	{ composant: 'PasswordField', status: STATUS.AUDITED },
 	{ composant: 'PhoneField', status: STATUS.AUDITED },
 	{ composant: 'UserMenuBtn', status: STATUS.NOT_AUDITED },
-	{ composant: 'SyBtnSelect', status: STATUS.NOT_AUDITED },
+	{ composant: 'SyBtnMenu', status: STATUS.AUDITED },
 	{ composant: 'NirField', status: STATUS.IN_PROGRESS },
 	{ composant: 'PeriodField', status: STATUS.NOT_AUDITED },
 	{ composant: 'RangeField', status: STATUS.NOT_AUDITED },

package/src/stories/Accessibilite/Vuetify/VuetifyItems.ts

@@ -87,10 +87,6 @@ export const VuetifyItems = [
 						name: 'SyInputSelect',
 						href: '/?path=/docs/composants-formulaires-selects-syinputselect--docs',
 					},
-					{
-						name: 'SyBtnSelect',
-						href: '/?path=/docs/composants-formulaires-selects-sybtnselect--docs',
-					},
 				],
 			},
 			{