@cnamts/synapse 1.0.19 → 1.0.21

package/src/components/Customs/Selects/SySelect/accessibilite/Accessibility.mdx

@@ -0,0 +1,274 @@
+import { Meta, Story } from '@storybook/addon-docs';
+import * as Stories from '../SySelect.stories.ts';
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
+import '@/stories/styles/shared.css';
+
+<Meta of={Stories} />
+
+
+<div className="accessibility-guide">
+  <h1>Guide d'Accessibilité du Composant SySelect</h1>
+
+  
+  <div className="intro-section">
+    <img 
+      src={AccessibilityIcon} 
+      alt="Icône d'accessibilité" 
+      className="accessibility-icon"
+    />
+    <p className="intro-text">
+      Le composant SySelect 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/combobox/examples/combobox-select-only/" target="_blank" rel="noopener noreferrer">WAI-ARIA pour les combobox select-only</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="combobox"</code> sur l'input, <code>role="listbox"</code> sur le menu déroulant</li>
+        <li><strong>Relations entre éléments</strong> : <code>aria-controls</code> pour lier le combobox au listbox</li>
+        <li><strong>Type d'interaction</strong> : <code>aria-haspopup="listbox"</code> et <code>aria-autocomplete="list"</code></li>
+        <li><strong>État du menu</strong> : <code>aria-expanded</code> indique si le menu est ouvert ou fermé</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>Flèches haut/bas</strong> : Navigation entre les options sans modifier la sélection</li>
+        <li><strong>Entrée</strong> : Sélection de l'option active et fermeture du menu</li>
+        <li><strong>Échap</strong> : Fermeture du menu sans modifier la sélection</li>
+        <li><strong>Caractères imprimables</strong> : Navigation vers l'option commençant par le(s) caractère(s) saisi(s)</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>Sélection active</strong> : <code>aria-activedescendant</code> indique l'option active pendant la navigation</li>
+        <li><strong>Option sélectionnée</strong> : <code>aria-selected="true"</code> sur l'option sélectionnée</li>
+        <li><strong>État de validation</strong> : <code>aria-required="true"</code> et <code>aria-invalid="true"</code> pour les champs obligatoires et en erreur</li>
+        <li><strong>Scroll automatique</strong> : Les options sont automatiquement scrollées dans la vue lors de la navigation</li>
+      </ul>
+    </div>
+  </div>
+
+  <div className="keyboard-section">
+    <h2>Détail de la navigation clavier</h2>
+    Le composant **SySelect** implémente le pattern de navigation au clavier recommandé par le W3C pour les *combobox select-only*.
+ <table
+    style={{
+      width: '100%',
+      borderCollapse: 'collapse',
+      marginTop: '1em',
+    }}
+  >
+    <thead>
+      <tr style={{ borderBottom: '1px solid #ddd', textAlign: 'left' }}>
+        <th style={{ padding: '8px' }}>Touche</th>
+        <th style={{ padding: '8px' }}>Action</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td style={{ padding: '8px' }}><code>Flèche bas</code></td>
+        <td style={{ padding: '8px' }}>
+          Ouvre le menu et déplace le focus sur la première option (ou la suivante si une option est déjà sélectionnée)
+        </td>
+      </tr>
+      <tr>
+        <td style={{ padding: '8px' }}><code>Flèche haut</code></td>
+        <td style={{ padding: '8px' }}>
+          Ouvre le menu et déplace le focus sur la dernière option
+        </td>
+      </tr>
+      <tr>
+        <td style={{ padding: '8px' }}><code>Flèches haut/bas</code></td>
+        <td style={{ padding: '8px' }}>
+          Déplace le focus dans la liste des options (sans modifier la sélection)
+        </td>
+      </tr>
+      <tr>
+        <td style={{ padding: '8px' }}><code>Entrée</code></td>
+        <td style={{ padding: '8px' }}>
+          Sélectionne l'option active et ferme le menu
+        </td>
+      </tr>
+      <tr>
+        <td style={{ padding: '8px' }}><code>Échap</code></td>
+        <td style={{ padding: '8px' }}>
+          Ferme le menu sans modifier la sélection
+        </td>
+      </tr>
+      <tr>
+        <td style={{ padding: '8px' }}><code>Caractères imprimables</code></td>
+        <td style={{ padding: '8px' }}>
+          Déplace le focus sur l'option commençant par le(s) caractère(s) saisi(s)
+        </td>
+      </tr>
+    </tbody>
+  </table>
+ <p style={{ marginTop: '1em' }}>
+    <strong>Note :</strong> Le focus DOM reste toujours sur l'élément <em>combobox</em>, tandis que le focus visuel est géré via <code>aria-activedescendant</code>.
+  </p>
+  </div>
+
+  <div className="implementation-section">
+    <h2>Spécificités d'implémentation</h2>
+    <p>
+      Conformément aux recommandations WAI-ARIA pour les combobox avec auto-complétion, notre implémentation :
+    </p>
+    <ul>
+      <li>Maintient le focus DOM sur l'input combobox pendant toute l'interaction</li>
+      <li>Utilise <code>aria-activedescendant</code> pour indiquer l'option active aux technologies d'assistance</li>
+      <li>Sépare clairement la navigation (flèches) de la sélection (Entrée)</li>
+      <li>Gère correctement les états visuels et programmatiques des options</li>
+      <li>Implémente un filtrage en temps réel des options basé sur la saisie utilisateur</li>
+      <li>Désactive l'auto-complétion du navigateur pour éviter les conflits</li>
+    </ul>
+  </div>
+</div>
+
+<div className="accessibility-guide">
+<div className="header">
+  <h1>Accessibilité</h1>
+</div>
+
+<div class="mt-2">
+<p>Rapport d’audit manuel : <a href="/audits/SySelect.xlsx" style={{ color:'#0C41BD' }}>Voir le rapport</a></p>
+		<p style={{ color: 'grey', fontSize: '14px', marginTop: '0px' }}>Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/787" target="_blank" style={{color:'#0C41BD'}}>issue #787</a>), (<a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/931" target="_blank" style={{color:'#0C41BD'}}>issue #931</a>)</p>
+</div>
+
+<br />
+
+</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,
+  .keyboard-section h2,
+  .implementation-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;
+  }
+
+  .keyboard-section {
+    background-color: #f0f7ff;
+    padding: 20px;
+    border-radius: 8px;
+    margin-bottom: 30px;
+  }
+
+  .implementation-section {
+    background-color: #f5f5f5;
+    padding: 20px;
+    border-radius: 8px;
+    margin-bottom: 30px;
+  }
+
+  .implementation-section ul {
+    padding-left: 20px;
+  }
+
+  .implementation-section li {
+    margin-bottom: 10px;
+    line-height: 1.5;
+  }
+
+  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/Selects/SySelect/composables/useSySelectKeyboard.ts

