Event filter: replace reset button with per-select clear icons

contao/templates/frontend/event_filter.html.twig

@@ -8,6 +8,7 @@
                     <option value="tag-{{ tag.id }}">{{ tag.title }} ({{ tag.count }})</option>
                 {% endfor %}
             </select>
+            <button type="button" class="eventfilter-clear" data-eventfilter-clear="tag" aria-label="Kategorie-Filter zurücksetzen" hidden><span class="icon-cross"></span></button>
         </div>
 
         <div class="widget-select places">
@@ -18,6 +19,7 @@
                     <option value="location-{{ location.id }}">{{ location.title }} ({{ location.count }})</option>
                 {% endfor %}
             </select>
+            <button type="button" class="eventfilter-clear" data-eventfilter-clear="location" aria-label="Ort-Filter zurücksetzen" hidden><span class="icon-cross"></span></button>
         </div>
 
         <div class="widget-select org">
@@ -28,11 +30,10 @@
                     <option value="org-{{ organization.id }}">{{ organization.title }} ({{ organization.count }})</option>
                 {% endfor %}
             </select>
+            <button type="button" class="eventfilter-clear" data-eventfilter-clear="org" aria-label="Veranstalter-Filter zurücksetzen" hidden><span class="icon-cross"></span></button>
         </div>
     </div>
 
-    <button type="button" id="eventfilter-reset" class="eventfilter-reset" aria-label="Alle Filter zurücksetzen" aria-controls="{{ targetEventListId|default('eventlist')|e('html_attr') }}" hidden>Filter zurücksetzen</button>
-
     <p id="eventfilter-status" class="visually-hidden" aria-live="polite"></p>
 </div>
 
@@ -78,7 +79,27 @@
         outline-offset: 3px;
     }
 
-    #eventfilters .eventfilter-reset[hidden] {
+    #eventfilters .widget-select {
+        position: relative;
+    }
+
+    #eventfilters .eventfilter-clear {
+        position: absolute;
+        top: 50%;
+        right: .5rem;
+        transform: translateY(-50%);
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        border: 0;
+        background: transparent;
+        color: inherit;
+        cursor: pointer;
+        padding: .125rem;
+        line-height: 1;
+    }
+
+    #eventfilters .eventfilter-clear[hidden] {
         display: none;
     }
 
@@ -107,7 +128,9 @@
     const tagWidget = tagSelect?.closest('.widget-select');
     const locationWidget = locationSelect?.closest('.widget-select');
     const orgWidget = orgSelect?.closest('.widget-select');
-    const resetButton = filters.querySelector('#eventfilter-reset');
+    const clearTagButton = filters.querySelector('[data-eventfilter-clear="tag"]');
+    const clearLocationButton = filters.querySelector('[data-eventfilter-clear="location"]');
+    const clearOrgButton = filters.querySelector('[data-eventfilter-clear="org"]');
     const status = filters.querySelector('#eventfilter-status');
     const stateStorageKey = 'event-filter-state';
     const stateQueryKey = 'event_filter';
@@ -279,9 +302,25 @@
         locationWidget?.classList.toggle('active', hasActiveLocation);
         orgWidget?.classList.toggle('active', hasActiveOrg);
 
-        if (resetButton) {
-            resetButton.hidden = !(hasActiveTag || hasActiveLocation || hasActiveOrg);
+        if (clearTagButton) {
+            clearTagButton.hidden = !hasActiveTag;
         }
+
+        if (clearLocationButton) {
+            clearLocationButton.hidden = !hasActiveLocation;
+        }
+
+        if (clearOrgButton) {
+            clearOrgButton.hidden = !hasActiveOrg;
+        }
+    };
+
+    const resetAllFilters = () => {
+        setSelectValue(tagSelect, '');
+        setSelectValue(locationSelect, '');
+        setSelectValue(orgSelect, '');
+
+        applyFilter({ type: 'all', value: '' });
     };
 
     const parseIdList = (rawValue) => (rawValue ?? '')
@@ -402,13 +441,9 @@
         );
     });
 
-    resetButton?.addEventListener('click', () => {
-        setSelectValue(tagSelect, '');
-        setSelectValue(locationSelect, '');
-        setSelectValue(orgSelect, '');
-
-        applyFilter({ type: 'all', value: '' });
-    });
+    clearTagButton?.addEventListener('click', resetAllFilters);
+    clearLocationButton?.addEventListener('click', resetAllFilters);
+    clearOrgButton?.addEventListener('click', resetAllFilters);
 
     const urlState = readUrlState();
     const storedState = readStoredState();