update exemple de menu déroulant #733

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open

damiengomez wants to merge 27 commits into master from master-dgo-update-article-dropdown

src/en/articles/dropdown-menu/index.njk

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -3,18 +3,27 @@ title: "Dropdown menu"
  
    abstract: "Create an accessible drop-down menu."

    titleBeforeTag: true

    date: "2018-01-17"

    updateDate: "2025-11-14"

    tags:

      - component

    ---

    <h2>Introduction</h2>

    <p>In this example we will use the <a href="https://boosted.orange.com/docs/5.1/components/dropdowns/">drop-down menu</a> available in the <a href="https://boosted.orange.com/">Boosted</a> library. This library based on Bootstrap allows you to quickly create <abbr title="User Interface">UI</abbr> components branded with the Orange colours.</p>

    <p>The example implementation described below is suitable for navigation menus as well as for unit components presenting a list of actions.</p>

    <h2>Final example</h2>

    <p>This is how the drop-down looks with our library.</p>

    <p>Dropdown menus help organize and display navigation options or actions in a compact, structured way. However, if they are not properly implemented, they create accessibility issues for many users.</p>

    <p>An accessible dropdown menu ensures smooth and intuitive navigation for everyone, while complying with the recommendations of standards (<abbr>WCAG</abbr>, <abbr>RGAA</abbr>, <abbr>EN 301 549</abbr>, etc.).</p>

    <p>In the following examples, we will use the <a href="https://boosted.orange.com/docs/5.1/components/dropdowns/">dropdown menu</a> available in the <a href="https://boosted.orange.com/">Boosted</a> library.<br /> This Bootstrap‑based library makes it possible to quickly design accessible interfaces in Orange brand colors and compliant with WCAG as well as the <a href="https://www.w3.org/WAI/ARIA/apg/patterns/combobox/">ARIA combobox design pattern</a></p>

    <h2>Dropdown menu</h2>

    <p>To make the dropdown menu accessible, pay particular attention to the following:</p>

    <ul>

    <li>Support mouse and keyboard navigation (navigation with the <kbd>Tab</kbd> key, activation with <kbd>Enter</kbd> or <kbd>Space</kbd>, movement with the arrow keys).</li>

    <li>Be compatible with assistive technologies (<abbr>AT</abbr>) by providing appropriate semantics, roles, and attributes (for example, <code>aria-expanded</code> and <code>aria-current</code>).</li>

    <li>Provide sufficient visibility and contrast to ensure readable text and a clearly visible keyboard focus.</li>

    <li>Ensure the behavior of the dropdown and item selection is predictable and consistent to avoid confusion.</li>

    </ul>

    <h2>Example</h2>

    <!-- Final menu -->

    <div class="dropdown">

      <button class="btn btn-outline-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-bs-toggle="dropdown">

    @@ -24,83 +33,70 @@ tags:
  
      <ul class="dropdown-menu">

        <li><a class="dropdown-item" href="#">My cart</a></li>

        <li><a class="dropdown-item" href="#">My orders</a></li>

        <li><a class="dropdown-item" href="#">My details</a></li>

        <li><a class="dropdown-item" href="#">My information</a></li>

        <li role="separator" class="dropdown-divider"></li>

        <li><a class="dropdown-item" href="#">Log out</a></li>

      </ul>

    </div>

    <h2>Code example</h2>

    <h3>Example code</h3>

    <!-- Example 1 code -->

    <!-- Example code 1 -->

    <pre><code class="html">

    &lt;div class="dropdown"&gt;

      &lt;button class="btn btn-outline-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-bs-toggle="dropdown"&gt;

      &lt;button class="btn btn-outline-secondary dropdown-toggle" aria-expanded="false" type="button" id="dropdownMenu1" data-bs-toggle="dropdown"&gt;

        My account

        &lt;span class="caret"&gt;&lt;/span&gt;

      &lt;/button&gt;

      &lt;ul class="dropdown-menu"&gt;

        &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;My cart&lt;/a&gt;&lt;/li&gt;

        &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;My orders&lt;/a&gt;&lt;/li&gt;

        &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;My details&lt;/a&gt;&lt;/li&gt;

        &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;My information&lt;/a&gt;&lt;/li&gt;

        &lt;li role="separator" class="dropdown-divider"&gt;&lt;/li&gt;

        &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Log out&lt;/a&gt;&lt;/li&gt;

      &lt;/ul&gt;

    &lt;/div&gt;

    </code></pre>

    <h2>Testing</h2>

    <p>For this menu to be accessible, it must be usable with a mouse, keyboard and screen reader.</p>

    <h3><abbr>ARIA</abbr> attributes</h3>

    <ul>

    	<li><code>aria-expanded</code>: the <code>aria-expanded</code> attribute with a value of <code>true/false</code> allows assistive technologies to announce the menu state (open or closed).</li>

    	<li><code>aria-current</code>: if the dropdown is used within a navigation menu, consider adding <code>aria-current="page"</code> to the item corresponding to the active page.</li>

    	<li><code>aria-haspopup</code>: the <code>aria-haspopup</code> attribute is reserved for the <code>menu</code> role (see the “Special case of application menus” section). It is therefore not present in this implementation.</li>

    </ul>

    <h2>Time to test</h2>

    <h3>Keyboard navigation</h3>

     <dl>

       <dt>Move the focus to “My Account” using the <kbd>Tab</kbd> key and press the <kbd>Enter</kbd> key.</dt>

       <dt>Move focus to the “My account” button using the <kbd>Tab</kbd> key and activate with the <kbd>Enter</kbd> key.</dt>

       <dd>The menu opens.</dd>

       <dt>Use the <kbd>up</kbd> / <kbd>down</kbd> arrows.</dt>

       <dd>These allow you to navigate the different menu items.</dd>

       <dt>Press <kbd>Escape</kbd>.</dt>

       <dd>The menu closes. On closing, the focus is automatically repositioned onto the button that opened the menu.</dd>

       <dt></dt>

       <dt>Use the <kbd>Up</kbd>/<kbd>Down</kbd> arrow keys.</dt>

       <dd>These allow you to move between the different menu items.</dd>

       <dt>Press the <kbd>Escape</kbd> key.</dt>

       <dd>The menu closes. When it closes, focus is automatically returned to the button that opens the menu.</dd>

    </dl>

    <h3>Screen reader navigation</h3>

     <dl>

       <dt>Position the cursor on “My Account”.</dt>

       <dd>The screen reader says there is a drop-down menu, and vocalizes the drop-down state (open or closed).</dd>

       <dt>Place focus on the “My account” button.</dt>

       <dd>The screen reader indicates that it is a dropdown menu and announces the menu state (open or closed).</dd>

       <dt>Press the <kbd>Enter</kbd> key.</dt>

       <dd>The menu opens, the first item is selected. This element is automatically vocalized by the screen reader.</dd>

       <dt>Use the <kbd>up</kbd> / <kbd>down</kbd> arrows.</dt>

       <dd>These allow you to navigate to the different menu items.</dd>

       <dd>The menu opens, the first item is selected, and it is automatically announced by the screen reader.</dd>

       <dt>Use the <kbd>Up</kbd>/<kbd>Down</kbd> arrow keys.</dt>

       <dd>These allow you to move between the different menu items.</dd>

       <dt>Select a menu item using the <kbd>Enter</kbd> key.</dt>

       <dd>The menu closes. As the focus is repositioned automatically, the screen reader again vocalizes the menu button, and its state.</dd>

       <dd>The menu closes. Since focus is automatically returned, the screen reader announces the menu button again, along with its state.</dd>

     </dl>

    <h3><abbr>ARIA</abbr> attributes</h3>

    <ul>   

    	<li><code>aria-expanded</code>: the <code>aria-expanded</code> attribute with a <code>true</code>/<code>false</code> value, allows to vocalize menu states (open or closed).</li>

    	<li><code>aria-current</code>: if the dropdown menu is used within a navigation menu, provide for the addition of an attribute <code>aria-current="page"</code> on the item corresponding to the active page.</li>

    	<li><code>aria-haspopup</code>: the <code>aria-haspopup</code> attribute is reserved for the <code> menu </code> role (see paragraph "Special case of application menus"). It is therefore not present in this implementation.</li>

    </ul>

    <pre><code class="html">

      &lt;button aria-expanded="false"&gt;Mon compte&lt;/button&gt;

        &lt;ul class="dropdown-menu"&gt;

          &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Mon panier&lt;/a&gt;&lt;/li&gt;

          &lt;li&gt;&lt;a class="dropdown-item" href="#" aria-current="page"&gt;Mes commandes&lt;/a&gt;&lt;/li&gt;

          &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Mes informations&lt;/a&gt;&lt;/li&gt;

          &lt;li role="separator" class="dropdown-divider"&gt;&lt;/li&gt;

          &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Déconnexion&lt;/a&gt;&lt;/li&gt;

      &lt;/ul&gt;

    </code></pre>

    <p>In addition, the ARIA pattern describes the use of an <code>aria-controls</code> attribute, as well as additional optional keyboard interactions: <kbd lang="en">Home</kbd> / <kbd lang="en">End</kbd></p>

    <p>Additionally, the ARIA pattern describes the use of an <code>aria-controls</code> attribute, as well as optional extra keyboard interactions: <kbd>Home</kbd>/<kbd>End</kbd>.</p>

    <p>Example: <a href="https://www.w3.org/WAI/ARIA/apg/example-index/disclosure/disclosure-navigation.html">Example Disclosure for Navigation Menus</a></p>

    <h2>Special case of application menus</h2>

    <p>The ARIA pattern describes a "Menu" and "Menubar" component, using the roles <code>menu</code> or <code>menubar</code>.</p>

    <p>Please note, this pattern is reserved only for the creation of an application menu, the interactions of which should be similar to the behavior of the menus present in desktop applications for example.</p>

    <p>These implementations are more complex and unnecessary for web navigation menus.</p>

    <p>The ARIA pattern describes “Menu” and “Menubar” components, using the <code>menu</code> and <code>menubar</code> roles.</p>

    <p>Note that this pattern is intended only for building application menus, whose interactions should be similar to menus in desktop applications, for example.</p>

    <p>These implementations are more complex and not necessary for web navigation menus.</p>

    <p>Example: <a href="https://www.w3.org/WAI/ARIA/apg/example-index/menubar/menubar-navigation.html">Editor Menubar Example</a></p>

