[css value tracing] Add keyboard navigation

Bug: 403246243
Change-Id: I01f255ede3a74c082d31c4cbaa97b2909e46ab8a
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6352460
Commit-Queue: Philip Pfaffe <[email protected]>
Reviewed-by: Eric Leese <[email protected]>

Author: pfaffe

front_end/panels/elements/CSSValueTraceView.ts

@@ -16,7 +16,7 @@ import {
 } from './PropertyRenderer.js';
 import stylePropertiesTreeOutlineStyles from './stylePropertiesTreeOutline.css.js';
 
-const {html, render} = Lit;
+const {html, render, Directives: {ref, ifDefined}} = Lit;
 
 export interface ViewInput {
   substitutions: Node[][];
@@ -25,18 +25,32 @@ export interface ViewInput {
   onToggle: () => void;
 }
 
+export interface ViewOutput {
+  defaultFocusedElement?: Element;
+}
+
 export type View = (
     input: ViewInput,
-    output: object,
+    output: ViewOutput,
     target: HTMLElement,
     ) => void;
 
-function defaultView(input: ViewInput, _: unknown, target: HTMLElement): void {
+function defaultView(input: ViewInput, output: ViewOutput, target: HTMLElement): void {
   const [firstEvaluation, ...intermediateEvaluations] = input.evaluations;
+
+  const hiddenSummary = !firstEvaluation || intermediateEvaluations.length === 0;
+  const summaryTabIndex = hiddenSummary ? undefined : 0;
   render(
       // clang-format off
     html`
-      <div class="css-value-trace monospace">
+      <div
+       role=dialog
+       ${ref(e => {
+         output.defaultFocusedElement = (e as HTMLDivElement)?.querySelector('[tabindex]') ?? undefined;
+       })}
+       class="css-value-trace monospace"
+       @keydown=${onKeyDown}
+       >
         ${input.substitutions.map(
           line =>
             html`<span class="trace-line-icon" aria-label="is equal to">↳</span
@@ -47,10 +61,9 @@ function defaultView(input: ViewInput, _: unknown, target: HTMLElement): void {
               ><span class="trace-line">${firstEvaluation}</span>`
           : html`<details
               @toggle=${input.onToggle}
-              ?hidden=${!firstEvaluation ||
-              intermediateEvaluations.length === 0}
+              ?hidden=${hiddenSummary}
             >
-              <summary>
+              <summary tabindex=${ifDefined(summaryTabIndex)}>
                 <span class="trace-line-icon" aria-label="is equal to">↳</span
                 ><devtools-icon class="marker"></devtools-icon
                 ><span class="trace-line">${firstEvaluation}</span>
@@ -73,6 +86,34 @@ function defaultView(input: ViewInput, _: unknown, target: HTMLElement): void {
       // clang-format on
       target,
   );
+
+  function onKeyDown(this: HTMLDivElement, e: KeyboardEvent): void {
+    // prevent styles-tab keyboard navigation
+    if (!e.altKey) {
+      if (e.key.startsWith('Arrow') || e.key === ' ' || e.key === 'Enter') {
+        e.consume();
+      }
+    }
+
+    // Capture tab focus within
+    if (e.key === 'Tab') {
+      const tabstops = this.querySelectorAll('[tabindex]') ?? [];
+      const firstTabStop = tabstops[0];
+      const lastTabStop = tabstops[tabstops.length - 1];
+      if (e.target === lastTabStop && !e.shiftKey) {
+        e.consume(true);
+        if (firstTabStop instanceof HTMLElement) {
+          firstTabStop.focus();
+        }
+      }
+      if (e.target === firstTabStop && e.shiftKey) {
+        e.consume(true);
+        if (lastTabStop instanceof HTMLElement) {
+          lastTabStop.focus();
+        }
+      }
+    }
+  }
 }
 
 export class CSSValueTraceView extends UI.Widget.VBox {
@@ -168,7 +209,8 @@ export class CSSValueTraceView extends UI.Widget.VBox {
       finalResult: this.#finalResult,
       onToggle: () => this.onResize(),
     };
-    const viewOutput = {};
+    const viewOutput: ViewOutput = {};
     this.#view(viewInput, viewOutput, this.contentElement);
+    this.setDefaultFocusedElement(viewOutput.defaultFocusedElement ?? null);
   }
 }

front_end/panels/elements/PropertyRenderer.ts

@@ -68,8 +68,8 @@ export class Highlighting {
   readonly #nodesForMatches = new Map<SDK.CSSPropertyParser.Match, Node[][]>();
   readonly #matchesForNodes = new Map<Node, SDK.CSSPropertyParser.Match[]>();
   readonly #registry: Highlight;
-  readonly #boundOnEnter: (ev: MouseEvent) => void;
-  readonly #boundOnExit: (ev: MouseEvent) => void;
+  readonly #boundOnEnter: (e: Event) => void;
+  readonly #boundOnExit: (e: Event) => void;
 
   constructor() {
     const registry = CSS.highlights.get(Highlighting.REGISTRY_NAME);
@@ -100,11 +100,14 @@ export class Highlighting {
       if (node instanceof HTMLElement) {
         node.onmouseenter = this.#boundOnEnter;
         node.onmouseleave = this.#boundOnExit;
+        node.onfocus = this.#boundOnEnter;
+        node.onblur = this.#boundOnExit;
+        node.tabIndex = 0;
       }
     }
   }
 
-  * #nodeRangesHitByMouseEvent(e: MouseEvent): Generator<Node[]> {
+  * #nodeRangesHitByMouseEvent(e: Event): Generator<Node[]> {
     for (const node of e.composedPath()) {
       const matches = this.#matchesForNodes.get(node as Node);
       if (matches) {
@@ -116,15 +119,19 @@ export class Highlighting {
     }
   }
 
-  #onEnter(e: MouseEvent): void {
+  #onEnter(e: Event): void {
     this.#registry.clear();
     this.#activeHighlights.push([]);
     for (const nodeRange of this.#nodeRangesHitByMouseEvent(e)) {
       const range = new Range();
-      range.setStartBefore(nodeRange[0]);
-      range.setEndAfter(nodeRange[nodeRange.length - 1]);
-      this.#activeHighlights[this.#activeHighlights.length - 1].push(range);
-      this.#registry.add(range);
+      const begin = nodeRange[0];
+      const end = nodeRange[nodeRange.length - 1];
+      if (begin.parentNode && end.parentNode) {
+        range.setStartBefore(begin);
+        range.setEndAfter(end);
+        this.#activeHighlights[this.#activeHighlights.length - 1].push(range);
+        this.#registry.add(range);
+      }
     }
   }
 
@@ -413,10 +420,19 @@ export class Renderer extends SDK.CSSPropertyParser.TreeWalker {
         })}`);
     UI.ARIAUtils.setLabel(valueElement, i18nString(UIStrings.cssPropertyValue, {PH1: property.value}));
     valueElement.className = 'value';
+    const {nodes, cssControls} = this.renderValueNodes(property, matchedResult, renderers, tracing);
+    nodes.forEach(node => valueElement.appendChild(node));
+    valueElement.normalize();
+    return {valueElement, cssControls};
+  }
 
+  static renderValueNodes(
+      property: SDK.CSSProperty.CSSProperty|{name: string, value: string},
+      matchedResult: SDK.CSSPropertyParser.BottomUpTreeMatching|null,
+      renderers: Array<MatchRenderer<SDK.CSSPropertyParser.Match>>,
+      tracing?: TracingContext): {nodes: Node[], cssControls: SDK.CSSPropertyParser.CSSControlMap} {
     if (!matchedResult) {
-      valueElement.appendChild(document.createTextNode(property.value));
-      return {valueElement, cssControls: new Map()};
+      return {nodes: [document.createTextNode(property.value)], cssControls: new Map()};
     }
     const rendererMap = new Map<
         Platform.Constructor.Constructor<SDK.CSSPropertyParser.Match>, MatchRenderer<SDK.CSSPropertyParser.Match>>();
@@ -427,10 +443,7 @@ export class Renderer extends SDK.CSSPropertyParser.TreeWalker {
     const context = new RenderingContext(
         matchedResult.ast, property instanceof SDK.CSSProperty.CSSProperty ? property : null, rendererMap,
         matchedResult, undefined, {}, tracing);
-    const {nodes, cssControls} = Renderer.render([matchedResult.ast.tree, ...matchedResult.ast.trailingNodes], context);
-    nodes.forEach(node => valueElement.appendChild(node));
-    valueElement.normalize();
-    return {valueElement, cssControls};
+    return Renderer.render([matchedResult.ast.tree, ...matchedResult.ast.trailingNodes], context);
   }
 }
 

front_end/panels/elements/StylePropertyTreeElement.ts

@@ -247,7 +247,7 @@ function getTracingTooltip(
   // clang-format off
   return html`<span tabIndex=-1 aria-details=${tooltipId}>${functionName}</span><devtools-tooltip
         id=${tooltipId}
-        heavy-focus
+        use-hotkey
         variant=rich
         jslogContext=elements.css-value-trace
         @beforetoggle=${function(this: Tooltips.Tooltip.Tooltip, e: ToggleEvent) {
@@ -261,7 +261,25 @@ function getTracingTooltip(
                   computedStyles));
           }
         }}
