@cnamts/synapse 1.0.22 → 1.0.24

package/src/components/SyHeading/SyHeading.a11y.test.ts

@@ -0,0 +1,149 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { axe } from 'vitest-axe'
+import { assertNoA11yViolations } from '@tests/unit/accessibility/axeUtils'
+import SyHeading from './SyHeading.vue'
+
+describe('SyHeading - Accessibility', () => {
+	it('should not have any accessibility violations with default props', async () => {
+		const wrapper = mount(SyHeading, {
+			slots: {
+				default: 'Default heading',
+			},
+		})
+
+		const results = await axe(wrapper.element, {
+			rules: {
+				region: { enabled: false },
+			},
+		})
+		assertNoA11yViolations(results, 'SyHeading - default props')
+	})
+
+	it('should not have accessibility violations with all heading levels', async () => {
+		const levels = [1, 2, 3, 4, 5, 6] as const
+
+		for (const level of levels) {
+			const wrapper = mount(SyHeading, {
+				props: {
+					level,
+				},
+				slots: {
+					default: `Heading level ${level}`,
+				},
+			})
+
+			const results = await axe(wrapper.element, {
+				rules: {
+					region: { enabled: false },
+				},
+			})
+			assertNoA11yViolations(results, `SyHeading - level ${level}`)
+		}
+	})
+
+	it('should not have accessibility violations with complex content', async () => {
+		const wrapper = mount(SyHeading, {
+			props: {
+				level: 3,
+			},
+			slots: {
+				default: '<span>Heading with <em>emphasis</em> and <strong>strong text</strong></span>',
+			},
+		})
+
+		const results = await axe(wrapper.element, {
+			rules: {
+				region: { enabled: false },
+			},
+		})
+		assertNoA11yViolations(results, 'SyHeading - complex content')
+	})
+
+	it('should not have accessibility violations with very long content', async () => {
+		const longContent = 'This is a very long heading text that might wrap across multiple lines and should still be accessible to screen readers and other assistive technologies without any issues.'
+
+		const wrapper = mount(SyHeading, {
+			props: {
+				level: 2,
+			},
+			slots: {
+				default: longContent,
+			},
+		})
+
+		const results = await axe(wrapper.element, {
+			rules: {
+				region: { enabled: false },
+			},
+		})
+		assertNoA11yViolations(results, 'SyHeading - long content')
+	})
+
+	it('should not have accessibility violations with special characters', async () => {
+		const wrapper = mount(SyHeading, {
+			props: {
+				level: 1,
+			},
+			slots: {
+				default: 'Heading with special chars: éàüßñ & symbols @#$%',
+			},
+		})
+
+		const results = await axe(wrapper.element, {
+			rules: {
+				region: { enabled: false },
+			},
+		})
+		assertNoA11yViolations(results, 'SyHeading - special characters')
+	})
+
+	it('should use semantic heading elements correctly', async () => {
+		const levels = [1, 2, 3, 4, 5, 6] as const
+
+		for (const level of levels) {
+			const wrapper = mount(SyHeading, {
+				props: {
+					level,
+				},
+				slots: {
+					default: `Semantic heading level ${level}`,
+				},
+			})
+
+			// Verify the correct semantic heading element is used
+			expect(wrapper.find(`h${level}`).exists()).toBe(true)
+
+			// Verify no accessibility violations
+			const results = await axe(wrapper.element, {
+				rules: {
+					region: { enabled: false },
+				},
+			})
+			assertNoA11yViolations(results, `SyHeading - semantic level ${level}`)
+		}
+	})
+
+	it('should maintain heading hierarchy for screen readers', async () => {
+		const wrapper = mount(SyHeading, {
+			props: {
+				level: 2,
+			},
+			slots: {
+				default: 'Important section heading',
+			},
+		})
+
+		// Verify the heading is properly structured for screen readers
+		const heading = wrapper.find('h2')
+		expect(heading.exists()).toBe(true)
+		expect(heading.text()).toBe('Important section heading')
+
+		const results = await axe(wrapper.element, {
+			rules: {
+				region: { enabled: false },
+			},
+		})
+		assertNoA11yViolations(results, 'SyHeading - hierarchy')
+	})
+})

