From 2be0f5aa99694678368ae2f1f04f187ef58342c7 Mon Sep 17 00:00:00 2001
From: Martin <martin@sharypic.com>
Date: Wed, 4 Jan 2023 06:10:24 +0100
Subject: [PATCH 01/14] amelioration(menu): extraction des menu dans un
 composant ruby pour ne pas dupliquer les changements aria partout ds la
 codebase

---
 app/components/dropdown/menu_component.rb     | 43 ++++++++++++
 .../menu_component/menu_component.html.haml   | 16 +++++
 .../controllers/menu_button_controller.ts     | 35 ++--------
 .../procedures/_procedures_list.html.haml     | 69 ++++++++++---------
 .../administrateurs/procedure_cloning_spec.rb |  2 +-
 5 files changed, 102 insertions(+), 63 deletions(-)
 create mode 100644 app/components/dropdown/menu_component.rb
 create mode 100644 app/components/dropdown/menu_component/menu_component.html.haml

diff --git a/app/components/dropdown/menu_component.rb b/app/components/dropdown/menu_component.rb
new file mode 100644
index 000000000..639e889b7
--- /dev/null
+++ b/app/components/dropdown/menu_component.rb
@@ -0,0 +1,43 @@
+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_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
diff --git a/app/components/dropdown/menu_component/menu_component.html.haml b/app/components/dropdown/menu_component/menu_component.html.haml
new file mode 100644
index 000000000..a540a32ef
--- /dev/null
+++ b/app/components/dropdown/menu_component/menu_component.html.haml
@@ -0,0 +1,16 @@
+= content_tag(@wrapper, class: wrapper_class_names, data: { controller: 'menu-button' }) 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
diff --git a/app/javascript/controllers/menu_button_controller.ts b/app/javascript/controllers/menu_button_controller.ts
index f1a31e02d..91b505ae4 100644
--- a/app/javascript/controllers/menu_button_controller.ts
+++ b/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);
diff --git a/app/views/administrateurs/procedures/_procedures_list.html.haml b/app/views/administrateurs/procedures/_procedures_list.html.haml
index b58e0e573..3cbec375e 100644
--- a/app/views/administrateurs/procedures/_procedures_list.html.haml
+++ b/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
-                    %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
-                    %span.icon.new-folder
-                    .dropdown-description
-                      %h4= t('administrateurs.dropdown_actions.to_clone')
+          - if !procedure.close? && !procedure.discarded?
+            - 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')
 
-              - if procedure.publiee?
-                %li
-                  = link_to admin_procedure_close_path(procedure_id: procedure.id) do
-                    %span.icon.archive
-                    .dropdown-description
-                      %h4= t('administrateurs.dropdown_actions.to_close')
+          - 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.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
-                    %span.icon.refuse
-                    .dropdown-description
-                      %h4= t('administrateurs.dropdown_actions.delete')
+          - if procedure.publiee?
+            - 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?
+            - 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?
+            - 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')
 
-              - if procedure.discarded?
-                %li
-                  = link_to restore_admin_procedure_path(procedure), method: :put do
-                    %span.icon.unarchive
-                    .dropdown-description
-                      %h4= t('administrateurs.dropdown_actions.restore')
diff --git a/spec/system/administrateurs/procedure_cloning_spec.rb b/spec/system/administrateurs/procedure_cloning_spec.rb
index 945cb514e..c8e301253 100644
--- a/spec/system/administrateurs/procedure_cloning_spec.rb
+++ b/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')

From cd75c7a1de2304798a6d94bac4503b170fe21e80 Mon Sep 17 00:00:00 2001
From: Martin <martin@sharypic.com>
Date: Thu, 5 Jan 2023 10:51:57 +0100
Subject: [PATCH 02/14] amelioration(export): passe les exports sur le nouveau
 dropdown

---
 app/assets/stylesheets/instructeur.scss       |  4 ++
 .../export_component.html.haml                | 40 +++++++++----------
 2 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/app/assets/stylesheets/instructeur.scss b/app/assets/stylesheets/instructeur.scss
index e1737651e..9227d5063 100644
--- a/app/assets/stylesheets/instructeur.scss
+++ b/app/assets/stylesheets/instructeur.scss
@@ -44,6 +44,10 @@
   position: relative;
 }
 
