@cnamts/synapse 1.0.23 → 1.0.25

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

@@ -0,0 +1,88 @@
+// @vitest-environment jsdom
+
+import { describe, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { axe } from 'vitest-axe'
+import { assertNoA11yViolations } from '@tests/unit/accessibility/axeUtils'
+import SyTabs from '../SyTabs.vue'
+
+// Mock RouterLink component since SyTabs uses it
+const RouterLink = {
+	name: 'RouterLink',
+	props: ['to'],
+	template: '<a :href="to"><slot /></a>',
+}
+
+const testItems = [
+	{ label: 'Tab 1', value: 'tab1', content: 'Contenu du Tab 1' },
+	{ label: 'Tab 2', value: 'tab2', content: 'Contenu du Tab 2' },
+	{ label: 'Tab 3', value: 'tab3', content: 'Contenu du Tab 3', disabled: true },
+]
+
+describe('SyTabs – accessibility (axe)', () => {
+	it('has no obvious axe violations in default state', async () => {
+		const wrapper = mount(SyTabs, {
+			props: {
+				items: testItems,
+			},
+			global: {
+				components: { RouterLink },
+				mocks: {
+					$router: {},
+				},
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyTabs – default state', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations after switching tabs', async () => {
+		const wrapper = mount(SyTabs, {
+			props: {
+				items: testItems,
+			},
+			global: {
+				components: { RouterLink },
+				mocks: {
+					$router: {},
+				},
+			},
+		})
+
+		const tabs = wrapper.findAll('[role="tab"]')
+		if (tabs.length > 1) {
+			await tabs[1]?.trigger('click')
+		}
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyTabs – after switching tabs', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations in navigation mode', async () => {
+		const wrapper = mount(SyTabs, {
+			props: {
+				items: [
+					{ label: 'Nav 1', value: 'nav1', to: '/path-1' },
+					{ label: 'Nav 2', value: 'nav2', href: 'https://example.com' },
+					{ label: 'Nav 3', value: 'nav3', to: '/path-3', disabled: true },
+				],
+			},
+			global: {
+				components: { RouterLink },
+				mocks: {
+					$router: {},
+				},
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyTabs – navigation mode', {
+			ignoreRules: ['region'],
+		})
+	})
+})

package/src/components/Customs/SyTabs/tests/SyTabs.spec.ts

@@ -162,6 +162,51 @@ describe('SyTabs', () => {
 		})
 	})
 
+	// Tests du mode Navigation
+	describe('Mode Navigation', () => {
+		const navItems = [
+			{ label: 'Nav 1', value: 'nav1', to: '/path-1' },
+			{ label: 'Nav 2', value: 'nav2', href: 'https://example.com' },
+			{ label: 'Nav 3', value: 'nav3', to: '/path-3', disabled: true },
+		]
+
+		it('doit utiliser la sémantique de navigation', () => {
+			const wrapper = createWrapper({
+				props: {
+					...defaultMountOptions.props,
+					items: navItems,
+				},
+			})
+
+			// Vérifier les attributs du conteneur
+			const nav = wrapper.find('nav[role="navigation"]')
+			expect(nav.exists()).toBe(true)
+			expect(nav.attributes('aria-label')).toBeDefined()
+
+			// Vérifier les attributs des liens
+			const buttons = wrapper.findAll('.sy-tabs__button')
+			expect(buttons[0]!.attributes('role')).toBeUndefined()
+			expect(buttons[0]!.attributes('aria-current')).toBe('page')
+			expect(buttons[0]!.attributes('aria-selected')).toBeUndefined()
+			expect(buttons[0]!.attributes('aria-controls')).toBeUndefined()
+
+			expect(buttons[1]!.attributes('aria-current')).toBeUndefined()
+		})
+
+		it('ne doit pas générer les rôles tabpanel pour les panneaux', () => {
+			const wrapper = createWrapper({
+				props: {
+					...defaultMountOptions.props,
+					items: navItems,
+				},
+			})
+
+			const panel = wrapper.find('.sy-tabs-panel')
+			expect(panel.attributes('role')).toBeUndefined()
+			expect(panel.attributes('aria-labelledby')).toBeUndefined()
+		})
+	})
+
 	// Tests d'accessibilité et navigation clavier
 	describe('Accessibilité et navigation clavier', () => {
 		it('doit contenir les attributs ARIA appropriés', () => {
@@ -434,7 +479,7 @@ describe('SyTabs', () => {
 			expect(tabList.exists()).toBe(true)
 
 			// Vérifier que tous les items sont rendus
-			const tabItems = wrapper.findAll('.sy-tabs__item')
+			const tabItems = wrapper.findAll('.sy-tabs__button')
 			expect(tabItems.length).toBe(testItems.length)
 		})
 	})

package/src/components/Customs/SyTextField/SyTextField.mdx

@@ -62,5 +62,5 @@ Le champ adapte automatiquement son apparence selon son état :
 `}
 />
 
-<a href="/?path=/docs/guide-du-dev-guide-de-validation-des-formulaires--docs" className="action-link">Pour plus d'informations sur la validation, consultez le guide de validation des formulaires.</a>
+<a href="/?path=/docs/guide-du-dev-guide-des-formulaires-syform-validation-automatique--docs" className="action-link">Pour plus d'informations sur la validation, consultez le guide de validation des formulaires.</a>
 

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

@@ -4,6 +4,8 @@ import { VIcon } from 'vuetify/components'
 import { ref, watch } from 'vue'
 import { mdiAccountBox } from '@mdi/js'
 import { VBtn } from 'vuetify/components'
+import { getValidationDocumentation } from '@/composables/unifyValidation/documentationValidationProps'
+import { fn } from '@storybook/test'
 
 const meta = {
 	title: 'Composants/Formulaires/SyTextField',
@@ -15,7 +17,6 @@ const meta = {
 	],
 	parameters: {
 		layout: 'fullscreen',
-		controls: { exclude: ['modelValue', 'appendInnerIconColor', 'errorMessages', 'warningMessages', 'successMessages'] },
 		docs: {
 			description: {
 				component: `SyTextField`,
@@ -23,6 +24,7 @@ const meta = {
 		},
 	},
 	argTypes: {
+		...getValidationDocumentation('string'),
 		'modelValue': { control: 'text' },
 		'label': {
 			description: 'Texte affiché comme label du champ',
@@ -62,27 +64,6 @@ const meta = {
 			options: ['default', 'comfortable', 'compact'],
 			description: 'Densité du champ',
 		},
-		'customRules': {
-			description: 'Règles de validation personnalisées',
-			control: 'object',
-		},
-		'customWarningRules': {
-			description: 'Règles d\'avertissement personnalisées',
-			control: 'object',
-		},
-		'showSuccessMessages': {
-			description: 'Afficher les messages de succès',
-			control: 'boolean',
-		},
-		'isValidateOnBlur': {
-			description: 'Vérifie la validité lors de la perte de focus',
-			control: 'boolean',
-			default: true,
-		},
-		'disableErrorHandling': {
-			control: 'boolean',
-			description: 'Désactive complètement la validation des règles et l\'affichage des erreurs',
-		},
 		'isActive': {
 			description: 'Force l\'état actif du champ (label flottant et styles visuels)',
 			control: 'boolean',
@@ -107,31 +88,16 @@ const meta = {
 			options: ['top', 'bottom', 'start', 'end'],
 			default: 'top',
 		},
-		'required': {
-			description: 'Indique si le champ est obligatoire',
-			control: 'boolean',
-			default: false,
-		},
 		'displayAsterisk': {
 			description: 'Affiche un astérisque à côté du label',
 			control: 'boolean',
 			default: false,
 		},
-		'disabled': {
-			description: 'Désactive le champ',
-			control: 'boolean',
-			default: false,
-		},
 		'disableClickButton': {
 			description: 'Désactive le click sur les icônes append et prepend',
 			control: 'boolean',
 			default: true,
 		},
-		'readonly': {
-			description: 'Rend le champ en lecture seule',
-			control: 'boolean',
-			default: false,
-		},
 		'baseColor': {
 			description: 'Couleur de base du champ (par défaut hérite de color)',
 			control: 'text',
@@ -193,10 +159,6 @@ const meta = {
 			description: 'Affiche un indicateur de chargement',
 			control: 'boolean',
 		},
-		'maxErrors': {
-			description: 'Nombre maximum de messages d\'erreur à afficher',
-			control: { type: 'text' },
-		},
 		'maxWidth': {
 			description: 'Largeur maximale du champ',
 			control: { type: 'text' },
@@ -279,17 +241,9 @@ const meta = {
 			description: 'Largeur du champ',
 			control: { type: 'text' },
 		},
-		'validation': {
-			description: 'Valide le champ avec la valeur donnée',
-			type: '(value: string | number | null) => void',
-		},
 		'validateOnSubmit': {
-			description: 'Valide le champ lors de la soumission du formulaire',
-			type: '() => void',
-		},
-		'checkErrorOnBlur': {
-			description: 'Vérifie les erreurs lors de la perte de focus',
-			type: '() => void',
+			description: 'Valide le champ avec la valeur donnée',
+			type: '(value: string | number | null) => Promise<void>',
 		},
 		'append': {
 			description: 'Slot pour ajouter du contenu à droite du champ',
@@ -331,6 +285,24 @@ const meta = {
 				category: 'slots',
 			},
 		},
+		'showDivider': {
+			description: 'Affiche une ligne de séparation entre le champ et les icônes prepend-inner et append-inner',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+				category: 'props',
+			},
+		},
+	},
+	args: {
+		'onUpdate:modelValue': fn(),
+		'onKeydown': fn(),
+		'onClear': fn(),
+		'onPrependIconClick': fn(),
+		'onAppendIconClick': fn(),
+		'onFocus': fn(),
+		'onBlur': fn(),
 	},
 } as Meta<typeof SyTextField>
 
@@ -1165,9 +1137,6 @@ export const WithTooltips: Story = {
 		`,
 	}),
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		docs: {
 			description: {
 				story: 'Exemple de champ avec des tooltips d\'information. Les icônes d\'information apparaissent automatiquement lorsque les props prependTooltip et/ou appendTooltip sont renseignées. La position des tooltips peut être contrôlée avec la prop tooltipLocation.',
@@ -1217,8 +1186,14 @@ export const ValidateOnBlur: Story = {
 			const value = ref(args.modelValue)
 			const fieldRef = ref()
 
-			function handleSubmit() {
-				const isValid = fieldRef.value?.validateOnSubmit()
+			watch(() => args.modelValue, (newValue) => {
+				if (value.value !== newValue) {
+					value.value = newValue
+				}
+			})
+
+			async function handleSubmit() {
+				const isValid = await fieldRef.value?.validateOnSubmit()
 				alert(isValid ? 'Formulaire valide !' : 'Formulaire invalide, veuillez corriger les erreurs.')
 			}
 
@@ -1231,9 +1206,8 @@ export const ValidateOnBlur: Story = {
 				</p>
 				<SyTextField
 					ref="fieldRef"
-					v-model="value"
 					v-bind="args"
-					@update:model-value="args.modelValue = $event"
+					v-model="value"
 				/>
 				<div class="mt-4">
 					<VBtn type="submit" color="primary">
@@ -1288,8 +1262,8 @@ import { SyTextField } from '@cnamts/synapse'
 const value = ref('')
 const fieldRef = ref()
 
-function handleSubmit() {
-	const isValid = fieldRef.value?.validateOnSubmit()
+async function handleSubmit() {
+	const isValid = await fieldRef.value?.validateOnSubmit()
 	if (!isValid) {
 		// Gérer l'erreur
 		return
@@ -1336,19 +1310,23 @@ export const FormValidation: Story = {
 				},
 			}]
 
-			const handleSubmit = () => {
+			const handleSubmit = async () => {
 				const fields = [
 					{ ref: nomField, name: 'Nom' },
 					{ ref: prenomField, name: 'Prénom' },
 					{ ref: ageField, name: 'Âge' },
 				]
 
-				const invalidFields = fields
-					.filter(({ ref }) => !ref.value?.validateOnSubmit())
-					.map(({ name }) => name)
+				const invalidFields: string[] = []
+				for (const { ref, name } of fields) {
+					const isValid = await ref.value?.validateOnSubmit()
+					if (!isValid) {
+						invalidFields.push(name)
+					}
+				}
 
 				if (invalidFields.length > 0) {
-					alert(`Les champs suivants sont invalides: ${invalidFields.join('\\n')}`)
+					alert(`Les champs suivants sont invalides: ${invalidFields.join(', ')}`)
 				}
 				else {
 					alert('Formulaire soumis avec succès !')
@@ -1561,9 +1539,13 @@ const nomField = ref()
 					{ ref: ageField, name: 'Âge' },
 				]
 
-				const invalidFields = fields
-					.filter(({ ref }) => !ref.value?.validateOnSubmit())
-					.map(({ name }) => name)
+				const invalidFields: string[] = []
+				for (const { ref, name } of fields) {
+					const isValid = await ref.value?.validateOnSubmit()
+					if (!isValid) {
+						invalidFields.push(name)
+					}
+				}
 
 				if (invalidFields.length > 0) {
 					alert('Les champs suivants sont invalides: ' + invalidFields.join('\\n'))