package/src/components/SyHeading/SyHeading.test.ts

@@ -0,0 +1,115 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { axe } from 'vitest-axe'
+import { assertNoA11yViolations } from '@tests/unit/accessibility/axeUtils'
+import SyHeading from './SyHeading.vue'
+
+describe('SyHeading', () => {
+	it('renders default heading level 2', () => {
+		const wrapper = mount(SyHeading, {
+			slots: {
+				default: 'Test heading',
+			},
+		})
+
+		expect(wrapper.find('h2').exists()).toBe(true)
+		expect(wrapper.text()).toBe('Test heading')
+		expect(wrapper.classes()).toContain('sy-heading')
+	})
+
+	it('renders custom heading levels', () => {
+		const levels = [1, 2, 3, 4, 5, 6] as const
+
+		levels.forEach((level) => {
+			const wrapper = mount(SyHeading, {
+				props: {
+					level,
+				},
+				slots: {
+					default: `Heading level ${level}`,
+				},
+			})
+
+			expect(wrapper.find(`h${level}`).exists()).toBe(true)
+			expect(wrapper.text()).toBe(`Heading level ${level}`)
+		})
+	})
+
+	it('applies correct CSS class', () => {
+		const wrapper = mount(SyHeading, {
+			slots: {
+				default: 'Test heading',
+			},
+		})
+
+		expect(wrapper.classes()).toContain('sy-heading')
+	})
+
+	it('renders complex content', () => {
+		const wrapper = mount(SyHeading, {
+			slots: {
+				default: '<span>Complex <strong>content</strong></span>',
+			},
+		})
+
+		expect(wrapper.text()).toBe('Complex content')
+	})
+
+	it('should not have any accessibility violations', async () => {
+		const wrapper = mount(SyHeading, {
+			props: {
+				level: 1,
+			},
+			slots: {
+				default: 'Main heading',
+			},
+		})
+
+		const results = await axe(wrapper.element, {
+			rules: {
+				region: { enabled: false },
+			},
+		})
+		assertNoA11yViolations(results, 'SyHeading - main heading')
+	})
+
+	it('should not have accessibility violations for all heading levels', async () => {
+		const levels = [1, 2, 3, 4, 5, 6] as const
+
+		for (const level of levels) {
+			const wrapper = mount(SyHeading, {
+				props: {
+					level,
+				},
+				slots: {
+					default: `Heading level ${level}`,
+				},
+			})
+
+			const results = await axe(wrapper.element, {
+				rules: {
+					region: { enabled: false },
+				},
+			})
+			assertNoA11yViolations(results, `SyHeading - level ${level}`)
+		}
+	})
+
+	it('should not have accessibility violations with complex content', async () => {
+		const wrapper = mount(SyHeading, {
+			props: {
+				level: 2,
+			},
+			slots: {
+				default: '<span>Heading with <em>emphasis</em> and <strong>strong text</strong></span>',
+			},
+		})
+
+		const results = await axe(wrapper.element, {
+			rules: {
+				region: { enabled: false },
+			},
+		})
+		assertNoA11yViolations(results, 'SyHeading - complex content')
+	})
+})

package/src/components/SyHeading/SyHeading.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
 	import { computed } from 'vue'
 
-	const props = defineProps<{
-		level: 1 | 2 | 3 | 4 | 5 | 6
-	}>()
+	const props = withDefaults(defineProps<{
+		level?: 1 | 2 | 3 | 4 | 5 | 6
+	}>(), {
+		level: 2,
+	})
 
 	const tag = computed(() => `h${props.level}`)
 </script>