src/fr/articles/menu-deroulant/index.njk

-Original file line number
+Diff line change
@@ Expand Up / @@ -7,14 +7,22 @@ tags: @@
       - component
     ---
-    <h2>Préambule</h2>
-    <p>Dans cet exemple nous allons utiliser le <a href="https://boosted.orange.com/docs/5.1/components/dropdowns/">menu déroulant</a> disponible dans la librairie <a href="https://boosted.orange.com/">Boosted</a>. Cette librairie basée sur Bootstrap permet de concevoir rapidement des interfaces accessibles aux couleurs de la charte Orange.</p>
+    <h2>Introduction</h2>
-    <p>L'exemple d'implémentation décrit ci-dessous est aussi bien adapté aux menus de navigation comme aux composants unitaires présentant une liste d'actions.</p>
+    <p>Les menus déroulants permettent d’organiser et d’afficher des options de navigation ou des actions de manière compacte et structurée. Cependant, s’ils ne sont pas correctement développés, ils créent des problèmes d’accessibilité pour de nombreux utilisateurs.</p>
+    <p>Un menu déroulant accessible garantit une navigation fluide et intuitive pour tous, en respectant la conformité et les recommandations des normes (<abbr>WCAG</abbr>, <abbr>RGAA</abbr>, <abbr>EN301549</abbr> etc.).</p>
+    <p>Dans les exemples suivants, nous allons utiliser le <a href="https://boosted.orange.com/docs/5.3/components/dropdowns/">menu déroulant</a> disponible dans la librairie <a href="https://boosted.orange.com/">Boosted</a>.<br /> Cette librairie basée sur Bootstrap permet de concevoir rapidement des interfaces accessibles aux couleurs de la charte Orange et conformes aux normes WCAG ainsi qu'au <a hreflang="en" href="https://www.w3.org/WAI/ARIA/apg/patterns/combobox/">motif de conception aria combobox</a></p>
-    <h2>Rendu final</h2>
-    <p>Voici le rendu de notre menu.</p>
+    <h2>Menu déroulant</h2>
+    <p>Pour que le menu déroulant soit accessible, il faudra faire particulièrement attention aux points suivants&nbsp;:</p>
+    <ul>
+    <li>Permettre la navigation à la souris et au clavier (navigation avec la touche <kbd>Tab</kbd>, activation avec <kbd>Entrée</kbd> ou <kbd>Espace</kbd>, déplacement avec les flèches directionnelles).</li>
+    <li>Être compatible avec les technologies d’assistance(<abbr>AT</abbr>), en fournissant une sémantique, des rôles et des attributs adaptés.(<code>aria-expanded</code> et <code>aria-current</code> par exemple)</li>
+    <li>Une visibilité et un contraste suffisants pour une bonne lisibilité des textes et du focus au clavier.</li>
+    <li>Le comportement du menu déroulant et de la sélection d'un élément doivent être prévisibles et cohérents pour éviter toute confusion.</li>
+    </ul>
+    <h2>Exemple</h2>
     <!-- Final menu -->
     <div class="dropdown">
       <button class="btn btn-outline-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-bs-toggle="dropdown">
