@cnamts/synapse 1.0.2 → 1.0.3

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

@@ -1,12 +1,16 @@
 <script lang="ts" setup>
 	import { computed, ref, watch, onMounted, nextTick } from 'vue'
 	import { useValidation, type ValidationRule } from '@/composables/validation/useValidation'
+	import { locales } from './locales'
 
 	const props = withDefaults(
 		defineProps<{
 			modelValue?: boolean | null
 			indeterminate?: boolean
 			label?: string
+			ariaLabel?: string
+			ariaLabelledby?: string
+			title?: string
 			color?: string
 			disabled?: boolean
 			readonly?: boolean
@@ -32,7 +36,10 @@
 		{
 			modelValue: false,
 			indeterminate: false,
-			label: '',
+			label: undefined,
+			ariaLabel: undefined,
+			ariaLabelledby: undefined,
+			title: undefined,
 			color: 'primary',
 			disabled: false,
 			readonly: false,
@@ -179,29 +186,35 @@
 	})
 
 	// Propriétés ARIA personnalisées pour éviter les conflits
-	const ariaAttributes = computed(() => {
-		return {
-			'aria-checked': ariaChecked.value,
-			'aria-controls': props.controlsIds.length > 0 ? props.controlsIds.join(' ') : undefined,
+	const messageId = computed(() => {
+		// Don't create messageId if aria-labelledby is provided
+		if (props.ariaLabelledby) {
+			return undefined
 		}
+
+		// Create messageId for checkboxes with IDs
+		if (props.id) {
+			return `${props.id}-messages`
+		}
+		return undefined
 	})
 
-	// Fonction pour supprimer l'attribut aria-disabled="false" des éléments input
-	const removeAriaDisabled = () => {
+	// Fonction pour supprimer les attributs ARIA non désirés des éléments input
+	const removeAriaAttributes = () => {
 		nextTick(() => {
 			// Sélectionner tous les inputs de type checkbox dans le composant
-			const checkboxInputs = document.querySelectorAll('input[type="checkbox"][aria-disabled="false"]')
-
-			// Supprimer l'attribut aria-disabled="false" de chaque input
-			checkboxInputs.forEach((input) => {
+			// Pour aria-disabled
+			const checkboxInputsDisabled = document.querySelectorAll('input[type="checkbox"][aria-disabled="false"]')
+			checkboxInputsDisabled.forEach((input) => {
 				input.removeAttribute('aria-disabled')
 			})
 
 			// Configurer un MutationObserver pour surveiller les changements futurs
 			const observer = new MutationObserver((mutations) => {
 				mutations.forEach(() => {
-					const newCheckboxInputs = document.querySelectorAll('input[type="checkbox"][aria-disabled="false"]')
-					newCheckboxInputs.forEach((input) => {
+					// Pour aria-disabled
+					const newCheckboxInputsDisabled = document.querySelectorAll('input[type="checkbox"][aria-disabled="false"]')
+					newCheckboxInputsDisabled.forEach((input) => {
 						input.removeAttribute('aria-disabled')
 					})
 				})
@@ -219,7 +232,7 @@
 
 	// Appliquer la correction lors du montage du composant
 	onMounted(() => {
-		removeAriaDisabled()
+		removeAriaAttributes()
 	})
 
 	const toggleMixed = () => {
@@ -261,40 +274,52 @@
 </script>
 
 <template>
-	<VCheckbox
-		:id="props.id"
-		v-model="model"
-		:name="props.name"
-		:label="props.label"
-		:color="props.color"
-		:disabled="props.disabled"
-		:readonly="props.readonly"
-		:hide-details="props.hideDetails"
-		:density="props.density"
-		:error="hasError"
-		:error-messages="errors"
-		:messages="hasError ? errors : (hasWarning ? warnings : (hasSuccess && props.showSuccessMessages ? successes : []))"
-		:indeterminate="internalIndeterminate"
-		:value="props.value"
-		:true-value="props.trueValue"
-		:false-value="props.falseValue"
-		v-bind="ariaAttributes"
-		@click="toggleMixed"
-		@blur="checkErrorOnBlur"
-	>
-		<template
-			v-if="$slots.label"
-			#label
-		>
-			<slot name="label" />
-		</template>
-		<template
-			v-if="$slots.default"
-			#default
+	<div>
+		<VCheckbox
+			:id="props.id"
+			v-model="model"
+			:name="props.name"
+			:label="props.label"
+			:aria-label="props.ariaLabel"
+			:aria-labelledby="props.ariaLabelledby"
+			:title="props.title"
+			:color="props.color"
+			:disabled="props.disabled"
+			:readonly="props.readonly"
+			:hide-details="props.hideDetails"
+			:density="props.density"
+			:error="hasError"
+			:error-messages="errors"
+			:messages="hasError ? errors : (hasWarning ? warnings : (hasSuccess && props.showSuccessMessages ? successes : []))"
+			:indeterminate="internalIndeterminate"
+			:true-value="props.trueValue"
+			:false-value="props.falseValue"
+			:aria-checked="ariaChecked"
+			:aria-describedby="messageId"
+			@click="toggleMixed"
+			@blur="checkErrorOnBlur"
 		>
-			<slot />
-		</template>
-	</VCheckbox>
+			<template
+				v-if="$slots.label"
+				#label
+			>
+				<slot name="label" />
+			</template>
+			<template
+				v-if="$slots.default"
+				#default
+			>
+				<slot />
+			</template>
+			<span
+				v-if="messageId && props.required && !props.ariaLabel && !props.ariaLabelledby"
+				:id="messageId"
+				class="d-sr-only"
+			>
+				{{ locales.labelledbyMessage }} <span v-if="props.label">{{ props.label }}</span>.
+			</span>
+		</VCheckbox>
+	</div>
 </template>
 
 <style scoped>

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

@@ -0,0 +1,3 @@
+export const locales = {
+	labelledbyMessage: 'Sélectionner l\'option',
+}

package/src/components/Customs/SyIcon/Accessibilite.mdx

@@ -0,0 +1,103 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/blocks'
+import * as SyIconStoriesAccessibility from './Accessibilite.stories'
+import SyIconAccessibility from './SyIconAccessibility.vue'
+
+<Meta of={SyIconStoriesAccessibility} />
+
+# 🌐 Accessibilité des icônes
+
+<Subtitle>
+	Guide d'accessibilité pour l'utilisation des icônes dans le Design System
+</Subtitle>
+
+<div className="tip-wrapper" style={{ background: '#f8f9fa', padding: '20px', borderRadius: '5px', marginBottom: '20px' }}>
+  <div style={{ fontWeight: 'bold', marginBottom: '10px' }}>💡 Pourquoi l'accessibilité des icônes est importante</div>
+  <p>
+    Les icônes améliorent l'expérience utilisateur, mais doivent être accessibles à tous, y compris aux personnes utilisant des technologies d'assistance.
+  </p>
+</div>
+
+## 🔍 Principes généraux
+
+Le composant `SyIcon` implémente automatiquement les bonnes pratiques d'accessibilité en fonction de la nature de l'icône :
+
+<div style={{ display: 'flex', gap: '20px', marginBottom: '20px' }}>
+  <div style={{ flex: 1, border: '1px solid #e0e0e0', borderRadius: '5px', padding: '15px' }}>
+    <h3>📌 Icônes décoratives</h3>
+    <p><em>Invisibles pour les lecteurs d'écran</em></p>
+    
+    ```vue
+    <!-- Icône décorative (par défaut) -->
+    <SyIcon 
+    :icon="mdi-home" 
+    />
+    ```
+    
+    <div style={{ background: '#f5f5f5', padding: '10px', borderRadius: '4px', marginTop: '78px' }}>
+      <strong>Attributs ARIA générés :</strong>
+      <ul>
+        <li><code>role="presentation"</code></li>
+        <li><code>aria-hidden="true"</code></li>
+      </ul>
+    </div>
+  </div>
+  
+  <div style={{ flex: 1, border: '1px solid #e0e0e0', borderRadius: '5px', padding: '15px' }}>
+    <h3>🔊 Icônes informatives</h3>
+    <p><em>Annoncées par les lecteurs d'écran</em></p>
+    
+    ```vue
+    <!-- Icône informative avec label -->
+    <SyIcon 
+      :icon="mdi-information" 
+      :decorative="false" 
+      label="Information importante" 
+    />
+    ```
+    
+    <div style={{ background: '#f5f5f5', padding: '10px', borderRadius: '4px' }}>
+      <strong>Attributs ARIA générés :</strong>
+      <ul>
+        <li><code>role="img"</code></li>
+        <li><code>aria-label="Information importante"</code></li>
+      </ul>
+    </div>
+  </div>
+</div>
+
+## 🧪 Démonstration interactive
+
+La démonstration ci-dessous vous permet de voir comment les attributs d'accessibilité sont générés en fonction des propriétés du composant :
+
+<Canvas of={SyIconStoriesAccessibility.AccessibilityDemo} />
+
+## ✅ Bonnes pratiques
+
+<div style={{ background: '#edf7ed', padding: '15px', borderRadius: '5px', borderLeft: '4px solid #4caf50', marginBottom: '20px' }}>
+  <h4 style={{ marginTop: '0' }}>📋 Recommandations</h4>
+  <ul style={{ paddingLeft: '20px' }}>
+    <li><strong>Toujours fournir un label</strong> lorsque l'icône est informative (<code>decorative="false"</code>)</li>
+    <li><strong>Utiliser des labels explicites</strong> qui décrivent clairement la fonction de l'icône</li>
+    <li><strong>Éviter les icônes seules</strong> pour les actions importantes - combinez-les avec du texte visible</li>
+    <li><strong>Maintenir un bon contraste</strong> entre l'icône et son arrière-plan</li>
+  </ul>
+</div>
+
+## 🔒 Conformité RGAA
+
+<div style={{ background: '#e8f4fd', padding: '15px', borderRadius: '5px', borderLeft: '4px solid #2196f3', marginBottom: '20px' }}>
+  <p style={{ margin: '0' }}>
+    Le composant <code>SyIcon</code> utilise la directive <code>v-rgaa-svg-fix</code> qui assure la compatibilité 
+    avec les lecteurs d'écran en appliquant les correctifs nécessaires aux SVG.
+  </p>
+  <p style={{ marginTop: '10px', marginBottom: '0' }}>
+    <strong>Important :</strong> Tous les éléments SVG ont systématiquement l'attribut <code>aria-hidden="true"</code> et 
+    n'ont jamais l'attribut <code>role="img"</code>, indépendamment du type d'icône. La sémantique d'accessibilité 
+    est gérée uniquement au niveau de l'élément conteneur (<code>&lt;i&gt;</code>).
+  </p>
+</div>
+
+## 📚 Ressources
+
+- [Guide d'accessibilité WAI-ARIA pour les images et icônes](https://www.w3.org/WAI/ARIA/apg/patterns/)
+- [RGAA - Référentiel Général d'Amélioration de l'Accessibilité](https://www.numerique.gouv.fr/publications/rgaa-accessibilite/)

package/src/components/Customs/SyIcon/Accessibilite.stories.ts

@@ -0,0 +1,27 @@
+import SyIconAccessibility from './SyIconAccessibility.vue'
+import { mdiStar } from '@mdi/js'
+
+const meta = {
+	title: 'Composants/Données/SyIcon/Accessibilite',
+	component: () => import('./SyIcon.vue'),
+	parameters: {
+		docs: {
+			description: {
+				component: 'Icon component for accessibility features.',
+			},
+		},
+	},
+}
+
+export default meta
+
+export const AccessibilityDemo = {
+	args: {
+		icon: mdiStar, // Using an icon from the imported icons
+	},
+	render: () => ({
+		components: { SyIconAccessibility },
+		template: '<SyIconAccessibility />',
+	}),
+	tags: ['!dev'],
+}

package/src/components/Customs/SyIcon/SyIcon.mdx

@@ -0,0 +1,72 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/blocks'
+import * as SyIconStories from './SyIcon.stories'
+
+<Meta of={SyIconStories} />
+
+<Title>SyIcon</Title>
+
+<Subtitle>
+	Composant d'icône avec support d'accessibilité RGAA
+</Subtitle>
+
+## Utilisation
+
+Le composant `SyIcon` est un wrapper autour du composant `v-icon` de Vuetify qui ajoute une gestion automatique de l'accessibilité selon les normes RGAA.
+
+<Primary />
+<Controls />
+
+## Accessibilité
+
+Le composant `SyIcon` gère automatiquement les attributs ARIA en fonction de la nature de l'icône :
+
+- **Icônes décoratives** (par défaut) : Invisibles pour les lecteurs d'écran (`role="presentation"`, `aria-hidden="true"`)
+- **Icônes informatives** : Annoncées par les lecteurs d'écran avec un label explicite (`role="img"`, `aria-label="[label]"`)
+
+> **Important :** Tous les éléments SVG ont systématiquement l'attribut `aria-hidden="true"` et n'ont jamais l'attribut `role="img"`, indépendamment du type d'icône. La sémantique d'accessibilité est gérée uniquement au niveau de l'élément conteneur.
+
+Pour plus d'informations sur l'accessibilité, consultez la [page dédiée à l'accessibilité](/docs/composants-base-syicon-accessibilite--docs).
+
+## API
+
+
+## Exemples
+
+### Icône par défaut
+
+<Canvas of={SyIconStories.Default} />
+
+### Icône avec couleur
+
+<Canvas of={SyIconStories.WithColor} />
+
+### Icône avec taille personnalisée
+
+<Canvas of={SyIconStories.WithSize} />
+
+
+## Exemple d'utilisation
+
+```vue
+<template>
+  <!-- Icône décorative (par défaut) -->
+  <SyIcon icon="mdi-home" />
+  
+  <!-- Icône avec couleur -->
+  <SyIcon icon="mdi-alert" color="error" />
+  
+  <!-- Icône avec taille personnalisée -->
+  <SyIcon icon="mdi-star" size="x-large" />
+  
+  <!-- Icône informative avec label d'accessibilité -->
+  <SyIcon 
+    icon="mdi-information" 
+    :decorative="false" 
+    label="Information importante" 
+  />
+</template>
+
+<script setup>
+  import { SyIcon } from '@cnam/design-system'
+</script>
+```

package/src/components/Customs/SyIcon/SyIcon.spec.ts

@@ -0,0 +1,127 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import SyIcon from './SyIcon.vue'
+
+describe('SyIcon', () => {
+	// Test de rendu de base
+	it('rend correctement une icône', () => {
+		const wrapper = mount(SyIcon, {
+			props: {
+				icon: 'mdi-home',
+			},
+			global: {
+				stubs: {
+					'v-icon': {
+						template: '<span class="v-icon"><slot></slot></span>',
+						props: ['color', 'size', 'role', 'aria-hidden', 'aria-label'],
+					},
+				},
+				directives: {
+					'rgaa-svg-fix': () => {},
+				},
+			},
+		})
+
+		expect(wrapper.find('.v-icon').exists()).toBe(true)
+		expect(wrapper.text()).toContain('mdi-home')
+	})
+
+	// Test pour une icône décorative (par défaut)
+	it('applique les attributs ARIA corrects pour une icône décorative', () => {
+		const wrapper = mount(SyIcon, {
+			props: {
+				icon: 'mdi-home',
+				decorative: true, // Explicitement défini comme décoratif
+			},
+			global: {
+				stubs: {
+					'v-icon': {
+						template: '<span class="v-icon"><slot></slot></span>',
+						props: ['color', 'size', 'role', 'aria-hidden', 'aria-label'],
+					},
+				},
+				directives: {
+					'rgaa-svg-fix': () => {},
+				},
+			},
+		})
+
+		// Vérifions les props passées au composant SyIcon
+		expect(wrapper.props().decorative).toBe(true) // L'icône est décorative
+		expect(wrapper.props().label).toBeUndefined() // Pas de label pour une icône décorative
+	})
+
+	// Test pour une icône informative
+	it('applique les attributs ARIA corrects pour une icône informative', () => {
+		const wrapper = mount(SyIcon, {
+			props: {
+				icon: 'mdi-alert',
+				decorative: false,
+				label: 'Alerte importante',
+			},
+			global: {
+				stubs: {
+					'v-icon': {
+						template: '<span class="v-icon"><slot></slot></span>',
+						props: ['color', 'size', 'role', 'aria-hidden', 'aria-label'],
+					},
+				},
+				directives: {
+					'rgaa-svg-fix': () => {},
+				},
+			},
+		})
+
+		// Vérifions les props passées au composant SyIcon
+		expect(wrapper.props().decorative).toBe(false) // Icône informative
+		expect(wrapper.props().label).toBe('Alerte importante') // Label défini
+	})
+
+	// Test pour une icône avec couleur
+	it('transmet correctement la propriété color', () => {
+		const wrapper = mount(SyIcon, {
+			props: {
+				icon: 'mdi-home',
+				color: 'primary',
+			},
+			global: {
+				stubs: {
+					'v-icon': {
+						template: '<span class="v-icon"><slot></slot></span>',
+						props: ['color', 'size', 'role', 'aria-hidden', 'aria-label'],
+					},
+				},
+				directives: {
+					'rgaa-svg-fix': () => {},
+				},
+			},
+		})
+
+		// Vérifions la prop color passée au composant SyIcon
+		expect(wrapper.props().color).toBe('primary')
+	})
+
+	// Test pour une icône avec taille
+	it('transmet correctement la propriété size', () => {
+		const wrapper = mount(SyIcon, {
+			props: {
+				icon: 'mdi-home',
+				size: 'large',
+			},
+			global: {
+				stubs: {
+					'v-icon': {
+						template: '<span class="v-icon"><slot></slot></span>',
+						props: ['color', 'size', 'role', 'aria-hidden', 'aria-label'],
+					},
+				},
+				directives: {
+					'rgaa-svg-fix': () => {},
+				},
+			},
+		})
+
+		// Vérifions la prop size passée au composant SyIcon
+		expect(wrapper.props().size).toBe('large')
+	})
+})