package/src/components/SyTextArea/SyTextArea.stories.ts

@@ -9,11 +9,11 @@ const meta = {
 	parameters: {
 		docs: {
 			controls: {
-				exclude: ['rules', 'validateOn', 'update:modelValue', 'onUpdate:modelValue'],
+				exclude: ['validateOn', 'update:modelValue', 'onUpdate:modelValue'],
 			},
 		},
 		controls: {
-			exclude: ['rules', 'validateOn', 'onUpdate:modelValue'],
+			exclude: ['validateOn', 'onUpdate:modelValue'],
 		},
 	},
 	argTypes: {
@@ -89,6 +89,142 @@ const meta = {
 			table: {
 				type: { summary: 'boolean' },
 				defaultValue: { summary: 'false' },
+				category: 'validation',
+			},
+		},
+		rules: {
+			control: { type: 'object' },
+			description: 'Règles de validation Vuetify (mode useVuetifyValidation=true)',
+			table: {
+				type: { summary: 'Array<(value: string) => boolean | string>' },
+				defaultValue: { summary: '[]' },
+				category: 'validation',
+			},
+		},
+		useVuetifyValidation: {
+			control: { type: 'boolean' },
+			description: 'Active la validation Vuetify (sinon validation unifiée customRules)',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+				category: 'validation',
+			},
+		},
+		isValidateOnBlur: {
+			control: { type: 'boolean' },
+			description: 'Déclenche la validation au blur (sinon à la saisie)',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'true' },
+				category: 'validation',
+			},
+		},
+		disableErrorHandling: {
+			control: { type: 'boolean' },
+			description: 'Désactive la gestion des messages d\'erreur/alerte/succès',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+				category: 'validation',
+			},
+		},
+		showSuccessMessages: {
+			control: { type: 'boolean' },
+			description: 'Affiche les messages de succès',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'true' },
+				category: 'validation',
+			},
+		},
+		customRules: {
+			control: { type: 'object' },
+			description: 'Règles d\'erreur pour le mode validation unifiée',
+			table: {
+				type: { summary: 'ValidationRule[]' },
+				defaultValue: { summary: '[]' },
+				category: 'validation',
+			},
+		},
+		customWarningRules: {
+			control: { type: 'object' },
+			description: 'Règles d\'alerte pour le mode validation unifiée',
+			table: {
+				type: { summary: 'ValidationRule[]' },
+				defaultValue: { summary: '[]' },
+				category: 'validation',
+			},
+		},
+		customSuccessRules: {
+			control: { type: 'object' },
+			description: 'Règles de succès pour le mode validation unifiée',
+			table: {
+				type: { summary: 'ValidationRule[]' },
+				defaultValue: { summary: '[]' },
+				category: 'validation',
+			},
+		},
+		errorMessages: {
+			control: { type: 'object' },
+			description: 'Messages d\'erreur externes ajoutés au résultat de validation',
+			table: {
+				type: { summary: 'string[] | null' },
+				defaultValue: { summary: 'null' },
+				category: 'validation',
+			},
+		},
+		warningMessages: {
+			control: { type: 'object' },
+			description: 'Messages d\'alerte externes ajoutés au résultat de validation',
+			table: {
+				type: { summary: 'string[] | null' },
+				defaultValue: { summary: 'null' },
+				category: 'validation',
+			},
+		},
+		successMessages: {
+			control: { type: 'object' },
+			description: 'Messages de succès externes ajoutés au résultat de validation',
+			table: {
+				type: { summary: 'string[] | null' },
+				defaultValue: { summary: 'null' },
+				category: 'validation',
+			},
+		},
+		hasError: {
+			control: { type: 'boolean' },
+			description: 'Force l\'état erreur',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+				category: 'validation',
+			},
+		},
+		hasWarning: {
+			control: { type: 'boolean' },
+			description: 'Force l\'état alerte',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+				category: 'validation',
+			},
+		},
+		hasSuccess: {
+			control: { type: 'boolean' },
+			description: 'Force l\'état succès',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+				category: 'validation',
+			},
+		},
+		maxErrors: {
+			control: { type: 'number' },
+			description: 'Nombre maximum de messages d\'erreur affichés',
+			table: {
+				type: { summary: 'number' },
+				defaultValue: { summary: '1' },
+				category: 'validation',
 			},
 		},
 	},

