@cnamts/synapse 1.0.23 → 1.0.25

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;

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

@@ -32,10 +32,11 @@ import '@/stories/styles/shared.css';
         <h3>Structure sémantique</h3>
       </div>
       <ul>
-        <li><strong>Rôles ARIA appropriés</strong> : <code>role="tablist"</code> pour la liste d'onglets, <code>role="tab"</code> pour chaque onglet et <code>role="tabpanel"</code> pour chaque panneau de contenu</li>
-        <li><strong>État des onglets</strong> : <code>aria-selected</code> avec les valeurs <code>true</code> ou <code>false</code> pour indiquer l'onglet actif</li>
-        <li><strong>Relations entre éléments</strong> : <code>aria-controls</code> pour associer chaque onglet à son panneau, et <code>aria-labelledby</code> pour associer chaque panneau à son onglet</li>
-        <li><strong>Navigation structurée</strong> : Utilisation d'éléments <code>&lt;nav&gt;</code> et <code>&lt;ul&gt;</code> pour créer une structure de navigation sémantique et accessible</li>
+        <li><strong>Rôles et sémantique adaptatifs</strong> : Utilisation dynamique de <code>role="tablist"</code> / <code>role="tab"</code> / <code>role="tabpanel"</code> (mode Onglets) ou de la balise native <code>&lt;nav role="navigation"&gt;</code> (mode Navigation)</li>
+        <li><strong>État de l'élément actif</strong> : Utilisation de <code>aria-selected="true"</code> (mode Onglets) ou <code>aria-current="page"</code> (mode Navigation)</li>
+        <li><strong>Relations programmatiques</strong> : <code>aria-controls</code> et <code>aria-labelledby</code> lient les onglets à leurs panneaux respectifs (uniquement en mode Onglets)</li>
+        <li><strong>Nommage accessible</strong> : Le conteneur principal possède un <code>aria-label</code> dynamique (<em>"Onglets de navigation"</em> ou <em>"Menu de navigation"</em> selon le mode)</li>
+        <li><strong>Structure HTML aplatie</strong> : Les éléments interactifs (boutons ou liens) sont contenus directement dans leur parent sémantique (<code>&lt;div&gt;</code> ou <code>&lt;nav&gt;</code>) sans balises de liste (<code>&lt;ul&gt;</code>) superflues, optimisant l'arbre d'accessibilité</li>
       </ul>
     </div>
     
@@ -60,10 +61,11 @@ import '@/stories/styles/shared.css';
         <h3>États et retours d'information</h3>
       </div>
       <ul>
-        <li><strong>État de sélection</strong> : <code>aria-selected="true"</code> indique l'onglet actif aux technologies d'assistance</li>
-        <li><strong>Visibilité des panneaux</strong> : L'attribut <code>hidden</code> sur les panneaux inactifs les rend invisibles aux lecteurs d'écran</li>
-        <li><strong>Indication visuelle</strong> : Styles distinctifs pour l'onglet actif (couleur, bordure inférieure)</li>
-        <li><strong>Association explicite</strong> : Chaque panneau de contenu est clairement associé à son onglet via <code>aria-labelledby</code></li>
+        <li><strong>État de sélection</strong> : <code>aria-selected="true"</code> ou <code>aria-current="page"</code> indique l'élément actif aux technologies d'assistance</li>
+        <li><strong>Éléments désactivés</strong> : Utilisation de l'attribut natif <code>disabled</code> (pour les boutons) ou <code>aria-disabled="true"</code> (pour les liens), qui sont par ailleurs exclus de la navigation au clavier (flèches)</li>
+        <li><strong>Visibilité des panneaux</strong> : L'attribut HTML <code>hidden</code> sur les panneaux inactifs les retire correctement de l'arbre d'accessibilité</li>
+        <li><strong>Indication visuelle</strong> : Styles distinctifs pour l'onglet actif (couleur de texte, barre de soulignement animée)</li>
+        <li><strong>Focus visible</strong> : Un <code>outline</code> de 3px est appliqué lors de la navigation au clavier (<code>:focus-visible</code>)</li>
       </ul>
     </div>
     
@@ -81,25 +83,52 @@ import '@/stories/styles/shared.css';
     </div>
   </div>
 
+  <div className="adaptive-mode-section">
+    <h2>Mode adaptatif (Onglets vs Navigation)</h2>
+    <div className="section-description">
+      Le composant SyTabs détecte automatiquement son contexte d'utilisation et adapte sa structure sémantique en conséquence :
+    </div>
+    
+    <div className="criteria-card">
+      <div className="criteria-header">
+        <span className="criteria-icon">📑</span>
+        <h3>Mode Onglets (par défaut)</h3>
+      </div>
+      <p>Utilisé pour permuter du contenu local sans changer d'URL.</p>
+      <ul>
+        <li>Utilise le modèle WAI-ARIA complet pour les onglets (<code>role="tablist"</code>, <code>role="tab"</code>, <code>role="tabpanel"</code>).</li>
+        <li>L'activation de l'onglet par les flèches du clavier est <strong>automatique</strong>.</li>
+      </ul>
+    </div>
+    
+    <div className="criteria-card">
+      <div className="criteria-header">
+        <span className="criteria-icon">🧭</span>
+        <h3>Mode Navigation (Routing)</h3>
+      </div>
+      <p>Activé automatiquement si au moins un onglet utilise les attributs <code>to</code> ou <code>href</code>.</p>
+      <ul>
+        <li>Utilise une sémantique de navigation standard (<code>&lt;nav role="navigation"&gt;</code>) au lieu des rôles ARIA d'onglets pour éviter la confusion des utilisateurs de lecteurs d'écran.</li>
+        <li>Indique l'élément actif via <code>aria-current="page"</code> au lieu de <code>aria-selected</code>.</li>
+        <li>L'activation au clavier est <strong>manuelle</strong> : les flèches déplacent le focus sans déclencher le lien, la touche Entrée valide le choix.</li>
+        <li>Les rôles <code>tabpanel</code> ne sont pas générés car ce concept n'est pas applicable à la navigation entre différentes pages.</li>
+      </ul>
+    </div>
+  </div>
+
   <div className="automatic-section">
