Merge pull request #1592 from maykinmedia/bug/3001-clickable-status-b…

…utton 🐛 [#3001] Fix clickable case status-button
maykinmedia · Feb 4, 2025 · 3cc5604 · 3cc5604
2 parents 6455e92 + 9f053c1
commit 3cc5604
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 16 deletions.
diff --git a/src/open_inwoner/js/components/FilterBar/multiselect_listbox_checkbox.js b/src/open_inwoner/js/components/FilterBar/multiselect_listbox_checkbox.js
@@ -51,11 +51,15 @@ function initFilterBar() {
       expandIcon.setAttribute('aria-hidden', 'true')
       expandIcon.textContent = 'expand_more'
 
+      let closeIconWrapper = document.createElement('span')
+      closeIconWrapper.classList.add('close-icon') // Wrapper only, will get pointer-events
+      closeIconWrapper.setAttribute('tabindex', '0') // Adding tabindex for keyboard focus
+
       let closeIcon = document.createElement('span')
-      closeIcon.classList.add('material-icons', 'close-icon')
-      closeIcon.setAttribute('aria-hidden', 'false') // Hiding element that gets focus is not allowed in accessibility
-      closeIcon.setAttribute('tabindex', '0') // Adding tabindex for keyboard focus
+      closeIcon.classList.add('material-icons')
       closeIcon.textContent = 'close'
+      closeIcon.setAttribute('aria-hidden', 'true') // Hiding iconfont for accessibility
+      closeIconWrapper.appendChild(closeIcon) // Add icon to wrapper for pointer-events
 
       // Add text and icons based on selected filters
       if (selectedFilters.length === 0) {
@@ -67,15 +71,15 @@ function initFilterBar() {
         ellipsisSpan.classList.add('ellipsis')
         ellipsisSpan.textContent = selectedFilters[0]
         selectButton.appendChild(ellipsisSpan)
-        selectButton.appendChild(closeIcon)
+        selectButton.appendChild(closeIconWrapper) // Append wrapper
         selectButton.classList.add('active')
       } else {
         selectButton.textContent = 'Status '
         const activeFilterSpan = document.createElement('span')
         activeFilterSpan.classList.add('active-filters')
         activeFilterSpan.textContent = `${selectedFilters.length} actieve filters`
         selectButton.appendChild(activeFilterSpan)
-        selectButton.appendChild(closeIcon)
+        selectButton.appendChild(closeIconWrapper) // Append wrapper
         selectButton.classList.add('active')
       }
 
@@ -90,13 +94,14 @@ function initFilterBar() {
         }
       }
 
-      closeIcon.addEventListener('click', function (event) {
+      closeIconWrapper.addEventListener('click', function (event) {
+        // Listen on wrapper
         event.stopPropagation()
         handleClose()
       })
 
-      // Add accessibility functionality for close icon
-      closeIcon.addEventListener('keydown', function (event) {
+      // Add accessibility functionality for close icon-wrapper
+      closeIconWrapper.addEventListener('keydown', function (event) {
         if (event.key === 'Enter' || event.key === ' ') {
           event.preventDefault()
           handleClose()

diff --git a/src/open_inwoner/scss/components/FilterBar/MultiSelectListbox.scss b/src/open_inwoner/scss/components/FilterBar/MultiSelectListbox.scss
@@ -17,11 +17,7 @@
   &:has(.show) {
     .button__select {
       *[class*='icons'] {
-        display: flex;
-        position: absolute;
-        right: var(--spacing-large);
-        top: 11px;
-        transform: rotate(180deg);
+        pointer-events: none;
       }
     }
 
@@ -69,8 +65,6 @@
 
       *[class*='icons'] {
         color: var(--color-white);
-        position: absolute;
-        right: 12px;
       }
 
       .ellipsis {
@@ -90,6 +84,21 @@
     }
   }
 
+  #selectButton .close-icon {
+    border-radius: var(--border-radius);
+    display: flex;
+    height: var(--spacing-large);
+    width: var(--spacing-large);
+    position: absolute;
+    right: var(--spacing-large);
+    top: 11px;
+
+    &:focus,
+    &:focus-visible {
+      border: var(--border-width-thin) solid var(--color-secondary-lighter);
+    }
+  }
+
   .multiselect-listbox__content {
     position: static;
     opacity: 1;

diff --git a/src/open_inwoner/scss/components/Status/_StatusList.scss b/src/open_inwoner/scss/components/Status/_StatusList.scss
@@ -38,7 +38,6 @@
       font-weight: normal;
       justify-content: space-between;
       padding: 0;
-      pointer-events: none;
       margin: 0;
       width: 100%;
     }