Improve Tom Select usability and accessibility defaults

contao/templates/frontend/event_filter.html.twig

@@ -31,7 +31,7 @@
         </div>
     </div>
 
-    <button type="button" id="eventfilter-reset" class="eventfilter-reset" hidden>Filter zurücksetzen</button>
+    <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>
@@ -69,13 +69,13 @@
     }
 
     #eventfilters .widget-select.active .ts-control {
-        outline: 2px solid currentColor;
-        outline-offset: 2px;
+        outline: 3px solid currentColor;
+        outline-offset: 3px;
     }
 
     #eventfilters .ts-control:focus-within {
-        outline: 2px solid currentColor;
-        outline-offset: 2px;
+        outline: 3px solid currentColor;
+        outline-offset: 3px;
     }
 
     #eventfilters .eventfilter-reset[hidden] {
@@ -91,9 +91,7 @@
     }
 
     #eventfilters .ts-wrapper.single .ts-control > input {
-        width: auto !important;
-        min-width: 0 !important;
-        flex: 0 0 auto;
+        width: auto;
     }
 
 </style>
@@ -138,11 +136,19 @@
         }
 
         return new window.TomSelect(selectElement, {
-            create: true,
+            create: false,
             sortField: {
                 field: 'text',
                 direction: 'asc',
             },
+            render: {
+                no_results() {
+                    return '<div class="no-results" role="option" aria-disabled="true">Keine Ergebnisse gefunden</div>';
+                },
+                no_more_results() {
+                    return '<div class="no-more-results" role="option" aria-disabled="true">Keine weiteren Ergebnisse</div>';
+                },
+            },
         });
     };