From c684babecc2d759222fd10532e6e494858df3180 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Laura=20Fern=C3=A1ndez?=
 <65417731+eledobleefe@users.noreply.github.com>
Date: Thu, 8 Sep 2022 14:32:50 +0200
Subject: [PATCH] A11y: Make tooltip dismissible in Toolbar and Icon buttons
 (#54586)

---
 .../src/components/Tooltip/Tooltip.tsx        | 23 +++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/packages/grafana-ui/src/components/Tooltip/Tooltip.tsx b/packages/grafana-ui/src/components/Tooltip/Tooltip.tsx
index ac18752b75b..2ef3cd36933 100644
--- a/packages/grafana-ui/src/components/Tooltip/Tooltip.tsx
+++ b/packages/grafana-ui/src/components/Tooltip/Tooltip.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { usePopperTooltip } from 'react-popper-tooltip';
 
 import { colorManipulator, GrafanaTheme2 } from '@grafana/data';
@@ -22,14 +22,33 @@ export interface TooltipProps {
 }
 
 export const Tooltip = React.memo(({ children, theme, interactive, show, placement, content }: TooltipProps) => {
+  const [controlledVisible, setControlledVisible] = React.useState(show);
+
+  useEffect(() => {
+    if (controlledVisible !== false) {
+      const handleKeyDown = (enterKey: KeyboardEvent) => {
+        if (enterKey.key === 'Escape') {
+          setControlledVisible(false);
+        }
+      };
+      document.addEventListener('keydown', handleKeyDown);
+      return () => {
+        document.removeEventListener('keydown', handleKeyDown);
+      };
+    } else {
+      return;
+    }
+  }, [controlledVisible]);
+
   const { getArrowProps, getTooltipProps, setTooltipRef, setTriggerRef, visible, update } = usePopperTooltip({
-    visible: show,
+    visible: controlledVisible,
     placement: placement,
     interactive: interactive,
     delayHide: interactive ? 100 : 0,
     delayShow: 150,
     offset: [0, 8],
     trigger: ['hover', 'focus'],
+    onVisibleChange: setControlledVisible,
   });
 
   const styles = useStyles2(getStyles);