Make tooltips keyboard accessible (#7281)

* show tooltips on hover in eventtile

Signed-off-by: Kerry Archibald <kerrya@element.io>

* use tooltip props pass thru

* use tooltiptarget in InfoTooltip

Signed-off-by: Kerry Archibald <kerrya@element.io>

* use target in TestWithTooltip

Signed-off-by: Kerry Archibald <kerrya@element.io>

* tsc fixes

Signed-off-by: Kerry Archibald <kerrya@element.io>

* test tooltip target

Signed-off-by: Kerry Archibald <kerrya@element.io>

* lint fix

Signed-off-by: Kerry Archibald <kerrya@element.io>

* rename tooltip handlers

Signed-off-by: Kerry Archibald <kerrya@element.io>

* update copyright to 2021

Signed-off-by: Kerry Archibald <kerrya@element.io>

test/components/views/elements/TooltipTarget-test.tsx

@@ -0,0 +1,90 @@
+// skinned-sdk should be the first import in most tests
+import '../../../skinned-sdk';
+import React from "react";
+import {
+    renderIntoDocument,
+    Simulate,
+} from 'react-dom/test-utils';
+import { act } from "react-dom/test-utils";
+
+import { Alignment } from '../../../../src/components/views/elements/Tooltip';
+import { TooltipTarget } from "../../../../src/components/views/elements/TooltipTarget";
+
+describe('<TooltipTarget />', () => {
+    const defaultProps = {
+        "tooltipTargetClassName": 'test tooltipTargetClassName',
+        "className": 'test className',
+        "tooltipClassName": 'test tooltipClassName',
+        "label": 'test label',
+        "yOffset": 1,
+        "alignment": Alignment.Left,
+        "id": 'test id',
+        'data-test-id': 'test',
+    };
+
+    const getComponent = (props = {}) => {
+        const wrapper = renderIntoDocument<HTMLSpanElement>(
+        // wrap in element so renderIntoDocument can render functional component
+            <span>
+                <TooltipTarget {...defaultProps} {...props}>
+                    <span>child</span>
+                </TooltipTarget>
+            </span>,
+        ) as HTMLSpanElement;
+        return wrapper.querySelector('[data-test-id=test]');
+    };
+
+    const getVisibleTooltip = () => document.querySelector('.mx_Tooltip.mx_Tooltip_visible');
+
+    afterEach(() => {
+        // clean up visible tooltips
+        const tooltipWrapper = document.querySelector('.mx_Tooltip_wrapper');
+        document.body.removeChild(tooltipWrapper);
+    });
+
+    it('renders container', () => {
+        const component = getComponent();
+        expect(component).toMatchSnapshot();
+        expect(getVisibleTooltip()).toBeFalsy();
+    });
+
+    it('displays tooltip on mouseover', () => {
+        const wrapper = getComponent();
+        act(() => {
+            Simulate.mouseOver(wrapper);
+        });
+        expect(getVisibleTooltip()).toMatchSnapshot();
+    });
+
+    it('hides tooltip on mouseleave', () => {
+        const wrapper = getComponent();
+        act(() => {
+            Simulate.mouseOver(wrapper);
+        });
+        expect(getVisibleTooltip()).toBeTruthy();
+        act(() => {
+            Simulate.mouseLeave(wrapper);
+        });
+        expect(getVisibleTooltip()).toBeFalsy();
+    });
+
+    it('displays tooltip on focus', () => {
+        const wrapper = getComponent();
+        act(() => {
+            Simulate.focus(wrapper);
+        });
+        expect(getVisibleTooltip()).toBeTruthy();
+    });
+
+    it('hides tooltip on blur', async () => {
+        const wrapper = getComponent();
+        act(() => {
+            Simulate.focus(wrapper);
+        });
+        expect(getVisibleTooltip()).toBeTruthy();
+        await act(async () => {
+            await Simulate.blur(wrapper);
+        });
+        expect(getVisibleTooltip()).toBeFalsy();
+    });
+});

test/components/views/elements/__snapshots__/TooltipTarget-test.tsx.snap

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<TooltipTarget /> displays tooltip on mouseover 1`] = `
+<div
+  class="mx_Tooltip test tooltipClassName mx_Tooltip_visible"
+  style="right: 1008px; top: -26px; display: block;"
+>
+  <div
+    class="mx_Tooltip_chevron"
+  />
+  test label
+</div>
+`;
+
+exports[`<TooltipTarget /> renders container 1`] = `
+<div
+  aria-describedby="test id"
+  class="test tooltipTargetClassName"
+  data-test-id="test"
+  tabindex="0"
+>
+  <span>
+    child
+  </span>
+  <div
+    class="test className"
+  />
+</div>
+`;