From 722cf0ab68189795998ef131c34ea7aef02f689c Mon Sep 17 00:00:00 2001
From: Andreas Christou <andreas.christou@grafana.com>
Date: Mon, 17 Jul 2023 14:24:43 +0100
Subject: [PATCH] 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
---
 .../components/TracesQueryEditor/Filter.tsx         | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/public/app/plugins/datasource/azuremonitor/components/TracesQueryEditor/Filter.tsx b/public/app/plugins/datasource/azuremonitor/components/TracesQueryEditor/Filter.tsx
index 73bb0613167..fb807206218 100644
--- a/public/app/plugins/datasource/azuremonitor/components/TracesQueryEditor/Filter.tsx
+++ b/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