From 7a2a5dde8b095e6e3ae0a6f16bdef5309fcf3403 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Fri, 30 Jun 2023 16:58:16 +0100
Subject: [PATCH] Chore: Enable remaining jsx-a11y rules (#70990)

enabling remaining a11y rules + ignore existing violations
---
 .eslintrc                                                   | 6 ++----
 .../grafana-ui/src/components/Select/SelectOptionGroup.tsx  | 2 ++
 packages/grafana-ui/src/components/Table/FilterPopup.tsx    | 2 +-
 packages/grafana-ui/src/components/Tooltip/Popover.tsx      | 2 ++
 public/app/core/components/Layers/LayerDragDropList.tsx     | 2 ++
 public/app/core/components/OptionsUI/color.tsx              | 4 ++++
 .../app/core/components/RolePicker/RoleMenuGroupOption.tsx  | 2 ++
 public/app/core/components/RolePicker/RoleMenuOption.tsx    | 2 ++
 public/app/core/components/RolePicker/RolePickerInput.tsx   | 2 ++
 .../rule-editor/notificaton-preview/NotificationRoute.tsx   | 2 ++
 public/app/features/canvas/runtime/ables.tsx                | 2 ++
 public/app/features/canvas/runtime/element.tsx              | 2 ++
 .../dashgrid/PanelHeader/PanelHeaderLoadingIndicator.tsx    | 4 ++++
 .../dashgrid/PanelHeader/PanelHeaderMenuTrigger.tsx         | 2 ++
 .../datasources/components/picker/DataSourceDropdown.tsx    | 2 ++
 public/app/features/dimensions/editors/ResourceCards.tsx    | 2 ++
 public/app/features/dimensions/editors/ResourcePicker.tsx   | 2 ++
 .../components/TracePageHeader/NewTracePageSearchBar.tsx    | 2 ++
 .../components/TraceTimelineViewer/SpanDetail/index.tsx     | 2 ++
 public/app/features/logs/components/LogRowMessage.tsx       | 4 ++++
 .../panel/components/VizTypePicker/PanelTypeCard.tsx        | 2 ++
 .../app/features/search/page/components/FolderSection.tsx   | 2 ++
 public/app/features/search/page/components/columns.tsx      | 4 ++++
 public/app/features/storage/Breadcrumb.tsx                  | 2 ++
 .../azuremonitor/components/TracesQueryEditor/Filter.tsx    | 2 ++
 .../prometheus/querybuilder/components/MetricSelect.tsx     | 2 ++
 .../app/plugins/panel/timeseries/plugins/ExemplarMarker.tsx | 2 ++
 public/app/plugins/panel/xychart/ManualEditor.tsx           | 2 ++
 28 files changed, 63 insertions(+), 5 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index 961434913e5..b3018967038 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -74,20 +74,18 @@
     },
     {
       "extends": ["plugin:jsx-a11y/recommended"],
-      "files": ["**/*"],
-      "excludedFiles": ["**/*.{spec,test}.{ts,tsx}"],
+      "files": ["**/*.tsx"],
+      "excludedFiles": ["**/*.{spec,test}.tsx"],
       "rules": {
         // rules marked "off" are those left in the recommended preset we need to fix
         // we should remove the corresponding line and fix them one by one
         // any marked "error" contain specific overrides we'll need to keep
-        "jsx-a11y/click-events-have-key-events": "off",
         "jsx-a11y/no-autofocus": [
           "error",
           {
             "ignoreNonDOM": true
           }
         ],
-        "jsx-a11y/no-static-element-interactions": "off",
         "jsx-a11y/label-has-associated-control": [
           "error",
           {
diff --git a/packages/grafana-ui/src/components/Select/SelectOptionGroup.tsx b/packages/grafana-ui/src/components/Select/SelectOptionGroup.tsx
index 5b91d3659c4..b5c787cc219 100644
--- a/packages/grafana-ui/src/components/Select/SelectOptionGroup.tsx
+++ b/packages/grafana-ui/src/components/Select/SelectOptionGroup.tsx
@@ -81,6 +81,8 @@ class UnthemedSelectOptionGroup extends PureComponent<ExtendedGroupProps, State>
 
     return (
       <div>
+        {/* TODO: fix keyboard a11y */}
+        {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
         <div className={styles.header} onClick={this.onToggleChildren}>
           <span className={styles.label}>{label}</span>
           <Icon className={styles.icon} name={expanded ? 'angle-up' : 'angle-down'} />{' '}
diff --git a/packages/grafana-ui/src/components/Table/FilterPopup.tsx b/packages/grafana-ui/src/components/Table/FilterPopup.tsx
index 0f8a5b40db3..a8cd51ced95 100644
--- a/packages/grafana-ui/src/components/Table/FilterPopup.tsx
+++ b/packages/grafana-ui/src/components/Table/FilterPopup.tsx
@@ -51,7 +51,7 @@ export const FilterPopup = ({ column: { preFilteredRows, filterValue, setFilter
   return (
     <ClickOutsideWrapper onClick={onCancel} useCapture={true}>
       {/* This is just blocking click events from bubbeling and should not have a keyboard interaction. */}
-      {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
+      {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}
       <div className={cx(styles.filterContainer)} onClick={stopPropagation}>
         <VerticalGroup spacing="lg">
           <VerticalGroup spacing="xs">
diff --git a/packages/grafana-ui/src/components/Tooltip/Popover.tsx b/packages/grafana-ui/src/components/Tooltip/Popover.tsx
index e0b2939eb87..fa9b3d3d643 100644
--- a/packages/grafana-ui/src/components/Tooltip/Popover.tsx
+++ b/packages/grafana-ui/src/components/Tooltip/Popover.tsx
@@ -66,6 +66,8 @@ class Popover extends PureComponent<Props> {
                 >
                   {({ ref, style, placement, arrowProps, update }) => {
                     return (
+                      // TODO: fix keyboard a11y
+                      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
                       <div
                         onMouseEnter={onMouseEnter}
                         onMouseLeave={onMouseLeave}
diff --git a/public/app/core/components/Layers/LayerDragDropList.tsx b/public/app/core/components/Layers/LayerDragDropList.tsx
index 7c07662bdb6..540faff97e8 100644
--- a/public/app/core/components/Layers/LayerDragDropList.tsx
+++ b/public/app/core/components/Layers/LayerDragDropList.tsx
@@ -61,6 +61,8 @@ export const LayerDragDropList = <T extends LayerElement>({
                 rows.push(
                   <Draggable key={uid} draggableId={uid} index={rows.length}>
                     {(provided, snapshot) => (
+                      // TODO: fix keyboard a11y
+                      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
                       <div
                         className={getRowStyle(isSelected)}
                         ref={provided.innerRef}
diff --git a/public/app/core/components/OptionsUI/color.tsx b/public/app/core/components/OptionsUI/color.tsx
index 5611fbae74c..c4c94b06a99 100644
--- a/public/app/core/components/OptionsUI/color.tsx
+++ b/public/app/core/components/OptionsUI/color.tsx
@@ -45,10 +45,14 @@ export const ColorValueEditor = ({ value, settings, onChange, details }: Props)
             {details && (
               <>
                 {value ? (
+                  // TODO: fix keyboard a11y
+                  // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
                   <span className={styles.colorText} onClick={showColorPicker}>
                     {value}
                   </span>
                 ) : (
+                  // TODO: fix keyboard a11y
+                  // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
                   <span className={styles.placeholderText} onClick={showColorPicker}>
                     {settings?.placeholder ?? 'Select color'}
                   </span>
diff --git a/public/app/core/components/RolePicker/RoleMenuGroupOption.tsx b/public/app/core/components/RolePicker/RoleMenuGroupOption.tsx
index e64647fac27..6a7a1fef7cd 100644
--- a/public/app/core/components/RolePicker/RoleMenuGroupOption.tsx
+++ b/public/app/core/components/RolePicker/RoleMenuGroupOption.tsx
@@ -81,6 +81,8 @@ export const RoleMenuGroupOption = memo(
 
       return (
         <div onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
+          {/* TODO: fix keyboard a11y */}
+          {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
           <div ref={ref} className={wrapperClassName} aria-label="Role picker option" onClick={onClickInternal}>
             <Checkbox
               value={isSelected}
diff --git a/public/app/core/components/RolePicker/RoleMenuOption.tsx b/public/app/core/components/RolePicker/RoleMenuOption.tsx
index 065a8544a95..0ee1c991c13 100644
--- a/public/app/core/components/RolePicker/RoleMenuOption.tsx
+++ b/public/app/core/components/RolePicker/RoleMenuOption.tsx
@@ -38,6 +38,8 @@ export const RoleMenuOption = React.forwardRef<HTMLDivElement, React.PropsWithCh
     };
 
     return (
+      // TODO: fix keyboard a11y
+      // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
       <div ref={ref} className={wrapperClassName} aria-label="Role picker option" onClick={onChangeInternal}>
         <Checkbox
           value={isSelected}
diff --git a/public/app/core/components/RolePicker/RolePickerInput.tsx b/public/app/core/components/RolePicker/RolePickerInput.tsx
index 118c3c9f964..c3e6a4e2089 100644
--- a/public/app/core/components/RolePicker/RolePickerInput.tsx
+++ b/public/app/core/components/RolePicker/RolePickerInput.tsx
@@ -52,6 +52,8 @@ export const RolePickerInput = ({
   const numberOfRoles = appliedRoles.length;
 
   return !isFocused ? (
+    // TODO: fix keyboard a11y
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     <div className={cx(styles.wrapper, styles.selectedRoles)} onMouseDown={onOpen}>
       {showBasicRole && <ValueContainer>{basicRole}</ValueContainer>}
       <RolesLabel appliedRoles={appliedRoles} numberOfRoles={numberOfRoles} showBuiltInRole={showBasicRole} />
diff --git a/public/app/features/alerting/unified/components/rule-editor/notificaton-preview/NotificationRoute.tsx b/public/app/features/alerting/unified/components/rule-editor/notificaton-preview/NotificationRoute.tsx
index de5ee4e12b2..1a7f9a13944 100644
--- a/public/app/features/alerting/unified/components/rule-editor/notificaton-preview/NotificationRoute.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/notificaton-preview/NotificationRoute.tsx
@@ -53,6 +53,8 @@ function NotificationRouteHeader({
       />
 
       <Stack flexGrow={1} gap={1}>
+        {/* TODO: fix keyboard a11y */}
+        {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
         <div onClick={() => onExpandRouteClick(!expandRoute)} className={styles.expandable}>
           <Stack gap={1} direction="row" alignItems="center">
             Notification policy
diff --git a/public/app/features/canvas/runtime/ables.tsx b/public/app/features/canvas/runtime/ables.tsx
index 41820406ae7..42504175971 100644
--- a/public/app/features/canvas/runtime/ables.tsx
+++ b/public/app/features/canvas/runtime/ables.tsx
@@ -16,6 +16,8 @@ export const settingsViewable = (scene: Scene) => ({
 
     const rect = moveable.getRect();
     return (
+      // TODO: fix keyboard a11y
+      // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
       <div
         key={'settings-viewable'}
         className={'moveable-settings'}
diff --git a/public/app/features/canvas/runtime/element.tsx b/public/app/features/canvas/runtime/element.tsx
index cb0cdea33ac..94f8b41cfcd 100644
--- a/public/app/features/canvas/runtime/element.tsx
+++ b/public/app/features/canvas/runtime/element.tsx
@@ -499,6 +499,8 @@ export class ElementState implements LayerElement {
     const isSelected = div && scene && scene.selecto && scene.selecto.getSelectedTargets().includes(div);
 
     return (
+      // TODO: fix keyboard a11y
+      // eslint-disable-next-line jsx-a11y/click-events-have-key-events
       <div
         key={this.UID}
         ref={this.initElement}
diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderLoadingIndicator.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderLoadingIndicator.tsx
index ff5cfded663..240549f3ccb 100644
--- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderLoadingIndicator.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderLoadingIndicator.tsx
@@ -14,6 +14,8 @@ export const PanelHeaderLoadingIndicator = ({ state, onClick }: Props) => {
 
   if (state === LoadingState.Loading) {
     return (
+      // TODO: fix keyboard a11y
+      // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
       <div className="panel-loading" onClick={onClick}>
         <Tooltip content="Cancel query">
           <Icon className="panel-loading__spinner spin-clockwise" name="sync" />
@@ -24,6 +26,8 @@ export const PanelHeaderLoadingIndicator = ({ state, onClick }: Props) => {
 
   if (state === LoadingState.Streaming) {
     return (
+      // TODO: fix keyboard a11y
+      // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
       <div className="panel-loading" onClick={onClick}>
         <div title="Streaming (click to stop)" className={styles.streamIndicator} />
       </div>
diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuTrigger.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuTrigger.tsx
index daf3666ef03..881d3f9f2a6 100644
--- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuTrigger.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuTrigger.tsx
@@ -35,6 +35,8 @@ export function PanelHeaderMenuTrigger({ children, onOpenMenu, ...divProps }: Pr
   }, []);
 
   return (
+    // TODO: fix keyboard a11y
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
     <header {...divProps} className="panel-title-container" onClick={onMenuToggle} onMouseDown={onMouseDown}>
       {children({ panelMenuOpen, closeMenu: () => setPanelMenuOpen(false) })}
     </header>
diff --git a/public/app/features/datasources/components/picker/DataSourceDropdown.tsx b/public/app/features/datasources/components/picker/DataSourceDropdown.tsx
index 95dec73300c..cef3c26eece 100644
--- a/public/app/features/datasources/components/picker/DataSourceDropdown.tsx
+++ b/public/app/features/datasources/components/picker/DataSourceDropdown.tsx
@@ -183,6 +183,8 @@ export function DataSourceDropdown(props: DataSourceDropdownProps) {
       {isOpen ? (
         <Portal>
           <div {...underlayProps} />
+          {/* TODO: fix keyboard a11y */}
+          {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
           <div
             ref={ref}
             {...overlayProps}
diff --git a/public/app/features/dimensions/editors/ResourceCards.tsx b/public/app/features/dimensions/editors/ResourceCards.tsx
index dcd32994cc7..cd264712c7f 100644
--- a/public/app/features/dimensions/editors/ResourceCards.tsx
+++ b/public/app/features/dimensions/editors/ResourceCards.tsx
@@ -32,6 +32,8 @@ const MemoizedCell = memo(function Cell(props: CellProps) {
   return (
     <div style={style}>
       {card && (
+        // TODO: fix keyboard a11y
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
         <div
           key={card.value}
           className={selected === card.value ? cx(styles.card, styles.selected) : styles.card}
diff --git a/public/app/features/dimensions/editors/ResourcePicker.tsx b/public/app/features/dimensions/editors/ResourcePicker.tsx
index e8cee91e027..7e00ad6f07f 100644
--- a/public/app/features/dimensions/editors/ResourcePicker.tsx
+++ b/public/app/features/dimensions/editors/ResourcePicker.tsx
@@ -96,6 +96,8 @@ export const ResourcePicker = (props: Props) => {
               />
             )}
 
+            {/* TODO: fix keyboard a11y */}
+            {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
             <div ref={pickerTriggerRef} onClick={showPopper} className={styles.pointer}>
               {size === ResourcePickerSize.SMALL && renderSmallResourcePicker()}
               {size === ResourcePickerSize.NORMAL && renderNormalResourcePicker()}
diff --git a/public/app/features/explore/TraceView/components/TracePageHeader/NewTracePageSearchBar.tsx b/public/app/features/explore/TraceView/components/TracePageHeader/NewTracePageSearchBar.tsx
index 52850771d19..886b22910f8 100644
--- a/public/app/features/explore/TraceView/components/TracePageHeader/NewTracePageSearchBar.tsx
+++ b/public/app/features/explore/TraceView/components/TracePageHeader/NewTracePageSearchBar.tsx
@@ -147,6 +147,8 @@ export default memo(function NewTracePageSearchBar(props: TracePageSearchBarProp
                 onChange={(value) => setShowSpanFilterMatchesOnly(value.currentTarget.checked ?? false)}
                 label="Show matches only switch"
               />
+              {/* TODO: fix keyboard a11y */}
+              {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
               <span onClick={() => setShowSpanFilterMatchesOnly(!showSpanFilterMatchesOnly)}>Show matches only</span>
             </div>
           </div>
diff --git a/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/index.tsx b/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/index.tsx
index ae0be3b79ed..27c6686f242 100644
--- a/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/index.tsx
+++ b/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/index.tsx
@@ -383,6 +383,8 @@ export default function SpanDetail(props: SpanDetailProps) {
         )}
         {topOfViewRefType === TopOfViewRefType.Explore && (
           <small className={styles.debugInfo}>
+            {/* TODO: fix keyboard a11y */}
+            {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
             <a
               {...focusSpanLink}
               onClick={(e) => {
diff --git a/public/app/features/logs/components/LogRowMessage.tsx b/public/app/features/logs/components/LogRowMessage.tsx
index 411800609dd..95bbe28d380 100644
--- a/public/app/features/logs/components/LogRowMessage.tsx
+++ b/public/app/features/logs/components/LogRowMessage.tsx
@@ -115,6 +115,8 @@ export class LogRowMessage extends PureComponent<Props> {
         </td>
         <td className={cx('log-row-menu-cell', styles.logRowMenuCell)}>
           {pinned && (
+            // TODO: fix keyboard a11y
+            // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
             <span className={cx('log-row-menu', 'log-row-menu-visible', styles.rowMenu)} onClick={this.onLogRowClick}>
               <IconButton
                 className={styles.unPinButton}
@@ -127,6 +129,8 @@ export class LogRowMessage extends PureComponent<Props> {
               />
             </span>
           )}
+          {/* TODO: fix keyboard a11y */}
+          {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
           <span className={cx('log-row-menu', styles.rowMenu, styles.hidden)} onClick={this.onLogRowClick}>
             {shouldShowContextToggle && (
               <IconButton
diff --git a/public/app/features/panel/components/VizTypePicker/PanelTypeCard.tsx b/public/app/features/panel/components/VizTypePicker/PanelTypeCard.tsx
index 0a93a70c8ce..4a586ded9c5 100644
--- a/public/app/features/panel/components/VizTypePicker/PanelTypeCard.tsx
+++ b/public/app/features/panel/components/VizTypePicker/PanelTypeCard.tsx
@@ -37,6 +37,8 @@ export const PanelTypeCard = ({
   });
 
   return (
+    // TODO: fix keyboard a11y
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events
     <div
       className={cssClass}
       aria-label={selectors.components.PluginVisualization.item(plugin.name)}
diff --git a/public/app/features/search/page/components/FolderSection.tsx b/public/app/features/search/page/components/FolderSection.tsx
index 4028ac70fc9..55dbf0aaa8b 100644
--- a/public/app/features/search/page/components/FolderSection.tsx
+++ b/public/app/features/search/page/components/FolderSection.tsx
@@ -146,6 +146,8 @@ export const FolderSection = ({
       label={
         <>
           {selectionToggle && selection && (
+            // TODO: fix keyboard a11y
+            // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
             <div onClick={onToggleFolder}>
               <Checkbox
                 className={styles.checkbox}
diff --git a/public/app/features/search/page/components/columns.tsx b/public/app/features/search/page/components/columns.tsx
index cdd45f9e0f6..b74dc500cba 100644
--- a/public/app/features/search/page/components/columns.tsx
+++ b/public/app/features/search/page/components/columns.tsx
@@ -246,6 +246,8 @@ export const generateColumns = (
       Header: () => <div className={styles.sortedHeader}>Score</div>,
       Cell: (p) => {
         return (
+          // TODO: fix keyboard a11y
+          // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
           <div
             {...p.cellProps}
             className={cx(styles.cell, styles.explainItem)}
@@ -298,6 +300,8 @@ function makeDataSourceColumn(
             const icon = settings?.meta?.info?.logos?.small;
             if (icon) {
               return (
+                // TODO: fix keyboard a11y
+                // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
                 <span
                   key={i}
                   onClick={(e) => {
diff --git a/public/app/features/storage/Breadcrumb.tsx b/public/app/features/storage/Breadcrumb.tsx
index 4ea7f9c3218..e3ff0a84809 100644
--- a/public/app/features/storage/Breadcrumb.tsx
+++ b/public/app/features/storage/Breadcrumb.tsx
@@ -27,6 +27,8 @@ export function Breadcrumb({ pathName, onPathChange, rootIcon }: Props) {
         const onClickBreadcrumb = () => onPathChange(url);
         const isLastBreadcrumb = index === paths.length - 1;
         return (
+          // TODO: fix keyboard a11y
+          // eslint-disable-next-line jsx-a11y/click-events-have-key-events
           <li key={uniqueId(path)} onClick={isLastBreadcrumb ? undefined : onClickBreadcrumb}>
             {path}
           </li>
diff --git a/public/app/plugins/datasource/azuremonitor/components/TracesQueryEditor/Filter.tsx b/public/app/plugins/datasource/azuremonitor/components/TracesQueryEditor/Filter.tsx
index 7ec0f9f428b..73bb0613167 100644
--- a/public/app/plugins/datasource/azuremonitor/components/TracesQueryEditor/Filter.tsx
+++ b/public/app/plugins/datasource/azuremonitor/components/TracesQueryEditor/Filter.tsx
@@ -155,6 +155,8 @@ 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(
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/components/MetricSelect.tsx b/public/app/plugins/datasource/prometheus/querybuilder/components/MetricSelect.tsx
index b701c81342b..38010e21fdf 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/components/MetricSelect.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/components/MetricSelect.tsx
@@ -163,6 +163,8 @@ export function MetricSelect({
       const isFocused = props.isFocused ? styles.focus : '';
 
       return (
+        // TODO: fix keyboard a11y
+        // eslint-disable-next-line jsx-a11y/no-static-element-interactions
         <div
           {...props.innerProps}
           ref={props.innerRef}
diff --git a/public/app/plugins/panel/timeseries/plugins/ExemplarMarker.tsx b/public/app/plugins/panel/timeseries/plugins/ExemplarMarker.tsx
index ba1d5c723af..80826e0d7e4 100644
--- a/public/app/plugins/panel/timeseries/plugins/ExemplarMarker.tsx
+++ b/public/app/plugins/panel/timeseries/plugins/ExemplarMarker.tsx
@@ -204,6 +204,8 @@ export const ExemplarMarker = ({
 
   return (
     <>
+      {/* TODO: fix keyboard a11y */}
+      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
       <div
         ref={setMarkerElement}
         onClick={() => {
diff --git a/public/app/plugins/panel/xychart/ManualEditor.tsx b/public/app/plugins/panel/xychart/ManualEditor.tsx
index 93c772b5625..de00a9acbbb 100644
--- a/public/app/plugins/panel/xychart/ManualEditor.tsx
+++ b/public/app/plugins/panel/xychart/ManualEditor.tsx
@@ -66,6 +66,8 @@ export const ManualEditor = ({
       <div className={style.marginBot}>
         {value.map((series, index) => {
           return (
+            // TODO: fix keyboard a11y
+            // eslint-disable-next-line jsx-a11y/no-static-element-interactions
             <div key={`series/${index}`} className={getRowStyle(index)} onMouseDown={() => setSelected(index)}>
               <LayerName
                 name={series.name ?? `Series ${index + 1}`}