@cnamts/synapse 1.0.24 → 1.0.25

package/src/components/Customs/SyPagination/SyPagination.vue

@@ -352,8 +352,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens';
-
 .sy-pagination {
 	display: flex;
 	align-items: center;

package/src/components/Customs/SyTabs/SyTabs.mdx

@@ -9,16 +9,6 @@ import * as SyTabsStories from "./SyTabs.stories";
   <p>Le composant `SyTabs` est un système de navigation par onglets conforme au Design System qui respecte les règles d'accessibilité <abbr title="Référentiel Général d'Amélioration de l'Accessibilité">RGAA</abbr>. Il permet d'organiser le contenu en sections navigables facilement via une interface à onglets.</p>
 </div>
 
-Il implémente les fonctionnalités suivantes :
-
-- Navigation complète au clavier
-- Attributs ARIA appropriés
-- Gestion du focus accessible
-- Structure HTML sémantique
-- Design personnalisable
-
-<Canvas of={SyTabsStories.Default} />
-
 ## API
 
 <Controls of={SyTabsStories.Default} />
@@ -36,54 +26,6 @@ export interface TabItem {
 }
 ```
 
-<div className="header">
-  <h1>Accessibilité</h1>
-</div>
-
-Le composant `SyTabs` respecte les critères d'accessibilité RGAA suivants :
-
-### Structure sémantique
-
-- Utilise les éléments `<nav>`, `<ul>` et `<li>` pour une structure de navigation sémantique
-- Associe chaque onglet à son panneau de contenu via les attributs `aria-controls` et `aria-labelledby`
-- Utilise l'attribut `aria-label="Onglets de navigation"` sur l'élément `<nav>` pour identifier la navigation
-
-### Rôles ARIA
-
-- `role="tablist"` sur le conteneur de navigation
-- `role="presentation"` sur les éléments de liste
-- `role="tab"` sur les boutons d'onglets
-- `role="tabpanel"` sur les panneaux de contenu
-
-### États et propriétés
-
-- `aria-selected="true|false"` indique l'onglet actif
-- Attribut `hidden` sur les panneaux non actifs
-- Focus visible avec outline adapté au design system
-
-### Navigation au clavier
-
-Le composant implémente toutes les interactions clavier recommandées par les [Pratiques Authoring WAI-ARIA 1.2](https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/) :
-
-- **Flèches gauche/droite** : Navigation entre les onglets
-- **Touches Home/End** : Accès au premier/dernier onglet
-- **Entrée/Espace** : Activation de l'onglet
-- **Échap** : Gestion du focus
-
-### Contraste et visibilité
-
-- Contraste suffisant entre le texte et le fond (minimum 4.5:1)
-- Indication visuelle claire de l'onglet actif (changement de couleur et bordure)
-- Focus visible conforme aux exigences RGAA
-
-### Tests d'accessibilité
-
-Le composant a été testé avec :
-- Lecteurs d'écran (NVDA, VoiceOver)
-- Navigation clavier
-- Outils de vérification de contraste
-
-<Canvas of={SyTabsStories.Default} />
 
 ## Personnalisation
 

package/src/components/Customs/SyTabs/SyTabs.stories.ts

@@ -51,9 +51,6 @@ type Story = StoryObj<typeof meta>
 export const Default: Story = {
 	args: {},
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -85,9 +82,6 @@ export const Disabled: Story = {
 		],
 	},
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -134,9 +128,6 @@ export const WithVModel: Story = {
     `,
 	}),
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -194,9 +185,6 @@ export const WithTabsPrependSlot: Story = {
     `,
 	}),
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -234,9 +222,6 @@ export const WithTabsAppendSlot: Story = {
     `,
 	}),
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -277,9 +262,6 @@ export const WithTabPrependSlot: Story = {
     `,
 	}),
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -328,9 +310,6 @@ export const WithTabAppendSlot: Story = {
     `,
 	}),
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -383,9 +362,6 @@ export const WithCustomContent: Story = {
     `,
 	}),
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -422,9 +398,6 @@ export const ManyTabs: Story = {
 		})),
 	},
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -466,9 +439,6 @@ export const CustomTheme: Story = {
     `,
 	}),
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -499,6 +469,38 @@ const items = [
 	},
 }
 