+.dropdown-export .dropdown-content {
+  width: 450px;
+}
+
 .print-menu {
   display: none;
   position: absolute;
diff --git a/app/components/dossiers/export_component/export_component.html.haml b/app/components/dossiers/export_component/export_component.html.haml
index 3e986e433..12bc03cd7 100644
--- a/app/components/dossiers/export_component/export_component.html.haml
+++ b/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")
+= 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]
+
+    - if export.nil?
+      - 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?
+      - 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).merge(role: 'menuitem') do
+              .icon.retry
     - 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' }
-      - 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 }
-          - elsif export.available?
-            = link_to ready_link_label(export), export.file.service_url, target: "_blank", rel: "noopener"
-            - if export.old?
-              = button_to download_export_path(export_format: export.format, force_export: true), **refresh_button_options(export) do
-                .icon.retry
-          - else
-            %span{ data: poll_controller_options(export) }
-              = pending_label(export)
+      - menu.with_item(aria: {disabled:"true"}, class: 'selected') do
+        %span{ data: poll_controller_options(export) }
+          = pending_label(export)

From 9a12b97424cb60b686d9dd0bbfc98eca21e466f1 Mon Sep 17 00:00:00 2001
From: Martin <martin@sharypic.com>
Date: Thu, 5 Jan 2023 10:52:46 +0100
Subject: [PATCH 03/14] amelioration(expert/avis/header): passe d'un dropdown
 avec un element pour telecharger le dossier au composant dsfr de
 telechargement de fichier

---
 app/views/experts/avis/_header.html.haml               | 10 +++++-----
 spec/system/experts/expert_spec.rb                     |  1 -
 .../users/dossiers/show/_header.html.haml_spec.rb      | 10 +++++-----
 3 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/app/views/experts/avis/_header.html.haml b/app/views/experts/avis/_header.html.haml
index 1fe7ea5e0..24312fd9f 100644
--- a/app/views/experts/avis/_header.html.haml
+++ b/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
diff --git a/spec/system/experts/expert_spec.rb b/spec/system/experts/expert_spec.rb
index b02abc1d2..f5e67a2b2 100644
--- a/spec/system/experts/expert_spec.rb
+++ b/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
diff --git a/spec/views/users/dossiers/show/_header.html.haml_spec.rb b/spec/views/users/dossiers/show/_header.html.haml_spec.rb
index 033d1eb20..bc931b537 100644
--- a/spec/views/users/dossiers/show/_header.html.haml_spec.rb
+++ b/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

From 2805714931a357e09b7ed600e7a71104b11470c6 Mon Sep 17 00:00:00 2001
From: Martin <martin@sharypic.com>
Date: Thu, 5 Jan 2023 11:05:08 +0100
Subject: [PATCH 04/14] amelioration(instructeurs/dossiers/_header_actions):
 passe les menu d'impression et de telechargement sur le nouveau menu

---
 .../dossiers/_header_actions.html.haml        | 42 ++++++++++++-------
 1 file changed, 26 insertions(+), 16 deletions(-)

diff --git a/app/views/instructeurs/dossiers/_header_actions.html.haml b/app/views/instructeurs/dossiers/_header_actions.html.haml
index 9a03b37ce..9cdba1d83 100644
--- a/app/views/instructeurs/dossiers/_header_actions.html.haml
+++ b/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",

From 6ff81a6680725b6a303d4c1e9737a6b7d7cc233f Mon Sep 17 00:00:00 2001
From: Martin <martin@sharypic.com>
Date: Fri, 6 Jan 2023 14:11:00 +0100
Subject: [PATCH 05/14] 
 amelioration(views/instructeurs/dossiers/_state_button.html.haml): passe le
 popover d'instruction sur le nouveau menu

---
 app/components/dropdown/menu_component.rb     |   7 +
 .../menu_component/menu_component.html.haml   |   3 +-
 .../dossiers/_state_button.html.haml          | 211 ++++++++----------
 3 files changed, 107 insertions(+), 114 deletions(-)

diff --git a/app/components/dropdown/menu_component.rb b/app/components/dropdown/menu_component.rb
index 639e889b7..7dc98212a 100644
--- a/app/components/dropdown/menu_component.rb
+++ b/app/components/dropdown/menu_component.rb
@@ -16,6 +16,13 @@ class Dropdown::MenuComponent < ApplicationComponent
     @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
