A11y: Fix exemplar marker accessibility (#73493)

* fix(a11y): exemplar marker

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={() => {
+        onClick={onExemplarClick}
-          setClickedExemplarFieldIndex(dataFrameFieldIndex);
+        onKeyDown={(e: React.KeyboardEvent) => {
-          lockExemplarModal();
+          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"