@cnamts/synapse 1.0.0 → 1.0.2

package/src/components/Accordion/composables/useAccordionGroupCommunication.ts

@@ -0,0 +1,52 @@
+import { onMounted, onBeforeUnmount } from 'vue'
+
+export interface AccordionGroupCommunication {
+	emitFocusChange: (itemId: string | null) => void
+	handleFocusChange: (event: CustomEvent) => void
+}
+
+export default function useAccordionGroupCommunication(
+	instanceId: string,
+	groupId: string,
+	onFocusChange: (itemId: string | null) => void,
+): AccordionGroupCommunication {
+	const ACCORDION_FOCUS_EVENT = 'accordion-focus-changed'
+
+	const handleFocusChange = (event: CustomEvent) => {
+		const { sourceInstanceId, groupId: eventGroupId } = event.detail
+
+		// Ignore les événements provenant de cette instance
+		if (sourceInstanceId === instanceId) return
+
+		// Ignore les événements d'autres groupes
+		if (eventGroupId !== groupId) return
+
+		// Réinitialise le focus dans cette instance
+		onFocusChange(null)
+	}
+
+	const emitFocusChange = (itemId: string | null) => {
+		const event = new CustomEvent(ACCORDION_FOCUS_EVENT, {
+			bubbles: true,
+			detail: {
+				sourceInstanceId: instanceId,
+				groupId,
+				itemId,
+			},
+		})
+		window.dispatchEvent(event)
+	}
+
+	onMounted(() => {
+		window.addEventListener(ACCORDION_FOCUS_EVENT, handleFocusChange as unknown as EventListener)
+	})
+
+	onBeforeUnmount(() => {
+		window.removeEventListener(ACCORDION_FOCUS_EVENT, handleFocusChange as unknown as EventListener)
+	})
+
+	return {
+		emitFocusChange,
+		handleFocusChange,
+	}
+}

package/src/components/Accordion/composables/useAccordionKeyboardNavigation.ts

@@ -0,0 +1,111 @@
+import { type Ref } from 'vue'
+
+export interface AccordionItem {
+	id: string
+	title: string
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- mock Axios headers
+	content: any
+	headingLevel?: number
+	disabled?: boolean
+}
+
+export interface AccordionKeyboardNavigation {
+	handleKeyNavigation: (event: KeyboardEvent, itemId: string, index: number) => void
+}
+
+export default function useAccordionKeyboardNavigation(
+	items: Ref<AccordionItem[]> | AccordionItem[],
+	setFocus: (itemId: string | null) => void,
+): AccordionKeyboardNavigation {
+	// Gestion de la navigation clavier entre les éléments d'accordéon
+	const handleKeyNavigation = (event: KeyboardEvent, itemId: string, index: number) => {
+		if (event.key === 'ArrowDown') {
+			event.preventDefault()
+			focusNextHeader(index)
+		}
+		else if (event.key === 'ArrowUp') {
+			event.preventDefault()
+			focusPreviousHeader(index)
+		}
+		else if (event.key === 'Home') {
+			event.preventDefault()
+			focusFirstHeader()
+		}
+		else if (event.key === 'End') {
+			event.preventDefault()
+			focusLastHeader()
+		}
+	}
+
+	const getItemsArray = (): AccordionItem[] => {
+		return 'value' in items ? items.value : items
+	}
+
+	const focusNextHeader = (currentIndex: number) => {
+		const itemsArray = getItemsArray()
+		let nextIndex = (currentIndex + 1) % itemsArray.length
+
+		// Si le prochain élément est désactivé, on continue à chercher
+		let attempts = 0
+		while (itemsArray[nextIndex].disabled && attempts < itemsArray.length) {
+			nextIndex = (nextIndex + 1) % itemsArray.length
+			attempts++
+		}
+
+		focusHeaderByIndex(nextIndex)
+	}
+
+	const focusPreviousHeader = (currentIndex: number) => {
+		const itemsArray = getItemsArray()
+		let prevIndex = (currentIndex - 1 + itemsArray.length) % itemsArray.length
+
+		// Si l'élément précédent est désactivé, on continue à chercher
+		let attempts = 0
+		while (itemsArray[prevIndex].disabled && attempts < itemsArray.length) {
+			prevIndex = (prevIndex - 1 + itemsArray.length) % itemsArray.length
+			attempts++
+		}
+
+		focusHeaderByIndex(prevIndex)
+	}
+
+	const focusFirstHeader = () => {
+		const itemsArray = getItemsArray()
+		let index = 0
+
+		// Si le premier élément est désactivé, on cherche le prochain disponible
+		while (index < itemsArray.length && itemsArray[index].disabled) {
+			index++
+		}
+
+		if (index < itemsArray.length) {
+			focusHeaderByIndex(index)
+		}
+	}
+
+	const focusLastHeader = () => {
+		const itemsArray = getItemsArray()
+		let index = itemsArray.length - 1
+
+		// Si le dernier élément est désactivé, on cherche le précédent disponible
+		while (index >= 0 && itemsArray[index].disabled) {
+			index--
+		}
+
+		if (index >= 0) {
+			focusHeaderByIndex(index)
+		}
+	}
+
+	const focusHeaderByIndex = (index: number) => {
+		const itemsArray = getItemsArray()
+		const itemId = itemsArray[index].id
+		const headerElement = document.getElementById(`accordion-button-${itemId}`)
+		headerElement?.focus()
+		setFocus(itemId)
+	}
+
+	return {
+		handleKeyNavigation,
+	}
+}

