@cnamts/synapse 1.0.23 → 1.0.25

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

@@ -5,7 +5,7 @@ import { fn } from '@storybook/test'
 
 // Interface pour typer correctement le composant SyCheckbox avec sa méthode validateOnSubmit
 interface SyCheckboxInstance {
-	validateOnSubmit: () => boolean
+	validateOnSubmit: () => Promise<boolean>
 }
 
 const meta = {
@@ -171,9 +171,6 @@ export const Indeterminate: Story = {
 		template: `<SyCheckbox v-model="checked" :indeterminate="indeterminate" v-bind="args" label="Case à cocher indéterminée" />`,
 	}),
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -207,9 +204,6 @@ Cette case à cocher est dans un état indéterminé, généralement utilisé lo
 
 export const WithControlsIds: Story = {
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -702,11 +696,11 @@ const rules = [
   },
 ]
 
-const validateForm = () => {
+const validateForm = async (): Promise<void> => {
   if (!checkbox.value || !checkbox2.value) return
   hasError.value = true
-  const isValid = checkbox.value.validateOnSubmit()
-  const isValid2 = checkbox2.value.validateOnSubmit()
+  const isValid = await checkbox.value.validateOnSubmit()
+  const isValid2 = await checkbox2.value.validateOnSubmit()
   if (isValid && isValid2) {
     formSubmitted.value = true
     hasError.value = false
@@ -735,18 +729,18 @@ Cette case à cocher utilise des règles de validation personnalisées et valide
 			const hasError = ref(false)
 
 			// Revalider quand les valeurs changent
-			watch([checked, checked2], () => {
+			watch([checked, checked2], async () => {
 				if (hasError.value && checkbox.value && checkbox2.value) {
-					checkbox.value.validateOnSubmit()
-					checkbox2.value.validateOnSubmit()
+					await checkbox.value.validateOnSubmit()
+					await checkbox2.value.validateOnSubmit()
 				}
 			})
 
-			const validateForm = () => {
+			const validateForm = async (): Promise<void> => {
 				if (!checkbox.value || !checkbox2.value) return
 				hasError.value = true
-				const isValid = checkbox.value.validateOnSubmit()
-				const isValid2 = checkbox2.value.validateOnSubmit()
+				const isValid = await checkbox.value.validateOnSubmit()
+				const isValid2 = await checkbox2.value.validateOnSubmit()
 				if (isValid && isValid2) {
 					formSubmitted.value = true
 					hasError.value = false

package/src/components/Customs/SyCheckbox/SyCheckbox.vue

@@ -36,6 +36,7 @@
 			falseValue?: unknown
 			controlsIds?: string[]
 			displayAsterisk?: boolean
+			decorative?: boolean
 		}>(),
 		{
 			modelValue: false,
@@ -66,11 +67,15 @@
 			falseValue: () => false,
 			controlsIds: () => [],
 			displayAsterisk: false,
+			decorative: false,
 		},
 	)
 
 	const emit = defineEmits(['update:modelValue', 'update:indeterminate', 'change'])
 
+	import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
+	import { mdiCheckboxBlankOutline, mdiCheckboxMarked, mdiMinusBox } from '@mdi/js'
+
 	const checkboxRef = ref<VCheckbox | null>(null)
 
 	const internalIndeterminate = ref(props.indeterminate)
@@ -102,9 +107,6 @@
 	const isSubmitted = ref(false)
 
 	const validation = useValidation({
-		customRules: props.customRules,
-		warningRules: props.customWarningRules,
-		successRules: props.customSuccessRules,
 		showSuccessMessages: props.showSuccessMessages,
 		fieldIdentifier: props.label,
 		disableErrorHandling: props.disableErrorHandling,
@@ -135,7 +137,7 @@
 		: [],
 	)
 
-	const validateField = (value: boolean | null) => {
+	const validateField = async (value: boolean | null) => {
 		// Si en lecture seule ou si la valeur est null et non requise, pas de validation
 		if (props.readonly) {
 			validation.clearValidation()
@@ -157,7 +159,7 @@
 		}
 
 		// Validation standard
-		const result = validation.validateField(
+		const result = await validation.validateField(
 			value,
 			[...defaultRules.value, ...props.customRules],
 			props.customWarningRules,
@@ -175,11 +177,11 @@
 		validateField(model.value)
 	}
 
-	watch(model, (newValue) => {
+	watch(model, async (newValue) => {
 		if (!props.isValidateOnBlur) {
 			// Si le formulaire a été soumis et que la valeur change, on valide à nouveau
 			if (isSubmitted.value) {
-				const isValid = validateField(newValue)
+				const isValid = await validateField(newValue)
 				if (isValid) {
 					// La validation a réussi, effacer les erreurs
 					validation.clearValidation()
@@ -187,7 +189,7 @@
 			}
 			else {
 				// Comportement normal (hors soumission)
-				const isValid = validateField(newValue)
+				const isValid = await validateField(newValue)
 				// Si la validation réussit, s'assurer que les erreurs sont effacées
 				if (isValid && validation.hasError.value) {
 					validation.clearValidation()
@@ -206,7 +208,7 @@
 
 	const ariaChecked = computed(() => {
 		if (internalIndeterminate.value) return 'mixed'
-		return model.value ? 'true' : undefined
+		return model.value ? 'true' : 'false'
 	})
 
 	const labelColor = computed(() => {
@@ -243,9 +245,17 @@
 	const removeAriaAttributes = () => {
 		nextTick(() => {
 			if (checkboxRef.value) {
-				const checkboxInput = checkboxRef.value.$el.querySelector('input[type="checkbox"][aria-disabled="false"]')
+				const checkboxInput = checkboxRef.value.$el?.querySelector('input[type="checkbox"]')
 				if (checkboxInput) {
-					checkboxInput.removeAttribute('aria-disabled')
+					// Supprimer aria-disabled="false" car il est redondant
+					if (checkboxInput.getAttribute('aria-disabled') === 'false') {
+						checkboxInput.removeAttribute('aria-disabled')
+					}
+					// Supprimer aria-checked natif de Vuetify pour éviter les conflits
+					// Notre composant gère aria-checked au niveau du wrapper VCheckbox
+					if (checkboxInput.hasAttribute('aria-checked')) {
+						checkboxInput.removeAttribute('aria-checked')
+					}
 				}
 			}
 		})
@@ -303,7 +313,31 @@
 
 <template>
 	<div>
+		<!-- Rendu purement visuel/décoratif, ignoré par les lecteurs d'écran -->
+		<div
+			v-if="props.decorative"
+			class="d-flex align-center pointer-events-none sy-checkbox-decorative"
+			aria-hidden="true"
+		>
+			<SyIcon
+				:icon="internalIndeterminate ? mdiMinusBox : (model ? mdiCheckboxMarked : mdiCheckboxBlankOutline)"
+				:color="(model || internalIndeterminate) ? props.color : '#727273'"
+				:class="{'text-disabled': props.disabled}"
+				:decorative="true"
+				class="mr-2"
+			/>
+			<slot name="label">
+				<span
+					v-if="generatedLabel"
+					:class="{'text-disabled': props.disabled}"
+					:style="{ color: labelColor }"
+				>{{ generatedLabel }}</span>
+			</slot>
+		</div>
+
+		<!-- Rendu interactif standard -->
 		<VCheckbox
+			v-else
 			:id="props.id"
 			ref="checkboxRef"
 			v-model="model"

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

@@ -79,6 +79,23 @@ import '@/stories/styles/shared.css';
     </div>
   </div>
 
+  <div className="aria-management-section">
+    <h2>Gestion des attributs ARIA</h2>
+    <p>
+      Pour garantir la conformité ARIA, le composant SyCheckbox gère activement les conflits potentiels 
+      avec l'implémentation native de Vuetify :
+    </p>
+    <ul>
+      <li><strong>Suppression des attributs conflictuels</strong> : Les attributs ARIA natifs de Vuetify sont automatiquement supprimés de l'élément input pour éviter les doublons</li>
+      <li><strong>Gestion centralisée</strong> : L'attribut <code>aria-checked</code> est géré au niveau du composant SyCheckbox et non au niveau de l'input natif</li>
+      <li><strong>Conformité garantie</strong> : Cette approche garantit que l'attribut <code>aria-checked</code> reflète toujours l'état réel du composant (true, false ou mixed)</li>
+    </ul>
+    <p>
+      Cette gestion préventive évite les erreurs d'audit d'accessibilité qui pourraient survenir 
+      lorsque plusieurs attributs ARIA contradictoires sont présents sur le même élément.
+    </p>
+  </div>
+
   <div className="tri-state-section">
     <h2>Fonctionnalité tri-état (indéterminé)</h2>
     <p>
@@ -126,7 +143,19 @@ import '@/stories/styles/shared.css';
     <p>
       Cette relation est établie via la propriété <code>controlsIds</code> qui liste les identifiants des cases à cocher enfants.
     </p>
-</div>
+  </div>
+
+  <div className="decorative-mode-section">
+    <h2>Mode Décoratif (Imbrication)</h2>
+    <p>
+      Le composant SyCheckbox dispose d'une propriété <code>decorative</code> permettant de l'utiliser de manière purement visuelle. 
+      Dans ce mode, la case à cocher n'inclut pas d'élément <code>&lt;input type="checkbox"&gt;</code> natif et est masquée aux lecteurs d'écran via <code>aria-hidden="true"</code>.
+    </p>
+    <p>
+      Ce mode est <strong>indispensable pour respecter l'accessibilité</strong> lorsque la case à cocher doit être imbriquée dans un autre composant interactif (par exemple, une option de <code>listbox</code> ou une ligne cliquable de tableau). 
+      Les règles WAI-ARIA interdisent l'imbrication d'éléments interactifs. Le composant parent assume alors la responsabilité d'annoncer l'état de sélection (ex: via <code>aria-selected</code> ou <code>aria-checked</code> au niveau de la ligne).
+    </p>
+  </div>
 
   <div className="best-practices">
     <h2>Bonnes pratiques d'utilisation</h2>
@@ -190,8 +219,10 @@ import '@/stories/styles/shared.css';
 
   .criteria-section h2,
   .demo-section h2,
+  .aria-management-section h2,
   .tri-state-section h2,
   .parent-child-section h2,
+  .decorative-mode-section h2,
   .best-practices h2,
   .resources-section h2 {
     border-bottom: 2px solid #eaecef;
@@ -243,8 +274,26 @@ import '@/stories/styles/shared.css';
     margin-bottom: 40px;
   }
 
+  .aria-management-section {
+    background-color: #fff9e6;
+    padding: 20px;
+    border-radius: 8px;
+    margin-bottom: 30px;
+    border-left: 5px solid #ff9800;
+  }
+
+  .aria-management-section ul {
+    padding-left: 20px;
+  }
+
+  .aria-management-section li {
+    margin-bottom: 8px;
+    line-height: 1.5;
+  }
+
   .tri-state-section,
-  .parent-child-section {
+  .parent-child-section,
+  .decorative-mode-section {
     background-color: #f0f7ff;
     padding: 20px;
     border-radius: 8px;
@@ -252,7 +301,8 @@ import '@/stories/styles/shared.css';
   }
 
   .tri-state-section p,
-  .parent-child-section p {
+  .parent-child-section p,
+  .decorative-mode-section p {
     line-height: 1.6;
   }
 

package/src/components/Customs/SyCheckbox/tests/SyCheckbox.a11y.spec.ts

@@ -6,21 +6,153 @@ import { axe } from 'vitest-axe'
 import { assertNoA11yViolations } from '@tests/unit/accessibility/axeUtils'
 import SyCheckbox from '../SyCheckbox.vue'
 
-// Scénario d’accessibilité : case à cocher requise avec libellé.
+// Scénarios d'accessibilité : cases à cocher avec différents états et configurations.
 
 describe('SyCheckbox – accessibility (axe)', () => {
 	it('has no obvious axe violations for required checkbox with label', async () => {
 		const wrapper = mount(SyCheckbox, {
 			props: {
-				label: 'J’accepte les conditions générales',
+				label: 'J\'accepte les conditions générales',
 				modelValue: false,
 				required: true,
 			},
 		})
 
+		// Attendre que removeAriaAttributes soit exécuté
+		await wrapper.vm.$nextTick()
+		await wrapper.vm.$nextTick()
+
 		const results = await axe(wrapper.element as HTMLElement)
 		assertNoA11yViolations(results, 'SyCheckbox – required labelled checkbox', {
 			ignoreRules: ['region'],
 		})
 	})
+
+	it('has no axe violations for indeterminate checkbox (aria-checked="mixed")', async () => {
+		const wrapper = mount(SyCheckbox, {
+			props: {
+				label: 'Sélection partielle',
+				modelValue: false,
+				indeterminate: true,
+				controlsIds: ['child-1', 'child-2', 'child-3'],
+			},
+		})
+
+		// Attendre que removeAriaAttributes soit exécuté
+		await wrapper.vm.$nextTick()
+		await wrapper.vm.$nextTick()
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyCheckbox – indeterminate checkbox', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no axe violations for checked checkbox with aria-checked="true"', async () => {
+		const wrapper = mount(SyCheckbox, {
+			props: {
+				label: 'Option activée',
+				modelValue: true,
+				required: false,
+			},
+		})
+
+		// Attendre que removeAriaAttributes soit exécuté
+		await wrapper.vm.$nextTick()
+		await wrapper.vm.$nextTick()
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyCheckbox – checked checkbox', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no axe violations for unchecked checkbox with aria-checked="false"', async () => {
+		const wrapper = mount(SyCheckbox, {
+			props: {
+				label: 'Option désactivée',
+				modelValue: false,
+				required: false,
+			},
+		})
+
+		// Attendre que removeAriaAttributes soit exécuté
+		await wrapper.vm.$nextTick()
+		await wrapper.vm.$nextTick()
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyCheckbox – unchecked checkbox', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no axe violations for disabled checkbox', async () => {
+		const wrapper = mount(SyCheckbox, {
+			props: {
+				label: 'Option désactivée',
+				modelValue: true,
+				disabled: true,
+			},
+		})
+
+		// Attendre que removeAriaAttributes soit exécuté
+		await wrapper.vm.$nextTick()
+		await wrapper.vm.$nextTick()
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyCheckbox – disabled checkbox', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no axe violations for checkbox with custom aria-label', async () => {
+		const wrapper = mount(SyCheckbox, {
+			props: {
+				ariaLabel: 'Case à cocher personnalisée',
+				modelValue: false,
+			},
+		})
+
+		// Attendre que removeAriaAttributes soit exécuté
+		await wrapper.vm.$nextTick()
+		await wrapper.vm.$nextTick()
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyCheckbox – checkbox with aria-label', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no axe violations for checkbox with aria-labelledby', async () => {
+		// Créer un conteneur pour le test
+		const container = document.createElement('div')
+		document.body.appendChild(container)
+
+		// Créer un élément avec l'ID référencé
+		const labelElement = document.createElement('div')
+		labelElement.id = 'custom-label-id'
+		labelElement.textContent = 'Libellé personnalisé'
+		container.appendChild(labelElement)
+
+		const wrapper = mount(SyCheckbox, {
+			props: {
+				ariaLabelledby: 'custom-label-id',
+				modelValue: false,
+			},
+			attachTo: container,
+		})
+
+		// Attendre que removeAriaAttributes soit exécuté
+		await wrapper.vm.$nextTick()
+		await wrapper.vm.$nextTick()
+
+		const results = await axe(container as HTMLElement)
+		assertNoA11yViolations(results, 'SyCheckbox – checkbox with aria-labelledby', {
+			ignoreRules: ['region'],
+		})
+
+		// Nettoyer
+		wrapper.unmount()
+		document.body.removeChild(container)
+	})
 })

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

@@ -5,6 +5,7 @@ import SyTextField from '@/components/Customs/SyTextField/SyTextField.vue'
 import SyCheckbox from '@/components/Customs/SyCheckbox/SyCheckbox.vue'
 import SySelect from '@/components/Customs/Selects/SySelect/SySelect.vue'
 import { VBtn } from 'vuetify/components'
+import { fn } from '@storybook/test'
 
 export default {
 	title: 'Composants/Formulaires/SyForm',
@@ -42,6 +43,10 @@ export default {
 type Story = StoryObj<typeof SyForm>
 
 export const Basic: Story = {
+	args: {
+		onReset: fn(),
+		onSubmit: fn(),
+	},
 	render: args => ({
 		components: { SyForm, SyTextField, VBtn },
 		setup() {
@@ -126,6 +131,11 @@ const onSubmit = (event: { isValid: boolean }) => {
 }
 
 export const CustomValidation: Story = {
+	args: {
+		validateOnSubmit: false,
+		onReset: fn(),
+		onSubmit: fn(),
+	},
 	render: args => ({
 		components: { SyForm, SyTextField, VBtn },
 		setup() {
@@ -142,7 +152,7 @@ export const CustomValidation: Story = {
 
 			const confirmPasswordRules = computed(() => [
 				{ type: 'custom', options: {
-					validate: value => value === password.value || 'Les mots de passe ne correspondent pas',
+					validate: (value: string) => value === password.value,
 					message: 'Les mots de passe ne correspondent pas',
 				} },
 				{ type: 'required', options: { message: 'Veuillez confirmer le mot de passe' } },
@@ -150,7 +160,7 @@ export const CustomValidation: Story = {
 
 			const submitForm = async (e: { isValid: boolean }) => {
 				if (e.isValid) {
-					alert('Inscription réussie !')
+					alert('Inscription réussie ! (validate on submit = ' + args.validateOnSubmit + ')')
 				}
 				else {
 					alert('Formulaire invalide, veuillez corriger les erreurs.')
@@ -171,7 +181,7 @@ export const CustomValidation: Story = {
 		},
 		template: `
       <div>
-        <SyForm ref="form" v-bind="args" @submit="submitForm" :validate-on-submit="false">
+        <SyForm ref="form" v-bind="args" @submit="submitForm" :validate-on-submit="args.validateOnSubmit">
           <div class="d-flex flex-column gap-4">
             <SyTextField v-model="username" label="Nom d'utilisateur" required class="mb-2" />
             <SyTextField v-model="password" label="Mot de passe" type="password" :custom-rules="passwordRules" class="mb-2" />
@@ -238,7 +248,7 @@ const passwordRules = computed(() => [
 
 const confirmPasswordRules = computed(() => [
 	{ type: 'custom', options: {
-		validate: value => value === password.value || 'Les mots de passe ne correspondent pas',
+		validate: (value: string) => value === password.value,
 		message: 'Les mots de passe ne correspondent pas',
 	} },
 	{ type: 'required', options: { message: 'Veuillez confirmer le mot de passe' } },
@@ -267,6 +277,10 @@ const validateManually = () => {
 }
 
 export const MixedFields: Story = {
+	args: {
+		onReset: fn(),
+		onSubmit: fn(),
+	},
 	render: args => ({
 		components: { SyForm, SyTextField, SySelect, SyCheckbox, VBtn },
 		setup() {
@@ -372,6 +386,9 @@ export const MixedFields: Story = {
 				if (event.isValid) {
 					alert('Formulaire valide ! Données: ' + JSON.stringify(formData.value))
 				}
+				else {
+					alert('Formulaire invalide, veuillez corriger les erreurs.')
+				}
 			}
 		</script>
 `,
@@ -381,6 +398,10 @@ export const MixedFields: Story = {
 }
 
 export const Reset: Story = {
+	args: {
+		onReset: fn(),
+		onSubmit: fn(),
+	},
 	render: args => ({
 		components: { SyForm, SyTextField, VBtn },
 		setup() {
@@ -408,7 +429,12 @@ export const Reset: Story = {
 				form.value?.clearValidation()
 			}
 
-			return { name, email, emailRules, form, submitForm, clearAll, args }
+			function onFormReset() {
+				alert('Formulaire réinitialisé !')
+				args.onReset?.()
+			}
+
+			return { name, email, emailRules, form, submitForm, clearAll, onFormReset, args }
 		},
 		template: `
       <SyForm ref="form" v-bind="args" @submit="submitForm" @reset="onFormReset">

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/SyRadioGroup/SyRadioGroup.vue

@@ -82,9 +82,6 @@
 	const isSubmitted = ref(false)
 
 	const validation = useValidation({
-		customRules: props.customRules,
-		warningRules: props.customWarningRules,
-		successRules: props.customSuccessRules,
 		showSuccessMessages: props.showSuccessMessages,
 		fieldIdentifier: props.label,
 		disableErrorHandling: props.disableErrorHandling,
@@ -108,7 +105,7 @@
 			: [],
 	)
 
-	const validateField = (value: PropertyKey | null) => {
+	const validateField = async (value: PropertyKey | null) => {
 		// const stringValue = value != null ? String(value) : null
 
 		if (props.readonly) {
@@ -121,7 +118,7 @@
 			return true
 		}
 
-		const result = validation.validateField(
+		const result = await validation.validateField(
 			value,
 			[...defaultRules.value, ...props.customRules],
 			props.customWarningRules,
@@ -130,9 +127,9 @@
 		return !result.hasError
 	}
 
-	const validateOnSubmit = () => {
+	const validateOnSubmit = async () => {
 		isSubmitted.value = true
-		return validateField(model.value)
+		return await validateField(model.value)
 	}
 
 	const checkErrorOnBlur = () => {

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