✅ FIX broken test.

Author: stefrado

src/open_inwoner/components/templates/components/Filter/Filter.html

@@ -1,7 +1,7 @@
 {% load i18n icon_tags button_tags form_tags %}
 
 <div class="filter__container">
-    <details class="filter" aria-label="{% trans "Filter" %}">
+    <details class="filter" aria-label="{% trans "Filter" %}" {% if initial_open %}open{% endif %}>
         <summary class="filter__title">
             <span class="filter__summary-label">
                 {{ field.label }}

src/open_inwoner/components/templates/components/Filter/SearchFilters.html

@@ -0,0 +1,19 @@
+{% load i18n icon_tags button_tags form_tags filter_tags utils %}
+
+<div>
+    <div class='filter__reset'>
+        {% button transparent=True type='button' inline=True text=_('Wis alle?') %}
+    </div>
+
+    {% if search_filter_categories and search_form.categories.field.choices|length != 0 %}
+        {% filter field=search_form.categories form_id=form_id open_filter_index=open_filter_index index=0 %}
+    {% endif %}
+
+    {% if search_filter_tags and search_form.tags.field.choices|length != 0  %}
+        {% filter field=search_form.tags form_id=form_id open_filter_index=open_filter_index index=1 %}
+    {% endif %}
+
+    {% if search_filter_organizations and search_form.organizations.field.choices|length != 0 %}
+        {% filter field=search_form.organizations form_id=form_id open_filter_index=open_filter_index index=2 %}
+    {% endif %}
+</div>

src/open_inwoner/components/templatetags/filter_tags.py

@@ -0,0 +1,73 @@
+from django import template
+
+register = template.Library()
+
+
+@register.inclusion_tag("components/Filter/SearchFilters.html")
+def search_filters(
+    search_form,
+    search_filter_categories,
+    search_filter_tags,
+    search_filter_organizations,
+    **kwargs
+):
+    """
+    Renders the actions in a filterable table.
+
+    Usage:
+        {% search_filters search_form form_id='form_id' search_filter_categories search_filter_tags search_filter_organizations %}
+
+    Available options:
+        + search_form: BaseForm | The form that contains the fields with choices.
+        + form_id: str | The id of the form.
+        + search_filter_categories: bool | The config bool that defines if the categorie choices are rendered.
+        + search_filter_tags: bool | The config bool that defines if the tag choices are rendered.
+        + search_filter_organizations: bool | The config bool that defines if the organization choices are rendered.
+    """
+
+    open_filter_index = 0
+
+    # Determine the initial open state based on active filters and their choices
+    filters = [
+        (search_filter_categories, len(search_form["categories"].field.choices), 0),
+        (search_filter_tags, len(search_form["tags"].field.choices), 1),
+        (
+            search_filter_organizations,
+            len(search_form["organizations"].field.choices),
+            2,
+        ),
+    ]
+
+    # Set initial_open based on which filter is active and has choices
+    for filter_active, choices_len, index in filters:
+        if filter_active and choices_len != 0:
+            open_filter_index = index
+            break  # Stop once we find the first active filter with choices
+
+    kwargs["search_form"] = search_form
+    kwargs["search_filter_categories"] = search_filter_categories
+    kwargs["search_filter_tags"] = search_filter_tags
+    kwargs["search_filter_organizations"] = search_filter_organizations
+    kwargs["open_filter_index"] = open_filter_index
+
+    return {**kwargs}
+
+
+@register.inclusion_tag("components/Filter/Filter.html")
+def filter(field, **kwargs):
+    """
+    Renders the actions in a filterable table.
+
+    Usage:
+        {% filter field=search_form.tags form_id=form_id open_filter_index=1 index=1 %}
+
+    Available options:
+        + field: Field | The field that needs to be rendered.
+        + form_id: str | The id of the form.
+        + open_filter_index: int | The index of the filter that should render open.
+        + index: int | The index of the current filter.
+    """
+
+    kwargs["initial_open"] = kwargs["open_filter_index"] is kwargs["index"]
+
+    return {"field": field, **kwargs}

src/open_inwoner/scss/components/SearchResults/SearchResults.scss