@@ -10,6 +10,8 @@ export interface UseSySelectKeyboardOptions {
 	toggleMenu: (skipInitialFocus?: boolean) => void
 	selectItem: (item: ItemType | null | undefined, event?: Event) => void
 	getItemText: (item: unknown) => unknown
+	optionIdPrefix?: string
+	focusListItem?: boolean
 }
 
 export function useSySelectKeyboard(options: UseSySelectKeyboardOptions) {
@@ -19,8 +21,19 @@ export function useSySelectKeyboard(options: UseSySelectKeyboardOptions) {
 		toggleMenu,
 		selectItem,
 		getItemText,
+		optionIdPrefix = 'option',
+		focusListItem = true,
 	} = options
 
+	const getOptionId = (index: number) => `${optionIdPrefix}-${index}`
+	const parseIndexFromId = (id: string | null | undefined) => {
+		if (!id) return NaN
+		const parts = id.split('-')
+		const maybeIndex = parts[parts.length - 1] as string
+		const parsed = parseInt(maybeIndex)
+		return Number.isNaN(parsed) ? NaN : parsed
+	}
+
 	// État central pour le focus et la navigation
 	const activeDescendantId = ref('')
 	const lastFocusedIndex = ref(-1)
@@ -35,13 +48,13 @@ export function useSySelectKeyboard(options: UseSySelectKeyboardOptions) {
 		// Vérifier si l'index est valide
 		if (index >= 0 && index < formattedItems.value.length) {
 			// Mettre à jour l'ID pour ARIA
-			activeDescendantId.value = `option-${index}`
+			activeDescendantId.value = getOptionId(index)
 			// Stocker l'index pour référence future
 			lastFocusedIndex.value = index
 
 			// Appliquer les changements visuels au prochain cycle de rendu
 			nextTick(() => {
-				const element = document.getElementById(`option-${index}`)
+				const element = document.getElementById(getOptionId(index))
 				if (element) {
 					// Supprimer le focus visuel des autres éléments
 					const allItems = document.querySelectorAll('.v-list-item')
@@ -52,6 +65,10 @@ export function useSySelectKeyboard(options: UseSySelectKeyboardOptions) {
 					})
 
 					element.setAttribute('tabindex', '0')
+					element.setAttribute('tabindex', focusListItem ? '0' : '-1')
+					if (focusListItem) {
+						element.focus()
+					}
 					element.classList.add('keyboard-focused')
 					element.scrollIntoView({ block: 'nearest' })
 				}
@@ -108,8 +125,7 @@ export function useSySelectKeyboard(options: UseSySelectKeyboardOptions) {
 
 		// Sinon, essayer de récupérer l'index à partir de l'ID ARIA
 		if (activeDescendantId.value) {
-			const activeIndexString = activeDescendantId.value.split('-')?.[1]
-			const activeIndex = activeIndexString ? parseInt(activeIndexString) : NaN
+			const activeIndex = parseIndexFromId(activeDescendantId.value)
 			if (!isNaN(activeIndex) && activeIndex >= 0 && activeIndex < formattedItems.value.length) {
 				// Synchroniser lastFocusedIndex avec l'index trouvé
 				lastFocusedIndex.value = activeIndex
@@ -300,16 +316,6 @@ export function useSySelectKeyboard(options: UseSySelectKeyboardOptions) {
 	}
 
 	const handleTabKey = () => {
-		if (isOpen.value && activeDescendantId.value) {
-			// Trouver l'item actuellement focusé
-			const currentIndexString = activeDescendantId.value.split('-')?.[1]
-			const currentIndex = currentIndexString ? parseInt(currentIndexString) : NaN
-			if (!isNaN(currentIndex) && currentIndex >= 0 && currentIndex < formattedItems.value.length) {
-				const currentItem = formattedItems.value[currentIndex]
-				// Sélectionner l'item qui a le focus
-				selectItem(currentItem)
-			}
-		}
 		// Fermer le menu (la navigation Tab normale continuera après)
 		if (isOpen.value) {
 			isOpen.value = false
@@ -322,8 +328,7 @@ export function useSySelectKeyboard(options: UseSySelectKeyboardOptions) {
 	// Watch activeDescendantId pour synchroniser lastFocusedIndex
 	watch(activeDescendantId, (newId) => {
 		if (newId) {
-			const indexString = newId.split('-')?.[1]
-			const index = indexString ? parseInt(indexString) : NaN
+			const index = parseIndexFromId(newId)
 			if (!isNaN(index) && index >= 0 && index < formattedItems.value.length) {
 				// Synchroniser lastFocusedIndex avec l'ID ARIA
 				lastFocusedIndex.value = index

package/src/components/Customs/SyCheckBoxGroup/SyCheckBoxGroup.mdx

@@ -0,0 +1,32 @@
+import { Meta, Canvas, Controls } from '@storybook/blocks';
+import '../../../stories/styles/shared.css';
+import * as SyCheckBoxGroupStories from './SyCheckBoxGroup.stories';
+
+<Meta of={SyCheckBoxGroupStories} />
+
+<div className="header">
+  <h1>SyCheckBoxGroup</h1>
+  <p>Le composant `SyCheckBoxGroup` est un groupe de cases à cocher basé sur `SyCheckbox`, 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>.</p>
+</div>
+
+Il étend les fonctionnalités de base avec :
+
+- La gestion d’un groupe d’options via la prop `options`
+- Un mode **sélection unique** (par défaut) ou **multiple** (`multiple`)
+- Un système de validation avancé (erreur, avertissement, succès)
+
+<Canvas of={SyCheckBoxGroupStories.Default} />
+
+# API
+
+<Controls of={SyCheckBoxGroupStories.Default} />
+
+## 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`)
+
+<a href="/?path=/docs/guide-du-dev-guide-de-validation-des-formulaires--docs" className="action-link">Pour plus d'informations sur la validation, consultez le guide de validation des formulaires.</a>