@@ Expand All / @@ -30,17 +38,17 @@ tags: @@
       </ul>
     </div>
-    <h2>Code de l'exemple</h2>
+    <h3>Code de l'exemple</h3>
     <!-- Code de l'exemple 1 -->
     <pre><code class="html">
     &lt;div class="dropdown"&gt;
-      &lt;button class="btn btn-outline-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-bs-toggle="dropdown"&gt;
+      &lt;button class="btn btn-outline-secondary dropdown-toggle" aria-expanded="false" type="button" id="dropdownMenu1" data-bs-toggle="dropdown"&gt;
         Mon compte
         &lt;span class="caret"&gt;&lt;/span&gt;
       &lt;/button&gt;
       &lt;ul class="dropdown-menu"&gt;
-        &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Mon panier&lt;/a&gt;&lt;/li&gt;
+        &lt;li&gt;&lt;a class="dropdown-item" href="#" &gt;Mon panier&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Mes commandes&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Mes informations&lt;/a&gt;&lt;/li&gt;
         &lt;li role="separator" class="dropdown-divider"&gt;&lt;/li&gt;
@@ Expand All / @@ -49,18 +57,24 @@ tags: @@
     &lt;/div&gt;
     </code></pre>
+    <h3>Attributs <abbr>ARIA</abbr></h3>
+    <ul>
+    	<li><code>aria-expanded</code> : l'attribut <code>aria-expanded</code> avec comme valeur <code>true/false</code>, permet de vocaliser l'état du menu (ouvert ou fermé).</li>
+    	<li><code>aria-current</code> : si le menu déroulant est utilisé au sein d'un menu de navigation, prévoir l'ajout d'un attribut <code>aria-current="page"</code> sur l'item correspondant à la page active.</li>
+    	<li><code>aria-haspopup</code> : l'attribut <code>aria-haspopup</code> est réservé au rôle <code>menu</code> (voir paragraphe "Cas particulier des menus applicatifs"). Il n'est donc pas présent dans cette implémentation.</li>
+    </ul>
     <h2>Place aux tests</h2>
