From a48504427c0907284ce4010574d673f7aeac0e4a Mon Sep 17 00:00:00 2001
From: stanislavh <stanislav.honcharov@sonarsource.com>
Date: Tue, 13 Dec 2022 17:30:41 +0100
Subject: [PATCH] SONAR-17723 make links in tooltip to be interactive via
 keyboard

---
 .../api/mocks/SecurityHotspotServiceMock.ts   |  39 +++++--
 .../__tests__/SecurityHotspotsApp-it.tsx      |  21 +++-
 .../components/assignee/AssigneeRenderer.tsx  |   2 +-
 .../AssigneeRenderer-test.tsx.snap            |   5 +-
 .../common/DocumentationTooltip.tsx           |  64 +++++++---
 .../__tests__/DocumentationTooltip-test.tsx   |  81 ++++++++++---
 .../DocumentationTooltip-test.tsx.snap        | 110 ------------------
 .../components/controls/FocusOutHandler.tsx   |  20 +++-
 .../js/components/controls/HelpTooltip.tsx    |  11 +-
 .../main/js/components/controls/Tooltip.tsx   |  20 +++-
 .../__snapshots__/HelpTooltip-test.tsx.snap   |   1 +
 11 files changed, 213 insertions(+), 161 deletions(-)
 delete mode 100644 server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/DocumentationTooltip-test.tsx.snap

diff --git a/server/sonar-web/src/main/js/api/mocks/SecurityHotspotServiceMock.ts b/server/sonar-web/src/main/js/api/mocks/SecurityHotspotServiceMock.ts
index 3a28a222ae7..1526b1b2a30 100644
--- a/server/sonar-web/src/main/js/api/mocks/SecurityHotspotServiceMock.ts
+++ b/server/sonar-web/src/main/js/api/mocks/SecurityHotspotServiceMock.ts
@@ -22,31 +22,38 @@ import { mockHotspot, mockRawHotspot } from '../../helpers/mocks/security-hotspo
 import { mockSourceLine } from '../../helpers/mocks/sources';
 import { mockRuleDetails } from '../../helpers/testMocks';
 import { BranchParameters } from '../../types/branch-like';
-import { Hotspot, HotspotResolution, HotspotStatus } from '../../types/security-hotspots';
+import {
+  Hotspot,
+  HotspotAssignRequest,
+  HotspotResolution,
+  HotspotStatus,
+} from '../../types/security-hotspots';
 import { getSources } from '../components';
 import { getMeasures } from '../measures';
 import { getRuleDetails } from '../rules';
-import { getSecurityHotspotDetails, getSecurityHotspots } from '../security-hotspots';
+import {
+  assignSecurityHotspot,
+  getSecurityHotspotDetails,
+  getSecurityHotspots,
+} from '../security-hotspots';
 
 const NUMBER_OF_LINES = 20;
 const MAX_END_RANGE = 10;
 
 export default class SecurityHotspotServiceMock {
-  hotspots: Hotspot[];
-  rawHotspotKey: string[];
+  hotspots: Hotspot[] = [];
+  rawHotspotKey: string[] = [];
+  nextAssignee: string | undefined;
 
   constructor() {
-    this.rawHotspotKey = Object.keys(mockRawHotspot());
-    this.hotspots = [
-      mockHotspot({ key: '1', status: HotspotStatus.TO_REVIEW }),
-      mockHotspot({ key: '2', status: HotspotStatus.TO_REVIEW }),
-    ];
+    this.reset();
 
     (getMeasures as jest.Mock).mockImplementation(this.handleGetMeasures);
     (getSecurityHotspots as jest.Mock).mockImplementation(this.handleGetSecurityHotspots);
     (getSecurityHotspotDetails as jest.Mock).mockImplementation(
       this.handleGetSecurityHotspotDetails
     );
+    (assignSecurityHotspot as jest.Mock).mockImplementation(this.handleAssignSecurityHotspot);
     (getRuleDetails as jest.Mock).mockResolvedValue({ rule: mockRuleDetails() });
     (getSources as jest.Mock).mockResolvedValue(
       times(NUMBER_OF_LINES, (n) =>
@@ -105,6 +112,15 @@ export default class SecurityHotspotServiceMock {
       });
     }
 
+    if (this.nextAssignee !== undefined) {
+      hotspot.assigneeUser = {
+        ...hotspot.assigneeUser,
+        login: this.nextAssignee,
+        name: this.nextAssignee,
+      };
+      this.nextAssignee = undefined;
+    }
+
     return this.reply(hotspot);
   };
 
@@ -121,6 +137,11 @@ export default class SecurityHotspotServiceMock {
     ]);
   };
 