package/src/components/Accordion/composables/useAccordionState.ts

@@ -0,0 +1,59 @@
+import { ref } from 'vue'
+
+export interface AccordionState {
+	openItems: { value: string[] }
+	focusedItemId: { value: string | null }
+	toggleItem: (itemId: string) => void
+	isItemOpen: (itemId: string) => boolean
+	isItemFocused: (itemId: string) => boolean
+	setFocus: (itemId: string | null) => void
+}
+
+export default function useAccordionState(): AccordionState {
+	const openItems = ref<string[]>([])
+	const focusedItemId = ref<string | null>(null)
+
+	const toggleItem = (itemId: string) => {
+		// Si cet élément est déjà focalisé, on le garde en mémoire
+		const wasFocused = focusedItemId.value === itemId
+
+		const index = openItems.value.indexOf(itemId)
+		if (index === -1) {
+			openItems.value.push(itemId)
+			setFocus(itemId)
+		}
+		else {
+			openItems.value.splice(index, 1)
+			if (!wasFocused) {
+				setFocus(itemId)
+			}
+			else {
+				setFocus(null)
+			}
+		}
+	}
+
+	const isItemOpen = (itemId: string) => {
+		return openItems.value.includes(itemId)
+	}
+
+	const isItemFocused = (itemId: string) => {
+		return focusedItemId.value === itemId
+	}
+
+	// Méthode pour définir explicitement le focus sur un élément
+	const setFocus = (itemId: string | null) => {
+		if (focusedItemId.value === itemId) return
+
+		focusedItemId.value = itemId
+	}
+
+	return {
+		openItems,
+		focusedItemId,
+		toggleItem,
+		isItemOpen,
+		isItemFocused,
+		setFocus,
+	}
+}

package/src/components/Accordion/tests/__snapshots__/accordion.spec.ts.snap

@@ -11,6 +11,7 @@ exports[`Accordion > renders correctly 1`] = `
   ">
     <div
       aria-controls="accordion-content-item1"
+      aria-disabled="false"
       aria-expanded="false"
       class="sy-accordion-button"
       id="accordion-button-item1"
@@ -58,6 +59,7 @@ exports[`Accordion > renders correctly 1`] = `
   ">
     <div
       aria-controls="accordion-content-item2"
+      aria-disabled="false"
       aria-expanded="false"
       class="sy-accordion-button"
       id="accordion-button-item2"
