Add a proper label to the filter input

Author: pimterry

src/components/view/filters/filter-input.tsx

@@ -116,6 +116,7 @@ const areSuggestionsVisible = (autosuggestRef: React.RefObject<Autosuggest>) =>
 
 export const FilterInput = <T extends unknown>(props: {
     value: string,
+    label: string,
     placeholder: string,
     searchInputRef?: React.Ref<HTMLInputElement>,
     onChange: (event: React.ChangeEvent<HTMLInputElement>) => void,
@@ -245,6 +246,7 @@ export const FilterInput = <T extends unknown>(props: {
         value: props.value,
         onChange: onInputChange,
         placeholder: props.placeholder,
+        'aria-label': props.label,
         ref: props.searchInputRef
     }), [props.value, onInputChange, props.placeholder, props.searchInputRef]);
 

src/components/view/filters/search-filter.tsx

@@ -576,6 +576,7 @@ export class SearchFilter<T> extends React.Component<{
             <FilterInput
                 value={textInputValue}
                 onChange={onInputChanged}
+                label="Enter a string like 'hello' or a structured filter like hostname=google.com to filter the requests in the list"
                 placeholder={otherFilters.length === 0
                     ? placeholder
                     : '...'