From 98bf9a6d2a5f7ca7b63b76334940d24324d1d781 Mon Sep 17 00:00:00 2001
From: Uchechukwu Obasi <obasiuche62@gmail.com>
Date: Wed, 22 Dec 2021 18:11:07 +0100
Subject: [PATCH] Tooltip: make widget accessible (#43468)

* add useToolTipTrigger react aria and state to grafana-ui

* show tooltip on focus and close tooltip when esc key is pressed

* remove react-aria/tooltip package

* fix failing test
---
 .../src/components/Tooltip/Tooltip.test.tsx   | 20 +++++++++----------
 .../src/components/Tooltip/Tooltip.tsx        | 16 +++++++++++++++
 .../__snapshots__/Tooltip.test.tsx.snap       | 12 -----------
 3 files changed, 25 insertions(+), 23 deletions(-)
 delete mode 100644 packages/grafana-ui/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap

diff --git a/packages/grafana-ui/src/components/Tooltip/Tooltip.test.tsx b/packages/grafana-ui/src/components/Tooltip/Tooltip.test.tsx
index 95d01c7f2fe..d318be466e6 100644
--- a/packages/grafana-ui/src/components/Tooltip/Tooltip.test.tsx
+++ b/packages/grafana-ui/src/components/Tooltip/Tooltip.test.tsx
@@ -1,18 +1,16 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
+import { render, screen } from '@testing-library/react';
 import { Tooltip } from './Tooltip';
 
 describe('Tooltip', () => {
   it('renders correctly', () => {
-    const tree = renderer
-      .create(
-        <Tooltip placement="auto" content="Tooltip text">
-          <a className="test-class" href="http://www.grafana.com">
-            Link with tooltip
-          </a>
-        </Tooltip>
-      )
-      .toJSON();
-    expect(tree).toMatchSnapshot();
+    render(
+      <Tooltip placement="auto" content="Tooltip text">
+        <a className="test-class" href="http://www.grafana.com">
+          Link with tooltip
+        </a>
+      </Tooltip>
+    );
+    expect(screen.getByText('Link with tooltip')).toBeInTheDocument();
   });
 });
diff --git a/packages/grafana-ui/src/components/Tooltip/Tooltip.tsx b/packages/grafana-ui/src/components/Tooltip/Tooltip.tsx
index 37a94d7767b..3b33660dc1e 100644
--- a/packages/grafana-ui/src/components/Tooltip/Tooltip.tsx
+++ b/packages/grafana-ui/src/components/Tooltip/Tooltip.tsx
@@ -16,6 +16,19 @@ export type PopoverContent = string | React.ReactElement<any> | ((props: Popover
 export const Tooltip: FC<TooltipProps> = React.memo(({ children, theme, ...controllerProps }: TooltipProps) => {
   const tooltipTriggerRef = createRef<HTMLElement | VirtualElement>();
   const popperBackgroundClassName = 'popper__background' + (theme ? ' popper__background--' + theme : '');
+  const closePopover = (event: React.KeyboardEvent<HTMLDivElement>, hidePopper: () => void) => {
+    if (event.key === 'Tab' || event.altKey || event.ctrlKey || event.metaKey) {
+      return;
+    }
+
+    event.stopPropagation();
+
+    if (event.key === 'Escape') {
+      hidePopper();
+    }
+
+    return;
+  };
 
   return (
     <PopoverController {...controllerProps}>
@@ -46,6 +59,9 @@ export const Tooltip: FC<TooltipProps> = React.memo(({ children, theme, ...contr
               ref: tooltipTriggerRef,
               onMouseEnter: showPopper,
               onMouseLeave: hidePopper,
+              onKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => closePopover(event, hidePopper),
+              onFocus: showPopper,
+              onBlur: hidePopper,
             })}
           </>
         );
diff --git a/packages/grafana-ui/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap b/packages/grafana-ui/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap
deleted file mode 100644
index 761221906d4..00000000000
--- a/packages/grafana-ui/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap
+++ /dev/null
@@ -1,12 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Tooltip renders correctly 1`] = `
-<a
-  className="test-class"
-  href="http://www.grafana.com"
-  onMouseEnter={[Function]}
-  onMouseLeave={[Function]}
->
-  Link with tooltip
-</a>
-`;