[#2741] Fixing reset-button behaviour and cleanup

src/open_inwoner/components/templates/components/Button/Button.html

@@ -39,10 +39,10 @@
         {% if text_icon %}
             <span class="button__text-wrapper">
             {% icon icon=text_icon outlined=icon_outlined %}
-            {% if not hide_text %}{{ text }}{% endif %}
+            {% if not hide_text %}<span class="button__inner-text">{{ text }}</span>{% endif %}
             </span>
         {% else %}
-            {% if not hide_text %}{{ text }}{% endif %}
+            {% if not hide_text %}<span class="button__inner-text">{{ text }}</span>{% endif %}
         {% endif %}
     </button>
 {% endif %}

src/open_inwoner/components/templates/components/FilterBar/FilterBar.html

@@ -12,11 +12,11 @@
             </div>
         </div>
         <div class="filter-bar__mobile-button">
-            <p class="utrecht-paragraph">Filters</p>
+            <p class="utrecht-paragraph filter-bar__heading">Filters</p>
             {% button icon="filter_alt" text=_("Filters") icon_outlined=True transparent=True extra_classes="show-modal" %}
-            <span class="filter-bar__status-text">Status</span>
+            <p class="utrecht-paragraph filter-bar__status-text">Status</p>
         </div>
-        <form class="form" method="{{ method }}"
+        <form class="form filter-bar__form" method="{{ method }}"
               {% if no_action %}action="" {% else %}action="{% firstof form_action request.path %}" {% endif %}
               {% if id %}id="{{ id }}" {% endif %}>
             {# Note: each element inside the form is a flex column #}
@@ -30,4 +30,4 @@
             </div>
         </form>
     </div>
-</div>
+</div>

src/open_inwoner/js/components/FilterBar/filterbar.js

@@ -19,8 +19,6 @@ export class FilterBar {
       return
     }
 
-    console.log('Initializing FilterBar for:', this.node)
-
     // Event listeners
     this.filterPopup.addEventListener(
       'click',
@@ -40,7 +38,6 @@ export class FilterBar {
 
   toggleOpenFilterPopup(event) {
     event.preventDefault()
-    console.log('Filter button is clicked...')
 
     // Add 'show' class to the backdrop to make it visible
     this.backdrop.classList.add('show')
@@ -51,17 +48,10 @@ export class FilterBar {
       const isExpanded =
         this.filterPopup.getAttribute('aria-expanded') === 'true'
       this.filterPopup.setAttribute('aria-expanded', !isExpanded)
-      console.log(
-        'Toggling filter-bar--mobile class:',
-        this.node.classList.contains('filter-bar--mobile')
-      )
     }, 5)
   }
 
   closeFilterPopupDirect(event) {
-    // Direct handler for close button click
-    console.log('Close button clicked...')
-
     // Remove 'show' class from the backdrop to hide it
     this.backdrop.classList.remove('show')
 
@@ -79,8 +69,6 @@ export class FilterBar {
         !this.filterPopup.contains(event.target) &&
         !this.backdrop.contains(event.target))
     ) {
-      console.log('Closing filters...')
-
       // Remove 'show' class from the backdrop to hide it
       this.backdrop.classList.remove('show')
 
@@ -99,7 +87,6 @@ htmx.on('htmx:afterSwap', function (e) {
       console.error('No filter bars found on the page after swap.')
     } else {
       filterBars.forEach((filterbar) => new FilterBar(filterbar))
-      console.log('FilterBar instances reinitialized:', filterBars.length)
     }
   }
 })
@@ -111,6 +98,5 @@ document.addEventListener('DOMContentLoaded', () => {
     console.error('No filter bars found on the page.')
   } else {
     filterBars.forEach((filterbar) => new FilterBar(filterbar))
-    console.log('FilterBar instances created:', filterBars.length)
   }
 })

src/open_inwoner/js/components/FilterBar/multiselect_listbox_checkbox.js

@@ -26,9 +26,11 @@ function initFilterBar() {
       )
       let sum = 0
       let selectedFilters = []
+      let anyChecked = false
 
       checkboxes.forEach((checkbox) => {
         if (checkbox.checked) {
+          anyChecked = true // Mark that we have at least one checkbox checked
           const label = checkbox.nextElementSibling
           selectedFilters.push(label.textContent.trim())
           const frequencyCounter = label.querySelector('.frequency-counter')
@@ -52,6 +54,7 @@ function initFilterBar() {
       let closeIcon = document.createElement('span')
       closeIcon.classList.add('material-icons', 'close-icon')
       closeIcon.setAttribute('aria-hidden', 'true')
+      closeIcon.setAttribute('tabindex', '0') // Adding tabindex for keyboard focus
       closeIcon.textContent = 'close'
 
       // Add text and icons based on selected filters
@@ -76,8 +79,7 @@ function initFilterBar() {
         selectButton.classList.add('active')
       }
 
-      closeIcon.addEventListener('click', function (event) {
-        event.stopPropagation()
+      const handleClose = function () {
         checkboxes.forEach((checkbox) => {
           checkbox.checked = false
         })
@@ -86,6 +88,19 @@ function initFilterBar() {
         if (filterBarForm) {
           filterBarForm.submit()
         }
+      }
+
+      closeIcon.addEventListener('click', function (event) {
+        event.stopPropagation()
+        handleClose()
+      })
+
+      // Add accessibility functionality for close icon
+      closeIcon.addEventListener('keydown', function (event) {
+        if (event.key === 'Enter' || event.key === ' ') {
+          event.preventDefault()
+          handleClose()
+        }
       })
 
       selectButton.setAttribute('aria-live', 'polite')
@@ -100,6 +115,18 @@ function initFilterBar() {
       if (resultTextElement) {
         resultTextElement.textContent = sum === 1 ? 'resultaat' : 'resultaten'
       }
+
+      // Handle visibility of resetMultiSelectFilters
+      const resetMultiSelectFilters = document.getElementById(
+        'resetMultiSelectFilters'
+      )
+      if (resetMultiSelectFilters) {
+        if (anyChecked) {
+          resetMultiSelectFilters.classList.remove('hide') // Show the button
+        } else {
+          resetMultiSelectFilters.classList.add('hide') // Hide the button
+        }
+      }
     }
 
     const initSelectBehavior = function () {
@@ -189,7 +216,6 @@ function initFilterBar() {
     if (resetMultiSelectFilters) {
       resetMultiSelectFilters.addEventListener('click', function (e) {
         e.preventDefault()
-        console.log('Alleen de multi-select filters worden gereset')
 
         const checkboxes = document.querySelectorAll(
           '.filter-bar .checkbox__input'
@@ -210,7 +236,6 @@ function initFilterBar() {
     if (resetAllFilters) {
       resetAllFilters.addEventListener('click', function (e) {
         e.preventDefault()
-        console.log('alle filters worden gereset')
 
         const checkboxes = document.querySelectorAll(
           '.filter-bar .checkbox__input'
@@ -255,9 +280,6 @@ document.body.addEventListener('htmx:afterSwap', function () {
 
 document.addEventListener('click', function (e) {
   if (e.target && e.target.classList.contains('pagination__link')) {
-    scrollToTopOfWindow()
-    setTimeout(function () {
-      initFilterBar() // Reinitialize filter bar after swap
-    }, 20)
+    scrollToTopOfWindow() // Scroll up after clicking pagination
   }
 })

src/open_inwoner/scss/components/Button/Button.scss

@@ -203,6 +203,10 @@
     display: flex;
   }
 
+  &__inner-text {
+    font-family: var(--font-family-body);
+  }
+
   > .link__text {
     width: 100%;
   }

src/open_inwoner/scss/components/FilterBar/FilterBar.scss

@@ -2,10 +2,14 @@
   width: 100%;
   background-color: var(--color-gray-lightest);
   margin-bottom: var(--spacing-extra-large);
-  padding: var(--spacing-large) var(--spacing-tiny);
+  padding: 0;
   position: relative;
   display: inline-block;
 
+  @media (min-width: 768px) {
+    padding: var(--spacing-large);
+  }
+
   // Pop-ups for future multiple filters on-load may go here
   .multiselect-listbox__modal {
     display: none;
@@ -15,8 +19,13 @@
     }
   }
 
-  @media (min-width: 768px) {
-    padding: var(--spacing-large);
+  .form__actions {
+    &--reset {
+      .button:focus {
+        background-color: transparent;
+        text-decoration: underline;
+      }
+    }
   }
 
   .filter-bar__heading,
@@ -46,6 +55,18 @@
   }
 
   &__mobile-button {
+    .button.show-modal {
+      margin-top: 0;
+
+      & [class*='icons'] {
+        text-decoration: none;
+      }
+
+      .button__inner-text {
+        text-decoration: underline;
+      }
+    }
+
     @media (min-width: 768px) {
       display: none;
     }
@@ -63,16 +84,16 @@
   &--mobile {
     display: flex;
     flex-direction: column;
-    gap: var(--spacing-giant);
+    gap: var(--row-height);
     width: 100%;
+    box-sizing: border-box;
     background-color: var(--color-gray-lightest);
     border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
     margin: 0 var(--spacing-tiny);
-    padding: 0 var(--spacing-extra-large);
+    padding: var(--spacing-extra-large);
     height: 70vh;
     position: fixed;
     top: 30vh;
-    transition: top 2s linear;
     z-index: 1020;
 
     .multiselect-listbox__popup {
@@ -109,6 +130,7 @@
     }
 
     .filter-bar__heading {
+      color: var(--color-black);
       display: block;
       font-size: var(--font-size-body-larger);
       font-weight: bold;
@@ -118,6 +140,7 @@
     .filter-bar__status-text {
       color: var(--color-gray-dark);
       display: block;
+      margin-bottom: calc(-1 * (var(--row-height) - var(--spacing-large)));
     }
   }
 
@@ -134,6 +157,7 @@
     border-radius: var(--border-radius);
     justify-content: center;
     position: fixed;
+    width: 100%;
     z-index: 1000000;
 
     @media (min-width: 768px) {

src/open_inwoner/scss/components/FilterBar/MultiSelectListbox.scss

@@ -8,13 +8,19 @@
     width: 280px;
   }
 
+  .button,
+  .button:hover {
+    transition: none !important;
+    transform: none !important;
+  }
+
   &:has(.show) {
     .button__select {
       *[class*='icons'] {
         display: flex;
         position: absolute;
         right: var(--spacing-large);
-        top: 8px;
+        top: 11px;
         transform: rotate(180deg);
       }
     }
@@ -53,7 +59,6 @@
       display: inline-block;
       position: absolute;
       right: var(--spacing-large);
-      transition: all 0.3s;
     }
 
     &.active {
@@ -207,6 +212,11 @@
       .button--transparent {
         justify-content: flex-start;
         padding-left: 0;
+        display: inline-flex;
+
+        &.hide {
+          display: none;
+        }
 
         &:focus {
           background-color: transparent;
@@ -217,5 +227,9 @@
         display: none;
       }
     }
+
+    &--fullwidth {
+      max-width: 100%;
+    }
   }
 }

src/open_inwoner/templates/pages/cases/list_inner.html

@@ -9,7 +9,7 @@ <h1 class="utrecht-heading-1" id="cases">{{ page_title }} ({{ paginator.count }}
         <div class="filter-bar__mobile-controls">
             {% button icon="close" text=_("Sluiten") hide_text=True icon_outlined=True transparent=True extra_classes="show-controls" %}
             <div class="form__reset--mobile form__actions--fullwidth form__actions--reset">
-                <button class="button button--primary button--transparent" type="button" name="" value="" title="Wis alle filtersmobiel" aria-label="Wis alle filters" id="resetAllFilters">
+                <button class="button button--primary button--transparent" type="button" name="" value="" title="Wis alle filters" aria-label="Wis alle filters" id="resetAllFilters">
                     Wis alle filters
                 </button>
             </div>