Fix accessibility issues in traces query editor (#71045)

* Fix accessibility issues

- Ensure key events exist and role is appropriately set
- Ensure that when the filter field is cleared the query is updated

* Review

public/app/plugins/datasource/azuremonitor/components/TracesQueryEditor/Filter.tsx

@@ -155,8 +155,6 @@ const Option = (props: React.PropsWithChildren<OptionProps>) => {
   };
 
   return (
-    // TODO: fix keyboard a11y
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
     <div
       ref={innerRef}
       className={cx(
@@ -169,6 +167,10 @@ const Option = (props: React.PropsWithChildren<OptionProps>) => {
       aria-label="Select option"
       title={data.title}
       onClick={onClickMultiOption}
+      onKeyDown={onClickMultiOption}
+      role="checkbox"
+      aria-checked={isSelected}
+      tabIndex={0}
     >
       <div className={styles.optionBody}>
         <Checkbox value={isSelected} label={data.label ? `${data.label} - (${data.count})` : ''} />
@@ -263,7 +265,12 @@ const Filter = (
         loadOptions={loadOptions}
         isLoading={loading}
         onOpenMenu={loadOptions}
-        onChange={(e: Array<SelectableValue<string>>) => setSelected(e)}
+        onChange={(e: Array<SelectableValue<string>>) => {
+          setSelected(e);
+          if (e.length === 0) {
+            onFieldChange('filters', item, selected, onChange);
+          }
+        }}
         width={35}
         defaultOptions={values}
         isClearable