@cnamts/synapse 1.0.2 → 1.0.3

package/src/components/Customs/Selects/SelectOverview.mdx

@@ -0,0 +1,350 @@
+import { Meta, Canvas, Controls, Source } from '@storybook/blocks';
+import { linkTo } from '@storybook/addon-links';
+
+<Meta title="Composants/Formulaires/Selects/Introduction" />
+
+# Select - Vue d'ensemble
+
+Les composants de sélection facilitent le choix d'une ou plusieurs options parmi une liste prédéfinie. Cette page détaille chaque variante disponible et vous guide pour choisir celle qui correspond le mieux à votre cas d'usage.
+
+## Variantes disponibles
+
+Notre système propose quatre modes de sélection, chacun adapté à des besoins spécifiques :
+
+<div className="sb-unstyled" style={{ display: 'flex', flexDirection: 'column', gap: '20px', marginBottom: '30px' }}>
+  <div style={{ display: 'flex', flexWrap: 'wrap', gap: '20px' }}>
+  <div 
+    style={{ 
+      flex: '1 1 300px', 
+      border: '1px solid #e0e0e0', 
+      borderRadius: '8px', 
+      padding: '20px',
+      cursor: 'pointer',
+      boxShadow: '0 2px 5px rgba(0,0,0,0.05)',
+      transition: 'all 0.2s ease',
+      backgroundColor: '#fff'
+    }}
+    onClick={() => linkTo('Composants/Formulaires/Selects/SySelect')()}
+  >
+    <h3 style={{ marginTop: 0, marginBottom: '10px', color: '#1976d2' }}>SySelect</h3>
+    <div>Composant de sélection complet et flexible, supportant la sélection simple ou multiple.</div>
+    <div style={{ marginTop: '10px', color: '#666' }}>
+      <strong>Idéal pour :</strong>
+      <ul style={{ marginLeft: '20px', marginTop: '5px' }}>
+        <li>Sélection d'une ou plusieurs options</li>
+        <li>Affichage sous forme de puces (chips)</li>
+        <li>Interfaces utilisateur standard</li>
+        <li>Support de la validation</li>
+        <li>Support de la recherche par caractères imprimables (Navigation vers l'option commençant par le caractère saisi)</li>
+      </ul>
+    </div>
+    <div style={{ marginTop: '15px' }}>
+      <span style={{ 
+        padding: '5px 10px', 
+        color: '#1976d2', 
+        borderRadius: '4px', 
+        fontSize: '14px' 
+      }}>
+        Voir la documentation →
+      </span>
+    </div>
+  </div>
+
+  <div 
+    style={{ 
+      flex: '1 1 300px', 
+      border: '1px solid #e0e0e0', 
+      borderRadius: '8px', 
+      padding: '20px',
+      cursor: 'pointer',
+      boxShadow: '0 2px 5px rgba(0,0,0,0.05)',
+      transition: 'all 0.2s ease',
+      backgroundColor: '#fff'
+    }}
+    onClick={() => linkTo('Composants/Formulaires/Selects/SyInputSelect')()}
+  >
+    <h3 style={{ marginTop: 0, marginBottom: '10px', color: '#7b1fa2' }}>SyInputSelect</h3>
+    <div>Un composant de sélection qui ressemble à un champ de texte standard avec validation intégrée.</div>
+    <div style={{ marginTop: '10px', color: '#666' }}>
+      <strong>Idéal pour :</strong>
+      <ul style={{ marginLeft: '20px', marginTop: '5px' }}>
+        <li>Formulaires avec validation stricte</li>
+        <li>Interfaces utilisateur cohérentes</li>
+        <li>Sélection simple</li>
+        <li>Support de la validation</li>
+      </ul>
+    </div>
+    <div style={{ marginTop: '15px' }}>
+      <span style={{ 
+        padding: '5px 10px', 
+        color: '#7b1fa2', 
+        borderRadius: '4px', 
+        fontSize: '14px' 
+      }}>
+        Voir la documentation →
+      </span>
+    </div>
+  </div>
+</div>
+
+<div style={{ display: 'flex', flexWrap: 'wrap', gap: '20px' }}>
+  <div 
+    style={{ 
+      flex: '1 1 300px', 
+      border: '1px solid #e0e0e0', 
+      borderRadius: '8px', 
+      padding: '20px',
+      cursor: 'pointer',
+      boxShadow: '0 2px 5px rgba(0,0,0,0.05)',
+      transition: 'all 0.2s ease',
+      backgroundColor: '#fff'
+    }}
+    onClick={() => linkTo('Composants/Formulaires/Selects/SyBtnSelect')()}
+  >
+    <h3 style={{ marginTop: 0, marginBottom: '10px', color: '#00796b' }}>SyBtnSelect</h3>
+    <div>Un composant de sélection sous forme de bouton, idéal pour les menus utilisateur ou les sélecteurs compacts.</div>
+    <div style={{ marginTop: '10px', color: '#666' }}>
+      <strong>Idéal pour :</strong>
+      <ul style={{ marginLeft: '20px', marginTop: '5px' }}>
+        <li>Menus utilisateur</li>
+        <li>Interfaces compactes</li>
+        <li>Affichage d'informations principales et secondaires</li>
+      </ul>
+    </div>
+    <div style={{ marginTop: '15px' }}>
+      <span style={{ 
+        padding: '5px 10px', 
+        color: '#00796b', 
+        borderRadius: '4px', 
+        fontSize: '14px' 
+      }}>
+        Voir la documentation →
+      </span>
+    </div>
+  </div>
+
+  <div 
+    style={{ 
+      flex: '1 1 300px', 
+      border: '1px solid #e0e0e0', 
+      borderRadius: '8px', 
+      padding: '20px',
+      cursor: 'pointer',
+      boxShadow: '0 2px 5px rgba(0,0,0,0.05)',
+      transition: 'all 0.2s ease',
+      backgroundColor: '#fff'
+    }}
+    onClick={() => linkTo('Composants/Formulaires/Selects/SelectBtnField')()}
+  >
+    <h3 style={{ marginTop: 0, marginBottom: '10px', color: '#e65100' }}>SelectBtnField</h3>
+    <div>Un composant de sélection sous forme de boutons toggle, idéal pour les choix visuels et les options mutuellement exclusives.</div>
+    <div style={{ marginTop: '10px', color: '#666' }}>
+      <strong>Idéal pour :</strong>
+      <ul style={{ marginLeft: '20px', marginTop: '5px' }}>
+        <li>Choix visuels et explicites</li>
+        <li>Options mutuellement exclusives ou multiples</li>
+        <li>Interfaces modernes avec mise en évidence visuelle</li>
+      </ul>
+    </div>
+    <div style={{ marginTop: '15px' }}>
+      <span style={{ 
+        padding: '5px 10px', 
+        color: '#e65100', 
+        borderRadius: '4px', 
+        fontSize: '14px' 
+      }}>
+        Voir la documentation →
+      </span>
+    </div>
+  </div>
+</div>
+</div>
+
+## Tableau comparatif des fonctionnalités
+
+<div className="sb-unstyled">
+  <table style={{ width: '100%', borderCollapse: 'collapse', marginBottom: '30px' }}>
+    <thead>
+      <tr style={{ backgroundColor: '#f5f5f5' }}>
+        <th style={{ padding: '12px', textAlign: 'left', borderBottom: '2px solid #e0e0e0' }}>Fonctionnalité</th>
+        <th style={{ padding: '12px', textAlign: 'center', borderBottom: '2px solid #e0e0e0' }}>SySelect</th>
+        <th style={{ padding: '12px', textAlign: 'center', borderBottom: '2px solid #e0e0e0' }}>SyInputSelect</th>
+        <th style={{ padding: '12px', textAlign: 'center', borderBottom: '2px solid #e0e0e0' }}>SyBtnSelect</th>
+        <th style={{ padding: '12px', textAlign: 'center', borderBottom: '2px solid #e0e0e0' }}>SelectBtnField</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td style={{ padding: '10px', borderBottom: '1px solid #e0e0e0' }}>Sélection multiple</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>✅</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>❌</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>❌</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>✅</td>
+      </tr>
+      <tr>
+        <td style={{ padding: '10px', borderBottom: '1px solid #e0e0e0' }}>Affichage de puces (chips)</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>✅</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>❌</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>❌</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>❌</td>
+      </tr>
+      <tr>
+        <td style={{ padding: '10px', borderBottom: '1px solid #e0e0e0' }}>Validation intégrée</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>✅</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>✅</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>❌</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>✅</td>
+      </tr>
+      <tr>
+        <td style={{ padding: '10px', borderBottom: '1px solid #e0e0e0' }}>Apparence de bouton</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>❌</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>❌</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>✅</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>✅</td>
+      </tr>
+      <tr>
+        <td style={{ padding: '10px', borderBottom: '1px solid #e0e0e0' }}>Mode icône uniquement</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>❌</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>❌</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>✅</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>❌</td>
+      </tr>
+      <tr>
+        <td style={{ padding: '10px', borderBottom: '1px solid #e0e0e0' }}>Effaçable (clearable)</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>✅</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>✅</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>❌</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>✅</td>
+      </tr>
+      <tr>
+        <td style={{ padding: '10px', borderBottom: '1px solid #e0e0e0' }}>Densité personnalisable</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>✅</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>❌</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>❌</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>❌</td>
+      </tr>
+      <tr>
+        <td style={{ padding: '10px', borderBottom: '1px solid #e0e0e0' }}>Retourne l'objet complet</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>✅</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>✅</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>✅</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>❌</td>
+      </tr>
+      <tr>
+        <td style={{ padding: '10px', borderBottom: '1px solid #e0e0e0' }}>Disposition en ligne/colonne</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>❌</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>❌</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>❌</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>✅</td>
+      </tr>
+      <tr>
+        <td style={{ padding: '10px', borderBottom: '1px solid #e0e0e0' }}>Options uniques</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>❌</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>❌</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>❌</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>✅</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+## Comment choisir la bonne variante ?
+
+### Utilisez SySelect quand :
+- Vous avez besoin d'une sélection simple ou multiple
+- Vous souhaitez afficher les sélections multiples sous forme de puces (chips)
+- Vous avez besoin de personnaliser la densité d'affichage
+
+### Utilisez SyInputSelect quand :
+- Vous avez besoin d'une interface cohérente avec les autres champs de formulaire
+- La validation des entrées est primordiale
+- Vous préférez une apparence de champ de texte standard
+
+### Utilisez SyBtnSelect quand :
+- Vous créez un menu utilisateur ou un sélecteur compact
+- Vous souhaitez afficher des informations principales et secondaires
+- Vous avez besoin d'un mode icône uniquement pour les interfaces très compactes
+
+### Utilisez SelectBtnField quand :
+- Vous avez besoin d'options visuellement distinctes sous forme de boutons
+- Vous souhaitez permettre la sélection multiple ou unique d'options
+- Vous avez besoin d'une disposition en ligne ou en colonne des options
+
+## Exemple d'implémentation
+
+<Source
+  dark
+  code={`
+// SySelect - Sélection simple
+<SySelect
+  v-model="selectedOption"
+  :items="options"
+  label="Sélectionnez une option"
+  required
+/>
+
+// SySelect - Sélection multiple avec puces
+<SySelect
+  v-model="selectedOptions"
+  :items="options"
+  label="Sélectionnez des options"
+  multiple
+  chips
+/>
+
+// SyInputSelect
+<SyInputSelect
+  v-model="selectedOption"
+  :items="options"
+  label="Sélectionnez une option"
+  required
+  :custom-rules="myValidationRules"
+/>
+
+// SyBtnSelect
+<SyBtnSelect
+  v-model="selectedOption"
+  :menu-items="options"
+  primary-info="Utilisateur"
+  secondary-info="Admin"
+>
+  <template #prepend-icon>
+    <VIcon>mdiAccount</VIcon>
+  </template>
+</SyBtnSelect>
+
+// SelectBtnField - Sélection simple
+<SelectBtnField
+  v-model="selectedOption"
+  :items="[
+    { text: 'Email', value: 'email' },
+    { text: 'Courrier', value: 'courrier' },
+    { text: 'SMS', value: 'sms' }
+  ]"
+  label="Moyen de contact"
+/>
+
+// SelectBtnField - Sélection multiple
+<SelectBtnField
+  v-model="selectedOptions"
+  :items="[
+    { text: 'Email', value: 'email' },
+    { text: 'Courrier', value: 'courrier' },
+    { text: 'SMS', value: 'sms' }
+  ]"
+  label="Moyens de contact"
+  multiple
+  inline
+/>
+`}
+/>
+
+## Bonnes pratiques
+
+- Toujours spécifier un label clair pour indiquer ce que l'utilisateur doit sélectionner
+- Utiliser la propriété `required` lorsqu'une sélection est obligatoire
+- Pour SySelect et SyInputSelect, ajouter `clearable` pour permettre à l'utilisateur d'effacer sa sélection
+- Pour les sélections multiples, préférer l'affichage en puces (chips) pour une meilleure lisibilité
+- Adapter le type de sélecteur au contexte d'utilisation (formulaire standard, menu utilisateur, etc.)
+- Pour SelectBtnField, utiliser la propriété `inline` pour une disposition horizontale des options
+- Pour SelectBtnField, utiliser la propriété `unique` sur certaines options pour qu'elles désélectionnent automatiquement les autres options lorsqu'elles sont sélectionnées

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

@@ -8,7 +8,7 @@ const iconEye = mdiEye
 const linkICon = mdiLink
 
 export default {
-	title: 'Composants/Formulaires/SyBtnSelect/Accessibilité',
+	title: 'Composants/Formulaires/Selects/SyBtnSelect/Accessibilité',
 }
 
 export const AccessibilitePanel: StoryObj = {

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

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

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

@@ -4,7 +4,7 @@ import SyBtnSelect from './SyBtnSelect.vue'
 import { VIcon, VListItem, VListItemTitle } from 'vuetify/components'
 
 const meta: Meta<typeof SyBtnSelect> = {
-	title: 'Composants/Formulaires/SyBtnSelect',
+	title: 'Composants/Formulaires/Selects/SyBtnSelect',
 	component: SyBtnSelect,
 	parameters: {
 		layout: 'fullscreen',

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

@@ -8,7 +8,7 @@ const iconEye = mdiEye
 const linkICon = mdiLink
 
 export default {
-	title: 'Composants/Formulaires/SyInputSelect/Accessibilité',
+	title: 'Composants/Formulaires/Selects/SyInputSelect/Accessibilité',
 }
 
 export const AccessibilitePanel: StoryObj = {

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

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

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

@@ -2,10 +2,10 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 import SyInputSelect from './SyInputSelect.vue'
 import { VBtn, VMenu, VList, VListItem, VListItemTitle, VForm } from 'vuetify/components'
 import { ref } from 'vue'
-import SyAlert from '@/components/SyAlert/SyAlert.vue'
+import SyAlert from '../../../SyAlert/SyAlert.vue'
 
 const meta = {
-	title: 'Composants/Formulaires/SyInputSelect',
+	title: 'Composants/Formulaires/Selects/SyInputSelect',
 	component: SyInputSelect,
 	parameters: {
 		layout: 'fullscreen',

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>