@cnamts/synapse 1.0.2 → 1.0.4

package/src/components/Customs/Selects/SySelect/Accessibilite.mdx

@@ -0,0 +1,204 @@
+import { Meta, Story } from '@storybook/addon-docs';
+import * as AccessStories from './Accessibilite.stories.ts';
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
+
+<Meta of={AccessStories} />
+
+<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>
+    <Story of={AccessStories.ComboboxKeyboardNavigation} />
+  </div>
+
+  <div className="implementation-section">
+    <h2>Spécificités d'implémentation</h2>
+    <p>
+      Conformément aux recommandations WAI-ARIA pour les combobox select-only, 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>
+    </ul>
+  </div>
+</div>
+
+<br />
+<Story of={AccessStories.AccessibilitePanel} />
+<br />
+
+<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/{SySelect → Selects/SySelect}/Accessibilite.stories.ts

@@ -1,15 +1,77 @@
-import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon } from 'vuetify/components'
+import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon, VTable } from 'vuetify/components'
 import type { StoryObj } from '@storybook/vue3'
 import { AccessibiliteItemsIndeterminate, AccessibiliteItemsValidated } from './AccessibiliteItems'
-import { mdiCheckboxMarkedCircle, mdiLink, mdiEye } from '@mdi/js'
+import { mdiCheckboxMarkedCircle, mdiLink, mdiEye, mdiKeyboard } from '@mdi/js'
 
 const checkIcon = mdiCheckboxMarkedCircle
 const iconEye = mdiEye
 const linkICon = mdiLink
+const keyboardIcon = mdiKeyboard
 
 export default {
-	title: 'Composants/Formulaires/SySelect/Accessibilité',
+	title: 'Composants/Formulaires/Selects/SySelect/Accessibilité',
 }