+        @toggle=${function(this: Tooltips.Tooltip.Tooltip,e: ToggleEvent) {
+          if (e.newState === 'open') {
+            (this.querySelector('devtools-widget') as UI.Widget.WidgetElement<CSSValueTraceView>| null)
+              ?.getWidget()
+              ?.focus();
+          }
+        }}
         ><devtools-widget
+          @keydown=${(e: KeyboardEvent) => {
+            const maybeTooltip = (e.target as Element).parentElement ;
+            if (!(maybeTooltip instanceof Tooltips.Tooltip.Tooltip)) {
+              return;
+            }
+            if (e.key === 'Escape' || (e.altKey && e.key === 'ArrowDown')){
+              maybeTooltip.hideTooltip();
+              maybeTooltip.anchor?.focus();
+              e.consume();
+            }
+          }}
           .widgetConfig=${UI.Widget.widgetConfig(CSSValueTraceView, {})}
           ></devtools-widget></devtools-tooltip>`;
   // clang-format on
@@ -294,14 +312,14 @@ export class VariableRenderer extends rendererBase(SDK.CSSPropertyParserMatchers
     const substitution = context.tracing?.substitution();
     if (substitution) {
       if (declaration?.declaration instanceof SDK.CSSProperty.CSSProperty) {
-        const {valueElement, cssControls} = Renderer.renderValueElement(
+        const {nodes, cssControls} = Renderer.renderValueNodes(
             declaration.declaration,
             substitution.cachedParsedValue(declaration.declaration, this.#matchedStyles, this.#computedStyles),
             getPropertyRenderers(
                 declaration.declaration.ownerStyle, this.#stylesPane, this.#matchedStyles, null, this.#computedStyles),
             substitution);
         cssControls.forEach((value, key) => value.forEach(control => context.addControl(key, control)));
-        return [valueElement];
+        return nodes;
       }
       if (!declaration && match.fallback.length > 0) {
         return Renderer.render(match.fallback, substitution.renderingContext(context)).nodes;

front_end/panels/elements/cssValueTraceView.css

@@ -3,6 +3,10 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  */
+:host(:focus-within) {
+  /* stylelint-disable-next-line declaration-no-important */
+  outline: none !important;
+}
 
 .css-value-trace {
   --cell-width: 1.5em;
@@ -20,6 +24,11 @@
     padding-top: var(--sys-size-4);
   }
 
+  :focus {
+    border-radius: var(--sys-size-2);
+    outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
+  }
+
   details {
     height: min-content;
     grid-column: 1 / 4;

front_end/panels/elements/stylePropertiesTreeOutline.css

@@ -8,7 +8,7 @@
   color: inherit;
 }
 
-.inactive-value:not(:hover) {
+.inactive-value:not(:hover,:focus,:focus-within) {
   text-decoration: line-through;
 }
 
@@ -298,5 +298,6 @@ devtools-icon.open-in-animations-panel {
 }
 
 .value :focus {
-  outline: 1px solid var(--sys-color-outline);
+  border-radius: var(--sys-size-2);
+  outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
 }

front_end/ui/components/tooltips/Tooltip.ts

@@ -89,6 +89,10 @@ export class Tooltip extends HTMLElement {
     this.#updateJslog();
   }
 
+  get anchor(): HTMLElement|null {
+    return this.#anchor;
+  }
+
   constructor(properties?: TooltipProperties) {
     super();
     if (properties) {
@@ -152,12 +156,12 @@ export class Tooltip extends HTMLElement {
     }, this.hoverDelay);
   };
 
-  hideTooltip = (event: MouseEvent|FocusEvent): void => {
+  hideTooltip = (event?: MouseEvent|FocusEvent): void => {
     if (this.#timeout) {
       window.clearTimeout(this.#timeout);
     }
     // Don't hide a rich tooltip when hovering over the tooltip itself.
-    if (this.variant === 'rich' &&
+    if (event && this.variant === 'rich' &&
         (event.relatedTarget === this || (event.relatedTarget as Element)?.parentElement === this)) {
       return;
     }