+  handleAssignSecurityHotspot = (_: string, data: HotspotAssignRequest) => {
+    this.nextAssignee = data.assignee;
+    return this.reply({});
+  };
+
   reply<T>(response: T): Promise<T> {
     return Promise.resolve(cloneDeep(response));
   }
diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/__tests__/SecurityHotspotsApp-it.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/__tests__/SecurityHotspotsApp-it.tsx
index 922b3deb7f7..3c6556ad138 100644
--- a/server/sonar-web/src/main/js/apps/security-hotspots/__tests__/SecurityHotspotsApp-it.tsx
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/__tests__/SecurityHotspotsApp-it.tsx
@@ -21,7 +21,7 @@ import { screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { Route } from 'react-router-dom';
-import { byRole, byTestId } from 'testing-library-selector';
+import { byRole, byTestId, byText } from 'testing-library-selector';
 import SecurityHotspotServiceMock from '../../../api/mocks/SecurityHotspotServiceMock';
 import { mockComponent } from '../../../helpers/mocks/component';
 import { mockLoggedInUser } from '../../../helpers/testMocks';
@@ -37,6 +37,12 @@ const ui = {
   selectStatusButton: byRole('button', {
     name: 'hotspots.status.select_status',
   }),
+  editAssigneeButton: byRole('button', {
+    name: 'hotspots.assignee.change_user',
+  }),
+  activeAssignee: byTestId('assignee-name'),
+  successGlobalMessage: byRole('status'),
+  currentUserSelectionItem: byText('foo'),
   panel: byTestId('security-hotspot-test'),
 };
 
@@ -50,6 +56,19 @@ afterEach(() => {
   handler.reset();
 });
 
+it('should self-assign hotspot', async () => {
+  const user = userEvent.setup();
+  renderSecurityHotspotsApp();
+
+  expect(await ui.activeAssignee.find()).toHaveTextContent('John Doe');
+
+  await user.click(await ui.editAssigneeButton.find());
+  await user.click(ui.currentUserSelectionItem.get());
+
+  expect(ui.successGlobalMessage.get()).toHaveTextContent(`hotspots.assign.success.foo`);
+  expect(ui.activeAssignee.get()).toHaveTextContent('foo');
+});
+
 it('should remember the comment when toggling change status panel for the same security hotspot', async () => {
   const user = userEvent.setup();
   renderSecurityHotspotsApp();
diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/assignee/AssigneeRenderer.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/components/assignee/AssigneeRenderer.tsx
index 0ea9123b509..9c181847ae9 100644
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/assignee/AssigneeRenderer.tsx
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/assignee/AssigneeRenderer.tsx
@@ -46,7 +46,7 @@ export default function AssigneeRenderer(props: AssigneeRendererProps) {
     <DeferredSpinner loading={loading}>
       {!editing && (
         <div className="display-flex-center">
-          <strong className="nowrap">
+          <strong className="nowrap" data-testid="assignee-name">
             {assignee &&
               (assignee.active
                 ? assignee.name ?? assignee.login
diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/assignee/__tests__/__snapshots__/AssigneeRenderer-test.tsx.snap b/server/sonar-web/src/main/js/apps/security-hotspots/components/assignee/__tests__/__snapshots__/AssigneeRenderer-test.tsx.snap
index ce932bdef41..6c98a977fd0 100644
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/assignee/__tests__/__snapshots__/AssigneeRenderer-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/assignee/__tests__/__snapshots__/AssigneeRenderer-test.tsx.snap
@@ -40,6 +40,7 @@ exports[`should render correctly: not editing 1`] = `
   >
     <strong
       className="nowrap"
+      data-testid="assignee-name"
     >
       user.x_deleted.Skywalker
     </strong>
@@ -61,6 +62,7 @@ exports[`should render correctly: with active assignee 1`] = `
   >
     <strong
       className="nowrap"
+      data-testid="assignee-name"
     >
       John Doe
     </strong>
@@ -82,6 +84,7 @@ exports[`should render correctly: without current assignee 1`] = `
   >
     <strong
       className="nowrap"
+      data-testid="assignee-name"
     >
       unassigned
     </strong>
@@ -92,4 +95,4 @@ exports[`should render correctly: without current assignee 1`] = `
     />
   </div>
 </DeferredSpinner>
-`;
+`;
\ No newline at end of file
diff --git a/server/sonar-web/src/main/js/components/common/DocumentationTooltip.tsx b/server/sonar-web/src/main/js/components/common/DocumentationTooltip.tsx
index da2640af845..a58e79bdfb2 100644
--- a/server/sonar-web/src/main/js/components/common/DocumentationTooltip.tsx
+++ b/server/sonar-web/src/main/js/components/common/DocumentationTooltip.tsx
@@ -17,8 +17,10 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import { first, last } from 'lodash';
 import * as React from 'react';
 import HelpTooltip from '../../components/controls/HelpTooltip';
+import { KeyboardKeys } from '../../helpers/keycodes';
 import DocLink from './DocLink';
 import Link from './Link';
 
@@ -31,11 +33,47 @@ export interface DocumentationTooltipProps {
 }
 
 export default function DocumentationTooltip(props: DocumentationTooltipProps) {
-  const { className, content, links, title } = props;
+  const nextSelectableNode = React.useRef<HTMLElement | undefined | null>();
+  const linksRef = React.useRef<(HTMLAnchorElement | null)[]>([]);
+  const helpRef = React.useRef<HTMLElement>(null);
+  const { className, children, content, links, title } = props;
+
+  function handleShowTooltip() {
+    document.addEventListener('keydown', handleTabPress);
+  }
+
+  function handleHideTooltip() {
+    document.removeEventListener('keydown', handleTabPress);
+    nextSelectableNode.current = undefined;
+  }
+
+  function handleTabPress(event: KeyboardEvent) {
+    if (event.code === KeyboardKeys.Tab) {
+      if (event.shiftKey === true) {
+        if (event.target === first(linksRef.current)) {
+          helpRef.current?.focus();
+        }
+        return;
+      }
+      if (event.target === last(linksRef.current)) {
+        nextSelectableNode.current?.focus();
+        return;
+      }
+      if (nextSelectableNode.current === undefined) {
+        nextSelectableNode.current = event.target as HTMLElement;
+        event.preventDefault();
+        linksRef.current[0]?.focus();
+      }
+    }
+  }
 
   return (
     <HelpTooltip
       className={className}
+      onShow={handleShowTooltip}
+      onHide={handleHideTooltip}
+      isInteractive={true}
+      innerRef={helpRef}
       overlay={
         <div className="big-padded-top big-padded-bottom">
           {title && (
@@ -50,20 +88,18 @@ export default function DocumentationTooltip(props: DocumentationTooltipProps) {
             <>
               <hr className="big-spacer-top big-spacer-bottom" />
 
-              {links.map(({ href, label, inPlace, doc = true }) => (
-                <div
-                  className="little-spacer-bottom"
-                  key={label}
-                  // a11y: tooltips with interactive content are not supported by screen readers.
-                  // To prevent the screen reader from reading out the links for no reason (as
-                  // they won't be "clickable"), we hide the whole links section.
-                  // See https://sarahmhigley.com/writing/tooltips-in-wcag-21/
-                  aria-hidden={true}
-                >
+              {links.map(({ href, label, inPlace, doc = true }, index) => (
+                <div className="little-spacer-bottom" key={label}>
                   {doc ? (
-                    <DocLink to={href}>{label}</DocLink>
+                    <DocLink to={href} innerRef={(ref) => (linksRef.current[index] = ref)}>
+                      {label}
+                    </DocLink>
                   ) : (
-                    <Link to={href} target={inPlace ? undefined : '_blank'}>
+                    <Link
+                      to={href}
+                      ref={(ref) => (linksRef.current[index] = ref)}
+                      target={inPlace ? undefined : '_blank'}
+                    >
                       {label}
                     </Link>
                   )}
@@ -74,7 +110,7 @@ export default function DocumentationTooltip(props: DocumentationTooltipProps) {
         </div>
       }
     >
-      {props.children}
+      {children}
     </HelpTooltip>
   );
 }
diff --git a/server/sonar-web/src/main/js/components/common/__tests__/DocumentationTooltip-test.tsx b/server/sonar-web/src/main/js/components/common/__tests__/DocumentationTooltip-test.tsx
index 33bc5bf3ce3..fc14f419f25 100644
--- a/server/sonar-web/src/main/js/components/common/__tests__/DocumentationTooltip-test.tsx
+++ b/server/sonar-web/src/main/js/components/common/__tests__/DocumentationTooltip-test.tsx
@@ -17,25 +17,74 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import { shallow } from 'enzyme';
+
+import userEvent from '@testing-library/user-event';
 import * as React from 'react';
+import { byRole, byTestId } from 'testing-library-selector';
+
+import { renderComponent } from '../../../helpers/testReactTestingUtils';
 import DocumentationTooltip, { DocumentationTooltipProps } from '../DocumentationTooltip';
+import Link from '../Link';
+
+const ui = {
+  body: byRole('body'),
+  beforeLink: byRole('link', { name: 'Interactive element before' }),
+  helpIcon: byTestId('help-tooltip-activator'),
+  linkInTooltip: byRole('link', { name: 'Label' }),
+  linkInTooltip2: byRole('link', { name: 'opens_in_new_window Label2' }),
+  afterLink: byRole('link', { name: 'Interactive element after' }),
+};
+
+it('should correctly navigate through TAB', async () => {
+  const user = userEvent.setup();
+  renderDocumentationTooltip();
 
-it('renders correctly', () => {
-  expect(shallowRender()).toMatchSnapshot('basic');
-  expect(
-    shallowRender({
-      links: [
-        { href: 'http://link.tosome.place', label: 'external link' },
-        { href: '/guide', label: 'internal link' },
-        { href: '/projects', label: 'in place', inPlace: true, doc: false },
-      ],
-    })
-  ).toMatchSnapshot('with links');
-  expect(shallowRender({ title: undefined })).toMatchSnapshot('no title');
-  expect(shallowRender({ content: undefined })).toMatchSnapshot('no content');
+  await user.tab();
+  expect(await ui.beforeLink.find()).toHaveFocus();
+  await user.tab();
+  expect(ui.helpIcon.get()).toHaveFocus();
+  await user.tab();
+  expect(ui.linkInTooltip.get()).toHaveFocus();
+  await user.tab();
+  expect(ui.linkInTooltip2.get()).toHaveFocus();
+  // Looks like RTL tab event ignores any custom focuses during the events phase,
+  // unless preventDefault is specified
+  await user.tab();
+  await user.tab({ shift: true });
+  expect(await ui.afterLink.find()).toHaveFocus();
+  await user.tab({ shift: true });
+  await user.tab();
+  await user.tab({ shift: true });
+  expect(await ui.afterLink.find()).toHaveFocus();
 });
 
-function shallowRender(props: Partial<DocumentationTooltipProps> = {}) {
-  return shallow(<DocumentationTooltip content="content" title="title" {...props} />);
+function renderDocumentationTooltip(props: Partial<DocumentationTooltipProps> = {}) {
+  return renderComponent(
+    <>
+      <Link to="/" target="_blank">
+        Interactive element before
+      </Link>
+      <DocumentationTooltip
+        title="Tooltip title"
+        content="Tooltip content"
+        links={[
+          {
+            href: '/user-guide/clean-as-you-code/',
+            label: 'Label',
+            doc: false,
+          },
+          {
+            href: '/user-guide/clean-as-you-code2/',
+            label: 'Label2',
+            doc: true,
+            inPlace: true,
+          },
+        ]}
+        {...props}
+      />
+      <Link to="/" target="_blank">
+        Interactive element after
+      </Link>
+    </>
+  );
 }
diff --git a/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/DocumentationTooltip-test.tsx.snap b/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/DocumentationTooltip-test.tsx.snap
deleted file mode 100644
index b1ed2aba980..00000000000
--- a/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/DocumentationTooltip-test.tsx.snap
+++ /dev/null
@@ -1,110 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders correctly: basic 1`] = `
-<HelpTooltip
-  overlay={
-    <div
-      className="big-padded-top big-padded-bottom"
-    >
-      <div
-        className="spacer-bottom"
-      >
-        <strong>
-          title
-        </strong>
-      </div>
-      <p>
-        content
-      </p>
-    </div>
-  }
-/>
-`;
-
-exports[`renders correctly: no content 1`] = `
-<HelpTooltip
-  overlay={
-    <div
-      className="big-padded-top big-padded-bottom"
-    >
-      <div
-        className="spacer-bottom"
-      >
-        <strong>
-          title
-        </strong>
-      </div>
-    </div>
-  }
-/>
-`;
-
-exports[`renders correctly: no title 1`] = `
-<HelpTooltip
-  overlay={
-    <div
-      className="big-padded-top big-padded-bottom"
-    >
-      <p>
-        content
-      </p>
-    </div>
-  }
-/>
-`;
-
-exports[`renders correctly: with links 1`] = `
-<HelpTooltip
-  overlay={
-    <div
-      className="big-padded-top big-padded-bottom"
-    >
-      <div
-        className="spacer-bottom"
-      >
-        <strong>
-          title
-        </strong>
-      </div>
-      <p>
-        content
-      </p>
-      <React.Fragment>
-        <hr
-          className="big-spacer-top big-spacer-bottom"
-        />
-        <div
-          aria-hidden={true}
-          className="little-spacer-bottom"
-        >
-          <withAppStateContext(DocLink)
-            to="http://link.tosome.place"
-          >
-            external link
-          </withAppStateContext(DocLink)>
-        </div>
-        <div
-          aria-hidden={true}
-          className="little-spacer-bottom"
-        >
-          <withAppStateContext(DocLink)
-            to="/guide"
-          >
-            internal link
-          </withAppStateContext(DocLink)>
-        </div>
-        <div
-          aria-hidden={true}
-          className="little-spacer-bottom"
-        >
-          <ForwardRef(Link)
-            to="/projects"
-          >
-            in place
-          </ForwardRef(Link)>
-        </div>
-      </React.Fragment>
-    </div>
-  }
-/>
-`;
diff --git a/server/sonar-web/src/main/js/components/controls/FocusOutHandler.tsx b/server/sonar-web/src/main/js/components/controls/FocusOutHandler.tsx
index 8e428629328..2278277aa95 100644
--- a/server/sonar-web/src/main/js/components/controls/FocusOutHandler.tsx
+++ b/server/sonar-web/src/main/js/components/controls/FocusOutHandler.tsx
@@ -19,12 +19,13 @@
  */
 import * as React from 'react';
 
-interface Props {
+interface Props extends React.BaseHTMLAttributes<HTMLDivElement> {
   onFocusOut: () => void;
+  innerRef?: (instance: HTMLDivElement) => void;
 }
 
 export default class FocusOutHandler extends React.PureComponent<React.PropsWithChildren<Props>> {
-  ref = React.createRef<HTMLDivElement>();
+  ref?: HTMLDivElement;
 
   componentDidMount() {
     setTimeout(() => {
@@ -36,13 +37,24 @@ export default class FocusOutHandler extends React.PureComponent<React.PropsWith
     document.removeEventListener('focusin', this.handleFocusOut);
   }
 
+  nodeRef = (node: HTMLDivElement) => {
+    const { innerRef } = this.props;
+    this.ref = node;
+    innerRef?.(node);
+  };
+
   handleFocusOut = () => {
-    if (this.ref.current && this.ref.current.querySelector(':focus') === null) {
+    if (this.ref?.querySelector(':focus') === null) {
       this.props.onFocusOut();
     }
   };
 
   render() {
-    return <div ref={this.ref}>{this.props.children}</div>;
+    const { onFocusOut, innerRef, children, ...props } = this.props;
+    return (
+      <div ref={this.nodeRef} {...props}>
+        {children}
+      </div>
+    );
   }
 }
diff --git a/server/sonar-web/src/main/js/components/controls/HelpTooltip.tsx b/server/sonar-web/src/main/js/components/controls/HelpTooltip.tsx
index 523e21b7e6a..2c9af6703a3 100644
--- a/server/sonar-web/src/main/js/components/controls/HelpTooltip.tsx
+++ b/server/sonar-web/src/main/js/components/controls/HelpTooltip.tsx
@@ -29,10 +29,13 @@ interface Props extends Pick<IconProps, 'size'> {
   className?: string;
   children?: React.ReactNode;
   onShow?: () => void;
+  onHide?: () => void;
   overlay: React.ReactNode;
   placement?: Placement;
   ariaLabel?: string;
   ariaLabelledby?: string;
+  isInteractive?: boolean;
+  innerRef?: React.Ref<HTMLSpanElement>;
 }
 
 const DEFAULT_SIZE = 12;
@@ -54,10 +57,16 @@ export default function HelpTooltip({
       <Tooltip
         mouseLeaveDelay={0.25}
         onShow={props.onShow}
+        onHide={props.onHide}
         overlay={props.overlay}
         placement={props.placement}
+        isInteractive={props.isInteractive}
       >
-        <span className="display-inline-flex-center">
+        <span
+          className="display-inline-flex-center"
+          data-testid="help-tooltip-activator"
+          ref={props.innerRef}
+        >
           {props.children || <HelpIcon fill={colors.gray60} size={size} />}
         </span>
       </Tooltip>
diff --git a/server/sonar-web/src/main/js/components/controls/Tooltip.tsx b/server/sonar-web/src/main/js/components/controls/Tooltip.tsx
index eafc1dc2099..f990f95b5ad 100644
--- a/server/sonar-web/src/main/js/components/controls/Tooltip.tsx
+++ b/server/sonar-web/src/main/js/components/controls/Tooltip.tsx
@@ -22,6 +22,7 @@ import * as React from 'react';
 import { createPortal, findDOMNode } from 'react-dom';
 import { rawSizes } from '../../app/theme';
 import EscKeydownHandler from './EscKeydownHandler';
+import FocusOutHandler from './FocusOutHandler';
 import ScreenPositionFixer from './ScreenPositionFixer';
 import './Tooltip.css';
 
@@ -37,6 +38,10 @@ export interface TooltipProps {
   overlay: React.ReactNode;
   placement?: Placement;
   visible?: boolean;
+  // If tooltip overlay has interactive content (links for instance) we may set this to true to stop
+  // default behavior of tabbing (other changes should be done outside of this component to make it work)
+  // See example DocumentationTooltip
+  isInteractive?: boolean;
 }
 
 interface Measurements {
@@ -286,6 +291,12 @@ export class TooltipInner extends React.Component<TooltipProps, State> {
   };
 
   handleBlur = () => {
+    if (!this.props.isInteractive) {
+      this.closeTooltip();
+    }
+  };
+
+  closeTooltip = () => {
     if (this.mounted) {
       this.setState({ visible: false });
       if (this.props.onHide) {
@@ -362,11 +373,12 @@ export class TooltipInner extends React.Component<TooltipProps, State> {
       : undefined;
 
     return (
-      <div
+      <FocusOutHandler
+        onFocusOut={this.closeTooltip}
         className={`${classNameSpace} ${currentPlacement}`}
         onPointerEnter={this.handleOverlayMouseEnter}
         onPointerLeave={this.handleOverlayMouseLeave}
-        ref={this.tooltipNodeRef}
+        innerRef={this.tooltipNodeRef}
         style={style}
       >
         <div className={`${classNameSpace}-inner`} id={this.id}>
@@ -380,7 +392,7 @@ export class TooltipInner extends React.Component<TooltipProps, State> {
               : undefined
           }
         />
-      </div>
+      </FocusOutHandler>
     );
   };
 
@@ -402,7 +414,7 @@ export class TooltipInner extends React.Component<TooltipProps, State> {
           'aria-labelledby': isVisible ? this.id : undefined,
         })}
         {isVisible && (
-          <EscKeydownHandler onKeydown={this.handleBlur}>
+          <EscKeydownHandler onKeydown={this.closeTooltip}>
             <TooltipPortal>
               <ScreenPositionFixer ready={isMeasured(this.state)}>
                 {this.renderActual}
diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/HelpTooltip-test.tsx.snap b/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/HelpTooltip-test.tsx.snap
index bdc478b2d8e..e5d600bdd42 100644
--- a/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/HelpTooltip-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/HelpTooltip-test.tsx.snap
@@ -30,6 +30,7 @@ exports[`should render properly: default 1`] = `
   >
     <span
       className="display-inline-flex-center"
+      data-testid="help-tooltip-activator"
     >
       <HelpIcon
         fill="#888"
-- 
2.39.5