diff --git a/app/components/dropdown/menu_component/menu_component.html.haml b/app/components/dropdown/menu_component/menu_component.html.haml
index a540a32ef..a1f3859ed 100644
--- a/app/components/dropdown/menu_component/menu_component.html.haml
+++ b/app/components/dropdown/menu_component/menu_component.html.haml
@@ -1,5 +1,4 @@
-= content_tag(@wrapper, class: wrapper_class_names, data: { controller: 'menu-button' }) do
-
+= 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
 
diff --git a/app/views/instructeurs/dossiers/_state_button.html.haml b/app/views/instructeurs/dossiers/_state_button.html.haml
index 296edd63b..c8a2e172e 100644
--- a/app/views/instructeurs/dossiers/_state_button.html.haml
+++ b/app/views/instructeurs/dossiers/_state_button.html.haml
@@ -1,120 +1,107 @@
-.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
+= 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)
 
-  -# Dropdown content
-  #state-menu.dropdown-content.fade-in-down{ data: { menu_button_target: 'menu' } }
+  - if dossier.en_construction?
+    - 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
 
-    - if dossier.en_construction?
-      -# ------------------------------------------------------
-      -# EN CONSTRUCTION
-      -# ------------------------------------------------------
-      %ul.dropdown-items
+    - 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
 
-        %li.selected
-          %span.icon.edit
+  - elsif dossier.en_instruction?
+    - 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
+
+    - 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
+
+    - 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é
+
+
+    - 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
+
+
+    - 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?
+    - if dossier.motivation.present?
+      - menu.with_item(class: 'inactive') do
+        %span.icon.info
+        .dropdown-description
+          %h4 Motivation
+          %p « #{dossier.motivation} »
+
+    - if dossier.justificatif_motivation.attached?
+      - menu.with_item(class: 'inactive') do
+        %span.icon.justificatif
+        .dropdown-description
+          %h4 Justificatif
+          %p Ce justificatif joint par l’instructeur a été envoyé au demandeur.
+          = render partial: 'users/dossiers/show/download_justificatif', locals: { dossier: dossier }
+
+    - if dossier.attestation.present?
+      - 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 En construction
-            Vous permettez à l'usager de modifier ses réponses au formulaire
+            %h4 Voir l’attestation
+            %p Cette attestation a été envoyée automatiquement au demandeur.
 
-        %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
-            %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
-            %span.icon.edit
-            .dropdown-description
-              %h4 Repasser en construction
-              Vous permettrez à l'usager de modifier ses réponses au formulaire
-
-        %li.selected
+    - if dossier.can_repasser_en_instruction?
+      - 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 En instruction
-            L’usager ne peut modifier son dossier pendant l'instruction
+            %h4 Repasser en instruction
+            L’usager sera notifié que son dossier est réexaminé.
+    - elsif dossier.user_deleted?
+      - 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
-          %a{ href: '#', onclick: "DS.showMotivation(event, 'accept');" }
-            %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');" }
-            %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');" }
-            %span.icon.refuse
-            .dropdown-description
-              %h4 Refuser
-              L’usager sera notifié que son dossier a été refusé
-
-        = 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 ?" }
-
-        = 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 ?' }
-
-        = 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
-            %span.icon.info
-            .dropdown-description
-              %h4 Motivation
-              %p « #{dossier.motivation} »
-
-        - if dossier.justificatif_motivation.attached?
-          %li.inactive
-            %span.icon.justificatif
-            .dropdown-description
-              %h4 Justificatif
-              %p Ce justificatif joint par l’instructeur a été envoyé au demandeur.
-              = 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
-              %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
-              %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
-            %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
-            %span.icon.delete
-            .dropdown-description
-              %h4 Supprimer le dossier
+    - 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

From 1095957fb98be6db82c63e1c6faf14201571eebc Mon Sep 17 00:00:00 2001
From: Martin <martin@sharypic.com>
Date: Fri, 6 Jan 2023 14:26:59 +0100
Subject: [PATCH 06/14] 
 amelioration(views/instructeurs/procedures/_dossier_actions.html.haml): passe
 le popover de gestion d'un dossier sur la vue des dossiers sur le nouveau
 menu

---
 .../procedures/_dossier_actions.html.haml     | 55 +++++++------
 .../users/dossiers/_dossier_actions.html.haml | 82 ++++++++++---------
 2 files changed, 71 insertions(+), 66 deletions(-)

