Merge pull request #8360 from mfo/US/dropdown_component

POC - amelioration(menu): extraction des menu dans un composant ruby pour ne pas dupliquer les changements aria partout ds la codebase

app/assets/stylesheets/instructeur.scss

@@ -44,6 +44,10 @@
   position: relative;
 }
 
+.dropdown-export .dropdown-content {
+  width: 450px;
+}
+
 .print-menu {
   display: none;
   position: absolute;

app/components/dossiers/export_component/export_component.html.haml

@@ -1,21 +1,21 @@
-%span.dropdown{ data: { controller: 'menu-button' } }
-  %button.fr-btn.fr-btn--sm.dropdown-button{ data: { menu_button_target: 'button' }, class: @class_btn.present? ? @class_btn : 'fr-btn--secondary' }
-    - if @count.nil?
-      = t(".download_all")
-    - else
-      = t(".download", count: @count)
-  .dropdown-content.fade-in-down{ style: 'width: 450px', data: { menu_button_target: 'menu' }, id: @count.nil? ? "download_menu" : "download_all_menu" }
-    %ul.dropdown-items{ 'data-turbo': 'true' }
+= render Dropdown::MenuComponent.new(wrapper: :span, button_options: { class: ['fr-btn--sm', @class_btn.present? ? @class_btn : 'fr-btn--secondary']}, menu_options: { id: @count.nil? ? "download_menu" : "download_all_menu", class: ['dropdown-export'] }) do |menu|
+  - menu.with_button_inner_html do
+    = @count.nil? ? t(".download_all") : t(".download", count: @count)
   - exports.each do |item|
     - export = item[:export]
-        %li
+
     - if export.nil?
-            = link_to t(".everything_#{item[:format]}_html"), download_export_path(export_format: item[:format]), data: { turbo_method: :post }
+      - menu.with_item do
+        = link_to download_export_path(export_format: item[:format]), role: 'menuitem', data: { turbo_method: :post, turbo: true } do
+          = t(".everything_#{item[:format]}_html")
     - elsif export.available?
-            = link_to ready_link_label(export), export.file.service_url, target: "_blank", rel: "noopener"
+      - menu.with_item do
+        %div
+          = link_to ready_link_label(export), export.file.service_url, target: "_blank", rel: "noopener", role: 'menuitem'
           - if export.old?
-              = button_to download_export_path(export_format: export.format, force_export: true), **refresh_button_options(export) do
+            = button_to download_export_path(export_format: export.format, force_export: true), refresh_button_options(export).merge(role: 'menuitem') do
               .icon.retry
     - else
+      - menu.with_item(aria: {disabled:"true"}, class: 'selected') do
         %span{ data: poll_controller_options(export) }
           = pending_label(export)

app/components/dropdown/menu_component.rb

@@ -0,0 +1,50 @@
+class Dropdown::MenuComponent < ApplicationComponent
+  renders_one :button_inner_html
+  # beware, items elements like button_to/link_to must include role: 'menuitem' for aria reason
+  renders_many :items, -> (options = {}, &block) do
+    tag.li({ role: 'none' }.merge(options), &block)
+  end
+  renders_many :forms
+
+  def initialize(wrapper:,
+    wrapper_options: {},
+    button_options: {},
+    menu_options: {})
+    @wrapper = wrapper
+    @wrapper_options = wrapper_options
+    @button_options = button_options
+    @menu_options = menu_options
+  end
+
+  def wrapper_options
+    @wrapper_options.deep_merge({
+      class: wrapper_class_names,
+      data: { controller: 'menu-button' }
+    })
+  end
+
+  def wrapper_class_names
+    ['dropdown'] + Array(@wrapper_options[:class])
+  end
+
+  def button_id
+    "#{menu_id}_button"
+  end
+
+  def menu_id
+    @menu_options[:id] ||= SecureRandom.uuid
+    @menu_options[:id]
+  end
+
+  def menu_role
+    forms? ? :region : :menu
+  end
+
+  def menu_class_names
+    ['dropdown-content'] + Array(@menu_options[:class])
+  end
+
+  def button_class_names
+    ['fr-btn', 'dropdown-button'] + Array(@button_options[:class])
+  end
+end

app/components/dropdown/menu_component/menu_component.html.haml

@@ -0,0 +1,15 @@
+= content_tag(@wrapper, wrapper_options) do
+  %button{ class: button_class_names, id: button_id, data: { menu_button_target: 'button' }, "aria-expanded": "false", 'aria-haspopup': 'true', 'aria-controls': menu_id }
+    = button_inner_html
+
+  %div{ data: { menu_button_target: 'menu' }, id: menu_id, 'aria-labelledby': button_id, role: menu_role, 'tab-index': -1, class: menu_class_names }
+
+    -# the dropdown can be a menu with a list of item
+    - if items?
+      %ul.dropdown-items.fr-pl-0{ role: 'none' }
+        - items.each do |dropdown_item|
+          = dropdown_item
+    -# the dropdown can be a menu with forms
+    - if forms?
+      - forms.each do |form|
+        = form

app/javascript/controllers/menu_button_controller.ts

@@ -21,38 +21,17 @@ export class MenuButtonController extends ApplicationController {
   }
 
   private get isMenu() {
-    return !(this.element as HTMLElement).dataset.popover;
+    return this.menuTarget.getAttribute('role') == 'menu';
   }
 
   private setup() {
-    this.buttonTarget.setAttribute(
-      'aria-haspopup',
-      this.isMenu ? 'menu' : 'true'
-    );
-    this.buttonTarget.setAttribute('aria-controls', this.menuTarget.id);
-    if (!this.buttonTarget.id) {
-      this.buttonTarget.id = `${this.menuTarget.id}_button`;
-    }
-
-    this.menuTarget.setAttribute('aria-labelledby', this.buttonTarget.id);
-    this.menuTarget.setAttribute('role', this.isMenu ? 'menu' : 'region');
+    // see:
+    // To progressively enhance this navigation widget that is by default accessible,
+    // the class to hide the menu and the inclusion of tabindex="-1" on the interactive menuitem
+    // content should be added with JavaScript on load.
     this.menuTarget.classList.add('fade-in-down');
-    this.menuTarget.setAttribute('tab-index', '-1');
-
     if (this.isMenu) {
-      for (const menuItem of this.menuTarget.querySelectorAll('a')) {
-        menuItem.setAttribute('role', 'menuitem');
-      }
-      for (const dropdownItems of this.menuTarget.querySelectorAll(
-        '.dropdown-items'
-      )) {
-        dropdownItems.setAttribute('role', 'none');
-      }
-      for (const dropdownItems of this.menuTarget.querySelectorAll(
-        '.dropdown-items > li'
-      )) {
-        dropdownItems.setAttribute('role', 'none');
-      }
+      this.menuItems.map((menuItem) => menuItem.setAttribute('tabindex', '-1'));
     }
 
     this.on('click', (event) => {
@@ -106,7 +85,7 @@ export class MenuButtonController extends ApplicationController {
   }
 
   private close() {
-    this.buttonTarget.removeAttribute('aria-expanded');
+    this.buttonTarget.setAttribute('aria-expanded', 'false');
     this.menuTarget.parentElement?.classList.remove('open');
     this.#teardown?.();
     this.setFocusToMenuitem(null);

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

@@ -41,42 +41,43 @@
           %li
             = link_to admin_procedure_path(procedure), class: 'fr-btn fr-icon-draft-line fr-btn--tertiary' do
               Modifier
-        %li.dropdown{ data: { controller: 'menu-button' } }
-          %button.fr-btn.fr-btn--tertiary.dropdown-button.procedures-actions-btn{ data: { menu_button_target: 'button' } }
+
+        = render Dropdown::MenuComponent.new(wrapper: :li, button_options: { class: ['fr-btn--tertiary'] }, menu_options: { id: dom_id(procedure, :actions_menu)}) do |menu|
+          - menu.with_button_inner_html do
             Actions
-          .dropdown-content.fade-in-down{ data: { menu_button_target: 'menu' }, id: dom_id(procedure, :actions_menu) }
-            %ul.dropdown-items.pl-0
+
           - if !procedure.close? && !procedure.discarded?
-                %li
-                  = link_to sanitize_url(procedure.brouillon? ? commencer_test_url(path: procedure.path) : commencer_url(path: procedure.path)), target: :blank, rel: :noopener do
+            - menu.with_item do
+              = link_to(sanitize_url(procedure.brouillon? ? commencer_test_url(path: procedure.path) : commencer_url(path: procedure.path)), target: :blank, rel: :noopener, role: 'menuitem') do
                 %span.icon.in-progress
                 .dropdown-description
                   %h4= t('administrateurs.dropdown_actions.to_test')
 
-              - unless procedure.discarded?
-                %li
-                  = link_to admin_procedure_clone_path(procedure.id), class: 'clone-btn', data: { method: :put } do
+          - if !procedure.discarded?
+            - menu.with_item do
+              = link_to(admin_procedure_clone_path(procedure.id), role: 'menuitem', class: 'clone-btn', data: { method: :put }) do
                 %span.icon.new-folder
                 .dropdown-description
                   %h4= t('administrateurs.dropdown_actions.to_clone')
 
           - if procedure.publiee?
-                %li
-                  = link_to admin_procedure_close_path(procedure_id: procedure.id) do
+            - menu.with_item do
+              = link_to(admin_procedure_close_path(procedure_id: procedure.id), role: 'menuitem') do
                 %span.icon.archive
                 .dropdown-description
                   %h4= t('administrateurs.dropdown_actions.to_close')
 
           - if procedure.can_be_deleted_by_administrateur? && !procedure.discarded?
-                %li
-                  = link_to admin_procedure_path(procedure), method: :delete, data: { confirm:  "Voulez-vous vraiment supprimer la démarche ? \nToute suppression est définitive et s'appliquera aux éventuels autres administrateurs de cette démarche !" } do
+            - menu.with_item do
+              = link_to admin_procedure_path(procedure), role: 'menuitem', method: :delete, data: { confirm: "Voulez-vous vraiment supprimer la démarche ? \nToute suppression est définitive et s'appliquera aux éventuels autres administrateurs de cette démarche !" } do
                 %span.icon.refuse
                 .dropdown-description
                   %h4= t('administrateurs.dropdown_actions.delete')
 
           - if procedure.discarded?
-                %li
-                  = link_to restore_admin_procedure_path(procedure), method: :put do
+            - menu.with_item do
+              = link_to  restore_admin_procedure_path(procedure), role: 'menuitem',  method: :put do
                 %span.icon.unarchive
                 .dropdown-description
                   %h4= t('administrateurs.dropdown_actions.restore')
+

app/views/experts/avis/_header.html.haml

@@ -9,11 +9,11 @@
         %li= link_to("Dossier nº #{dossier.id}", expert_avis_path(avis.procedure, avis))
 
       .header-actions
-        %span.dropdown.print-menu-opener{ data: { controller: 'menu-button' } }
-          %button.button.dropdown-button.icon-only{ data: { menu_button_target: 'button' } }
-            %span.icon.attached
-          %ul.print-menu.dropdown-content#print-pj-menu{ data: { menu_button_target: 'menu' } }
-            %li= link_to "Télécharger le dossier et toutes ses pièces jointes", telecharger_pjs_expert_avis_path(avis.procedure, avis), target: "_blank", rel: "noopener", class: "menu-item menu-link"
+        .fr-download
+          = link_to telecharger_pjs_expert_avis_path(avis.procedure, avis), download: :download, class: "menu-item menu-link fr-download__link" do
+            Télécharger le dossier et toutes ses pièces jointes
+            %span.fr-download__detail
+              ZIP
 
     %nav.tabs
       %ul

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

@@ -1,21 +1,31 @@
 %ul.fr-btns-group.fr-btns-group--sm.fr-btns-group--inline-md.fr-btns-group--icon-right
-  %li.dropdown.print-menu-opener{ data: { controller: 'menu-button' } }
-    %button.fr-btn.fr-btn--tertiary.fr-icon-printer-line.dropdown-button{ title: 'imprimer', 'aria-label': 'Imprimer', data: { menu_button_target: 'button' } } Imprimer
-    %ul#print-menu.print-menu.dropdown-content{ data: { menu_button_target: 'menu' } }
-      %li
-        = link_to "Tout le dossier", print_instructeur_dossier_path(dossier.procedure, dossier), target: "_blank", rel: "noopener", class: "menu-item menu-link"
-      %li
-        = link_to "Uniquement cet onglet", "#", onclick: "window.print()", class: "menu-item menu-link"
-      %li
-        = link_to "Export PDF", instructeur_dossier_path(dossier.procedure, dossier, format: :pdf), target: "_blank", rel: "noopener", class: "menu-item menu-link"
-      - if dossier.geo_data?
-        %li
-          = link_to "Export GeoJSON", geo_data_instructeur_dossier_path(dossier.procedure, dossier), target: "_blank", rel: "noopener", class: "menu-item menu-link"
+  = render Dropdown::MenuComponent.new(wrapper: :li, menu_options: { id: 'print-menu'}, button_options: { class: ['fr-btn--tertiary', 'fr-icon-printer-line']}) do |menu|
+    - menu.with_button_inner_html do
+      Imprimer
 
-  %li.dropdown.print-menu-opener{ data: { controller: 'menu-button' } }
-    %button.fr-btn.fr-btn--tertiary.fr-icon-download-line.dropdown-button{ data: { menu_button_target: 'button', 'aria-label': 'Télécharger' } } Télécharger
-    %ul#print-pj-menu.print-menu.dropdown-content{ data: { menu_button_target: 'menu' } }
-      %li= link_to "Télécharger le dossier et toutes ses pièces jointes", telecharger_pjs_instructeur_dossier_path(dossier.procedure, dossier), target: "_blank", rel: "noopener", class: "menu-item menu-link"
+    - menu.with_item do
+      = link_to print_instructeur_dossier_path(dossier.procedure, dossier), role: 'menuitem', target: "_blank", rel: "noopener", class: "menu-item menu-link" do
+        Tout le dossier
+
+    - menu.with_item do
+      = link_to '#', role: 'menuitem', onclick: "window.print()", class: "menu-item menu-link" do
+        Uniquement cet onglet
+
+    - menu.with_item do
+      = link_to instructeur_dossier_path(dossier.procedure, dossier, format: :pdf), target: "_blank", rel: "noopener", class: "menu-item menu-link", role: 'menuitem' do
+        Export PDF
+
+    - if dossier.geo_data?
+      - menu.with_item do
+        = link_to  geo_data_instructeur_dossier_path(dossier.procedure, dossier), target: "_blank", rel: "noopener", class: "menu-item menu-link", role: 'menuitem' do
+          Export GeoJSON
+
+  = render Dropdown::MenuComponent.new(wrapper: :li, menu_options: { id: 'print-pj-menu'}, button_options: { class: ['fr-btn--tertiary', 'fr-icon-download-line']}) do |menu|
+    - menu.with_button_inner_html do
+      Télécharger
+    - menu.with_item do
+      = link_to telecharger_pjs_instructeur_dossier_path(dossier.procedure, dossier), target: "_blank", rel: "noopener", class: "menu-item menu-link", role: 'menuitem'  do
+        Télécharger le dossier et toutes ses pièces jointes
 
   %li
     = render partial: "instructeurs/procedures/dossier_actions",

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

@@ -1,90 +1,77 @@
-.dropdown{ data: { controller: 'menu-button', popover: 'true', turbo_force: true } }
-  -# Dropdown button title
-  %button.fr-btn.dropdown-button{ class: button_or_label_class(dossier), data: { menu_button_target: 'button' } }
-    = dossier_display_state dossier
-
-  -# Dropdown content
-  #state-menu.dropdown-content.fade-in-down{ data: { menu_button_target: 'menu' } }
+= render Dropdown::MenuComponent.new(wrapper: :div, wrapper_options: { data: {'turbo-force': true} }, button_options: { class: [button_or_label_class(dossier)] }) do |menu|
+  - menu.with_button_inner_html do
+    = dossier_display_state(dossier)
 
   - if dossier.en_construction?
-      -# ------------------------------------------------------
-      -# EN CONSTRUCTION
-      -# ------------------------------------------------------
-      %ul.dropdown-items
-
-        %li.selected
+    - menu.with_item(aria: {disabled:"true"}, class: 'selected') do
       %span.icon.edit
       .dropdown-description
         %h4 En construction
         Vous permettez à l'usager de modifier ses réponses au formulaire
 
-        %li{ 'data-turbo': 'true' }
-          = link_to passer_en_instruction_instructeur_dossier_path(dossier.procedure, dossier), data: { turbo_method: :post, turbo_confirm: "Confirmez-vous le passage en instruction de ce dossier ?" } do
+    - menu.with_item('data-turbo': 'true') do
+      = link_to(passer_en_instruction_instructeur_dossier_path(dossier.procedure, dossier), data: { turbo_method: :post, turbo_confirm: "Confirmez-vous le passage en instruction de ce dossier ?", turbo: true }, role: 'menuitem') do
         %span.icon.in-progress
         .dropdown-description
           %h4 Passer en instruction
           L’usager ne pourra plus modifier le formulaire
 
   - elsif dossier.en_instruction?
-      -# ------------------------------------------------------
-      -# EN INSTRUCTION
-      -# ------------------------------------------------------
-      %ul.dropdown-items
-
-        %li{ 'data-turbo': 'true' }
-          = link_to repasser_en_construction_instructeur_dossier_path(dossier.procedure, dossier), data: { turbo_method: :post, turbo_confirm: "Confirmez-vous le passage en construction de ce dossier ?" } do
+    - menu.with_item('data-turbo': 'true') do
+      = link_to(repasser_en_construction_instructeur_dossier_path(dossier.procedure, dossier), data: { turbo_method: :post, turbo_confirm: "Confirmez-vous le passage en construction de ce dossier ?"}, role: 'menuitem') do
         %span.icon.edit
         .dropdown-description
           %h4 Repasser en construction
           Vous permettrez à l'usager de modifier ses réponses au formulaire
 
-        %li.selected
+    - menu.with_item(aria: {disabled:"true"}, class: 'selected') do
       %span.icon.in-progress
       .dropdown-description
         %h4 En instruction
         L’usager ne peut modifier son dossier pendant l'instruction
 
-        %li
-          %a{ href: '#', onclick: "DS.showMotivation(event, 'accept');" }
+    - menu.with_item do
+      = link_to('#', onclick: "DS.showMotivation(event, 'accept');", role: 'menuitem') do
         %span.icon.accept
         .dropdown-description
           %h4 Accepter
           L’usager sera notifié que son dossier a été accepté
 
-        %li
-          %a{ href: '#', onclick: "DS.showMotivation(event, 'without-continuation');" }
+
+    - menu.with_item do
+      = link_to('#', onclick: "DS.showMotivation(event, 'without-continuation');", role: 'menuitem') do
         %span.icon.without-continuation
         .dropdown-description
           %h4 Classer sans suite
           L’usager sera notifié que son dossier a été classé sans suite
 
-        %li
-          %a{ href: '#', onclick: "DS.showMotivation(event, 'refuse');" }
+
+    - menu.with_item do
+      = link_to('#', onclick: "DS.showMotivation(event, 'refuse');", role: 'menuitem') do
         %span.icon.refuse
         .dropdown-description
           %h4 Refuser
           L’usager sera notifié que son dossier a été refusé
 
+    - menu.with_form do
       = render partial: 'instructeurs/dossiers/state_button_motivation', locals: { dossier: dossier, popup_title: 'Accepter le dossier', placeholder: 'Expliquez au demandeur pourquoi ce dossier est accepté (facultatif)', popup_class: 'accept', process_action: 'accepter', title: 'Accepter', confirm: "Confirmez-vous l'acceptation ce dossier ?" }
 
+    - menu.with_form do
       = render partial: 'instructeurs/dossiers/state_button_motivation', locals: { dossier: dossier, popup_title: 'Classer le dossier sans suite', placeholder: 'Expliquez au demandeur pourquoi ce dossier est classé sans suite (obligatoire)', popup_class: 'without-continuation', process_action: 'classer_sans_suite', title: 'Classer sans suite', confirm: 'Confirmez-vous le classement sans suite de ce dossier ?' }
 
+    - menu.with_form do
       = render partial: 'instructeurs/dossiers/state_button_motivation', locals: { dossier: dossier, popup_title: 'Refuser le dossier', placeholder: 'Expliquez au demandeur pourquoi ce dossier est refusé (obligatoire)', popup_class: 'refuse', process_action: 'refuser', title: 'Refuser', confirm: 'Confirmez-vous le refus de ce dossier ?' }
 
   - elsif dossier.termine?
-      -# ---------------------------------------------------
-      -# TERMINÉ
-      -# ---------------------------------------------------
-      %ul.dropdown-items
     - if dossier.motivation.present?
-          %li.inactive
+      - menu.with_item(class: 'inactive') do
         %span.icon.info
         .dropdown-description
           %h4 Motivation
           %p « #{dossier.motivation} »
 
     - if dossier.justificatif_motivation.attached?
-          %li.inactive
+      - menu.with_item(class: 'inactive') do
         %span.icon.justificatif
         .dropdown-description
           %h4 Justificatif
@@ -92,29 +79,29 @@
           = render partial: 'users/dossiers/show/download_justificatif', locals: { dossier: dossier }
 
     - if dossier.attestation.present?
-          %li
-            = link_to attestation_instructeur_dossier_path(dossier.procedure, dossier), target: '_blank', rel: 'noopener' do
+      - menu.with_item do
+        = link_to(attestation_instructeur_dossier_path(dossier.procedure, dossier), target: '_blank', rel: 'noopener', role: 'menuitem') do
           %span.icon.preview
           .dropdown-description
             %h4 Voir l’attestation
             %p Cette attestation a été envoyée automatiquement au demandeur.
 
     - if dossier.can_repasser_en_instruction?
-          %li{ 'data-turbo': 'true' }
-            = link_to repasser_en_instruction_instructeur_dossier_path(dossier.procedure, dossier), data: { turbo_method: :post, turbo_confirm: "Voulez vous remettre le dossier #{dossier.id} en instruction ?" } do
+      - menu.with_item do
+        = link_to(repasser_en_instruction_instructeur_dossier_path(dossier.procedure, dossier), data: { turbo_method: :post, turbo_confirm: "Voulez vous remettre le dossier #{dossier.id} en instruction ?", turbo: true }, role: 'menuitem') do
           %span.icon.in-progress
           .dropdown-description
             %h4 Repasser en instruction
             L’usager sera notifié que son dossier est réexaminé.
     - elsif dossier.user_deleted?
-          %li
+      - menu.with_item do
         %span.icon.info
         .dropdown-description
           %h4 En attente d’archivage
           L’usager a supprimé son compte. Vous pouvez archiver puis supprimer le dossier.
 
-        %li
-          = link_to instructeur_dossier_path(dossier.procedure, dossier), method: :delete do
+    - menu.with_item do
+      = link_to(instructeur_dossier_path(dossier.procedure, dossier), method: :delete, role: 'menuitem') do
         %span.icon.delete
         .dropdown-description
           %h4 Supprimer le dossier

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

@@ -2,34 +2,37 @@
   = link_to restore_instructeur_dossier_path(procedure_id, dossier_id), method: :patch, class: "fr-btn fr-btn--secondary" do
     = t('views.instructeurs.dossiers.restore')
 - elsif close_to_expiration || Dossier::TERMINE.include?(state)
-  %li.dropdown.user-dossier-actions{ data: { controller: 'menu-button' } }
-    %button.fr-btn.fr-mb-0.dropdown-button{ data: { menu_button_target: 'button' } }
+  = render Dropdown::MenuComponent.new(wrapper: :li, button_options: { class: ['fr-mb-0']}, menu_options: { id: "dossier_#{dossier_id}_actions_menu", class: 'user-dossier-actions' }) do |menu|
+    - menu.with_button_inner_html do
       Actions
-    .dropdown-content.fade-in-down{ data: { menu_button_target: 'menu' }, id: "dossier_#{dossier_id}_actions_menu" }
-      %ul.dropdown-items
+
     - if close_to_expiration
-          %li
-            = link_to repousser_expiration_instructeur_dossier_path(procedure_id, dossier_id), method: :post do
+      - menu.with_item do
+        = link_to(repousser_expiration_instructeur_dossier_path(procedure_id, dossier_id), method: :post, role: 'menuitem') do
           %span.icon.standby
           %span.dropdown-description= t('instructeurs.dossiers.header.banner.button_delay_expiration')
+
     - if archived
-          %li
-            = link_to unarchive_instructeur_dossier_path(procedure_id, dossier_id), method: :patch do
+      - menu.with_item do
+        = link_to( unarchive_instructeur_dossier_path(procedure_id, dossier_id), role: 'menuitem', method: :patch) do
           %span.icon.unarchive
           %span.dropdown-description
             Désarchiver le dossier
+
     - else
-          %li
-            = link_to archive_instructeur_dossier_path(procedure_id, dossier_id), method: :patch do
+      - menu.with_item do
+        = link_to(  archive_instructeur_dossier_path(procedure_id, dossier_id), method: :patch, role: 'menuitem') do
           %span.icon.archive
           %span.dropdown-description
             Archiver le dossier
-          %li.danger
-            = link_to instructeur_dossier_path(procedure_id, dossier_id), method: :delete do
+
+      - menu.with_item(class: 'danger') do
+        = link_to(instructeur_dossier_path(procedure_id, dossier_id), method: :delete, role: 'menuitem') do
           %span.icon.delete
           %span.dropdown-description
             = t('views.instructeurs.dossiers.delete_dossier')
 
+
 - elsif Dossier::EN_CONSTRUCTION_OU_INSTRUCTION.include?(state)
   - if dossier_is_followed
     = link_to unfollow_instructeur_dossier_path(procedure_id, dossier_id), method: :patch, class: 'fr-btn fr-btn--secondary fr-icon-star-fill' do

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

@@ -1,5 +1,7 @@
-%span.dropdown{ data: { controller: 'menu-button', popover: 'true' } }
-  %button.fr-btn.fr-btn--tertiary.fr-btn--sm.fr-mr-2w.dropdown-button{ data: { menu_button_target: 'button' } }
+= render Dropdown::MenuComponent.new(wrapper: :div, button_options: { class: ['fr-btn--secondary', 'fr-btn--sm', 'fr-mr-1w'] }, menu_options: { id: 'filter-menu', class:['left-aligned'] }) do |menu|
+  - menu.with_button_inner_html do
     = t('views.instructeurs.dossiers.filters.title')
-  #filter-menu.dropdown-content.left-aligned.fade-in-down{ data: { menu_button_target: 'menu' } }
+
+  - menu.with_form do
     = render Dossiers::FilterComponent.new(procedure: procedure, procedure_presentation: @procedure_presentation, statut: statut)
+

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

@@ -62,10 +62,10 @@
         = render Dossiers::NotifiedToggleComponent.new(procedure: @procedure, procedure_presentation: @procedure_presentation)
 
         .fr-ml-auto
-          %span.dropdown{ data: { controller: 'menu-button', popover: 'true' } }
-            %button.fr-btn.fr-btn--sm.fr-btn--tertiary.dropdown-button.fr-ml-1w{ data: { menu_button_target: 'button' } }
+          = render Dropdown::MenuComponent.new(wrapper: :span, button_options: { class: ['fr-btn--sm', 'fr-btn--secondary'] }, menu_options: { id: 'custom-menu' }) do |menu|
+            - menu.with_button_inner_html do
               = t('views.instructeurs.dossiers.personalize')
-            #custom-menu.dropdown-content.fade-in-down{ data: { menu_button_target: 'menu' } }
+            - menu.with_form do
               = form_tag update_displayed_fields_instructeur_procedure_path(@procedure), method: :patch, class: 'dropdown-form large columns-form' do
                 = hidden_field_tag :values, nil
                 = react_component("ComboMultiple",
@@ -120,6 +120,7 @@
 
                 %th.action-col.follow-col
                   Actions
+
               %tr
 
             %tbody

app/views/invites/_dropdown.html.haml

@@ -1,6 +1,6 @@
 - invites = dossier.invites.load
-.dropdown.invite-user-action{ data: { controller: 'menu-button', popover: 'true' } }
-  %button.button.dropdown-button{ data: { menu_button_target: 'button' } }
+= render Dropdown::MenuComponent.new(wrapper: :span, wrapper_options: {class: 'invite-user-action'}, button_options: { class: ['fr-btn--secondary'] }, menu_options: { id: 'invite-content' }) do |menu|
+  - menu.with_button_inner_html do
     %span.icon.person
     - if invites.present?
       = t('views.invites.dropdown.view_invited_people')
@@ -10,6 +10,5 @@
         = t('views.invites.dropdown.invite_to_view')
       - else
         = t('views.invites.dropdown.invite_to_edit')
-
-  #invite-content.dropdown-content.fade-in-down{ data: { menu_button_target: 'menu' } }
+  - menu.with_form do
     = render partial: "invites/form", locals: { dossier: dossier, invites: invites }

app/views/recherche/index.html.haml

@@ -67,18 +67,18 @@
 
             - if instructeur_dossier && expert_dossier
               %td.action-col.follow-col
-                .dropdown{ data: { controller: 'menu-button' } }
-                  %button.button.dropdown-button{ data: { menu_button_target: 'button' } }
+                = render Dropdown::MenuComponent.new(wrapper: :div, button_options: {class: ['fr-btn--sm']}) do |menu|
+                  - menu.with_button_inner_html do
                     Actions
-                  .dropdown-content{ data: { menu_button_target: 'menu' } }
-                    %ul.dropdown-items
-                      %li
-                        = link_to(instructeur_dossier_path(procedure_id, p.dossier_id)) do
+
+                  - menu.with_item do
+                    = link_to(instructeur_dossier_path(procedure_id, p.dossier_id), role: 'menuitem') do
                       %span.icon.in-progress>
                       .dropdown-description
                         Voir le dossier
-                      %li
-                        = link_to(expert_avis_path(procedure_id, @dossier_avis_ids_h[p.dossier_id])) do
+
+                  - menu.with_item do
+                    = link_to(expert_avis_path(procedure_id, @dossier_avis_ids_h[p.dossier_id]), role: 'menuitem') do
                       %span.icon.in-progress>
                       .dropdown-description
                         Donner mon avis

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

@@ -1,15 +1,16 @@
-.dropdown.help-dropdown{ data: { controller: 'menu-button' } }
-  %button.fr-btn.dropdown-button{ data: { menu_button_target: 'button' } }
+= render Dropdown::MenuComponent.new(wrapper: :span, wrapper_options: { class: ['help-dropdown']}, menu_options: { id: "help-menu" }) do |menu|
+  - menu.with_button_inner_html do
     = t('help')
-  #help-menu.dropdown-content.fade-in-down{ data: { menu_button_target: 'menu' } }
-    %ul.dropdown-items
   - title = dossier.brouillon? ? "Besoin d’aide pour remplir votre dossier ?" : "Une question sur votre dossier ?"
 
   - if dossier.messagerie_available?
-        = render partial: 'shared/help/dropdown_items/messagerie_item',
-          locals: { dossier: dossier, title: title }
+    - menu.with_item do
+      = render partial: 'shared/help/dropdown_items/messagerie_item', locals: { dossier: dossier, title: title }
+
   - elsif dossier.procedure.service.present?
+    - menu.with_item do
       = render partial: 'shared/help/dropdown_items/service_item',
         locals: { service: dossier.procedure.service, title: title }
 
+  - menu.with_item do
     = render partial: 'shared/help/dropdown_items/faq_item'

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

@@ -1,7 +1,8 @@
-.dropdown.help-dropdown{ data: { controller: 'menu-button' } }
-  %button.fr-btn.dropdown-button{ data: { menu_button_target: 'button' } }
+= render Dropdown::MenuComponent.new(wrapper: :span, wrapper_options: { class: ['help-dropdown']}, menu_options: { id: "help-menu" }) do |menu|
+  - menu.with_button_inner_html do
     = t('help')
-  #help-menu.dropdown-content.fade-in-down{ data: { menu_button_target: 'menu' } }
-    %ul.dropdown-items
+
+  - menu.with_item do
     = render partial: 'shared/help/dropdown_items/faq_item'
+  - menu.with_item do
     = render partial: 'shared/help/dropdown_items/email_item'

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

@@ -1,10 +1,9 @@
-.dropdown.help-dropdown{ data: { controller: 'menu-button' } }
-  %button.fr-btn.dropdown-button{ data: { menu_button_target: 'button' } }
+= render Dropdown::MenuComponent.new(wrapper: :span, wrapper_options: { class: ['help-dropdown']}, menu_options: { id: "help-menu" }) do |menu|
+  - menu.with_button_inner_html do
     = t('help')
-  #help-menu.dropdown-content.fade-in-down{ data: { menu_button_target: 'menu' } }
-    %ul.dropdown-items
-      - if procedure.service.present?
-        = render partial: 'shared/help/dropdown_items/service_item',
-          locals: { service: procedure.service, title: "Une question sur cette démarche ?" }
 
+  - if procedure.service.present?
+    - menu.with_item do
+      = render partial: 'shared/help/dropdown_items/service_item', locals: { service: procedure.service, title: "Une question sur cette démarche ?" }
+  - menu.with_item do
     = render partial: 'shared/help/dropdown_items/faq_item'

app/views/shared/help/dropdown_items/_email_item.html.haml

@@ -1,5 +1,5 @@
-%li
-  = mail_to CONTACT_EMAIL do
+%li{ role: 'none' }
+  = mail_to CONTACT_EMAIL, role: 'menuitem' do
     %span.icon.mail
     .dropdown-description
       %span.help-dropdown-title

app/views/shared/help/dropdown_items/_faq_item.html.haml

@@ -1,9 +1,7 @@
-%li
-  = link_to t("links.common.faq.url"), title: new_tab_suffix(t('help_dropdown.general_title')), **external_link_attributes do
+= link_to t("links.common.faq.url"), title: new_tab_suffix(t('help_dropdown.general_title')), **external_link_attributes, role: 'menuitem' do
   %span.icon.help
   .dropdown-description
     %span.help-dropdown-title
       = t('help_dropdown.problem_title')
     %p
       = t('help_dropdown.problem_description')
-

app/views/shared/help/dropdown_items/_messagerie_item.html.haml

@@ -1,5 +1,4 @@
-%li
-  = link_to messagerie_dossier_path(dossier) do
+= link_to messagerie_dossier_path(dossier), role: 'menuitem' do
   %span.icon.mail
   .dropdown-description
     %span.help-dropdown-title= title

app/views/shared/help/dropdown_items/_service_item.html.haml

@@ -1,15 +1,14 @@
-%li.help-dropdown-service
-  %span.icon.person
-  .dropdown-description
+%span.icon.person
+.dropdown-description
   %span.help-dropdown-title= title
   .help-dropdown-service-action
     %p Contactez directement l’administration :
     %p.help-dropdown-service-item
       %span.icon.small.mail
-        = link_to service.email, "mailto:#{service.email}"
+      = link_to service.email, "mailto:#{service.email}", role: 'menuitem'
     %p.help-dropdown-service-item
       %span.icon.small.phone
-        = link_to service.telephone, service.telephone_url
+      = link_to service.telephone, service.telephone_url, role: 'menuitem'
     %p.help-dropdown-service-item
       %span.icon.small.clock
       = service.horaires

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

@@ -4,49 +4,51 @@
 - has_transfer_action = dossier.user == current_user
 - has_actions = has_edit_action || has_delete_action || has_new_dossier_action || has_transfer_action
 
+
+
 - if has_actions
-  .dropdown.user-dossier-actions{ data: { controller: 'menu-button' } }
-    %button.fr-btn.fr-btn--secondary.dropdown-button{ data: { menu_button_target: 'button' } }
+  = render Dropdown::MenuComponent.new(wrapper: :div, wrapper_options: {class: 'invite-user-actions'}, menu_options: {id: dom_id(dossier, :actions_menu)}, button_options: {class: 'fr-btn--sm fr-btn--secondary'}) do |menu|
+    - menu.with_button_inner_html do
       = t('views.users.dossiers.dossier_action.actions')
-    .dropdown-content.fade-in-down{ data: { menu_button_target: 'menu' }, id: dom_id(dossier, :actions_menu) }
-      %ul.dropdown-items
+
     - if has_edit_action
       - if dossier.brouillon?
-            %li
-              = link_to(url_for_dossier(dossier)) do
+        - menu.with_item do
+          = link_to(url_for_dossier(dossier), role: 'menuitem') do
             %span.icon.edit
             .dropdown-description
               = t('views.users.dossiers.dossier_action.edit_draft')
       - else
-            %li
-              = link_to modifier_dossier_path(dossier) do
+        - menu.with_item do
+          = link_to(modifier_dossier_path(dossier), role: 'menuitem') do
             %span.icon.edit
             .dropdown-description
               = t('views.users.dossiers.dossier_action.edit_dossier')
 
     - if has_transfer_action
-          %li
-            = link_to transferer_dossier_path(dossier) do
+      - menu.with_item do
+        = link_to(transferer_dossier_path(dossier), role: 'menuitem') do
           %span.icon.person
           .dropdown-description
             = t('views.users.dossiers.dossier_action.transfer_dossier')
 
     - if has_new_dossier_action
-          %li
-            = link_to procedure_lien(dossier.procedure) do
+      - menu.with_item do
+        = link_to(procedure_lien(dossier.procedure), role: 'menuitem') do
           %span.icon.new-folder
           .dropdown-description
             = t('views.users.dossiers.dossier_action.start_other_dossier')
-          %li
-            = link_to clone_dossier_path(dossier), method: :post do
+
+      - menu.with_item do
+        = link_to(clone_dossier_path(dossier), method: :post, role: 'menuitem') do
           %span.icon.new-folder
           .dropdown-description
             = t('views.users.dossiers.dossier_action.clone')
 
     - if has_delete_action
-          %li.danger
-            = link_to delete_dossier_dossier_path(dossier), method: :patch, data: { disable: true, confirm: "En continuant, vous allez supprimer ce dossier ainsi que les informations qu’il contient. Toute suppression entraîne l’annulation de la démarche en cours.\n\nConfirmer la suppression ?" } do
+      - menu.with_item(class: 'danger') do
+        = link_to(delete_dossier_dossier_path(dossier), role: 'menuitem', method: :patch, data: { disable: true, confirm: "En continuant, vous allez supprimer ce dossier ainsi que les informations qu’il contient. Toute suppression entraîne l’annulation de la démarche en cours.\n\nConfirmer la suppression ?" }) do
+
           %span.icon.delete
           .dropdown-description
             = t('views.users.dossiers.dossier_action.delete_dossier')
-

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

@@ -1,8 +1,8 @@
-.dropdown.edit-identity-action{ data: { controller: 'menu-button', popover: 'true' } }
-  %button.button.dropdown-button{ data: { menu_button_target: 'button' } }
+= render Dropdown::MenuComponent.new(wrapper: :div, wrapper_options: {class: ['edit-identity-action']}, menu_options: {  class:['edit-identity-content'] }) do |menu|
+  - menu.with_button_inner_html do
     = t("views.shared.dossiers.demande.my_identity")
 
-  #edit-identity-content.dropdown-content.fade-in-down{ data: { menu_button_target: 'menu' } }
+  - menu.with_form do
     - if dossier.procedure.for_individual
       = render partial: "shared/dossiers/identite_individual", locals: { individual: dossier.individual }
 

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

@@ -10,5 +10,5 @@
 
   .container
     - if !@dossier.read_only?
-      = link_to t('views.users.dossiers.demande.edit_dossier'), modifier_dossier_path(@dossier), class: 'button accepted edit-form', title: "Modifier mon dossier tant qu'il n'est pas passé en instruction"
+      = link_to t('views.users.dossiers.demande.edit_dossier'), modifier_dossier_path(@dossier), class: 'fr-btn fr-btn-sm', 'title'=> "Modifier mon dossier tant qu'il n'est pas passé en instruction"
       .clearfix

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

@@ -18,7 +18,7 @@
       .header-actions
         = render partial: 'invites/dropdown', locals: { dossier: dossier }
         - if dossier.can_be_updated_by_user? && !current_page?(modifier_dossier_path(dossier))
-          = link_to t('views.users.dossiers.show.header.edit_dossier'), modifier_dossier_path(dossier), class: 'button accepted edit-form',
+          = link_to t('views.users.dossiers.show.header.edit_dossier'), modifier_dossier_path(dossier), class: 'fr-btn fr-btn-sm',
             title: { label: t('views.users.dossiers.show.header.edit_dossier_title') }
         = render(partial: 'users/dossiers/show/print_dossier', locals: { dossier: dossier })
 

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

@@ -1,6 +1 @@
-.dropdown.print-menu-opener{ data: { controller: 'menu-button' } }
-  %button.button.dropdown-button.icon-only{ title: t('views.users.dossiers.show.header.print'), 'aria-label': 'imprimer', data: { menu_button_target: 'button' } }
-    %span.icon.printer
-  %ul#print-menu.print-menu.dropdown-content{ data: { menu_button_target: 'menu' } }
-    %li
-      = link_to t('views.users.dossiers.show.header.print_dossier'), dossier_path(dossier, format: :pdf), target: "_blank", rel: "noopener", class: "menu-item menu-link"
+= link_to t('views.users.dossiers.show.header.print'), dossier_path(dossier, format: :pdf), target: "_blank", rel: "noopener", title: t('views.users.dossiers.show.header.print_dossier'), class: 'fr-btn fr-icon-printer-line fr-btn--tertiary'

spec/system/administrateurs/procedure_cloning_spec.rb

@@ -18,7 +18,7 @@ describe 'As an administrateur I wanna clone a procedure', js: true do
     scenario do
       visit admin_procedures_path
       expect(page.find_by_id('procedures')['data-item-count']).to eq('1')
-      page.all('.procedures-actions-btn').first.click
+      page.all('.admin-procedures-list-row .dropdown .fr-btn').first.click
       page.all('.clone-btn').first.click
       visit admin_procedures_path(statut: "brouillons")
       expect(page.find_by_id('procedures')['data-item-count']).to eq('1')

spec/system/experts/expert_spec.rb

@@ -116,7 +116,6 @@ describe 'Inviting an expert:' do
         click_on '1 avis à donner'
         click_on avis.dossier.user.email
 
-        find(:css, '[aria-controls=print-pj-menu]').click
         click_on 'Télécharger le dossier et toutes ses pièces jointes'
         # For some reason, clicking the download link does not trigger the download in the headless browser ;
         # So we need to go to the download link directly

spec/views/users/dossiers/show/_header.html.haml_spec.rb

@@ -27,7 +27,7 @@ describe 'users/dossiers/show/header.html.haml', type: :view do
     end
 
     it 'can download the dossier' do
-      expect(rendered).to have_text("Tout le dossier")
+      expect(rendered).to have_selector('a[title="Tout le dossier"]')
     end
   end
 
@@ -45,7 +45,7 @@ describe 'users/dossiers/show/header.html.haml', type: :view do
     end
 
     it 'can download the dossier' do
-      expect(rendered).to have_text("Tout le dossier")
+      expect(rendered).to have_selector('a[title="Tout le dossier"]')
     end
 
     it 'does not display a new procedure link' do
@@ -68,7 +68,7 @@ describe 'users/dossiers/show/header.html.haml', type: :view do
     end
 
     it 'can download the dossier' do
-      expect(rendered).to have_text("Tout le dossier")
+      expect(rendered).to have_selector('a[title="Tout le dossier"]')
     end
 
     it 'displays a new procedure link' do
@@ -105,7 +105,7 @@ describe 'users/dossiers/show/header.html.haml', type: :view do
     end
 
     it 'can download the dossier' do
-      expect(rendered).to have_text("Tout le dossier")
+      expect(rendered).to have_selector('a[title="Tout le dossier"]')
     end
   end
 
@@ -124,7 +124,7 @@ describe 'users/dossiers/show/header.html.haml', type: :view do
       end
 
       it 'can not download the dossier' do
-        expect(rendered).not_to have_text("Tout le dossier")
+        expect(rendered).not_to have_selector('a[title="Tout le dossier"]')
       end
     end
   end