@cnamts/synapse 1.0.22 → 1.0.23

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/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'],
+		})
+	})
+})

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

@@ -0,0 +1,126 @@
+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 ToolbarContainer from '../ToolbarContainer.vue'
+
+// Scénario d'accessibilité : barre d'outils avec des boutons de navigation
+// Le composant doit avoir un rôle toolbar et gérer la navigation au clavier
+describe('ToolbarContainer – accessibility (axe)', () => {
+	it('should not have any axe violations with default buttons', async () => {
+		const wrapper = mount(ToolbarContainer, {
+			slots: {
+				default: `
+					<VBtn>Action 1</VBtn>
+					<VBtn>Action 2</VBtn>
+					<VBtn>Action 3</VBtn>
+				`,
+			},
+			attachTo: document.body,
+		})
+
+		const results = await axe(wrapper.element)
+		assertNoA11yViolations(results, 'ToolbarContainer with default buttons')
+	})
+
+	it('should not have any axe violations with custom content', async () => {
+		const wrapper = mount(ToolbarContainer, {
+			slots: {
+				default: `
+					<div>
+						<VBtn icon="mdi-plus" aria-label="Ajouter"></VBtn>
+						<VBtn icon="mdi-minus" aria-label="Retirer"></VBtn>
+						<button aria-label="Action personnalisée">Custom Button</button>
+					</div>
+				`,
+			},
+			attachTo: document.body,
+		})
+
+		const results = await axe(wrapper.element)
+		assertNoA11yViolations(results, 'ToolbarContainer with custom content')
+	})
+
+	it('should not have any axe violations with disabled buttons', async () => {
+		const wrapper = mount(ToolbarContainer, {
+			slots: {
+				default: `
+					<VBtn>Action 1</VBtn>
+					<VBtn disabled>Action 2</VBtn>
+					<VBtn>Action 3</VBtn>
+				`,
+			},
+			attachTo: document.body,
+		})
+
+		const results = await axe(wrapper.element)
+		assertNoA11yViolations(results, 'ToolbarContainer with disabled buttons')
+	})
+
+	it('should not have any axe violations with links and buttons', async () => {
+		const wrapper = mount(ToolbarContainer, {
+			slots: {
+				default: `
+					<VBtn>Action Button</VBtn>
+					<a href="#home" aria-label="Accueil">Home Link</a>
+					<input type="text" placeholder="Rechercher" aria-label="Recherche" />
+				`,
+			},
+			attachTo: document.body,
+		})
+
+		const results = await axe(wrapper.element)
+		assertNoA11yViolations(results, 'ToolbarContainer with mixed focusable elements')
+	})
+
+	it('should have proper toolbar role and attributes', async () => {
+		const wrapper = mount(ToolbarContainer, {
+			slots: {
+				default: `
+					<VBtn>Action 1</VBtn>
+					<VBtn>Action 2</VBtn>
+				`,
+			},
+			attachTo: document.body,
+		})
+
+		const toolbar = wrapper.find('.sy-toolbar')
+
+		expect(toolbar.exists()).toBe(true)
+		expect(toolbar.attributes('role')).toBe('toolbar')
+		expect(toolbar.attributes('tabindex')).toBe('0')
+
+		const results = await axe(wrapper.element)
+		assertNoA11yViolations(results, 'ToolbarContainer role and attributes')
+	})
+
+	it('should handle keyboard navigation accessibility', async () => {
+		const wrapper = mount(ToolbarContainer, {
+			slots: {
+				default: `
+					<VBtn>Action 1</VBtn>
+					<VBtn>Action 2</VBtn>
+					<VBtn>Action 3</VBtn>
+				`,
+			},
+			attachTo: document.body,
+		})
+
+		const toolbar = wrapper.find('.sy-toolbar')
+		const buttons = wrapper.findAll('button.v-btn')
+
+		// Vérifier que les boutons ont le tabindex approprié
+		expect(buttons[0]?.attributes('tabindex')).toBe('-1')
+		expect(buttons[1]?.attributes('tabindex')).toBe('-1')
+		expect(buttons[2]?.attributes('tabindex')).toBe('-1')
+
+		// Simuler le focus sur la toolbar
+		await toolbar.trigger('focus')
+
+		// Après le focus, le premier bouton devrait être focusable
+		expect(buttons[0]?.attributes('tabindex')).toBe('0')
+
+		const results = await axe(wrapper.element)
+		assertNoA11yViolations(results, 'ToolbarContainer keyboard navigation')
+	})
+})

package/src/components/UploadWorkflow/tests/__snapshots__/UploadWorkflow.spec.ts.snap

@@ -123,7 +123,7 @@ exports[`UploadWorkflow > render the upload list 1`] = `
               data-no-activator=""
             >
               <span>
-                Importer
+                Importer le fichier
               </span>
             </span>
             <!---->
@@ -239,7 +239,7 @@ exports[`UploadWorkflow > render the upload list 1`] = `
               data-no-activator=""
             >
               <span>
-                Importer
+                Importer le fichier
               </span>
             </span>
             <!---->

package/src/components/index.ts

@@ -61,6 +61,7 @@ export { default as SyTextField } from './Customs/SyTextField/SyTextField.vue'
 export { default as DiacriticPicker } from './DiacriticPicker/DiacriticPicker.vue'
 export { default as FileUpload } from './FileUpload/FileUpload.vue'
 export { default as LunarCalendar } from './LunarCalendar/LunarCalendar.vue'
+export { default as MonthPicker } from './MonthPicker/MonthPicker.vue'
 export { default as NirField } from './NirField/NirField.vue'
 export * from './NirField/nirValidation'
 export { default as PasswordField } from './PasswordField/PasswordField.vue'

package/src/composables/useFormFieldErrorHandling.ts

@@ -73,11 +73,14 @@ export const useFormFieldErrorHandling = (
 
 	const validateField = (value: unknown) => {
 		if (props.disableErrorHandling) {
+			validation.clearValidation()
 			return true
 		}
 
-		// Ne pas valider si la valeur est null/undefined et non requise
-		if (value == null && !props.required) {
+		const isEmptyArray = Array.isArray(value) && value.length === 0
+
+		// Ne pas valider si la valeur est vide et non requise
+		if ((value == null || isEmptyArray) && !props.required) {
 			validation.clearValidation()
 			return true
 		}
@@ -108,6 +111,12 @@ export const useFormFieldErrorHandling = (
 		}
 	})
 
+	watch(() => props.disableErrorHandling, (isDisabled) => {
+		if (isDisabled) {
+			validation.clearValidation()
+		}
+	})
+
 	watch([() => props.required, () => props.label], () => {
 		// Re-valider quand les règles changent
 		if (modelValue.value != null) {

package/src/designTokens/tokens/cnam/cnamContextual.ts

@@ -5,7 +5,12 @@ export const cnamContextualTokens = {
 		text: '#333333',
 		icon: '#666666',
 		overlay: 'rgba(0, 0, 0, 0.5)',
-		interactive: '#007bff',
+		interactive: '#fff',
+		interactiveHover: '#E7ECF5',
+		interactivePressed: '#CED9EB',
+		interactiveFocus: '#E7ECF5',
+		interactiveDisabled: '#fff',
+		interactiveHoverOnSelected: '#CED9EB',
 	},
 	gap: {
 		0: '0',

package/src/main.ts

@@ -5,3 +5,5 @@ export * from './services'
 export * from './composables'
 export * from './utils/rules'
 export * from './utils'
+
+export { createVuetifyInstance } from './vuetifyConfig'