Merge pull request #5563 from betagouv/5546-dropdown-accessible

5546 rend accessible les menus déroulants

app/assets/stylesheets/new_design/new_header.scss

@@ -192,9 +192,6 @@ $header-mobile-breakpoint: 550px;
     background: none;
   }
 
-  &::after {
-    display: none;
-  }
 }
 
 .header-menu {

app/javascript/new_design/dropdown.js

@@ -2,16 +2,21 @@ import { delegate } from '@utils';
 
 delegate('click', 'body', (event) => {
   if (!event.target.closest('.dropdown')) {
-    [...document.querySelectorAll('.dropdown')].forEach((element) =>
-      element.classList.remove('open', 'fade-in-down')
-    );
+    [...document.querySelectorAll('.dropdown')].forEach((element) => {
+      const button = element.querySelector('.dropdown-button');
+      button.setAttribute('aria-expanded', false);
+      element.classList.remove('open', 'fade-in-down');
+    });
   }
 });
 
 delegate('click', '.dropdown-button', (event) => {
   event.stopPropagation();
-  const parent = event.target.closest('.dropdown-button').parentElement;
+  const button = event.target.closest('.dropdown-button');
+  const parent = button.parentElement;
   if (parent.classList.contains('dropdown')) {
     parent.classList.toggle('open');
+    var buttonExpanded = button.getAttribute('aria-expanded') === 'true';
+    button.setAttribute('aria-expanded', !buttonExpanded);
   }
 });

app/views/instructeurs/dossiers/_header_actions.html.haml

@@ -1,7 +1,7 @@
 %span.dropdown.print-menu-opener
-  %button.button.dropdown-button.icon-only{ title: 'imprimer', 'aria-label': 'imprimer' }
+  %button.button.dropdown-button.icon-only{ title: 'imprimer', 'aria-label': 'imprimer', 'aria-expanded' => 'false', 'aria-controls' => 'print-menu' }
     %span.icon.printer
-  %ul.print-menu.dropdown-content
+  %ul#print-menu.print-menu.dropdown-content
     %li
       = link_to "Tout le dossier", print_instructeur_dossier_path(dossier.procedure, dossier), target: "_blank", rel: "noopener", class: "menu-item menu-link"
     %li
@@ -14,9 +14,9 @@
 
 - if PiecesJustificativesService.liste_pieces_justificatives(dossier).present?
   %span.dropdown.print-menu-opener
-    %button.button.dropdown-button.icon-only
+    %button.button.dropdown-button.icon-only{ 'aria-expanded' => 'false', 'aria-controls' => 'print-pj-menu' }
       %span.icon.attached
-    %ul.print-menu.dropdown-content
+    %ul#print-pj-menu.print-menu.dropdown-content
       %li
         - if PiecesJustificativesService.pieces_justificatives_total_size(dossier) < Dossier::TAILLE_MAX_ZIP
           = link_to "Télécharger toutes les pièces jointes", telecharger_pjs_instructeur_dossier_path(dossier.procedure, dossier), target: "_blank", rel: "noopener", class: "menu-item menu-link"

app/views/instructeurs/dossiers/_state_button.html.haml

@@ -1,10 +1,10 @@
 .dropdown
   -# Dropdown button title
-  %button.button.primary.dropdown-button{ class: button_or_label_class(dossier) }
+  %button.button.primary.dropdown-button{ class: button_or_label_class(dossier), 'aria-expanded' => 'false', 'aria-controls' => 'state-menu' }
     = dossier_display_state dossier
 
   -# Dropdown content
-  .dropdown-content.fade-in-down
+  #state-menu.dropdown-content.fade-in-down
 
     - if dossier.en_construction?
       -# ------------------------------------------------------

app/views/instructeurs/procedures/_download_dossiers.html.haml

@@ -1,8 +1,8 @@
 - if procedure.dossiers.state_not_brouillon.any?
   %span.dropdown
-    %button.button.dropdown-button
+    %button.button.dropdown-button{ 'aria-expanded' => 'false', 'aria-controls' => 'download-menu' }
       Télécharger tous les dossiers
-    .dropdown-content.fade-in-down{ style: 'width: 330px' }
+    #download-menu.dropdown-content.fade-in-down{ style: 'width: 330px' }
       %ul.dropdown-items
         - [[xlsx_export, :xlsx], [ods_export, :ods], [csv_export, :csv]].each do |(export, format)|
           %li

app/views/instructeurs/procedures/show.html.haml

@@ -78,9 +78,9 @@
     - if @dossiers.present? || @current_filters.count > 0
       = paginate @dossiers
       %span.dropdown
-        %button.button.dropdown-button
+        %button.button.dropdown-button{ 'aria-expanded' => 'false', 'aria-controls' => 'filter-menu' }
           Filtrer
-        .dropdown-content.left-aligned.fade-in-down
+        #filter-menu.dropdown-content.left-aligned.fade-in-down
           = form_tag add_filter_instructeur_procedure_path(@procedure), method: :post, class: 'dropdown-form large' do
             = label_tag :field,  "Colonne"
             = select_tag :field, options_for_select(@available_fields_to_filters)
@@ -118,9 +118,9 @@
 
             %th.action-col.follow-col
               %span.dropdown
-                %button.button.dropdown-button
+                %button.button.dropdown-button{ 'aria-expanded' => 'false', 'aria-controls' => 'custom-menu' }
                   Personnaliser
-                .dropdown-content.fade-in-down
+                #custom-menu.dropdown-content.fade-in-down
                   = form_tag update_displayed_fields_instructeur_procedure_path(@procedure), method: :patch, class: 'dropdown-form columns-form' do
                     = select_tag :values,
                       options_for_select(@procedure_presentation.fields_for_select,

app/views/invites/_dropdown.html.haml

@@ -1,5 +1,5 @@
 .dropdown.invite-user-action
-  %button.button.dropdown-button
+  %button.button.dropdown-button{ 'aria-expanded' => 'false', 'aria-controls' => 'invite-content' }
     %span.icon.person
     - if dossier.invites.count > 0
       Voir les personnes invitées
@@ -10,5 +10,5 @@
       - else
         Inviter une personne à modifier ce dossier
 
-  .dropdown-content.fade-in-down
+  #invite-content.dropdown-content.fade-in-down
     = render partial: "invites/form", locals: { dossier: dossier }

app/views/layouts/_account_dropdown.haml

@@ -1,8 +1,8 @@
 .dropdown.header-menu-opener
-  %button.button.dropdown-button.header-menu-button{ title: "Mon compte" }
+  %button.button.dropdown-button.icon-only.header-menu-button{ title: "Mon compte", 'aria-expanded' => 'false', 'aria-controls' => 'mon_compte_menu' }
     .hidden Mon compte
-    = image_tag "icons/account-circle.svg", alt: ''
-  %ul.header-menu.dropdown-content
+    = image_tag "icons/account-circle.svg", alt: 'Mon compte'
+  %ul.header-menu.dropdown-content#mon_compte_menu
     %li
       .menu-item{ title: current_email }
         = current_email

app/views/new_administrateur/procedures/_procedures_list.html.haml

@@ -33,9 +33,9 @@
           %span.icon.edit
           Modifier
         .dropdown
-          .button.dropdown-button.procedures-actions-btn
+          .button.dropdown-button.procedures-actions-btn{ 'aria-expanded' => 'false', 'aria-controls' => 'actions-menu' }
             Actions
-          .dropdown-content.fade-in-down
+          #actions-menu.dropdown-content.fade-in-down
             %ul.dropdown-items.pl-0
               - if !procedure.close?
                 %li

app/views/shared/help/_help_dropdown_dossier.html.haml

@@ -1,6 +1,6 @@
 .dropdown.help-dropdown
-  %button.button.primary.dropdown-button Aide
-  .dropdown-content.fade-in-down
+  %button.button.primary.dropdown-button{ 'aria-expanded' => 'false', 'aria-controls' => 'help-menu' } Aide
+  #help-menu.dropdown-content.fade-in-down
     %ul.dropdown-items
       - title = dossier.brouillon? ? "Besoin d’aide pour remplir votre dossier ?" : "Une question sur votre dossier ?"
 

app/views/shared/help/_help_dropdown_instructeur.html.haml

@@ -1,6 +1,6 @@
 .dropdown.help-dropdown
-  %button.button.primary.dropdown-button Aide
-  .dropdown-content.fade-in-down
+  %button.button.primary.dropdown-button{ 'aria-expanded' => 'false', 'aria-controls' => 'help-menu' } Aide
+  #help-menu.dropdown-content.fade-in-down
     %ul.dropdown-items
       = render partial: 'shared/help/dropdown_items/faq_item'
       = render partial: 'shared/help/dropdown_items/email_item'

app/views/shared/help/_help_dropdown_procedure.html.haml

@@ -1,6 +1,6 @@
 .dropdown.help-dropdown
-  %button.button.primary.dropdown-button Aide
-  .dropdown-content.fade-in-down
+  %button.button.primary.dropdown-button{ 'aria-expanded' => 'false', 'aria-controls' => 'help-menu' } Aide
+  #help-menu.dropdown-content.fade-in-down
     %ul.dropdown-items
       - if procedure.service.present?
         = render partial: 'shared/help/dropdown_items/service_item',

app/views/users/dossiers/_dossier_actions.html.haml

@@ -5,9 +5,9 @@
 
 - if has_actions
   .dropdown.user-dossier-actions
-    %button.button.dropdown-button
+    %button.button.dropdown-button{ 'aria-expanded' => 'false', 'aria-controls' => 'actions-menu' }
       Actions
-    .dropdown-content.fade-in-down
+    #actions-menu.dropdown-content.fade-in-down
       %ul.dropdown-items
         - if !dossier.read_only?
           - if dossier.brouillon?

app/views/users/dossiers/show/_header.html.haml

@@ -16,9 +16,9 @@
         - if dossier.can_be_updated_by_user? && !current_page?(modifier_dossier_path(dossier))
           = link_to "Modifier mon dossier", modifier_dossier_path(dossier), class: 'button accepted edit-form', 'title'=> "Vous pouvez modifier votre dossier tant qu'il n'est passé en instruction"
         %span.dropdown.print-menu-opener
-          %button.button.dropdown-button.icon-only{ title: 'imprimer', 'aria-label': 'imprimer' }
+          %button.button.dropdown-button.icon-only{ title: 'imprimer', 'aria-label': 'imprimer', 'aria-expanded' => 'false', 'aria-controls' => 'print-menu' }
             %span.icon.printer
-          %ul.print-menu.dropdown-content
+          %ul#print-menu.print-menu.dropdown-content
             %li
               = link_to "Tout le dossier", dossier_path(dossier, format: :pdf), target: "_blank", rel: "noopener", class: "menu-item menu-link"