+/**
+ * Exemple de SyTabs utilisé comme menu de navigation (Routing).
+ * La sémantique d'accessibilité s'adapte automatiquement (utilisation d'une balise <nav> et retrait des rôles ARIA d'onglets).
+ */
+export const NavigationMode: Story = {
+	args: {
+		items: [
+			{ label: 'Accueil', value: 'home', href: '#' },
+			{ label: 'Profil', value: 'profile', href: '#profile' },
+			{ label: 'Paramètres', value: 'settings', href: '#settings' },
+		],
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<SyTabs :items="items" />`,
+			},
+			{
+				name: 'Script',
+				code: `
+const items = [
+	{ label: 'Accueil', value: 'home', href: '#' },
+	{ label: 'Profil', value: 'profile', href: '#profile' },
+	{ label: 'Paramètres', value: 'settings', href: '#settings' },
+]
+`,
+			},
+		],
+	},
+}
+
 /**
  * Exemple avec confirmation avant changement d'onglet.
  * Démontre comment utiliser la propriété confirmTabChange et gérer l'événement confirm-tab-change.
@@ -533,9 +535,6 @@ export const WithTabConfirmation: Story = {
     `,
 	}),
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',

package/src/components/Customs/SyTabs/SyTabs.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 	import useCustomizableOptions from '@/composables/useCustomizableOptions'
-	import { getCurrentInstance, onMounted, onUnmounted, ref, watch } from 'vue'
+	import { computed, getCurrentInstance, onMounted, onUnmounted, ref, watch } from 'vue'
 	import type { Router } from 'vue-router'
 	import { config } from './config'
 	import type { TabItem } from './types'
@@ -12,8 +12,9 @@
 		/** Si activé, une confirmation sera demandée avant de changer d'onglet */
 		confirmTabChange?: boolean
 		/** Message affiché dans la boîte de dialogue de confirmation */
-		confirmationMessage?: boolean
-		/** Options personnalisées pour les composants Vuetify */
+		confirmationMessage?: string
+		/** Si activé, le contenu des onglets ne sera rendu que lorsqu'ils deviendront actifs */
+		lazy?: boolean
 		vuetifyOptions?: {
 			sheet?: {
 				theme?: string
@@ -34,7 +35,8 @@
 	}>(), {
 		modelValue: undefined,
 		confirmTabChange: false,
-		confirmationMessage: false,
+		confirmationMessage: 'Voulez-vous vraiment changer d\'onglet ?',
+		lazy: false,
 		vuetifyOptions: () => ({}),
 	})
 
@@ -43,7 +45,11 @@
 		inheritAttrs: false,
 	})
 