@@ -5,7 +5,7 @@
     gap: var(--spacing-large);
 
     @media (min-width: 768px) {
-      margin-top: 3.375rem; // 54px
+      margin-top: calc(2 * var(--spacing-giant) - var(--spacing-small)); // 54px
     }
 
     .grid {

src/open_inwoner/search/tests/test_page.py

@@ -137,8 +137,12 @@ def test_search_filter_configuration(self):
         config = SiteConfiguration.get_solo()
 
         def _assert_facet_checkbox_count(response, facet, count):
-            controls = response.pyquery(f"input[form='search-form'][name='{facet}']")
-            self.assertEqual(len(controls), count)
+            details_selector = f"details.filter div.filter__list input[name='{facet}']"
+            checkboxes = response.pyquery(details_selector)
+
+            self.assertEqual(
+                len(checkboxes), count, f"Incorrect number of {facet} checkboxes"
+            )
 
         with self.subTest("tags"):
             config.search_filter_tags = False
@@ -301,16 +305,35 @@ def test_search_with_filters(self):
                 expect(checkbox).to_be_enabled()
                 expect(checkbox).not_to_be_checked()
 
-        def _click_checkbox_for_name(page=page, name=""):
-            # first open de <details> through the summary
-            page.locator(".filter").filter(
-                has=page.get_by_role("checkbox", name=name)
-            ).locator(".filter__title").click()
-            # our checkbox widget hides the <input> element and styles the <label> and a pseudo-element
-            # this a problem for playwright accessibility, so we find the label for the checkbox and click on the label like a user would
-            page.locator(".checkbox").filter(
-                has=page.get_by_role("checkbox", name=name)
-            ).locator("label").click()
+        def _click_checkbox_for_name(page, name):
+            # Find the details element containing the label
+            details_with_label = page.locator("details.filter").filter(
+                has=page.get_by_text(name, exact=True)
+            )
+
+            # If exact match fails, try partial match
+            if details_with_label.count() == 0:
+                details_with_label = page.locator("details.filter").filter(
+                    has=page.get_by_text(name)
+                )
+
+            # Ensure the details element is open and scrolled into view
+            summary = details_with_label.locator("summary")
+            summary.scroll_into_view_if_needed()
+            summary.click()
+
+            # Find the checkbox input
+            checkbox_input = (
+                details_with_label.locator(
+                    f"input[type='checkbox'] + label:has-text('{name}')"
+                )
+                .locator("..")
+                .locator("input[type='checkbox']")
+            )
+
+            # Scroll the checkbox into view and click
+            checkbox_input.scroll_into_view_if_needed()
+            checkbox_input.click()
 
         def _test_search(checkbox_name, expected_text):
             page.goto(self.live_reverse("search:search", params={"query": "summary"}))

src/open_inwoner/templates/pages/search.html

@@ -1,5 +1,5 @@
 {% extends 'master.html' %}
-{% load i18n form_tags utils icon_tags grid_tags pagination_tags button_tags %}
+{% load i18n form_tags utils icon_tags grid_tags pagination_tags button_tags filter_tags %}
 
 {% block main_inner %}
     {#  search term section #}
@@ -13,20 +13,10 @@ <h1 class="utrecht-heading-1">{% trans "Zoekresultaten voor " %} "{% firstof sea
     {#  facets and results section #}
     <div class="grid">
     {% if paginator.count %}
+        {#  start search filters #}
         {% if search_filter_categories or search_filter_tags or search_filter_organizations %}
             <aside class="grid__sidebar grid__filters" aria-label="{% trans "Zoekfilters" %}">
-                <div class='filter__reset'>
-                    {% button transparent=True type='button' inline=True text=_('Wis alle?') %}
-                </div>
-                {% if search_filter_categories and search_form.categories.field.choices|length != 0 %}
-                    {% include "components/Filter/Filter.html" with field=search_form.categories form_id="search-form" only %}
-                {% endif %}
-                {% if search_filter_tags and search_form.tags.field.choices|length != 0  %}
-                    {% include "components/Filter/Filter.html" with field=search_form.tags form_id="search-form" only %}
-                {% endif %}
-                {% if search_filter_organizations and search_form.organizations.field.choices|length != 0 %}
-                    {% include "components/Filter/Filter.html" with field=search_form.organizations form_id="search-form" only %}
-                {% endif %}
+                {% search_filters search_form search_filter_categories search_filter_tags search_filter_organizations form_id="search-form"  %}
             </aside>
         {% endif %}
         {#  end search filters #}