@cnamts/synapse 1.0.5 → 1.0.7

package/src/components/Tables/common/tests/SyTablePagination.spec.ts

@@ -170,4 +170,161 @@ describe('SyTablePagination.vue', () => {
 		const labelText = wrapper.find('.rows-per-page-label').text()
 		expect(labelText).toContain('Lignes par page')
 	})
+
+	// Tests for itemsPerPageOptions functionality
+	describe('itemsPerPageOptions', () => {
+		it('should use default options when itemsPerPageOptions is not provided', () => {
+			const wrapper = mount(SyTablePagination, {
+				props: {
+					page: 1,
+					pageCount: 5,
+					itemsPerPage: 10,
+					itemsLength: 50,
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			// Should have default options: 5, 10, 25, 50, 100, and "Tous" (-1)
+			const vm = wrapper.vm as unknown as { itemsPerPageOptions: Array<{ text: string, value: number }> }
+			const selectOptions = vm.itemsPerPageOptions
+			expect(selectOptions).toHaveLength(6)
+			expect(selectOptions.map(opt => opt.value)).toEqual([5, 10, 25, 50, 100, -1])
+		})
+
+		it('should limit options when itemsPerPageOptions is provided', () => {
+			const wrapper = mount(SyTablePagination, {
+				props: {
+					page: 1,
+					pageCount: 5,
+					itemsPerPage: 10,
+					itemsLength: 50,
+					itemsPerPageOptions: [5, 10, 25],
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			// Should only have the limited options, no "Tous" option
+			const vm = wrapper.vm as unknown as { itemsPerPageOptions: Array<{ text: string, value: number }> }
+			const selectOptions = vm.itemsPerPageOptions
+			expect(selectOptions).toHaveLength(3)
+			expect(selectOptions.map(opt => opt.value)).toEqual([5, 10, 25])
+			expect(selectOptions.map(opt => opt.text)).toEqual(['5', '10', '25'])
+		})
+
+		it('should include "Tous" option when explicitly allowed in itemsPerPageOptions', () => {
+			const wrapper = mount(SyTablePagination, {
+				props: {
+					page: 1,
+					pageCount: 5,
+					itemsPerPage: 10,
+					itemsLength: 50,
+					itemsPerPageOptions: [5, 10, 25, -1],
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			// Should have the limited options plus "Tous"
+			const vm = wrapper.vm as unknown as { itemsPerPageOptions: Array<{ text: string, value: number }> }
+			const selectOptions = vm.itemsPerPageOptions
+			expect(selectOptions).toHaveLength(4)
+			expect(selectOptions.map(opt => opt.value)).toEqual([5, 10, 25, -1])
+
+			// Check that the last option is "Tous"
+			const lastOption = selectOptions[selectOptions.length - 1]
+			expect(lastOption.value).toBe(-1)
+			expect(lastOption.text).toBe('Tous')
+		})
+
+		it('should add current itemsPerPage to options if not already included', () => {
+			const wrapper = mount(SyTablePagination, {
+				props: {
+					page: 1,
+					pageCount: 5,
+					itemsPerPage: 15, // Not in the itemsPerPageOptions
+					itemsLength: 50,
+					itemsPerPageOptions: [5, 10, 25],
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			// Should include the current itemsPerPage value and sort numerically
+			const vm = wrapper.vm as unknown as { itemsPerPageOptions: Array<{ text: string, value: number }> }
+			const selectOptions = vm.itemsPerPageOptions
+			expect(selectOptions).toHaveLength(4)
+			expect(selectOptions.map(opt => opt.value)).toEqual([5, 10, 15, 25])
+		})
+
+		it('should not add current itemsPerPage if it is -1 (Tous)', () => {
+			const wrapper = mount(SyTablePagination, {
+				props: {
+					page: 1,
+					pageCount: 5,
+					itemsPerPage: -1, // "Tous" option
+					itemsLength: 50,
+					itemsPerPageOptions: [5, 10, 25],
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			// Should not add -1 to the options since itemsPerPageOptions doesn't include it
+			const vm = wrapper.vm as unknown as { itemsPerPageOptions: Array<{ text: string, value: number }> }
+			const selectOptions = vm.itemsPerPageOptions
+			expect(selectOptions).toHaveLength(3)
+			expect(selectOptions.map(opt => opt.value)).toEqual([5, 10, 25])
+			expect(selectOptions.find(opt => opt.value === -1)).toBeUndefined()
+		})
+
+		it('should work with very restrictive options', () => {
+			const wrapper = mount(SyTablePagination, {
+				props: {
+					page: 1,
+					pageCount: 5,
+					itemsPerPage: 5,
+					itemsLength: 50,
+					itemsPerPageOptions: [5], // Only one option
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			// Should only have one option
+			const vm = wrapper.vm as unknown as { itemsPerPageOptions: Array<{ text: string, value: number }> }
+			const selectOptions = vm.itemsPerPageOptions
+			expect(selectOptions).toHaveLength(1)
+			expect(selectOptions.map(opt => opt.value)).toEqual([5])
+			expect(selectOptions.map(opt => opt.text)).toEqual(['5'])
+		})
+
+		it('should handle empty itemsPerPageOptions array', () => {
+			const wrapper = mount(SyTablePagination, {
+				props: {
+					page: 1,
+					pageCount: 5,
+					itemsPerPage: 10,
+					itemsLength: 50,
+					itemsPerPageOptions: [], // Empty array
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			// Should only include the current itemsPerPage since base options are empty
+			const vm = wrapper.vm as unknown as { itemsPerPageOptions: Array<{ text: string, value: number }> }
+			const selectOptions = vm.itemsPerPageOptions
+			expect(selectOptions).toHaveLength(1)
+			expect(selectOptions.map(opt => opt.value)).toEqual([10])
+		})
+	})
 })

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

@@ -76,6 +76,7 @@ export type SyTableProps = {
 	showSelect?: boolean
 	multiSort?: boolean
 	mustSort?: boolean
+	itemsPerPageOptions?: number[]
 }
 
 export type SyServerTableProps = {
@@ -93,4 +94,5 @@ export type SyServerTableProps = {
 	showSelect?: boolean
 	multiSort?: boolean
 	mustSort?: boolean
+	itemsPerPageOptions?: number[]
 }

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

@@ -1,4 +1,4 @@
-import { computed, nextTick, onMounted, ref, watch, type Ref } from 'vue'
+import { computed, nextTick, onMounted, onUnmounted, ref, watch, type Ref } from 'vue'
 import type { VDataTable, VDataTableServer } from 'vuetify/components'
 import { locales } from './locales'
 import type { DataOptions } from './types'
@@ -18,6 +18,8 @@ export function useTableAria({
 	options,
 	uniqueTableId,
 }: UseTableAriaOptions) {
+	// Registre des éléments avec des écouteurs d'événements pour le nettoyage
+	const elementsWithListeners = ref<HTMLElement[]>([])
 	const statusRegionId = `${uniqueTableId}-status`
 	const statusMessage = ref('')
 
@@ -168,6 +170,9 @@ export function useTableAria({
 					// Add event listeners
 					element.addEventListener('focus', handleInteractiveElementFocus)
 					element.addEventListener('blur', handleInteractiveElementBlur)
+
+					// Stocker l'élément pour le nettoyage lors du démontage
+					elementsWithListeners.value.push(element as HTMLElement)
 				})
 			}
 		})
@@ -265,6 +270,17 @@ export function useTableAria({
 		setupAria()
 	})
 
+	// Nettoyer les écouteurs d'événements lors du démontage du composant
+	onUnmounted(() => {
+		elementsWithListeners.value.forEach((element) => {
+			if (element) {
+				element.removeEventListener('focus', handleInteractiveElementFocus)
+				element.removeEventListener('blur', handleInteractiveElementBlur)
+			}
+		})
+		elementsWithListeners.value = []
+	})
+
 	return {
 		statusRegionId,
 		statusMessage,

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

@@ -117,7 +117,8 @@ describe('UserMenuBtn', () => {
 		})
 
 		const SyBtnSelect = wrapper.findComponent({ name: 'SyBtnSelect' })
-		await SyBtnSelect.vm.$emit('update:model-value', 'test-value')
+		// Utiliser le format camelCase pour l'événement, comme déclaré dans le composant SyBtnSelect
+		await SyBtnSelect.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

@@ -28,6 +28,7 @@ export { default as HeaderNavigationBar } from './HeaderNavigationBar/HeaderNavi
 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'
 
 // ===========================
 // Boutons
@@ -116,14 +117,24 @@ 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 AmeliproAccordionList } from './Amelipro/AmeliproAccordionList/AmeliproAccordionList.vue'
+export { default as AmeliproAccordionResult } from './Amelipro/AmeliproAccordionResult/AmeliproAccordionResult.vue'
+export { default as AmeliproAccordionResultList } from './Amelipro/AmeliproAccordionResultList/AmeliproAccordionResultList.vue'
 export { default as AmeliproAutoCompleteField } from './Amelipro/AmeliproAutoCompleteField/AmeliproAutoCompleteField.vue'
+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 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 AmeliproClickableTile } from './Amelipro/AmeliproClickableTile/AmeliproClickableTile.vue'
+export { default as AmeliproCustomSelector } from './Amelipro/AmeliproCustomSelector/AmeliproCustomSelector.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'
@@ -142,10 +153,12 @@ export { default as AmeliproPageLayout } from './Amelipro/AmeliproPageLayout/Ame
 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 AmeliproResultList } from './Amelipro/AmeliproResultList/AmeliproResultList.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 AmeliproTable } from './Amelipro/AmeliproTable/AmeliproTable.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'

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

@@ -1,14 +1,43 @@
 import { describe, it, expect, beforeEach, vi } from 'vitest'
 import { useDatePickerAccessibility } from '../useDatePickerAccessibility'
+import { mount } from '@vue/test-utils'
+// Créer un composant vide pour servir de contexte à l'exécution des hooks
+import { defineComponent } from 'vue'
+
+// Composant vide qui servira de contexte pour les hooks Vue
+const TestComponent = defineComponent({
+	setup() {
+		const { updateAccessibility, handleKeyDown, fixAriaAttributes } = useDatePickerAccessibility()
+		return {
+			updateAccessibility,
+			handleKeyDown,
+			fixAriaAttributes,
+		}
+	},
+	template: '<div></div>',
+})
 
 describe('useDatePickerAccessibility', () => {
-	let { updateAccessibility, handleKeyDown } = useDatePickerAccessibility()
+	// Variables pour stocker les méthodes du composable
+	let updateAccessibility: ReturnType<typeof useDatePickerAccessibility>['updateAccessibility']
+	let handleKeyDown: ReturnType<typeof useDatePickerAccessibility>['handleKeyDown']
+	// Wrapper pour le composant de test
+	let wrapper: ReturnType<typeof mount<{
+		updateAccessibility: ReturnType<typeof useDatePickerAccessibility>['updateAccessibility']
+		handleKeyDown: ReturnType<typeof useDatePickerAccessibility>['handleKeyDown']
+		fixAriaAttributes: ReturnType<typeof useDatePickerAccessibility>['fixAriaAttributes']
+	}>>
 
 	beforeEach(() => {
-		// Réinitialiser la fonction pour chaque test
-		const { updateAccessibility: newUpdateAccessibility, handleKeyDown: newHandleKeyDown } = useDatePickerAccessibility()
-		updateAccessibility = newUpdateAccessibility
-		handleKeyDown = newHandleKeyDown
+		// Monter le composant de test pour fournir un contexte aux hooks Vue
+		wrapper = mount(TestComponent) as unknown as ReturnType<typeof mount<{
+			updateAccessibility: ReturnType<typeof useDatePickerAccessibility>['updateAccessibility']
+			handleKeyDown: ReturnType<typeof useDatePickerAccessibility>['handleKeyDown']
+			fixAriaAttributes: ReturnType<typeof useDatePickerAccessibility>['fixAriaAttributes']
+		}>>
+		// Obtenir les fonctions du composable directement depuis le composant monté
+		updateAccessibility = wrapper.vm.updateAccessibility
+		handleKeyDown = wrapper.vm.handleKeyDown
 
 		// Créer une structure DOM simulée pour les tests
 		document.body.innerHTML = `

package/src/composables/index.ts

@@ -6,3 +6,6 @@ export * from './useCustomizableOptions'
 
 // withable
 export * from './widthable'
+
+// usePagination Amelipro
+export * from './usePagination'

package/src/composables/useFilterable/useFilterable.ts

@@ -88,7 +88,19 @@ export default function useFilterable(model: Ref<FilterProp>, emits) {
 				]
 			}
 
-			// Any object
+			// Handle single select objects (VSelect with return-object but without multiple)
+			// Check if this looks like a select option object with title/text and value properties
+			const hasSelectStructure = (typedValue.title !== undefined || typedValue.text !== undefined) && typedValue.value !== undefined
+			if (hasSelectStructure) {
+				return [
+					{
+						text: typedValue.title || typedValue.text || typedValue.value.toString(),
+						value: typedValue,
+					},
+				]
+			}
+
+			// Any other object - iterate over keys
 			return Object.keys(typedValue).map((key) => {
 				// Use text property if it exists, else use value property or default to key value
 				const text
@@ -161,6 +173,16 @@ export default function useFilterable(model: Ref<FilterProp>, emits) {
 				return
 			}
 
+			// Handle single select objects (VSelect with return-object but without multiple)
+			const hasSelectStructure = (typedValue.title !== undefined || typedValue.text !== undefined) && typedValue.value !== undefined
+			if (hasSelectStructure) {
+				// For single select objects, clear the entire value
+				filter.value = undefined
+				updateValue()
+				return
+			}
+
+			// For other object types, delete the specific property
 			delete typedValue[chipValue]
 			filter.value = typedValue
 		}

package/src/composables/usePagination.ts

@@ -0,0 +1,103 @@
+import type { Breakpoints, IDataListItem } from '../components/Amelipro/types'
+import { type Ref, computed, ref, watch } from 'vue'
+import type { PaginationTypes } from '../components/Amelipro/AmeliproPagination/types'
+import type { SelectItem } from '../components/Amelipro/AmeliproSelect/types'
+import { useDisplay } from 'vuetify'
+
+export interface IUsePagination {
+	// N° de la page courante
+	currentPage: Ref<number>
+	// Liste des items de la page courante
+
+	currentPageItems: (currentList: IDataListItem[]) => IDataListItem[]
+	// Nombre d'items par page
+	itemToDisplay: Ref<number>
+	// Nombre total de pages
+	pageTotal: Ref<number>
+	// À quoi sert la pagination ? Semble non utilisé
+	pagination: Ref<boolean>
+	// Sélecteur de nombre d'items par page
+	paginationSelectItems: SelectItem[]
+	// Tableau stockant la pagination
+	paginationTable: Ref<PaginationTypes[]>
+	// Renseigne le nombre d'items par page au mount du composant et au changement de breakpoint entre desktop et mobile
+	setDefaultItemsPerPage: () => void
+	// Mise à jour du tableau de pagination
+
+	updatePagination: (currentList: IDataListItem[], itemPerPage: number) => void
+}
+
+export const usePagination = (list: IDataListItem[], itemPerPageDefault?: number, itemPerPageDefaultMobile?: number, breakPointValue?: Breakpoints): IUsePagination => {
+	const breakPointCurrentValue: Breakpoints = breakPointValue ? breakPointValue : 'mdAndUp'
+	const currentDisplay = useDisplay()
+	const isDesktop = computed<boolean>(() => currentDisplay[breakPointCurrentValue].value)
+
+	const dataListItems = ref(list)
+	const itemToDisplay = ref(10)
+	const itemToDisplayForDesktop = itemPerPageDefault ?? itemToDisplay.value
+	const itemToDisplayForMobile = itemPerPageDefaultMobile ?? itemToDisplay.value
+
+	const currentPage = ref(1)
+	const pagination = ref(false)
+	const paginationTable = ref<PaginationTypes[]>([])
+	const paginationSelectItems: SelectItem[] = [5, 10, 20, 30, 50, 100].map(value => ({ title: value, value }))
+
+	watch(() => isDesktop.value, () => {
+		setDefaultItemsPerPage()
+	})
+
+	const setDefaultItemsPerPage = (): void => {
+		itemToDisplay.value = isDesktop.value ? itemToDisplayForDesktop : itemToDisplayForMobile
+		updatePagination(list, itemToDisplay.value)
+	}
+
+	const pageTotal = computed<number>(() => {
+		let pages = dataListItems.value.length / itemToDisplay.value
+		const reste = dataListItems.value.length % itemToDisplay.value
+
+		if (reste > 0 && pages >= 1) {
+			pages += 1
+		}
+
+		return Math.trunc(pages)
+	})
+
+	const updatePagination = (newList: IDataListItem[], itemPerPage: number): void => {
+		dataListItems.value = newList
+		itemToDisplay.value = itemPerPage
+		paginationTable.value = []
+		if (pageTotal.value > 1) {
+			for (let i = 1; i <= pageTotal.value; i++) {
+				paginationTable.value.push({ key: i })
+			}
+		}
+	}
+
+	const currentPageItems = (newList: IDataListItem[]): IDataListItem[] => {
+		dataListItems.value = newList
+
+		if (newList.length > itemToDisplay.value) {
+			if (currentPage.value === paginationTable.value.length) {
+				return newList.slice((currentPage.value - 1) * itemToDisplay.value, newList.length)
+			}
+			return newList.slice((currentPage.value - 1) * itemToDisplay.value, currentPage.value * itemToDisplay.value)
+		}
+
+		return newList
+	}
+
+	// Init pagination
+	setDefaultItemsPerPage()
+
+	return {
+		currentPage,
+		currentPageItems,
+		itemToDisplay,
+		pageTotal,
+		pagination,
+		paginationSelectItems,
+		paginationTable,
+		setDefaultItemsPerPage,
+		updatePagination,
+	}
+}

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

@@ -1,4 +1,4 @@
-import type { IndexedObject } from '@/components/Amelipro/types'
+import type { IndexedObject } from '../../../components/Amelipro/types'
 
 export const apColorsTokens = {
 	apBlack: { base: '#000000' },

package/src/designTokens/tokens/cnam/cnamSemantic.ts

@@ -36,7 +36,7 @@ export const cnamSemanticTokens = {
 			accentOnDark: '#ffffff',
 			info: '#0c419a',
 			success: '#224e2d',
-			warning: '#60480e',
+			warning: '#906b15',
 			error: '#b33f2e',
 			onDark: 'rgba(255, 255, 255, 0.7)',
 			disabled: '#dddede',
@@ -49,7 +49,7 @@ export const cnamSemanticTokens = {
 			subdued: '#545859',
 			info: '#0c419a',
 			success: '#224e2d',
-			warning: '#60480e',
+			warning: '#906b15',
 			error: '#b33f2e',
 			disabled: '#989b9b',
 			onDark: '#ffffff',
@@ -64,7 +64,7 @@ export const cnamSemanticTokens = {
 			accentContrasted: '#07275c',
 			info: '#0c419a',
 			success: '#224e2d',
-			warning: '#60480e',
+			warning: '#906b15',
 			error: '#b33f2e',
 			onDark: '#ffffff',
 			disabled: '#989b9b',

package/src/directives/lockFocus.ts

@@ -0,0 +1,48 @@
+import type { Directive } from 'vue'
+
+/**
+ * Vue directive that locks keyboard focus within the bound element.
+ *
+ * ! Be careful to always allow the user to escape the focus trap as this directive does not handle that.
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <div v-lock-focus>
+ *     <!-- Focus will be trapped within this element -->
+ *   </div>
+ * </template>
+ * ```
+ */
+const vLockFocus: Directive<HTMLElement> = {
+	mounted(el) {
+		el.addEventListener('keydown', handleFocus)
+	},
+
+	unmounted(el) {
+		el.removeEventListener('keydown', handleFocus)
+	},
+}
+
+function handleFocus(event: KeyboardEvent) {
+	if (event.key !== 'Tab') return
+	const target = event.currentTarget as HTMLElement
+
+	const focusableElements = target.querySelectorAll(
+		'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex]:not([tabindex="-1"]), [contenteditable]',
+	)
+
+	const firstElement = focusableElements[0] as HTMLElement
+	const lastElement = focusableElements[focusableElements.length - 1] as HTMLElement
+
+	if (event.shiftKey && document.activeElement === firstElement) {
+		event.preventDefault()
+		lastElement.focus()
+	}
+	else if (!event.shiftKey && document.activeElement === lastElement) {
+		event.preventDefault()
+		firstElement.focus()
+	}
+}
+
+export default vLockFocus

package/src/main.ts

@@ -1,5 +1,4 @@
-import '../src/assets/tokens.scss'
-import '../src/assets/settings.scss'
+import '../src/assets/themes.scss'
 
 export * from './components'
 export * from './services'

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

@@ -379,14 +379,7 @@ import {Meta} from '@storybook/blocks';
       <p>Tous nos utilisateurs peuvent être concernés par des situations de handicap temporaires (bras cassé, fatigue visuelle...).</p>
     </div>
   </div>
-  
-  <div className="image-container">
-  <img alt="handicap" src={"/handicap1.jpg"} style={{ padding: '10px', border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0', width: '50%', margin: '0 auto', display: 'block' }} />
-    <div className="image-caption">
-      Illustration des différentes situations de handicap pouvant affecter nos utilisateurs
-    </div>
-  </div>
-  
+
   <div className="resource-links">
     <h3>👀 Tester la navigation du point de vue des utilisateurs en situation de handicap</h3>
     <ul>

package/src/stories/Accessibilite/{Aculturation/AuditDesignSystem.mdx → AuditDesignSystem.mdx}

@@ -1,6 +1,6 @@
 import {Meta} from '@storybook/blocks';
 
-<Meta title="Accessibilité/Aculturation/Audit du Design System"/>
+<Meta title="Accessibilité/Design System/Audit du Design System"/>
 
 <style>
 {