-	const emit = defineEmits(['update:modelValue', 'cancel-navigation', 'confirm-tab-change'])
+	const emit = defineEmits<{
+		'update:modelValue': [value: number | string]
+		'cancel-navigation': []
+		'confirm-tab-change': [message: string, resolve: (confirmed: boolean) => void]
+	}>()
 
 	defineSlots<{
 		'tabs-prepend': () => unknown
@@ -55,6 +61,9 @@
 
 	const options = useCustomizableOptions(config, { vuetifyOptions: props.vuetifyOptions })
 
+	// Détecte automatiquement si le composant est utilisé pour la navigation
+	const isNavigationMode = computed(() => props.items.some(item => !!item.to || !!item.href))
+
 	// Safely get router through getCurrentInstance - it might not be available in all contexts
 	const instance = getCurrentInstance()
 	const router = instance?.appContext.config.globalProperties.$router as Router | null || null
@@ -64,6 +73,16 @@
 	// Élément actuellement focusé (pour la navigation clavier)
 	const focusedItemIndex = ref<number>(-1)
 
+	// Keep track of rendered panels for lazy loading
+	const renderedPanels = ref<Set<number>>(new Set([0]))
+
+	// Observer les changements pour le lazy loading
+	watch(activeItemIndex, (newIndex) => {
+		if (props.lazy && !renderedPanels.value.has(newIndex)) {
+			renderedPanels.value.add(newIndex)
+		}
+	}, { immediate: true })
+
 	// Émet un événement pour gérer la confirmation de changement d'onglet
 	async function handleTabChangeConfirmation(message: string): Promise<boolean> {
 		// Émettre l'événement avec le message et retourner une promesse
@@ -91,10 +110,8 @@
 		// Ne rien faire si l'élément est désactivé
 		if (item?.disabled) return
 
-		const hasHref = item && (item.href || item.to)
-
 		// Si la confirmation est activée, demander confirmation
-		if (props.confirmTabChange && hasHref) {
+		if (props.confirmTabChange) {
 			const confirmMessage = props.confirmationMessage
 			const confirmed = await handleTabChangeConfirmation(confirmMessage.toString())
 
@@ -103,7 +120,6 @@
 				emit('cancel-navigation')
 				return
 			}
-			// Si confirmé, laisser la navigation se faire naturellement (RouterLink ou href)
 		}
 
 		// Mettre à jour l'onglet actif
@@ -118,16 +134,23 @@
 	function handleKeyPress(event: KeyboardEvent, index: number) {
 		if (event.key === 'Enter' || event.key === ' ') {
 			const item = props.items[index] as TabItem | undefined
-			// Ne rien faire si l'élément est désactivé
 			if (item?.disabled) {
 				event.preventDefault()
 				return
 			}
-			// Don't prevent default for external links - let them navigate naturally
-			if (!item?.href) {
+
+			if (isNavigationMode.value) {
+				// En mode navigation, Enter active le lien nativement.
+				// Espace doit forcer le clic pour éviter le scroll
+				if (event.key === ' ') {
+					event.preventDefault()
+					document.getElementById(`tab-${index}`)?.click()
+				}
+			}
+			else {
 				event.preventDefault()
+				void setActiveItem(index)
 			}
-			void setActiveItem(index) // void pour ignorer la promesse
 		}
 	}
 
@@ -178,12 +201,14 @@
 		// Mettre à jour l'index de l'élément focusé et actif
 		focusedItemIndex.value = newIndex
 
-		// Focus sur le nouvel élément et l'activer
-		// Vérifier si l'élément existe et se focaliser sur le bouton
+		// Focus sur le nouvel élément
 		const tabButton = document.getElementById(`tab-${newIndex}`)
 		if (tabButton) {
 			tabButton.focus()
-			setActiveItem(newIndex)
+			// Activer automatiquement seulement en mode onglets locaux
+			if (!isNavigationMode.value) {
+				setActiveItem(newIndex)
+			}
 		}
 	}
 
@@ -192,8 +217,8 @@
 		// Configurer l'accessibilité
 		setupAccessibilityFeatures()
 
-		// Si les items ne sont pas un tableau ou vides, ne rien faire
-		if (!Array.isArray(props.items) || props.items.length === 0) return
+		// Si les items sont vides, ne rien faire
+		if (!props.items?.length) return
 
 		// Si modelValue est défini, utiliser cette valeur pour déterminer l'index actif
 		if (props.modelValue !== undefined) {
@@ -319,20 +344,17 @@
 		<div class="sy-tabs px-xl-0 px-4">
 			<slot name="tabs-prepend" />
 			<slot>
-				<nav
-					role="tablist"
-					aria-label="Onglets de navigation"
-					class="sy-tabs__nav"
-				>
-					<ul
+				<div class="sy-tabs__nav">
+					<component
+						:is="isNavigationMode ? 'nav' : 'div'"
 						ref="tablist"
+						:role="isNavigationMode ? 'navigation' : 'tablist'"
+						:aria-label="isNavigationMode ? 'Menu de navigation' : 'Onglets de navigation'"
 						class="sy-tabs__list"
 					>
-						<li
-							v-for="(item, index) in Array.isArray(items) ? items : []"
+						<template
+							v-for="(item, index) in items"
 							:key="item.label || index"
-							class="sy-tabs__item"
-							role="presentation"
 						>
 							<!-- Use RouterLink for internal navigation -->
 							<RouterLink
@@ -344,11 +366,12 @@
 									'sy-tabs__button--active': activeItemIndex === index,
 									'sy-tabs__button--disabled': item.disabled
 								}"
-								role="tab"
-								:aria-selected="activeItemIndex === index"
-								:aria-controls="`panel-${index}`"
+								:role="isNavigationMode ? undefined : 'tab'"
+								:aria-current="isNavigationMode && activeItemIndex === index ? 'page' : undefined"
+								:aria-selected="!isNavigationMode ? activeItemIndex === index : undefined"
+								:aria-controls="!isNavigationMode ? `panel-${index}` : undefined"
 								:aria-disabled="item.disabled || undefined"
-								:tabindex="item.disabled ? -1 : 0"
+								:tabindex="(activeItemIndex === index && !item.disabled) ? 0 : -1"
 								@click="item.disabled ? undefined : setActiveItem(index)"
 								@keydown="(event) => {
 									if (!item.disabled) {
@@ -381,11 +404,12 @@
 									'sy-tabs__button--active': activeItemIndex === index,
 									'sy-tabs__button--disabled': item.disabled
 								}"
-								role="tab"
-								:aria-selected="activeItemIndex === index"
-								:aria-controls="`panel-${index}`"
+								:role="isNavigationMode ? undefined : 'tab'"
+								:aria-current="isNavigationMode && activeItemIndex === index ? 'page' : undefined"
+								:aria-selected="!isNavigationMode ? activeItemIndex === index : undefined"
+								:aria-controls="!isNavigationMode ? `panel-${index}` : undefined"
 								:aria-disabled="item.disabled || undefined"
-								:tabindex="item.disabled ? -1 : 0"
+								:tabindex="(activeItemIndex === index && !item.disabled) ? 0 : -1"
 								@click="(event) => {
 									if (item.disabled) {
 										event.preventDefault();
@@ -425,9 +449,10 @@
 									'sy-tabs__button--active': activeItemIndex === index,
 									'sy-tabs__button--disabled': true
 								}"
-								role="tab"
-								:aria-selected="activeItemIndex === index"
-								:aria-controls="`panel-${index}`"
+								:role="isNavigationMode ? undefined : 'tab'"
+								:aria-current="isNavigationMode && activeItemIndex === index ? 'page' : undefined"
+								:aria-selected="!isNavigationMode ? activeItemIndex === index : undefined"
+								:aria-controls="!isNavigationMode ? `panel-${index}` : undefined"
 								aria-disabled="true"
 								tabindex="-1"
 								disabled
@@ -455,9 +480,10 @@
 									'sy-tabs__button--active': activeItemIndex === index,
 									'sy-tabs__button--disabled': true
 								}"
-								role="tab"
-								:aria-selected="activeItemIndex === index"
-								:aria-controls="`panel-${index}`"
+								:role="isNavigationMode ? undefined : 'tab'"
+								:aria-current="isNavigationMode && activeItemIndex === index ? 'page' : undefined"
+								:aria-selected="!isNavigationMode ? activeItemIndex === index : undefined"
+								:aria-controls="!isNavigationMode ? `panel-${index}` : undefined"
 								aria-disabled="true"
 								tabindex="-1"
 								disabled
@@ -485,11 +511,12 @@
 									'sy-tabs__button--active': activeItemIndex === index,
 									'sy-tabs__button--disabled': item.disabled
 								}"
