From 6db5ef2b82b1a8a506695951d182e330338a80ce Mon Sep 17 00:00:00 2001
From: Ihor Yeromin <yeryomin.igor@gmail.com>
Date: Tue, 22 Aug 2023 18:59:36 +0200
Subject: [PATCH] A11y: Fix exemplar marker accessibility (#73493)

* fix(a11y): exemplar marker
---
 .../panel/timeseries/plugins/ExemplarMarker.tsx | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/public/app/plugins/panel/timeseries/plugins/ExemplarMarker.tsx b/public/app/plugins/panel/timeseries/plugins/ExemplarMarker.tsx
index 80df6125ebe..9646e08a527 100644
--- a/public/app/plugins/panel/timeseries/plugins/ExemplarMarker.tsx
+++ b/public/app/plugins/panel/timeseries/plugins/ExemplarMarker.tsx
@@ -202,20 +202,27 @@ export const ExemplarMarker = ({
     .getSeries()
     .find((s) => s.props.dataFrameFieldIndex?.frameIndex === dataFrameFieldIndex.frameIndex)?.props.lineColor;
 
+  const onExemplarClick = () => {
+    setClickedExemplarFieldIndex(dataFrameFieldIndex);
+    lockExemplarModal();
+  };
+
   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={() => {
-          setClickedExemplarFieldIndex(dataFrameFieldIndex);
-          lockExemplarModal();
+        onClick={onExemplarClick}
+        onKeyDown={(e: React.KeyboardEvent) => {
+          if (e.key === 'Enter') {
+            onExemplarClick();
+          }
         }}
         onMouseEnter={onMouseEnter}
         onMouseLeave={onMouseLeave}
         className={styles.markerWrapper}
         aria-label={selectors.components.DataSource.Prometheus.exemplarMarker}
+        role="button"
+        tabIndex={0}
       >
         <svg
           viewBox="0 0 7 7"