Wrap event filter tag buttons in dedicated container

contao/templates/frontend/event_filter.html.twig

@@ -1,12 +1,14 @@
 <div id="eventfilters" data-eventlist-id="{{ targetEventListId|default('eventlist')|e('html_attr') }}">
-    <button type="button" data-filter-tag="all" class="active">Alle</button>
+    <div class="tag-buttons">
+        <button type="button" data-filter-tag="all" class="active" aria-pressed="true">Alle</button>
 
-    {% for tag in tagButtons|default([]) %}
+        {% for tag in tagButtons|default([]) %}
-        <button type="button" data-filter-tag="{{ tag.id }}">{{ tag.title }} ({{ tag.count }})</button>
+            <button type="button" data-filter-tag="{{ tag.id }}" aria-pressed="false">{{ tag.title }} ({{ tag.count }})</button>
-    {% endfor %}
+        {% endfor %}
+    </div>
 
     <div class="widget-select places">
-        <label for="location-filter">Orte:</label>
+        <label for="location-filter" class="visually-hidden">Orte:</label>
         <select id="location-filter">
             <option value="all">Orte</option>
             {% for location in locations|default([]) %}
@@ -16,7 +18,7 @@
     </div>
 
     <div class="widget-select org">
-        <label for="org-filter">Veranstalter:</label>
+        <label for="org-filter" class="visually-hidden">Veranstalter:</label>
         <select id="org-filter">
             <option value="all">Veranstalter</option>
             {% for organization in organizations|default([]) %}
@@ -24,9 +26,23 @@
             {% endfor %}
         </select>
     </div>
+
+    <p id="eventfilter-status" class="visually-hidden" aria-live="polite"></p>
 </div>
 
 <style>
+    .visually-hidden {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border: 0;
+    }
+
     .event-filter-target-list {
         display: grid;
         grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
@@ -51,6 +67,12 @@
         outline: 2px solid currentColor;
         outline-offset: 2px;
     }
+
+    #eventfilters button:focus-visible,
+    #eventfilters select:focus-visible {
+        outline: 2px solid currentColor;
+        outline-offset: 2px;
+    }
 </style>
 
 <script type="module">
@@ -73,6 +95,7 @@
     const tagButtons = Array.from(filters.querySelectorAll('button[data-filter-tag]'));
     const locationSelect = filters.querySelector('#location-filter');
     const orgSelect = filters.querySelector('#org-filter');
+    const status = filters.querySelector('#eventfilter-status');
 
     const animationMs = 220;
     let hideTimers = new WeakMap();
@@ -110,7 +133,9 @@
 
     const setActiveControl = ({ type, value }) => {
         tagButtons.forEach((button) => {
-            button.classList.toggle('active', type === 'tag' && button.dataset.filterTag === value);
+            const isActive = type === 'tag' && button.dataset.filterTag === value;
+            button.classList.toggle('active', isActive);
+            button.setAttribute('aria-pressed', isActive ? 'true' : 'false');
         });
 
         if (locationSelect) {
@@ -147,6 +172,32 @@
         return true;
     };
 
+    const updateStatus = (filterState) => {
+        if (!status) {
+            return;
+        }
+
+        const visibleCount = events.filter((eventItem) => !eventItem.hidden).length;
+        let filterText = 'alle';
+
+        if (filterState.type === 'tag' && filterState.value !== 'all') {
+            const activeButton = tagButtons.find((button) => button.dataset.filterTag === filterState.value);
+            filterText = activeButton ? activeButton.textContent.trim() : `Tag ${filterState.value}`;
+        }
+
+        if (filterState.type === 'location' && locationSelect) {
+            const option = locationSelect.options[locationSelect.selectedIndex];
+            filterText = option ? option.textContent.trim() : 'Ort';
+        }
+
+        if (filterState.type === 'org' && orgSelect) {
+            const option = orgSelect.options[orgSelect.selectedIndex];
+            filterText = option ? option.textContent.trim() : 'Veranstalter';
+        }
+
+        status.textContent = `${visibleCount} Veranstaltungen angezeigt, Filter: ${filterText}.`;
+    };
+
     const applyFilter = (filterState) => {
         currentFilter = filterState;
         setActiveControl(filterState);
@@ -158,6 +209,8 @@
                 hideEvent(eventItem);
             }
         });
+
+        updateStatus(filterState);
     };
 
     tagButtons.forEach((button) => {