-								role="tab"
-								:aria-selected="activeItemIndex === index"
-								:aria-controls="`panel-${index}`"
+								:role="isNavigationMode ? undefined : 'tab'"
+								:aria-current="isNavigationMode && activeItemIndex === index ? 'page' : undefined"
+								:aria-selected="!isNavigationMode ? activeItemIndex === index : undefined"
+								:aria-controls="!isNavigationMode ? `panel-${index}` : undefined"
 								:aria-disabled="item.disabled || undefined"
-								:tabindex="item.disabled ? -1 : 0"
+								:tabindex="(activeItemIndex === index && !item.disabled) ? 0 : -1"
 								:disabled="item.disabled"
 								@click="setActiveItem(index)"
 								@keydown="(event) => {
@@ -513,9 +540,9 @@
 									:is-active="activeItemIndex === index"
 								/>
 							</button>
-						</li>
-					</ul>
-				</nav>
+						</template>
+					</component>
+				</div>
 			</slot>
 			<slot name="tabs-append" />
 		</div>
@@ -524,27 +551,27 @@
 	<!-- Panneau de contenu des onglets -->
 	<div class="sy-tabs-panels">
 		<div
-			v-for="(item, index) in Array.isArray(items) ? items : []"
+			v-for="(item, index) in items"
 			:id="`panel-${index}`"
 			:key="`panel-${index}`"
 			class="sy-tabs-panel"
-			role="tabpanel"
-			:aria-labelledby="`tab-${index}`"
+			:role="!isNavigationMode ? 'tabpanel' : undefined"
+			:aria-labelledby="!isNavigationMode ? `tab-${index}` : undefined"
 			:hidden="activeItemIndex !== index"
 		>
-			<slot
-				:name="`panel-${index}`"
-				:active="activeItemIndex === index"
-			>
-				{{ item.content || '' }}
-			</slot>
+			<template v-if="!lazy || renderedPanels.has(index)">
+				<slot
+					:name="`panel-${index}`"
+					:active="activeItemIndex === index"
+				>
+					{{ item.content || '' }}
+				</slot>
+			</template>
 		</div>
 	</div>
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens.scss' as *;
-
 .sy-tabs {
 	display: flex;
 	align-items: center;
@@ -558,7 +585,6 @@
 .sy-tabs__list {
 	display: flex;
 	position: relative;
-	list-style-type: none;
 	padding: 0;
 	margin: 0;
 	width: 100%;
@@ -576,12 +602,6 @@
 	background-color: v-bind("options.tab['slider-color']");
 }
 
-.sy-tabs__item {
-	cursor: pointer;
-	display: flex;
-	align-items: stretch;
-}
-
 .sy-tabs__button {
 	display: flex;
 	align-items: center;