diff --git a/app/views/instructeurs/procedures/_dossier_actions.html.haml b/app/views/instructeurs/procedures/_dossier_actions.html.haml
index 582af3ab6..3c9bf64d4 100644
--- a/app/views/instructeurs/procedures/_dossier_actions.html.haml
+++ b/app/views/instructeurs/procedures/_dossier_actions.html.haml
@@ -2,33 +2,36 @@
   = 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
-              %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
-              %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
-              %span.icon.archive
-              %span.dropdown-description
-                Archiver le dossier
-          %li.danger
-            = link_to instructeur_dossier_path(procedure_id, dossier_id), method: :delete do
-              %span.icon.delete
-              %span.dropdown-description
-                = t('views.instructeurs.dossiers.delete_dossier')
+
+    - if close_to_expiration
+      - 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
+      - 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
+      - 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
+
+      - 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
diff --git a/app/views/users/dossiers/_dossier_actions.html.haml b/app/views/users/dossiers/_dossier_actions.html.haml
index 52a89f4f3..4ca3f6118 100644
--- a/app/views/users/dossiers/_dossier_actions.html.haml
+++ b/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
-                %span.icon.edit
-                .dropdown-description
-                  = t('views.users.dossiers.dossier_action.edit_draft')
-          - else
-            %li
-              = link_to modifier_dossier_path(dossier) 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
-              %span.icon.person
-              .dropdown-description
-                = t('views.users.dossiers.dossier_action.transfer_dossier')
+    - if has_edit_action
+      - if dossier.brouillon?
+        - 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
+        - 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_new_dossier_action
-          %li
-            = link_to procedure_lien(dossier.procedure) 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
-              %span.icon.new-folder
-              .dropdown-description
-                = t('views.users.dossiers.dossier_action.clone')
+    - if has_transfer_action
+      - 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_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
-              %span.icon.delete
-              .dropdown-description
-                = t('views.users.dossiers.dossier_action.delete_dossier')
+    - if has_new_dossier_action
+      - 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')
 
+      - 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
+      - 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')

From e53d350a6f268526fa07f2ed2892a82bf760584d Mon Sep 17 00:00:00 2001
From: Martin <martin@sharypic.com>
Date: Fri, 6 Jan 2023 15:11:57 +0100
Subject: [PATCH 07/14] 
 amelioration(app/views/instructeurs/procedures/show.html.haml): passe le
 popover de la personnalisation du tableau des dossiers sur le nouveau menu

---
 app/views/instructeurs/procedures/show.html.haml | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/app/views/instructeurs/procedures/show.html.haml b/app/views/instructeurs/procedures/show.html.haml
index 07ca9acca..074a6f27e 100644
--- a/app/views/instructeurs/procedures/show.html.haml
+++ b/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

From 2c8781ff981365503050cbc6da18bdd00322c184 Mon Sep 17 00:00:00 2001
From: Martin <martin@sharypic.com>
Date: Fri, 6 Jan 2023 15:45:18 +0100
Subject: [PATCH 08/14] amelioration(app/views/invites/_dropdown.html.haml):
 passe le popover d'invitation sur le nouveau menu

---
 app/views/invites/_dropdown.html.haml         |  7 ++---
 app/views/recherche/index.html.haml           | 28 +++++++++----------
 app/views/users/dossiers/demande.html.haml    |  2 +-
 .../users/dossiers/show/_header.html.haml     |  2 +-
 4 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/app/views/invites/_dropdown.html.haml b/app/views/invites/_dropdown.html.haml
index 5902deb5d..dad812910 100644
--- a/app/views/invites/_dropdown.html.haml
+++ b/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 }
diff --git a/app/views/recherche/index.html.haml b/app/views/recherche/index.html.haml
index 69cfb52fc..46aa5b6ed 100644
--- a/app/views/recherche/index.html.haml
+++ b/app/views/recherche/index.html.haml
@@ -67,21 +67,21 @@
 
             - 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
-                          %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
-                          %span.icon.in-progress>
-                          .dropdown-description
-                            Donner mon avis
+
+                  - 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
+
+                  - 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
 
             - elsif instructeur_dossier
               - if hidden_by_administration
diff --git a/app/views/users/dossiers/demande.html.haml b/app/views/users/dossiers/demande.html.haml
index e9b3b7710..56e88e5df 100644
--- a/app/views/users/dossiers/demande.html.haml
+++ b/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
diff --git a/app/views/users/dossiers/show/_header.html.haml b/app/views/users/dossiers/show/_header.html.haml
index 602354561..6139f57ba 100644
--- a/app/views/users/dossiers/show/_header.html.haml
+++ b/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 })
 

