[devtools-tooltip] Add a heavy-focus mode

This allows for tooltips to not appear automatically on keyboard focus
but to require a hotkey in order to open. This behavior and the hotkey
choice is motivated by interesttarget. Hovering with a mouse still works
regularly.

Bug: 396311936
Change-Id: I15291a7376c0a061e34d8f958914bfe4dd2fc150
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6336175
Reviewed-by: Kim-Anh Tran <[email protected]>
Commit-Queue: Philip Pfaffe <[email protected]>

Author: pfaffe

front_end/ui/components/tooltips/Tooltip.test.ts

@@ -14,13 +14,15 @@ interface RenderProps {
   variant?: Tooltips.Tooltip.TooltipVariant;
   attribute?: 'aria-describedby'|'aria-details';
   useClick?: boolean;
+  useHotkey?: boolean;
   jslogContext?: string;
 }
 
 function renderTooltip({
   variant = 'simple',
   attribute = 'aria-describedby',
   useClick = false,
+  useHotkey = false,
   jslogContext = undefined,
 }: RenderProps = {}) {
   const container = document.createElement('div');
@@ -30,7 +32,13 @@ function renderTooltip({
       html`<button aria-details="tooltip-id">Button</button>` :
       html`<button aria-describedby="tooltip-id">Button</button>`
     }
-    <devtools-tooltip id="tooltip-id" variant=${variant} ?use-click=${useClick} jslogContext=${jslogContext??nothing}>
+    <devtools-tooltip
+     id="tooltip-id"
+     variant=${variant}
+     ?use-click=${useClick}
+     ?use-hotkey=${useHotkey}
+     jslogContext=${jslogContext??nothing}
+     >
       ${variant === 'rich' ? html`<p>Rich content</p>` : 'Simple content'}
     </devtools-tooltip>
   `, container);
@@ -125,6 +133,25 @@ describe('Tooltip', () => {
     assert.isTrue(container.querySelector('devtools-tooltip')?.open);
   });
 
+  it('should open with hotkey if use-hotkey is set', () => {
+    const container = renderTooltip({useHotkey: true});
+
+    const button = container.querySelector('button');
+    button?.dispatchEvent(new KeyboardEvent('keydown', {altKey: true, key: 'ArrowDown'}));
+
+    assert.isTrue(container.querySelector('devtools-tooltip')?.open);
+  });
+
+  it('should not open on focus if use-hotkey is set', async () => {
+    const container = renderTooltip({useHotkey: true});
+
+    const button = container.querySelector('button');
+    button?.dispatchEvent(new FocusEvent('focus'));
+
+    await checkForPendingActivity();
+    assert.isFalse(container.querySelector('devtools-tooltip')?.open);
+  });
+
   const eventsNotToPropagate = ['click', 'mouseup'];
 
   eventsNotToPropagate.forEach(eventName => {

front_end/ui/components/tooltips/Tooltip.ts

@@ -21,13 +21,16 @@ export interface TooltipProperties {
 /**
  * @attr id - Id of the tooltip. Used for searching an anchor element with aria-describedby.
  * @attr hover-delay - Hover length in ms before the tooltip is shown and hidden.
- * @attr variant - Variant of the tooltip, `"simple"` for strings only, inverted background,
- *                 `"rich"` for interactive content, background according to theme's surface.
+ * @attr variant - Variant of the tooltip, `"simple"` for strings only, inverted background, `"rich"` for interactive
+ *                 content, background according to theme's surface.
  * @attr use-click - If present, the tooltip will be shown on click instead of on hover.
+ * @attr use-hotkey - If present, the tooltip will be shown on hover but not when receiving focus. Requires a hotkey to
+ *                    open when fosed (Alt-down). When `"use-click"` is present as well, use-click takes precedence.
  * @prop {String} id - reflects the `"id"` attribute.
  * @prop {Number} hoverDelay - reflects the `"hover-delay"` attribute.
  * @prop {String} variant - reflects the `"variant"` attribute.
  * @prop {Boolean} useClick - reflects the `"click"` attribute.
+ * @prop {Boolean} useHotkey - reflects the `"use-hotkey"` attribute.
  */
 export class Tooltip extends HTMLElement {
   static readonly observedAttributes = ['id', 'variant', 'jslogcontext'];
@@ -42,6 +45,17 @@ export class Tooltip extends HTMLElement {
     return this.matches(':popover-open');
   }
 
+  get useHotkey(): boolean {
+    return this.hasAttribute('use-hotkey') ?? false;
+  }
+  set useHotkey(useHotkey: boolean) {
+    if (useHotkey) {
+      this.setAttribute('use-hotkey', '');
+    } else {
+      this.removeAttribute('use-hotkey');
+    }
+  }
+
   get useClick(): boolean {
     return this.hasAttribute('use-click') ?? false;
   }
@@ -143,7 +157,8 @@ export class Tooltip extends HTMLElement {
       window.clearTimeout(this.#timeout);
     }
     // Don't hide a rich tooltip when hovering over the tooltip itself.
-    if (this.variant === 'rich' && event.relatedTarget === this) {
+    if (this.variant === 'rich' &&
+        (event.relatedTarget === this || (event.relatedTarget as Element)?.parentElement === this)) {
       return;
     }
     this.#timeout = window.setTimeout(() => {
@@ -192,13 +207,24 @@ export class Tooltip extends HTMLElement {
     }
   };
 
+  #keyDown = (event: KeyboardEvent): void => {
+    if ((event.altKey && event.key === 'ArrowDown') || (event.key === 'Escape' && this.open)) {
+      this.toggle();
+      event.stopPropagation();
+    }
+  };
+
   #registerEventListeners(): void {
     if (this.#anchor) {
       if (this.useClick) {
         this.#anchor.addEventListener('click', this.toggle);
       } else {
         this.#anchor.addEventListener('mouseenter', this.showTooltip);
-        this.#anchor.addEventListener('focus', this.showTooltip);
+        if (this.useHotkey) {
+          this.#anchor.addEventListener('keydown', this.#keyDown);
+        } else {
+          this.#anchor.addEventListener('focus', this.showTooltip);
+        }
         this.#anchor.addEventListener('blur', this.hideTooltip);
         this.#anchor.addEventListener('mouseleave', this.hideTooltip);
         this.addEventListener('mouseleave', this.hideTooltip);
@@ -220,6 +246,7 @@ export class Tooltip extends HTMLElement {
       this.#anchor.removeEventListener('mouseenter', this.showTooltip);
       this.#anchor.removeEventListener('focus', this.showTooltip);
       this.#anchor.removeEventListener('blur', this.hideTooltip);
+      this.#anchor.removeEventListener('keydown', this.#keyDown);
       this.#anchor.removeEventListener('mouseleave', this.hideTooltip);
     }
     this.removeEventListener('mouseleave', this.hideTooltip);