♿ [#2583] Make control of modal focusable in the right order

src/open_inwoner/js/components/confirmation/index.js

@@ -29,7 +29,21 @@ export class Confirmation {
         this.handleConfirm.bind(this),
         'button--error-confirm'
       )
-      modal.show(this.form)
+
+      // Set the element that opened the modal
+      const profileDeleteButton = this.form.querySelector(
+        '.button--transparent'
+      )
+      modal.openedBy = profileDeleteButton
+
+      // Set the modal closed callback to focus on the element that opened it
+      modal.setModalClosedCallback(() => {
+        if (modal.openedBy) {
+          modal.openedBy.focus()
+        }
+      })
+
+      modal.show(profileDeleteButton)
     }
   }
 

src/open_inwoner/js/components/modal/index.js

@@ -11,6 +11,7 @@ export default class Modal {
       '.modal__confirm .inner-text'
     )
     this.closeTitle = this.node.querySelector('.modal__close-title')
+    this.openedBy = null // Track the element that opened the modal
 
     // This is for the prefilled modals so they will not be emptied
     if (!this.node.classList.contains('modal--no-reset')) {
@@ -124,7 +125,15 @@ export default class Modal {
   show(refocusOnClose) {
     this.node.classList.add('modal--open')
     this.refocusOnClose = refocusOnClose
-    this.close.focus()
+
+    // Set focus on the cancel button if it exists
+    if (this.close) {
+      this.close.focus()
+    } else if (this.confirm) {
+      this.confirm.focus()
+    } else {
+      this.node.focus()
+    }
   }
 
   hide() {
@@ -149,6 +158,7 @@ export default class Modal {
     if (this.modalClosedCallback) {
       this.modalClosedCallback()
     }
+    this.openedBy = null // Reset the reference to the element that opened the modal
   }
 
   escapeModal(event) {

src/open_inwoner/js/components/plan-preview/index.js

@@ -1,6 +1,6 @@
 import Modal from '../modal'
 
-export class Preview {
+export class PlanPreview {
   // Selector for elements triggering the preview modal
   static selector = '.show-preview'
 
@@ -19,10 +19,21 @@ export class Preview {
     modal.setConfirmButtonVisibility(false)
     modal.setCancelButtonVisibility(true)
     modal.setButtonIconCloseVisibility(true)
+
+    // Track the element that opened the modal
+    modal.openedBy = this.node
+
+    // Set the modal-closed callback to focus on the element that opened it
+    modal.setModalClosedCallback(() => {
+      if (modal.openedBy) {
+        modal.openedBy.focus()
+      }
+    })
+
     modal.show()
   }
 }
 
 document
-  .querySelectorAll(Preview.selector)
-  .forEach((previewNode) => new Preview(previewNode))
+  .querySelectorAll(PlanPreview.selector)
+  .forEach((previewNode) => new PlanPreview(previewNode))

src/open_inwoner/scss/components/Plan/PlanCreate.scss

@@ -10,6 +10,17 @@
     }
   }
 
+  .show-preview {
+    border: none;
+    background-color: transparent;
+
+    &:focus,
+    &:focus-visible {
+      background-color: var(--color-gray-lightest);
+      border-radius: var(--border-radius);
+    }
+  }
+
   .modal--open {
     .modal__container {
       padding: var(--spacing-giant);

src/open_inwoner/scss/components/modal/_modal.scss

@@ -156,4 +156,13 @@
   &.show-cancel-button .button.modal__close {
     display: flex;
   }
+
+  &.show-cancel-button .button.modal__close {
+    &:hover,
+    &:focus,
+    &:focus-visible {
+      background-color: var(--color-primary-darker);
+      transform: none;
+    }
+  }
 }

src/open_inwoner/templates/master.html

@@ -132,13 +132,6 @@
             </main>
         {% endblock main_outer %}
 
-        {% get_solo 'configurations.SiteConfiguration' as config %}
-        {% if config.kcm_survey_link_url and config.kcm_survey_link_text %}
-            <div class="kcm-survey">
-                {% link bold=True href=config.kcm_survey_link_url text=config.kcm_survey_link_text blank=True hide_external_icon=True %}
-            </div>
-        {% endif %}
-
         {% if footer %}
         <footer class="footer">
             {% if footer.logo_title or footer.logo %}
@@ -159,6 +152,14 @@
             <div class="footer__left wysiwyg">{% static_placeholder "footer_left" %}</div>
             <div class="footer__center wysiwyg">{% static_placeholder "footer_center" %}</div>
             <div class="footer__right wysiwyg">{% static_placeholder "footer_right" %}</div>
+
+            {% get_solo 'configurations.SiteConfiguration' as config %}
+            {% if config.kcm_survey_link_url and config.kcm_survey_link_text %}
+                <div class="kcm-survey">
+                    {% link bold=True href=config.kcm_survey_link_url text=config.kcm_survey_link_text blank=True hide_external_icon=True %}
+                </div>
+            {% endif %}
+
         </footer>
         {% endif %}
 

src/open_inwoner/templates/pages/plans/create.html

@@ -43,9 +43,9 @@ <h1 class="utrecht-heading-1">{% trans "Start nieuwe samenwerking" %}</h1>
                                 {{ plan_template.goal|truncatewords:8 }}
                             </div>
                             <div class="plan-template__icon">
-                                <div class="show-preview" data-id="template-{{ plan_template.id }}">
+                                <button class="show-preview" type="button" data-id="template-{{ plan_template.id }}">
                                     {% icon icon="visibility" outlined=True %}
-                                </div>
+                                </button>
                             </div>
                             <div class="modal modal--no-reset" id="template-{{ plan_template.id }}">
                                 <div class="modal__container">