@@ -105,6 +107,7 @@ exports[`Accordion > renders correctly 1`] = `
   ">
     <div
       aria-controls="accordion-content-item3"
+      aria-disabled="false"
       aria-expanded="false"
       class="sy-accordion-button"
       id="accordion-button-item3"

package/src/components/BackBtn/AccessibiliteItems.ts

@@ -1,4 +1,4 @@
-import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+import { ExpertiseLevelEnum } from '@/common/constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
 

package/src/components/BackToTopBtn/AccessibiliteItems.ts

@@ -1,4 +1,4 @@
-import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+import { ExpertiseLevelEnum } from '@/common/constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
 

package/src/components/ChipList/AccessibiliteItems.ts

@@ -1,4 +1,4 @@
-import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+import { ExpertiseLevelEnum } from '@/common/constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
 

package/src/components/CollapsibleList/AccessibiliteItems.ts

@@ -1,4 +1,4 @@
-import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+import { ExpertiseLevelEnum } from '@/common/constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
 	{

package/src/components/ContextualMenu/AccessibiliteItems.ts

@@ -1,4 +1,4 @@
-import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+import { ExpertiseLevelEnum } from '@/common/constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
 	{

package/src/components/CookieBanner/AccessibiliteItems.ts

@@ -1,4 +1,4 @@
-import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+import { ExpertiseLevelEnum } from '@/common/constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
 

package/src/components/CopyBtn/AccessibiliteItems.ts

@@ -1,4 +1,4 @@
-import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+import { ExpertiseLevelEnum } from '@/common/constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
 

package/src/components/Customs/SyBtnSelect/AccessibiliteItems.ts

@@ -1,4 +1,4 @@
-import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+import { ExpertiseLevelEnum } from '@/common/constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
 

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

@@ -0,0 +1,303 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories } from '@storybook/blocks';
+import * as SyCheckboxStories from './SyCheckbox.stories';
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
+
+<Meta of={SyCheckboxStories} />
+
+<div className="accessibility-guide">
+  <Title>Guide d'Accessibilité du Composant SyCheckbox</Title>
+  
+  <div className="intro-section">
+    <img 
+      src={AccessibilityIcon} 
+      alt="Icône d'accessibilité" 
+      className="accessibility-icon"
+    />
+    <p className="intro-text">
+      Le composant SyCheckbox a été conçu en suivant rigoureusement les recommandations d'accessibilité du W3C, 
+      notamment le modèle <a href="https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/examples/checkbox-mixed/" target="_blank" rel="noopener noreferrer">WAI-ARIA pour les cases à cocher tri-état</a>. 
+      Ce guide détaille comment notre implémentation respecte ces standards et garantit une expérience utilisateur inclusive.
+    </p>
+  </div>
+
+  <div className="criteria-section">
+    <h2>Critères d'accessibilité respectés</h2>
+    
+    <div className="criteria-card">
+      <div className="criteria-header">
+        <span className="criteria-icon">🔍</span>
+        <h3>Structure sémantique</h3>
+      </div>
+      <ul>
+        <li><strong>Rôles ARIA appropriés</strong> : <code>role="checkbox"</code> pour la case à cocher</li>
+        <li><strong>État de la case à cocher</strong> : <code>aria-checked</code> avec les valeurs <code>true</code>, <code>false</code> ou <code>mixed</code> pour l'état indéterminé</li>
+        <li><strong>Relations entre éléments</strong> : <code>aria-controls</code> pour indiquer les éléments contrôlés par la case à cocher parent</li>
+        <li><strong>Étiquetage explicite</strong> : Association claire entre la case à cocher et son label</li>
+      </ul>
+    </div>
+    
+    <div className="criteria-card">
+      <div className="criteria-header">
+        <span className="criteria-icon">⌨️</span>
+        <h3>Navigation clavier complète</h3>
+      </div>
+      <ul>
+        <li><strong>Touche Espace</strong> : Pour activer/désactiver la case à cocher</li>
+        <li><strong>Touche Tab</strong> : Navigation séquentielle entre les cases à cocher</li>
+        <li><strong>Focus visible</strong> : Indication claire de l'élément actuellement focalisé</li>
+        <li><strong>Gestion des états multiples</strong> : Cycle entre les états non coché, coché et indéterminé</li>
+      </ul>
+    </div>
+    
+    <div className="criteria-card">
+      <div className="criteria-header">
+        <span className="criteria-icon">📱</span>
+        <h3>États et retours d'information</h3>
+      </div>
+      <ul>
+        <li><strong>État de sélection</strong> : <code>aria-checked</code> indique si la case est cochée, non cochée ou indéterminée</li>
+        <li><strong>État de désactivation</strong> : <code>aria-disabled</code> signale les éléments non disponibles</li>
+        <li><strong>Indication visuelle</strong> : Symboles distincts pour chaque état (coché, non coché, indéterminé)</li>
+        <li><strong>Validation visuelle</strong> : Couleurs et icônes spécifiques pour les états d'erreur, d'avertissement et de succès</li>
+      </ul>
+    </div>
+    
+    <div className="criteria-card">
+      <div className="criteria-header">
+        <span className="criteria-icon">🎨</span>
+        <h3>Personnalisation accessible</h3>
+      </div>
+      <ul>
+        <li><strong>Contraste configurable</strong> : Options de couleurs pour garantir un contraste suffisant</li>
+        <li><strong>Taille et espacement</strong> : Dimensions adaptées pour faciliter l'interaction tactile</li>
+        <li><strong>Compatibilité avec le mode contraste élevé</strong> : Utilisation de <code>currentColor</code> pour s'adapter aux paramètres système</li>
+        <li><strong>Densité ajustable</strong> : Options de densité pour s'adapter aux besoins des utilisateurs</li>
+      </ul>
+    </div>
+  </div>
+
+  <div className="tri-state-section">
+    <h2>Fonctionnalité tri-état (indéterminé)</h2>
+    <p>
+      Le composant SyCheckbox prend en charge l'état indéterminé, particulièrement utile pour représenter :
+    </p>
+    <ul>
+      <li>Une sélection partielle d'éléments dans un groupe</li>
+      <li>Un état intermédiaire avant que l'utilisateur ne fasse un choix définitif</li>
+      <li>Une relation parent-enfant où certains éléments enfants sont sélectionnés</li>
+    </ul>
+    <p>
+      Conformément aux recommandations WAI-ARIA, notre implémentation de l'état indéterminé :
+    </p>
+    <ul>
+      <li>Utilise l'attribut <code>aria-checked="mixed"</code> pour les lecteurs d'écran</li>
+      <li>Fournit un indicateur visuel distinct pour l'état indéterminé</li>
+      <li>Gère correctement le cycle des états lors de l'interaction utilisateur</li>
+      <li>Maintient la cohérence entre l'état parent et les états des enfants</li>
+    </ul>
+  </div>
+
+  <div className="demo-section">
+    <h2>Démonstration interactive</h2>
+    <p>
+      Explorez ci-dessous un exemple de SyCheckbox entièrement accessible avec état indéterminé. 
+      Essayez de naviguer en utilisant uniquement votre clavier (Tab pour naviguer, Espace pour activer) pour tester l'accessibilité.
+    </p>
+    <Primary />
+  </div>
+
+  <div className="parent-child-section">
+    <h2>Relation parent-enfant</h2>
+    <p>
+      Le composant SyCheckbox permet de créer des relations parent-enfant entre les cases à cocher, où :
+    </p>
+    <ul>
+      <li>La case à cocher parent contrôle l'état de toutes les cases à cocher enfants</li>
+      <li>L'état de la case à cocher parent reflète l'état collectif des enfants :</li>
+      <ul>
+        <li>Cochée : tous les enfants sont cochés</li>
+        <li>Non cochée : aucun enfant n'est coché</li>
+        <li>Indéterminée : certains enfants sont cochés, d'autres non</li>
+      </ul>
+    </ul>
+    <p>
+      Cette relation est établie via la propriété <code>controlsIds</code> qui liste les identifiants des cases à cocher enfants.
+    </p>
+  </div>
+
+  <div className="best-practices">
+    <h2>Bonnes pratiques d'utilisation</h2>
+    <ul>
+      <li>Utilisez des libellés clairs et concis pour décrire l'action associée à la case à cocher</li>
+      <li>Regroupez les cases à cocher liées dans un fieldset avec une légende explicative</li>
+      <li>Évitez de modifier l'état d'une case à cocher automatiquement sans action utilisateur explicite</li>
+      <li>Assurez-vous que la taille de la zone cliquable est suffisante (au moins 44×44 pixels pour les interfaces tactiles)</li>
+      <li>Utilisez l'état indéterminé uniquement pour indiquer une sélection partielle, pas un troisième état fonctionnel</li>
+      <li>Fournissez un retour visuel et textuel clair pour les erreurs de validation</li>
+    </ul>
+  </div>
+
+  <div className="resources-section">
+    <h2>Ressources supplémentaires</h2>
+    <ul>
+      <li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/" target="_blank" rel="noopener noreferrer">Guide des pratiques d'auteur WAI-ARIA pour les cases à cocher</a></li>
+      <li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/examples/checkbox-mixed/" target="_blank" rel="noopener noreferrer">Exemple de case à cocher tri-état WAI-ARIA</a></li>
+      <li><a href="https://www.w3.org/WAI/WCAG21/quickref/" target="_blank" rel="noopener noreferrer">Référence rapide WCAG 2.1</a></li>
+      <li><a href="https://www.w3.org/TR/wai-aria-1.2/#checkbox" target="_blank" rel="noopener noreferrer">Spécification WAI-ARIA 1.2 pour le rôle checkbox</a></li>
+    </ul>
+  </div>
+</div>
+
+<style>
+{`
+  .accessibility-guide {
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+    color: #333;
+  }
+
+  .intro-section {
+    display: flex;
+    align-items: center;
+    margin-bottom: 30px;
+    background-color: #f8f9fa;
+    padding: 20px;
+    border-radius: 8px;
+    border-left: 5px solid #0077cc;
+  }
+
+  .accessibility-icon {
+    width: 60px;
+    height: 60px;
+    margin-right: 20px;
+    flex-shrink: 0;
+  }
+
+  .intro-text {
+    font-size: 1.1em;
+    line-height: 1.6;
+    margin: 0;
+  }
+
+  .criteria-section {
+    margin-bottom: 40px;
+  }
+
+  .criteria-section h2,
+  .demo-section h2,
+  .tri-state-section h2,
+  .parent-child-section h2,
+  .best-practices h2,
+  .resources-section h2 {
+    border-bottom: 2px solid #eaecef;
+    padding-bottom: 10px;
+    margin-top: 30px;
+    margin-bottom: 20px;
+    color: #0077cc;
+  }
+
+  .criteria-card {
+    background-color: #fff;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    padding: 20px;
+    margin-bottom: 20px;
+  }
+
+  .criteria-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 15px;
+  }
+
+  .criteria-icon {
+    font-size: 1.8em;
+    margin-right: 15px;
+  }
+
+  .criteria-header h3 {
+    margin: 0;
+    font-size: 1.3em;
+    color: #0077cc;
+  }
+
+  .criteria-card ul {
+    margin: 0;
+    padding-left: 20px;
+  }
+
+  .criteria-card li {
+    margin-bottom: 8px;
+    line-height: 1.5;
+  }
+
+  .demo-section {
+    background-color: #f8f9fa;
+    padding: 20px;
+    border-radius: 8px;
+    margin-bottom: 40px;
+  }
+
+  .tri-state-section,
+  .parent-child-section {
+    background-color: #f0f7ff;
+    padding: 20px;
+    border-radius: 8px;
+    margin-bottom: 30px;
+  }
+
+  .tri-state-section p,
+  .parent-child-section p {
+    line-height: 1.6;
+  }
+
+  .best-practices {
+    background-color: #f5f5f5;
+    padding: 20px;
+    border-radius: 8px;
+    margin-bottom: 30px;
+  }
+
+  .best-practices ul {
+    padding-left: 20px;
+  }
+
+  .best-practices li {
+    margin-bottom: 10px;
+    line-height: 1.5;
+  }
+
+  .resources-section {
+    background-color: #f8f9fa;
+    padding: 20px;
+    border-radius: 8px;
+  }
+
+  .resources-section ul {
+    padding-left: 20px;
+  }
+
+  .resources-section li {
+    margin-bottom: 10px;
+  }
+
+  .resources-section a {
+    color: #0077cc;
+    text-decoration: none;
+  }
+
+  .resources-section a:hover {
+    text-decoration: underline;
+  }
+
+  code {
+    background-color: #f0f0f0;
+    padding: 2px 5px;
+    border-radius: 3px;
+    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+    font-size: 0.9em;
+  }
+`}
+</style>

package/src/components/Customs/SyCheckbox/SyCheckbox.mdx

@@ -0,0 +1,50 @@
+import { Meta, Canvas, Controls, Source } from '@storybook/blocks';
+import * as SyCheckboxStories from "./SyCheckbox.stories";
+
+<Meta of={SyCheckboxStories} />
+
+# SyCheckbox
+
+Le composant `SyCheckbox` est une case à cocher tri-état qui étend le composant `VCheckbox` de Vuetify, conforme au style du Design System et qui respecte les règles d'accessibilité <abbr title="Référentiel Général d'Amélioration de l'Accessibilité">RGAA</abbr>.
+
+Il étend les fonctionnalités de base de Vuetify avec :
+
+- Un état indéterminé pour les sélections partielles
+- Un système de validation avancé
+- Des états visuels (erreur, avertissement, succès)
+- Une gestion de la relation parent-enfant via la propriété `controlsIds`
+
+<Canvas of={SyCheckboxStories.Default} />
+
+# API
+
+<Controls of={SyCheckboxStories.Default} />
+
+## États
+
+Le composant `SyCheckbox` peut avoir trois états :
+- **Coché** : La case est cochée (modelValue = true)
+- **Non coché** : La case est vide (modelValue = false)
+- **Indéterminé** : La case est partiellement cochée (indeterminate = true)
+
+L'état indéterminé est généralement utilisé pour représenter une sélection partielle dans un groupe d'éléments.
+
+## Validation
+
+Le composant supporte trois types de validation :
+- Règles d'erreur standard (`customRules`)
+- Règles d'avertissement (`customWarningRules`)
+- Règles de succès (`customSuccessRules`)
+
+### États visuels :
+
+La case à cocher adapte automatiquement son apparence selon son état :
+- Rouge pour les erreurs
+- Orange pour les avertissements
+- Vert pour les succès
+
+## Relation parent-enfant
+
+La propriété `controlsIds` permet d'établir une relation entre une case à cocher parent et plusieurs cases à cocher enfants. Lorsque certains enfants sont cochés mais pas tous, le parent passe automatiquement en état indéterminé.
+
+<Canvas of={SyCheckboxStories.WithControlsIds} />