Merge pull request #2008 from betagouv/feat/click-outside-close-panel#1993

feat: Conv - Lot 4 Panneau d'affichage des brouillons de recommandation#2004

Author: alice-telescoop

recoco/apps/conversations/templates/conversations/messages/fragments/resource_preview_panel.html

@@ -4,7 +4,14 @@
 {% endcomment %}
 <template x-if="$store.resourcePreviewPanel.isOpen">
     <div x-data="{ closePanel() { $store.resourcePreviewPanel.close(); $store.sharedContentsPanel && $store.sharedContentsPanel.reopenIfNeeded(); } }">
-        <div class="resource-preview-panel" @keydown.escape.window="closePanel()">
+        <div class="resource-preview-panel__backdrop backdrop-overlay"
+             @click="closePanel()"></div>
+        <div class="resource-preview-panel"
+             role="dialog"
+             aria-modal="true"
+             aria-label="Détail de la recommandation"
+             x-trap.inert="$store.resourcePreviewPanel.isOpen"
+             @keydown.escape.window="closePanel()">
             <!-- Header -->
             <div class="resource-preview-panel__header">
                 <button type="button"

recoco/apps/conversations/templates/conversations/messages/fragments/shared_contents_panel.html

@@ -5,11 +5,17 @@
 {% endcomment %}
 <template x-if="$store.sharedContentsPanel.isOpen">
     <div>
+        <div class="shared-contents-panel__backdrop backdrop-overlay"
+             @click="$store.sharedContentsPanel.close()"></div>
         <div class="shared-contents-panel"
+             role="dialog"
+             aria-modal="true"
+             aria-labelledby="shared-contents-panel-title"
+             x-trap.inert="$store.sharedContentsPanel.isOpen"
              @keydown.escape.window="$store.sharedContentsPanel.close()">
             <!-- Header -->
             <div class="shared-contents-panel__header">
-                <h2 class="shared-contents-panel__title">Contenus partagés</h2>
+                <h2 id="shared-contents-panel-title" class="shared-contents-panel__title">Contenus partagés</h2>
                 <button type="button"
                         class="shared-contents-panel__close-btn fr-btn--close fr-btn"
                         aria-label="Fermer"

recoco/frontend/src/css/DSFR/custom-dsfr.scss

@@ -541,6 +541,20 @@ form > p {
   display: inline;
 }
 
+/* ¯¯¯¯¯ *\
+  BACKDROP
+\* ˍˍˍˍˍˍ */
+
+.backdrop-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  cursor: pointer;
+}
+
 /* ¯¯¯ *\
   UTILS
 \* ˍˍˍ */

recoco/frontend/src/css/projects/fragments/resource_preview_panel.scss

@@ -1,6 +1,11 @@
 // Resource Preview Panel - Overlay panel for recommendation resource display
 // Used in conversation page when clicking a recommendation with resource
 
+// Backdrop overlay for click-outside-to-close
+.resource-preview-panel__backdrop {
+  z-index: 2099;
+}
+
 .resource-preview-panel {
   position: fixed;
   top: 0;

recoco/frontend/src/css/projects/fragments/shared_contents_panel.scss

@@ -1,6 +1,11 @@
 // Shared Contents Panel - Overlay panel displaying recommendations and files shared in conversation
 // Used in conversation page, accessible from left panel or above messages
 
+// Backdrop overlay for click-outside-to-close
+.shared-contents-panel__backdrop {
+  z-index: 1999;
+}
+
 .shared-contents-panel {
   position: fixed;
   top: 0;