[#3081] modal selects radio plan

Author: jiromaykin

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

@@ -30,18 +30,21 @@ export class PlanPreview {
 
     // Find the corresponding radio input
     let radioInput = null
+    let radioLabel = null
 
     // First structure (original page)
     const templateRow = this.node.closest('.plan-template__row')
     if (templateRow) {
       radioInput = templateRow.querySelector('.radio__input')
+      radioLabel = templateRow.querySelector('.radio__label')
     }
 
     // Second structure (choice-list page)
     if (!radioInput) {
       const choiceListItem = this.node.closest('.choice-list__item')
       if (choiceListItem) {
         radioInput = choiceListItem.querySelector('.choice-list__radio')
+        radioLabel = choiceListItem.querySelector('.choice-list__label')
       }
     }
 
@@ -51,6 +54,18 @@ export class PlanPreview {
     // As a fallback, try to find the radio by its ID
     if (!radioInput && templateId) {
       radioInput = document.getElementById(`id_template_${templateId}`)
+      if (radioInput) {
+        // Try to find the associated label
+        radioLabel = document.querySelector(
+          `label[for="id_template_${templateId}"]`
+        )
+        if (!radioLabel) {
+          // If no explicit label found, look for parent or ancestor label
+          radioLabel =
+            radioInput.closest('label') ||
+            radioInput.parentElement.querySelector('label')
+        }
+      }
     }
 
     // Find all close buttons in the modal
@@ -67,6 +82,9 @@ export class PlanPreview {
             // Select the radio input
             radioInput.checked = true
 
+            // Set focus to the radio input to trigger CSS focus styles
+            radioInput.focus()
+
             // If using the choice-list structure, add the 'selected' class to the parent list item
             const choiceListItem = radioInput.closest('.choice-list__item')
             if (choiceListItem) {
@@ -81,15 +99,38 @@ export class PlanPreview {
             // Trigger change event to ensure any listeners know the radio was changed
             const changeEvent = new Event('change', { bubbles: true })
             radioInput.dispatchEvent(changeEvent)
+
+            // Add a small delay before setting focus to ensure DOM updates are processed
+            setTimeout(() => {
+              // For the first HTML variant, ensure focus affects the label for visual feedback
+              if (radioInput && radioLabel && templateRow) {
+                // First try to focus the label if possible (better for accessibility)
+                if (radioLabel.getAttribute('for') === radioInput.id) {
+                  radioLabel.focus()
+                } else {
+                  // Otherwise focus the input itself
+                  radioInput.focus()
+                }
+              }
+            }, 50)
           },
           { once: true }
         )
       })
     }
 
-    // Set the modal-closed callback to focus on the element that opened it
+    // Set the modal-closed callback to focus on the selected radio or label
     modal.setModalClosedCallback(() => {
-      if (modal.openedBy) {
+      if (radioInput && radioInput.checked) {
+        // Try to focus the label first (if it exists and is properly linked)
+        if (radioLabel && radioLabel.getAttribute('for') === radioInput.id) {
+          radioLabel.focus()
+        } else {
+          // Fall back to focusing the input itself
+          radioInput.focus()
+        }
+      } else if (modal.openedBy) {
+        // If no radio was selected, return focus to the element that opened the modal
         modal.openedBy.focus()
       }
     })

src/open_inwoner/scss/components/PlanTemplate/PlanTemplate.scss

@@ -1,4 +1,14 @@
 .plan-template {
+  scroll-margin-top: 122px;
+
+  &__table {
+    display: grid;
+    grid-template-columns: 1fr 1fr 16px;
+    gap: var(--spacing-small);
+    border-bottom: 1px solid var(--color-gray-light);
+    padding: var(--spacing-medium);
+  }
+
   &__options {
     .choice-list {
       display: grid;

src/open_inwoner/search/results.py

@@ -1,5 +1,6 @@
 from collections import OrderedDict
 from dataclasses import dataclass
+from operator import attrgetter
 from typing import Type
 
 from django.db import models
@@ -80,6 +81,12 @@ def total_buckets(self) -> list[FacetBucket]:
     def choices(self) -> list:
         return [(b.slug, b.label) for b in self.buckets]
 
+    def total_choices(self) -> list:
+        return [
+            (b.slug, b.label)
+            for b in sorted(self.total_buckets, key=attrgetter("slug"))
+        ]
+
 
 @dataclass()
 class ProductSearchResult:

src/open_inwoner/search/tests/test_page.py

@@ -233,7 +233,7 @@ def test_basic_search(self):
         # search to find both products
         page.goto(self.live_reverse("search:search", params={"query": "summary"}))
         page.wait_for_url(self.live_reverse("search:search", star=True))
-        expect(page.locator(".search-results__item")).to_have_count(2)
+        expect(page.locator(".card")).to_have_count(2)
 
     def test_search_form_delegates_copy_query_value(self):
         context = self.browser.new_context()
@@ -273,11 +273,11 @@ def _do_search(query, form_id, open_menu):
 
                 # search from this page
                 _do_search("summary", form_id, open_menu)
-                expect(page.locator(".search-results__item")).to_have_count(2)
+                expect(page.locator(".card")).to_have_count(2)
 
                 # perform another search from the search results page
                 _do_search("other", form_id, open_menu)
-                expect(page.locator(".search-results__item")).to_have_count(1)
+                expect(page.locator(".card")).to_have_count(1)
 
                 page.close()
                 context.close()
@@ -289,7 +289,7 @@ def test_search_with_filters(self):
         # search to find both products
         page.goto(self.live_reverse("search:search", params={"query": "summary"}))
         page.wait_for_url(self.live_reverse("search:search", star=True))
-        expect(page.locator(".search-results__item")).to_have_count(2)
+        expect(page.locator(".card")).to_have_count(2)
 
         # check if we see all checkboxes
         for facet in FacetChoices.values:

src/open_inwoner/search/views.py

@@ -115,7 +115,7 @@ def search(self, form):
         # update form fields with choices
         for facet in results.facets:
             if facet.name in form.fields:
-                form.fields[facet.name].choices = facet.choices()
+                form.fields[facet.name].choices = facet.total_choices()
 
         # paginate
         paginator_dict = self.paginate_with_context(results.results)

src/open_inwoner/templates/pages/plans/choose-template.html

@@ -14,10 +14,8 @@ <h1 class="utrecht-heading-1">{% trans "Kies een voorstel" %}</h1>
                 <div class="plan-template">
                     <div class="plan-template__header">
                         <span class="plan-tag">{% trans "Voorgesteld" %}</span>
-                        <div class="plan-template__row choice-list--single">
-                            <div class="label radio">
+                        <div class="plan-template__header-nav">
                                 {% button href="collaborate:plan_create_no_template" text=_("Zelf in te vullen samenwerking") primary=True transparent=True extra_classes="link--bold" icon="insert_drive_file" icon_outlined=True %}
-                            </div>
                         </div>
                     </div>
 

src/open_inwoner/templates/pages/plans/create-no-template.html

@@ -5,11 +5,9 @@
     <div class="plan-create">
         <div class="plan-template__header">
             <h1 class="utrecht-heading-1">{% trans "Start nieuwe samenwerking" %}</h1>
-
-            <div class="plan-template__row choice-list--single">
-                <div class="label radio">
-                    {% button href="#plan-templates" text=_("Gebruik sjabloon") primary=True transparent=True extra_classes="link--bold" icon="insert_drive_file" icon_outlined=True %}
-                </div>
+            <div class="plan-template__header-nav">
+                {% button href="#plan-templates" text=_("Gebruik sjabloon") primary=True transparent=True extra_classes="link--bold" icon="insert_drive_file" icon_outlined=True %}
+                {# TODO: Change scrollbutton into "href="collaborate:plan_choose_template" #}
             </div>
         </div>
 
@@ -28,14 +26,14 @@ <h1 class="utrecht-heading-1">{% trans "Start nieuwe samenwerking" %}</h1>
 
                         <div class="">
                             <div class="plan-template" id="plan-templates">
-                                <div class="label plan-template__row radio">
+                                <div class="label plan-template__row plan-template__table radio">
                                     <div>
                                         <input class="radio__input" type="radio" name="template" value="" id="id_template_0" {% if not form.data.template %}checked{% endif %}>
                                         <label class="radio__label" for="id_template_0">Geen template</label>
                                     </div>
                                 </div>
                                 {% for tpl_id, plan_template in form.template.field.choices %}
-                                    <div class="label plan-template__row radio">
+                                    <div class="label plan-template__row plan-template__table radio">
                                         <div>
                                             <input class="radio__input" type="radio" name="template" value="{{ plan_template.id }}" id="id_template_{{ plan_template.id }}"
                                                    {% if tpl_id == form.data.template %}checked{% endif %}>
@@ -45,7 +43,7 @@ <h1 class="utrecht-heading-1">{% trans "Start nieuwe samenwerking" %}</h1>
                                             {{ plan_template.goal|truncatewords:8 }}
                                         </div>
                                         <div class="plan-template__icon">
-                                            <button class="show-preview" type="button" data-id="template-{{ plan_template.id }}">
+                                            <button class="show-preview" title="" type="button" data-id="template-{{ plan_template.id }}">
                                                 {% icon icon="visibility" outlined=True %}
                                             </button>
                                         </div>
@@ -59,7 +57,10 @@ <h2 class="utrecht-heading-2 modal__title" id="modal__title">{% trans "Kies een
                                                 </header>
                                                 <div class="modal__text" id="modal__text">{{ plan_template.string_preview }}</div>
                                                 <div class="modal__actions modal__actions--align-right" id="modal__actions">
-                                                    <button class="button modal__button modal__close button--primary button-icon--primary" type="button" aria-label="Sluit"><span class="inner-text">Sluiten </span></button>
+                                                    <div class="form__actions form__actions--fullwidth">
+                                                        {% button text=_("Gebruik dit voorstel") primary=True type="button" extra_classes="modal__close" %}
+                                                        {% button href="collaborate:plan_list" icon="west" text=_("Terug naar Mijn samenwerkingen") icon_outlined=True transparent=True %}
+                                                    </div>
                                                 </div>
                                             </div>
                                         </div>

src/open_inwoner/templates/pages/plans/create-with-template.html

@@ -6,21 +6,18 @@
         <div class="plan-template__header">
             <h1>{{ object.title }} 
                 {# remove once functional object exists #}
-                [[ Title of chosen plan]] </h1>  
-            
-            <div class="plan-template__row choice-list--single">
-                <div class="label radio">
-                    {% button href="collaborate:plan_choose_template" text=_("Gebruik sjabloon") primary=True transparent=True extra_classes="link--bold" icon="insert_drive_file" icon_outlined=True %}
-                </div>
+                [[ Title of chosen plan]] </h1>
+            <div class="plan-template__header-nav">
+                {% button href="collaborate:plan_create_no_template" text=_("Zelf in te vullen samenwerking") primary=True transparent=True extra_classes="link--bold" icon="insert_drive_file" icon_outlined=True %}
             </div>
         </div>
 
         {% render_grid %}
             {% render_column start=3 span=7 %}
                 {% if request.user.get_active_contacts %}
                     {% render_form id="plan-form" form=form method="POST" %}
-{#                        TODO: May need different form, based on chosen template from previous step in flow#}
-{#                        {% render_form id="plan-form...?" form=form method="POST" %}#}
+                    {# TODO: May need different form, based on chosen template from previous step in flow #}
+                    {# {% render_form id="plan-form...?" form=form method="POST" %} #}
                         {% csrf_token %}
                         {% date_field form.end_date icon="today" icon_position="after" %}
                         {% checkboxes form.plan_contacts %}