@cnamts/synapse 1.0.21 → 1.0.23

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

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+	import { computed } from 'vue'
+
+	const props = withDefaults(defineProps<{
+		level?: 1 | 2 | 3 | 4 | 5 | 6
+	}>(), {
+		level: 2,
+	})
+
+	const tag = computed(() => `h${props.level}`)
+</script>
+
+<template>
+	<component
+		:is="tag"
+		class="sy-heading"
+	>
+		<slot />
+	</component>
+</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>

package/src/components/SyTextArea/tests/SyTextArea.a11y.spec.ts

@@ -0,0 +1,151 @@
+// @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 SyTextArea from '../SyTextArea.vue'
+
+describe('SyTextArea – accessibility (axe)', () => {
+	it('has no obvious axe violations with default props', async () => {
+		const wrapper = mount(SyTextArea, {
+			props: {
+				label: 'Description',
+			},
+			modelValue: '',
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyTextArea - default props', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations with value', async () => {
+		const wrapper = mount(SyTextArea, {
+			props: {
+				label: 'Description',
+			},
+			modelValue: 'Ceci est une description',
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyTextArea - with value', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations with required field', async () => {
+		const wrapper = mount(SyTextArea, {
+			props: {
+				label: 'Description',
+				required: true,
+			},
+			modelValue: '',
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyTextArea - required field', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations with error messages', async () => {
+		const wrapper = mount(SyTextArea, {
+			props: {
+				label: 'Description',
+				required: true,
+			},
+			modelValue: '',
+		})
+
+		// Trigger validation
+		await wrapper.find('textarea').trigger('blur')
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyTextArea - with errors', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations with max lines constraint', async () => {
+		const wrapper = mount(SyTextArea, {
+			props: {
+				label: 'Description',
+				maxLines: 3,
+			},
+			modelValue: 'Ligne 1\nLigne 2\nLigne 3\nLigne 4',
+		})
+
+		// Trigger validation
+		await wrapper.find('textarea').trigger('blur')
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyTextArea - with max lines violation', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations with custom rules', async () => {
+		const wrapper = mount(SyTextArea, {
+			props: {
+				label: 'Description',
+				rules: [(value: string) => value.length >= 10 || 'Minimum 10 caractères'],
+			},
+			modelValue: 'Court',
+		})
+
+		// Trigger validation
+		await wrapper.find('textarea').trigger('blur')
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyTextArea - with custom rules', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations with different variant', async () => {
+		const wrapper = mount(SyTextArea, {
+			props: {
+				label: 'Description',
+				variant: 'filled',
+			},
+			modelValue: 'Texte de test',
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyTextArea - filled variant', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations with custom color', async () => {
+		const wrapper = mount(SyTextArea, {
+			props: {
+				label: 'Description',
+				color: 'secondary',
+			},
+			modelValue: 'Texte de test',
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyTextArea - custom color', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations with background color', async () => {
+		const wrapper = mount(SyTextArea, {
+			props: {
+				label: 'Description',
+				bgColor: 'grey-lighten-2',
+			},
+			modelValue: 'Texte de test',
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyTextArea - background color', {
+			ignoreRules: ['region'],
+		})
+	})
+})