From 3dc4a51bf32632d7de113353755389c5bc327728 Mon Sep 17 00:00:00 2001
From: Martin <martin@sharypic.com>
Date: Fri, 6 Jan 2023 17:26:28 +0100
Subject: [PATCH 09/14] 
 amelioration(app/views/shared/help/_help_dropdown_dossier.html.haml): passe
 le menu d'aide sur un dossier au nouveau menu

---
 .../help/_help_dropdown_dossier.html.haml     | 25 ++++++++--------
 .../help/dropdown_items/_faq_item.html.haml   | 16 +++++-----
 .../dropdown_items/_messagerie_item.html.haml | 11 ++++---
 .../dropdown_items/_service_item.html.haml    | 29 +++++++++----------
 4 files changed, 39 insertions(+), 42 deletions(-)

diff --git a/app/views/shared/help/_help_dropdown_dossier.html.haml b/app/views/shared/help/_help_dropdown_dossier.html.haml
index 51f1460e3..7b58386af 100644
--- a/app/views/shared/help/_help_dropdown_dossier.html.haml
+++ b/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 ?"
+  - 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 }
-      - elsif dossier.procedure.service.present?
-        = render partial: 'shared/help/dropdown_items/service_item',
-          locals: { service: dossier.procedure.service, title: title }
+  - if dossier.messagerie_available?
+    - menu.with_item do
+      = render partial: 'shared/help/dropdown_items/messagerie_item', locals: { dossier: dossier, title: title }
 
-      = render partial: 'shared/help/dropdown_items/faq_item'
+  - 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'
diff --git a/app/views/shared/help/dropdown_items/_faq_item.html.haml b/app/views/shared/help/dropdown_items/_faq_item.html.haml
index 28e52de5d..cea9ceaa4 100644
--- a/app/views/shared/help/dropdown_items/_faq_item.html.haml
+++ b/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
-    %span.icon.help
-    .dropdown-description
-      %span.help-dropdown-title
-        = t('help_dropdown.problem_title')
-      %p
-        = t('help_dropdown.problem_description')
-
+= 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')
diff --git a/app/views/shared/help/dropdown_items/_messagerie_item.html.haml b/app/views/shared/help/dropdown_items/_messagerie_item.html.haml
index 94d31143d..87244e6af 100644
--- a/app/views/shared/help/dropdown_items/_messagerie_item.html.haml
+++ b/app/views/shared/help/dropdown_items/_messagerie_item.html.haml
@@ -1,6 +1,5 @@
-%li
-  = link_to messagerie_dossier_path(dossier) do
-    %span.icon.mail
-    .dropdown-description
-      %span.help-dropdown-title= title
-      %p Envoyez directement un message à l’instructeur.
+= link_to messagerie_dossier_path(dossier), role: 'menuitem' do
+  %span.icon.mail
+  .dropdown-description
+    %span.help-dropdown-title= title
+    %p Envoyez directement un message à l’instructeur.
diff --git a/app/views/shared/help/dropdown_items/_service_item.html.haml b/app/views/shared/help/dropdown_items/_service_item.html.haml
index 215793ec5..3aae66c04 100644
--- a/app/views/shared/help/dropdown_items/_service_item.html.haml
+++ b/app/views/shared/help/dropdown_items/_service_item.html.haml
@@ -1,15 +1,14 @@
-%li.help-dropdown-service
-  %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}"
-      %p.help-dropdown-service-item
-        %span.icon.small.phone
-        = link_to service.telephone, service.telephone_url
-      %p.help-dropdown-service-item
-        %span.icon.small.clock
-        = service.horaires
+%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}", role: 'menuitem'
+    %p.help-dropdown-service-item
+      %span.icon.small.phone
+      = link_to service.telephone, service.telephone_url, role: 'menuitem'
+    %p.help-dropdown-service-item
+      %span.icon.small.clock
+      = service.horaires

From 34c5bb70e7a2389596c414a296f8a9dd68d42758 Mon Sep 17 00:00:00 2001
From: Martin <martin@sharypic.com>
Date: Fri, 6 Jan 2023 17:28:55 +0100
Subject: [PATCH 10/14] 
 amelioration(app/views/shared/help/_help_dropdown_instructeur.html.haml):
 passe le menu d'aide instructeur au nouveau menu