-    <h2>Activation automatique des onglets</h2>
+    <h2>Activation automatique (Mode Onglets)</h2>
     <div className="section-description">
-      Le composant SyTabs implémente un modèle d'activation automatique, ce qui signifie que :
+      En <strong>Mode Onglets</strong>, le composant implémente un modèle d'activation automatique :
     </div>
     <ul>
-      <li>La sélection d'un nouvel onglet via la navigation par flèches active immédiatement cet onglet</li>
-      <li>Le contenu du panneau associé est affiché sans nécessiter une action supplémentaire</li>
-      <li>Le focus reste sur l'onglet activé pour permettre de continuer la navigation par clavier</li>
+      <li>La sélection d'un nouvel onglet via la navigation par flèches (Gauche/Droite) active immédiatement cet onglet</li>
+      <li>Le contenu du panneau associé est affiché sans nécessiter une action supplémentaire (Entrée/Espace)</li>
+      <li>Le focus reste sur l'onglet activé pour permettre de continuer la navigation au clavier</li>
     </ul>
     <div className="section-description">
-      Cette implémentation suit les meilleures pratiques WAI-ARIA pour les interfaces à onglets :
+      <em>Note : En Mode Navigation (Routing), l'activation est manuelle (déplacement du focus avec les flèches, puis validation avec Entrée) pour éviter les redirections inattendues.</em>
     </div>
-    <ul>
-      <li>Réduction du nombre d'actions nécessaires pour naviguer entre les contenus</li>
-      <li>Mise à jour dynamique de l'attribut <code>aria-selected</code> pour informer des changements</li>
-      <li>Gestion efficace du focus pour éviter les sauts d'interface désorientants</li>
-      <li>Mise à jour de l'affichage des panneaux avec l'attribut <code>hidden</code> pour les panneaux inactifs</li>
-    </ul>
   </div>
 
   <div className="demo-section">
@@ -112,9 +141,9 @@ import '@/stories/styles/shared.css';
   </div>
 
   <div className="tab-panel-section">
-    <h2>Relation onglet-panneau</h2>
+    <h2>Relation onglet-panneau (Mode Onglets)</h2>
     <div className="section-description">
-      Le composant SyTabs établit une relation claire entre chaque onglet et son panneau de contenu associé :
+      Lorsqu'il n'est pas utilisé pour la navigation de pages, le composant établit une relation programmatique stricte :
     </div>
     <ul>
       <li>Chaque onglet (<code>role="tab"</code>) est associé à un panneau de contenu via <code>aria-controls</code></li>
@@ -132,6 +161,13 @@ import '@/stories/styles/shared.css';
     </div>
   </div>
 
+    <div className="warning-section">
+    <h2>Note d'audit (Faux positif Tanaguru)</h2>
+    <p>
+      Un faux positif (éléments interactifs non atteignables en navigation clavier) est remonté par Tanaguru. En réalité, le composant gère intentionnellement le focus via un <em>roving tabindex</em> dans ses deux modes (Onglets et Navigation) pour une meilleure ergonomie : seul l'élément actif est dans l'ordre de tabulation classique (Tab), les autres éléments étant atteignables via les touches fléchées. Une vérification manuelle au clavier confirme que tous les éléments sont parfaitement accessibles et activables, conformément aux comportements attendus.
+    </p>
+  </div>
+
   <div className="best-practices">
     <h2>Bonnes pratiques d'utilisation</h2>
     <ul>
@@ -195,11 +231,15 @@ import '@/stories/styles/shared.css';
   }
 
   .criteria-section h2,
+  .adaptive-mode-section h2,
   .demo-section h2,
   .tri-state-section h2,
   .parent-child-section h2,
   .best-practices h2,
-  .resources-section h2 {
+  .automatic-section h2,
+  .tab-panel-section h2,
+  .resources-section h2,
+  .warning-section h2 {
     border-bottom: 2px solid #eaecef;
     padding-bottom: 10px;
     margin-top: 30px;
@@ -207,6 +247,12 @@ import '@/stories/styles/shared.css';
     color: #0077cc;
   }
 
+  .warning-section h2 {
+    color: #856404;
+    border-bottom-color: #ffeeba;
+    margin-top: 0;
+  }
+
   .criteria-card {
     background-color: #fff;
     border-radius: 8px;
@@ -257,6 +303,20 @@ import '@/stories/styles/shared.css';
     margin-bottom: 30px;
   }
 
+  .warning-section {
+    background-color: #fff3cd;
+    border-left: 5px solid #ffeeba;
+    padding: 20px;
+    border-radius: 8px;
+    margin-bottom: 40px;
+  }
+
+  .warning-section p {
+    color: #856404;
+    line-height: 1.6;
+    margin: 0;
+  }
+
   .tri-state-section p,
   .parent-child-section p {
     line-height: 1.6;