package/src/components/SyTextArea/SyTextArea.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 	import { computed, ref, toRef, watch } from 'vue'
 	import type { VTextarea } from 'vuetify/components'
-	import { locales } from './locales'
 	import useTextActions from './useTextActions'
-
-	type Rule = (value: string) => boolean | string
+	import { useDefaultValidationRules, type TextareaRule as Rule } from './useDefaultValidationRules'
+	import { useValidation, validationPropsDefaults, type FieldValidationProps } from '@/composables/unifyValidation/useValidation'
+	import type { ValidationRule as SyValidationRule } from '@/composables/validation/useValidation'
 
 	const props = withDefaults(defineProps<{
 		modelValue?: string
@@ -20,12 +20,11 @@
 		color?: string
 		label: string
 		bgColor?: string
-	}>(), {
+	} & FieldValidationProps>(), {
 		modelValue: '',
 		trim: false,
 		replaceTabs: undefined,
 		rules: () => [],
-		required: false,
 		maxLines: undefined,
 		autoWrap: undefined,
 		normalize: false,
@@ -33,6 +32,7 @@
 		variant: 'outlined',
 		color: 'primary',
 		bgColor: 'white',
+		...validationPropsDefaults,
 	})
 
 	const emits = defineEmits<{
@@ -41,6 +41,7 @@
 
 	const textAreaRef = ref<VTextarea | null>(null)
 	const hasInteracted = ref(false)
+	const focused = ref(false)
 
 	const internalValue = ref(props.modelValue)
 	watch(
@@ -87,25 +88,48 @@
 		internalValue.value = value
 	}
 
-	const internalRules = computed<Rule[]>(() => {
-		const internalRules: Rule[] = []
+	const { vuetifyRules: defaultVuetifyRules, customRules: defaultCustomRules } = useDefaultValidationRules({
+		required: toRef(props, 'required'),
+		maxLines: toRef(props, 'maxLines'),
+		hasInteracted,
+	})
 
-		internalRules.push((value: string) => {
-			if (props.required && hasInteracted.value && !value) {
-				return locales.required
-			}
-			return true
-		})
+	const mergedCustomRules = computed<SyValidationRule[]>(() => [
+		...defaultCustomRules.value,
+		...(props.customRules || []),
+	])
 
-		internalRules.push((value: string) => {
-			const lines = value.split('\n').length
-			if (lines > (props.maxLines as number)) {
-				return locales.maxLines(props.maxLines as number)
-			}
-			return true
-		})
+	const mergedVuetifyRules = computed<Rule[]>(() => [
+		...(props.rules || []),
+		...defaultVuetifyRules.value,
+	])
+
+	const { validate, errors, warnings, successes, hasError, hasWarning, hasSuccess } = useValidation({
+		modelValue: internalValue,
+		readonly: toRef(props, 'readonly'),
+		disabled: toRef(props, 'disabled'),
+		required: toRef(props, 'required'),
+		isValidateOnBlur: toRef(props, 'isValidateOnBlur'),
+		showSuccessMessages: toRef(props, 'showSuccessMessages'),
+		disableErrorHandling: toRef(props, 'disableErrorHandling'),
+		useVuetifyValidation: toRef(props, 'useVuetifyValidation'),
+		label: toRef(props, 'label'),
+		rules: mergedVuetifyRules,
+		customRules: mergedCustomRules,
+		customWarningRules: toRef(props, 'customWarningRules'),
+		customSuccessRules: toRef(props, 'customSuccessRules'),
+		errorMessages: toRef(props, 'errorMessages'),
+		warningMessages: toRef(props, 'warningMessages'),
+		successMessages: toRef(props, 'successMessages'),
+		hasErrorProp: toRef(props, 'hasError'),
+		hasWarningProp: toRef(props, 'hasWarning'),
+		hasSuccessProp: toRef(props, 'hasSuccess'),
+		maxErrors: toRef(props, 'maxErrors'),
+		focused,
+	})
 
-		return internalRules
+	defineExpose({
+		validateOnSubmit: validate,
 	})
 
 </script>
@@ -117,13 +141,19 @@
 		:variant="variant"
 		:color="color"
 		:bg-color="props.bgColor"
+		:error="hasError"
+		:error-messages="errors"
+		:messages="hasError ? errors : (hasWarning ? warnings : (hasSuccess && props.showSuccessMessages ? successes : []))"
+		:max-errors="props.maxErrors"
+		:disabled="props.disabled"
+		:readonly="props.readonly"
 		:validate-on="validateOn"
-		:rules="[...props.rules, ...internalRules]"
+		:rules="props.useVuetifyValidation ? mergedVuetifyRules : undefined"
 		:label="label"
 		:aria-label="label"
 		:required="required"
 		:aria-required="required ? 'true' : undefined"
 		@update:model-value="execValueChange"
-		@update:focused="(e: boolean) => !e ? execBlurChange() : null"
+		@update:focused="(e: boolean) => { focused = e; if (!e) execBlurChange() }"
 	/>
 </template>

package/src/components/SyTextArea/accessibilite/Accessibility.mdx

@@ -1,10 +1,82 @@
-import { Meta, Story } from '@storybook/addon-docs';
-import * as SyTextArea from '../SyTextArea.stories';
-import '@/stories/styles/shared.css';
+import { Meta, Primary } from '@storybook/blocks';
+import * as Stories from '../SyTextArea.stories.ts';
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
+import {
+	AccessibilityGuideLayout,
+	CriteriaSection,
+	CriteriaCard,
+	DemoSection,
+	BestPracticesSection,
+	ResourcesSection,
+} from '@/stories/accessibility/AccessibilityGuideLayout.mdx';
 
-<Meta of={SyTextArea} />
+<Meta of={Stories} />
 
-<div className="header">
-  <h1>Accessibilité</h1>
-  <p>Cette page sera bientôt disponible</p>
-</div>
+<AccessibilityGuideLayout
+	componentName="SyTextArea"
+	iconSrc={AccessibilityIcon}
+	apgHref="https://www.w3.org/WAI/ARIA/apg/patterns/textinput/"
+>
+
+	<CriteriaSection>
+		<CriteriaCard icon="🔍" title="Structure sémantique et attributs">
+			<ul>
+				<li><strong>Élément textarea natif</strong> : Utilisation de <code>&lt;textarea&gt;</code> via VTextarea pour une sémantique correcte adaptée aux textes multilignes.</li>
+				<li><strong>Labels explicites</strong> : Gestion automatique du <code>aria-label</code> basé sur la prop <code>label</code>. L'attribut <code>aria-required</code> est ajouté si le champ est requis.</li>
+				<li><strong>Association avec les messages</strong> : Implémentation native de <code>aria-describedby</code> par Vuetify pour lier le champ à ses messages d'erreur.</li>
+				<li><strong>Validation accessible</strong> : Les messages d'erreur sont automatiquement associés au textarea via les attributs ARIA.</li>
+			</ul>
+		</CriteriaCard>
+
+		<CriteriaCard icon="⌨️" title="Navigation et interaction clavier">
+			<ul>
+				<li><strong>Focus natif</strong> : Le textarea est naturellement focusable via <kbd>Tab</kbd> et permet la navigation dans le contenu avec les flèches.</li>
+				<li><strong>Saisie multiligne</strong> : Support natif des sauts de ligne avec <kbd>Entrée</kbd> et navigation entre les lignes avec les flèches directionnelles.</li>
+				<li><strong>Défilement automatique</strong> : Le composant gère automatiquement le défilement lorsque le contenu dépasse la hauteur visible.</li>
+				<li><strong>Indicateur de focus</strong> : Styles de focus visibles conformes aux standards d'accessibilité.</li>
+			</ul>
+		</CriteriaCard>
+
+		<CriteriaCard icon="🎨" title="Styles et états visuels">
+			<ul>
+				<li><strong>Contrastes garantis</strong> : Couleurs distinctes pour les états erreur et validation respectant les critères WCAG.</li>
+				<li><strong>États cohérents</strong> : Changements visuels clairs entre les états normal, erreur et focus.</li>
+				<li><strong>Zone de saisie claire</strong> : Délimitation visuelle évidente de la zone de saisie multiligne.</li>
+				<li><strong>Styles personnalisables</strong> : Support des variantes (outlined, filled) et couleurs personnalisées tout en maintenant l'accessibilité.</li>
+			</ul>
+		</CriteriaCard>
+
+		<CriteriaCard icon="📝" title="Validation et contraintes">
+			<ul>
+				<li><strong>Champ requis</strong> : Validation automatique avec message "Ce champ est requis" lorsque <code>required</code> est true.</li>
+				<li><strong>Limite de lignes</strong> : Validation du nombre maximum de lignes avec message d'erreur spécifique via la prop <code>maxLines</code>.</li>
+				<li><strong>Règles personnalisées</strong> : Support des règles de validation personnalisées avec messages d'erreur accessibles.</li>
+				<li><strong>Validation au blur</strong> : Déclenchement de la validation lors de la perte de focus pour une expérience utilisateur optimale.</li>
+			</ul>
+		</CriteriaCard>
+	</CriteriaSection>
+
+	<DemoSection componentName="SyTextArea">
+		<Primary />
+	</DemoSection>
+
+	<BestPracticesSection>
+		<ul>
+			<li><strong>Labels descriptifs</strong> : Utilisez toujours un <code>label</code> clair qui indique la nature du contenu attendu (ex: "Description", "Commentaires").</li>
+			<li><strong>Limites appropriées</strong> : Définissez une <code>maxLines</code> raisonnable pour guider l'utilisateur sans trop contraindre la saisie.</li>
+			<li><strong>Messages d'erreur utiles</strong> : Complétez les règles de validation avec des messages spécifiques qui aident à corriger la saisie.</li>
+			<li><strong>Évitez les placeholders comme seuls indicateurs</strong> : Le placeholder disparaît lors de la saisie, il doit compléter le label mais pas le remplacer.</li>
+			<li><strong>Traitement du texte</strong> : Utilisez les options de traitement (<code>trim</code>, <code>normalize</code>, <code>replaceTabs</code>) pour améliorer la qualité des données saisies.</li>
+			<li><strong>Saisie confortable</strong> : Assurez-vous que la hauteur du textarea est suffisante pour une saisie confortable du contenu attendu.</li>
+		</ul>
+	</BestPracticesSection>
+
+	<ResourcesSection>
+		<ul>
+			<li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/textinput/" target="_blank" rel="noopener noreferrer">Guide des pratiques WAI-ARIA : Champs de texte</a></li>
+			<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#11.9" target="_blank" rel="noopener noreferrer">RGAA : Champs de formulaire</a></li>
+			<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H91.html" target="_blank" rel="noopener noreferrer">WCAG Technique H91 : Utiliser les éléments HTML sémantiques</a></li>
+			<li><a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/textarea" target="_blank" rel="noopener noreferrer">MDN : Élément textarea</a></li>
+		</ul>
+	</ResourcesSection>
+</AccessibilityGuideLayout>