---
 .../help/_help_dropdown_instructeur.html.haml       | 13 +++++++------
 .../help/dropdown_items/_email_item.html.haml       |  4 ++--
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/app/views/shared/help/_help_dropdown_instructeur.html.haml b/app/views/shared/help/_help_dropdown_instructeur.html.haml
index d1e8ef299..329b80e50 100644
--- a/app/views/shared/help/_help_dropdown_instructeur.html.haml
+++ b/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
-      = render partial: 'shared/help/dropdown_items/faq_item'
-      = render partial: 'shared/help/dropdown_items/email_item'
+
+  - menu.with_item do
+    = render partial: 'shared/help/dropdown_items/faq_item'
+  - menu.with_item do
+    = render partial: 'shared/help/dropdown_items/email_item'
diff --git a/app/views/shared/help/dropdown_items/_email_item.html.haml b/app/views/shared/help/dropdown_items/_email_item.html.haml
index 834fb5924..3eecc2f5e 100644
--- a/app/views/shared/help/dropdown_items/_email_item.html.haml
+++ b/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

From b3e3f083b8e96d9d8c5ed33afeea9a458e002936 Mon Sep 17 00:00:00 2001
From: Martin <martin@sharypic.com>
Date: Fri, 6 Jan 2023 17:31:59 +0100
Subject: [PATCH 11/14] 
 amelioration(app/views/shared/help/_help_dropdown_procedure.html.haml ):
 passe le menu d'aide sur une procedure par un usager au nouveau menu

---
 .../help/_help_dropdown_procedure.html.haml       | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/app/views/shared/help/_help_dropdown_procedure.html.haml b/app/views/shared/help/_help_dropdown_procedure.html.haml
index b3781d6eb..80b939161 100644
--- a/app/views/shared/help/_help_dropdown_procedure.html.haml
+++ b/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 ?" }
 
-      = render partial: 'shared/help/dropdown_items/faq_item'
+  - 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'

From 6bdbf565cc347e38668b59c7d76ccde6290964c0 Mon Sep 17 00:00:00 2001
From: Martin <martin@sharypic.com>
Date: Fri, 6 Jan 2023 17:50:35 +0100
Subject: [PATCH 12/14] =?UTF-8?q?amelioration(app/views/users/dossiers/=5F?=
 =?UTF-8?q?identity=5Fdropdown.html.haml):=20passe=20le=20menu=20de=20gest?=
 =?UTF-8?q?ion=20d'identit=C3=A9=20d'un=20dossier=20usager=20au=20nouveau?=
 =?UTF-8?q?=20menu?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/views/users/dossiers/_identity_dropdown.html.haml | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/views/users/dossiers/_identity_dropdown.html.haml b/app/views/users/dossiers/_identity_dropdown.html.haml
index 3da4cd863..88781adfb 100644
--- a/app/views/users/dossiers/_identity_dropdown.html.haml
+++ b/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 }
 

From 927d6791e777e17519c23b04b1d19c8af9986ab2 Mon Sep 17 00:00:00 2001
From: Martin <martin@sharypic.com>
Date: Fri, 6 Jan 2023 17:56:32 +0100
Subject: [PATCH 13/14] 
 amelioration(app/views/users/dossiers/show/_print_dossier.html.haml): passe
 le dropdown de telechargement d'un dossier en un simple bouton

---
 app/views/users/dossiers/show/_print_dossier.html.haml | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/app/views/users/dossiers/show/_print_dossier.html.haml b/app/views/users/dossiers/show/_print_dossier.html.haml
index 58e030960..1e2392431 100644
--- a/app/views/users/dossiers/show/_print_dossier.html.haml
+++ b/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'

From 1b1bd5b57da644f8f51fd613c86e9cdfd6040194 Mon Sep 17 00:00:00 2001
From: Martin <martin@sharypic.com>
Date: Tue, 24 Jan 2023 09:58:31 +0100
Subject: [PATCH 14/14] fixup!
 amelioration(app/views/instructeurs/procedures/_dossiers_filter.html.haml):
 passe le popover des filtres des dossiers sur le nouveau menu

---
 .../procedures/_dossiers_filter_dropdown.html.haml        | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/app/views/instructeurs/procedures/_dossiers_filter_dropdown.html.haml b/app/views/instructeurs/procedures/_dossiers_filter_dropdown.html.haml
index 896b2d0ed..7106f0d58 100644
--- a/app/views/instructeurs/procedures/_dossiers_filter_dropdown.html.haml
+++ b/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)
+