+
+// Story masquée qui n'apparaît que dans le MDX
+export const ComboboxKeyboardNavigation: StoryObj = {
+	tags: ['!dev'],
+	render: () => {
+		return {
+			components: { VTable, VIcon },
+			setup() {
+				const keyboardData = [
+					{
+						touche: 'Flèche bas',
+						action: '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)',
+					},
+					{
+						touche: 'Flèche haut',
+						action: 'Ouvre le menu et déplace le focus sur la dernière option',
+					},
+					{
+						touche: 'Flèches haut/bas',
+						action: 'Déplace le focus dans la liste des options (sans modifier la sélection)',
+					},
+					{
+						touche: 'Entrée',
+						action: 'Sélectionne l\'option active et ferme le menu',
+					},
+					{
+						touche: 'Échap',
+						action: 'Ferme le menu sans modifier la sélection',
+					},
+					{
+						touche: 'Caractères imprimables',
+						action: 'Déplace le focus sur l\'option commençant par le(s) caractère(s) saisi(s)',
+					},
+				]
+				return { keyboardData, keyboardIcon }
+			},
+			template: `
+				<div>
+					<h3><v-icon :icon="keyboardIcon" style="margin-right: 8px;"/>Navigation au clavier</h3>
+					<p>Le composant SySelect implémente le pattern de navigation au clavier recommandé par le W3C pour les combobox select-only.</p>
+					<v-table density="compact" style="margin-top: 16px;">
+						<thead>
+							<tr>
+								<th>Touche</th>
+								<th>Action</th>
+							</tr>
+						</thead>
+						<tbody>
+							<tr v-for="(item, index) in keyboardData" :key="index">
+								<td><code>{{ item.touche }}</code></td>
+								<td>{{ item.action }}</td>
+							</tr>
+						</tbody>
+					</v-table>
+					<p style="margin-top: 16px;"><strong>Note:</strong> Le focus DOM reste toujours sur l'élément combobox, tandis que le focus visuel est géré via <code>aria-activedescendant</code>.</p>
+				</div>
+			`,
+		}
+	},
+}
+
 export const AccessibilitePanel: StoryObj = {
 
 	render: () => {
@@ -209,6 +271,14 @@ export const Legende: StoryObj = {
 					Problèmes relevés par Tanaguru
 				  </div>
 				</div>
+        <div class="mt-4">
+					  <p>Rapport d’audit manuel : <a href="/audits/SySelect.xlsx" style="color:#0C41BD;">Voir le
+						  rapport</a></p>
+					  <p style="color: grey; font-size: 14px">Correctifs associés (<a
+						  href="https://github.com/assurance-maladie-digital/design-system-v3/issues/787" target="_blank"
+						  style="color:#0C41BD;"
+					  >issue #787</a>)</p>
+				  </div>
 			  </div>
             `,
 		}

package/src/components/Customs/{SySelect → Selects/SySelect}/SySelect.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Meta, Controls, Story, Source } from '@storybook/blocks';
-import * as SySelectStories from "./SySelect.stories";
+import * as SySelectStories from "./SySelect.stories.ts";
 
 <Meta of={SySelectStories} />
 

package/src/components/Customs/{SySelect → Selects/SySelect}/SySelect.stories.ts

@@ -1,12 +1,12 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import SySelect from '@/components/Customs/SySelect/SySelect.vue'
-import SyAlert from '@/components/SyAlert/SyAlert.vue'
+import SySelect from '@/components/Customs/Selects/SySelect/SySelect.vue'
+import SyAlert from '../../../SyAlert/SyAlert.vue'
 import { VBtn, VMenu, VList, VListItem, VListItemTitle, VForm } from 'vuetify/components'
 import { ref } from 'vue'
 import { fn } from '@storybook/test'
 
 const meta: Meta<typeof SySelect> = {
-	title: 'Composants/Formulaires/SySelect',
+	title: 'Composants/Formulaires/Selects/SySelect',
 	component: SySelect,
 	parameters: {
 		layout: 'fullscreen',
@@ -82,8 +82,16 @@ export const Default: Story = {
 					import SySelect from '@cnamts/SySelect'
 					
 					const items =  [
-						{ text: 'Option 1', value: '1' },
-						{ text: 'Option 2', value: '2' },
+						{ text: 'Adrien', value: 'Adrien' },
+						{ text: 'Axel', value: 'Axel' },
+						{ text: 'Baptiste', value: 'Baptiste' },
+						{ text: 'Clement', value: 'Clement' },
+						{ text: 'Corentin', value: 'Corentin' },
+						{ text: 'Damien', value: 'Damien' },
+						{ text: 'David', value: 'David' },
+						{ text: 'Eloi', value: 'Eloi' },
+						{ text: 'Louis', value: 'Louis' },
+						{ text: 'Valentin', value: 'Valentin' },
 					],
 				</script>
 				`,
@@ -92,8 +100,16 @@ export const Default: Story = {
 	},
 	args: {
 		'items': [
-			{ text: 'Option 1', value: '1' },
-			{ text: 'Option 2', value: '2' },
+			{ text: 'Adrien', value: 'Adrien' },
+			{ text: 'Axel', value: 'Axel' },
+			{ text: 'Baptiste', value: 'Baptiste' },
+			{ text: 'Clement', value: 'Clement' },
+			{ text: 'Corentin', value: 'Corentin' },
+			{ text: 'Damien', value: 'Damien' },
+			{ text: 'David', value: 'David' },
+			{ text: 'Eloi', value: 'Eloi' },
+			{ text: 'Louis', value: 'Louis' },
+			{ text: 'Valentin', value: 'Valentin' },
 		],
 		'onUpdate:modelValue': fn(),
 	},
@@ -269,10 +285,16 @@ import SySelect from '@cnamts/synapse'
 
 const selectedOptions = ref([])
 const options = [
-  { text: 'Option 1', value: '1' },
-  { text: 'Option 2', value: '2' },
-  { text: 'Option 3', value: '3' },
-  { text: 'Option 4', value: '4' },
+						{ text: 'Adrien', value: 'Adrien' },
+						{ text: 'Axel', value: 'Axel' },
+						{ text: 'Baptiste', value: 'Baptiste' },
+						{ text: 'Clement', value: 'Clement' },
+						{ text: 'Corentin', value: 'Corentin' },
+						{ text: 'Damien', value: 'Damien' },
+						{ text: 'David', value: 'David' },
+						{ text: 'Eloi', value: 'Eloi' },
+						{ text: 'Louis', value: 'Louis' },
+						{ text: 'Valentin', value: 'Valentin' },
 ]
 </script>
         `,
@@ -281,10 +303,16 @@ const options = [
 	},
 	args: {
 		'items': [
-			{ text: 'Option 1', value: '1' },
-			{ text: 'Option 2', value: '2' },
-			{ text: 'Option 3', value: '3' },
-			{ text: 'Option 4', value: '4' },
+			{ text: 'Adrien', value: 'Adrien' },
+			{ text: 'Axel', value: 'Axel' },
+			{ text: 'Baptiste', value: 'Baptiste' },
+			{ text: 'Clement', value: 'Clement' },
+			{ text: 'Corentin', value: 'Corentin' },
+			{ text: 'Damien', value: 'Damien' },
+			{ text: 'David', value: 'David' },
+			{ text: 'Eloi', value: 'Eloi' },
+			{ text: 'Louis', value: 'Louis' },
+			{ text: 'Valentin', value: 'Valentin' },
 		],
 		'label': 'Sélection multiple',
 		'multiple': true,