-    <p>Pour que ce menu soit accessible, il doit être utilisable, à la souris, au clavier et au lecteur d'écran.</p>
     <h3>Navigation au clavier</h3>
-     <dl>
+    <dl>
+       <dd>Le menu se ferme. À la fermeture, le focus est automatiquement repositionné sur le bouton permettant d'ouvrir le menu</dd>
        <dt>Déplacer le focus sur le bouton «&nbsp;Mon compte&nbsp;» à l'aide de la touche <kbd>Tab</kbd> et valider avec la touche <kbd>Entrée</kbd>.</dt>
        <dd>Le menu s'ouvre.</dd>
        <dt>Utiliser les flèches <kbd>Haut</kbd>/<kbd>Bas</kbd>.</dt>
        <dd>Celles-ci permettent de se déplacer sur les différents éléments du menu.</dd>
        <dt>Appuyer sur la touche <kbd>Échap</kbd>.</dt>
        <dd>Le menu se ferme. À la fermeture, le focus est automatiquement repositionné sur le bouton permetant d'ouvrir le menu</dd>
-       <dt></dt>
     </dl>
     <h3>Navigation au lecteur d'écran</h3>
@@ Expand All / @@ -75,31 +89,14 @@ tags: @@
        <dd>Le menu se ferme. Comme le focus est replacé automatiquement, le lecteur d'écran vocalise à nouveau le bouton du menu, ainsi que son état.</dd>
      </dl>
