add button to clear search

src/View/Modals/searchModal.tsx

@@ -28,9 +28,9 @@ export function SearchModal<T>(
             <div>
                 <main>
                     <h2>{headline}</h2>
-                    <div class="flex-row width-input">
+                    <div class="flex-row">
                         <input
-                            id="focused"
+			    id="focused"
                             placeholder={
                                 coreViewModel.translations.general.searchLabel
                             }
@@ -46,6 +46,17 @@ export function SearchModal<T>(
                                 StringToOption,
                             ]}
                         ></datalist>
+                        <button
+                            class="standard"
+                            aria-label={
+                                coreViewModel.translations.general
+                                    .searchButtonClearAudioLabel
+                            }
+                            on:click={searchViewModel.clear}
+                            toggle:disabled={searchViewModel.cannotClear}
+                        >
+                            <span class="icon">close</span>
+                        </button>
                         <button
                             class="primary"
                             aria-label={

src/View/translations.ts

@@ -6,6 +6,7 @@ const englishTranslations = {
     general: {
         deleteItemButtonAudioLabel: "delete item",
         searchButtonAudioLabel: "search",
+        searchButtonClearAudioLabel: "clear search query",
 
         abortButton: "Abort",
         cancelButton: "Cancel",

src/ViewModel/Utility/searchViewModel.ts

@@ -18,6 +18,10 @@ export default class SearchViewModel<T> {
         [this.searchInput, this.appliedQuery],
         () => this.searchInput.value == this.appliedQuery.value,
     );
+    cannotClear: React.State<boolean> = React.createProxyState(
+        [this.searchInput],
+        () => this.searchInput.value == "",
+    );
 
     // methods
     search = (searchTerm: string): void => {
@@ -37,6 +41,10 @@ export default class SearchViewModel<T> {
         }
     };
 
+    clear = (): void => {
+	this.searchInput.value = "";
+    }
+
     // init
     constructor(
         allObjects: React.ListState<T> | React.MapState<T>,