-    <h3>Attributs <abbr>ARIA</abbr></h3>
-    <ul>
-    	<li><code>aria-expanded</code> : l'attribut <code>aria-expanded</code> avec comme valeur <code>true/false</code>, permet de vocaliser l'état du menu (ouvert ou fermé).</li>
-    	<li><code>aria-current</code> : si le menu déroulant est utilisé au sein d'un menu de navigation, prévoir l'ajout d'un attribut <code>aria-current="page"</code> sur l'item correspondant à la page active.</li>
-    	<li><code>aria-haspopup</code> : l'attribut <code>aria-haspopup</code> est réservé au rôle <code>menu</code> (voir paragraphe "Cas particulier des menus applicatifs"). Il n'est donc pas présent dans cette implémentation.</li>
-    </ul>
-    <pre><code class="html">
-      &lt;button aria-expanded="false"&gt;Mon compte&lt;/button&gt;
-        &lt;ul class="dropdown-menu"&gt;
-          &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Mon panier&lt;/a&gt;&lt;/li&gt;
-          &lt;li&gt;&lt;a class="dropdown-item" href="#" aria-current="page"&gt;Mes commandes&lt;/a&gt;&lt;/li&gt;
-          &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Mes informations&lt;/a&gt;&lt;/li&gt;
-          &lt;li role="separator" class="dropdown-divider"&gt;&lt;/li&gt;
-          &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Déconnexion&lt;/a&gt;&lt;/li&gt;
-      &lt;/ul&gt;
-    </code></pre>
     <p>En complément le pattern ARIA décrit l'utilisation d'un attribut <code>aria-controls</code>, ainsi que des interactions claviers optionnelles supplémentaires : <kbd lang="en">Home</kbd>/<kbd lang="en">End</kbd></p>
-    <p>Exemple : <a href="https://www.w3.org/WAI/ARIA/apg/example-index/disclosure/disclosure-navigation.html" hreflang="en" lang="en">Example Disclosure for Navigation Menus</a></p>
+    <p>Le motif de conception <abbr>ARIA</abbr> décrit les composants "Menu" et "Menubar" qui utilisent les rôles <code>menu</code> ou <code>menubar</code>.</p>
     <h2>Cas particulier des menus applicatifs</h2>
     <p>Le pattern ARIA décrit un composant "Menu" et "Menubar", utilisant les rôles <code>menu</code> ou  <code>menubar</code>.</p>
-    <p>Attention, ce pattern est réservé uniquement à la création de menu applicatif, dont les interactions devront se rapprocher du comportement des menus présent dans des applications bureaux par exemple.</p>
+    <p>Attention, ce pattern est réservé uniquement à la création de menu applicatif, dont les interactions devront se rapprocher du comportement des menus présent dans des applications de bureaux par exemple.</p>
     <p>Ces implémentations sont plus complexes et non nécessaires aux menus de navigation web.</p>
     <p>Exemple : <a href="https://www.w3.org/WAI/ARIA/apg/example-index/menubar/menubar-navigation.html" hreflang="en" lang="en">Editor Menubar Example</a></p>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

update exemple de menu déroulant #733

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Uh oh!

Uh oh!

Uh oh!

update exemple de menu déroulant #733

Are you sure you want to change the base?

Uh oh!

update exemple de menu déroulant #733

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Uh oh!

Uh oh!

Uh oh!