chrome-devtools-frontend 1.0.1576915 → 1.0.1578486

package/front_end/panels/application/DeviceBoundSessionsView.ts

@@ -582,25 +582,27 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
         <devtools-report>
           <devtools-report-section-header role="heading" aria-level="2">${
         i18nString(UIStrings.sessionConfig)}</devtools-report-section-header>
-          <devtools-report-key>${i18nString(UIStrings.keySite)}</devtools-report-key>
-          <devtools-report-value>${key.site}</devtools-report-value>
-          <devtools-report-key>${i18nString(UIStrings.keyId)}</devtools-report-key>
-          <devtools-report-value>${key.id}</devtools-report-value>
-          <devtools-report-key>${i18nString(UIStrings.refreshUrl)}</devtools-report-key>
-          <devtools-report-value>${sessionAndEvents.session.refreshUrl}</devtools-report-value>
-          <devtools-report-key>${i18nString(UIStrings.expiryDate)}</devtools-report-key>
-          <devtools-report-value>${
-        new Date(sessionAndEvents.session.expiryDate * 1000).toLocaleString()}</devtools-report-value>
-          <devtools-report-key>${i18nString(UIStrings.cachedChallenge)}</devtools-report-key>
-          <devtools-report-value>${sessionAndEvents.session.cachedChallenge || ''}</devtools-report-value>
-          <devtools-report-key>${i18nString(UIStrings.allowedRefreshInitiators)}</devtools-report-key>
-          <devtools-report-value>${sessionAndEvents.session.allowedRefreshInitiators.join(', ')}</devtools-report-value>
+          ${renderKeyValue(i18nString(UIStrings.keySite), key.site, 'dbsc-site')}
+          ${renderKeyValue(i18nString(UIStrings.keyId), key.id, 'dbsc-id')}
+          ${renderKeyValue(i18nString(UIStrings.refreshUrl), sessionAndEvents.session.refreshUrl, 'dbsc-refresh-url')}
+          ${
+        renderKeyValue(
+            i18nString(UIStrings.expiryDate), new Date(sessionAndEvents.session.expiryDate * 1000).toLocaleString(),
+            'dbsc-expiry-date')}
+          ${
+        renderKeyValue(
+            i18nString(UIStrings.cachedChallenge), sessionAndEvents.session.cachedChallenge || '',
+            'dbsc-cached-challenge')}
+          ${
+        renderKeyValue(
+            i18nString(UIStrings.allowedRefreshInitiators),
+            sessionAndEvents.session.allowedRefreshInitiators.join(', '), 'dbsc-allowed-refresh-initiators')}
           <devtools-report-section-header role="heading" aria-level="2">${
         i18nString(UIStrings.scope)}</devtools-report-section-header>
-          <devtools-report-key>${i18nString(UIStrings.origin)}</devtools-report-key>
-          <devtools-report-value>${inclusionRules.origin}</devtools-report-value>
-          <devtools-report-key>${i18nString(UIStrings.includeSite)}</devtools-report-key>
-          <devtools-report-value>${boolToString(inclusionRules.includeSite)}</devtools-report-value>
+          ${renderKeyValue(i18nString(UIStrings.origin), inclusionRules.origin, 'dbsc-origin')}
+          ${
+        renderKeyValue(
+            i18nString(UIStrings.includeSite), boolToString(inclusionRules.includeSite), 'dbsc-include-site')}
         </devtools-report>
         ${
         inclusionRules.urlRules.length > 0 ? html`
@@ -708,62 +710,78 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
   const creationEventDetails =
       selectedEvent?.creationEventDetails &&
       html`
-          <devtools-report-key>${i18nString(UIStrings.fetchResult)}</devtools-report-key>
-          <devtools-report-value>${
-          fetchResultToString(selectedEvent.creationEventDetails.fetchResult)}</devtools-report-value>
-            ${selectedEvent.creationEventDetails.newSession && html`
-              <devtools-report-key>${i18nString(UIStrings.updatedSessionConfig)}</devtools-report-key>
-              <devtools-report-value>${i18nString(UIStrings.yes)}</devtools-report-value>
+            ${
+          renderKeyValue(
+              i18nString(UIStrings.fetchResult), fetchResultToString(selectedEvent.creationEventDetails.fetchResult),
+              'dbsc-creation-fetch-result')}
+            ${
+          selectedEvent.creationEventDetails.newSession &&
+          html`
+             ${
+              renderKeyValue(
+                  i18nString(UIStrings.updatedSessionConfig), i18nString(UIStrings.yes),
+                  'dbsc-creation-updated-session-config')}
             `}
           `;
   const refreshEventDetails =
       selectedEvent?.refreshEventDetails &&
       html`
-          <devtools-report-key>${i18nString(UIStrings.refreshResult)}</devtools-report-key>
-          <devtools-report-value>${
-          refreshResultToString(selectedEvent.refreshEventDetails.refreshResult)}</devtools-report-value>
-          <devtools-report-key>${i18nString(UIStrings.causedAnyRequestDeferrals)}</devtools-report-key>
-          <devtools-report-value>${
-          boolToString(!selectedEvent.refreshEventDetails.wasFullyProactiveRefresh)}</devtools-report-value>
+          ${
+          renderKeyValue(
+              i18nString(UIStrings.refreshResult),
+              refreshResultToString(selectedEvent.refreshEventDetails.refreshResult), 'dbsc-refresh-result')}
+          ${
+          renderKeyValue(
+              i18nString(UIStrings.causedAnyRequestDeferrals),
+              boolToString(!selectedEvent.refreshEventDetails.wasFullyProactiveRefresh),
+              'dbsc-refresh-was-fully-proactive-refresh')}
             ${
           selectedEvent.refreshEventDetails.fetchResult &&
           html`
-              <devtools-report-key>${i18nString(UIStrings.fetchResult)}</devtools-report-key>
-              <devtools-report-value>${
-              fetchResultToString(selectedEvent.refreshEventDetails.fetchResult)}</devtools-report-value>
+              ${
+              renderKeyValue(
+                  i18nString(UIStrings.fetchResult), fetchResultToString(selectedEvent.refreshEventDetails.fetchResult),
+                  'dbsc-refresh-fetch-result')}
             `}
-            ${selectedEvent.refreshEventDetails.newSession && html`
-              <devtools-report-key>${i18nString(UIStrings.updatedSessionConfig)}</devtools-report-key>
-              <devtools-report-value>${i18nString(UIStrings.yes)}</devtools-report-value>
+            ${
+          selectedEvent.refreshEventDetails.newSession &&
+          html`
+              ${
+              renderKeyValue(
+                  i18nString(UIStrings.updatedSessionConfig), i18nString(UIStrings.yes),
+                  'dbsc-refresh-updated-session-config')}
             `}
           `;
   const challengeEventDetails =
       selectedEvent?.challengeEventDetails &&
       html`
-          <devtools-report-key>${i18nString(UIStrings.challengeResult)}</devtools-report-key>
-          <devtools-report-value>${
-          challengeResultToString(selectedEvent.challengeEventDetails.challengeResult)}</devtools-report-value>
-          <devtools-report-key>${i18nString(UIStrings.challenge)}</devtools-report-key>
-          <devtools-report-value>${selectedEvent.challengeEventDetails.challenge}</devtools-report-value>
+          ${
+          renderKeyValue(
+              i18nString(UIStrings.challengeResult),
+              challengeResultToString(selectedEvent.challengeEventDetails.challengeResult), 'dbsc-challenge-result')}
+          ${
+          renderKeyValue(
+              i18nString(UIStrings.challenge), selectedEvent.challengeEventDetails.challenge, 'dbsc-challenge')}
           `;
   const terminationEventDetails =
       selectedEvent?.terminationEventDetails &&
       html`
-          <devtools-report-key>${i18nString(UIStrings.deletionReason)}</devtools-report-key>
-          <devtools-report-value>${
-          deletionReasonToString(selectedEvent.terminationEventDetails.deletionReason)}</devtools-report-value>
+          ${
+          renderKeyValue(
+              i18nString(UIStrings.deletionReason),
+              deletionReasonToString(selectedEvent.terminationEventDetails.deletionReason), 'dbsc-termination-reason')}
           `;
   const eventDetailsContentHtml = selectedEvent ?
       html`
         <devtools-report>
-          <devtools-report-key>${i18nString(UIStrings.keySite)}</devtools-report-key>
-          <devtools-report-value>${selectedEvent.site}</devtools-report-value>
-          <devtools-report-key>${i18nString(UIStrings.sessionId)}</devtools-report-key>
-          <devtools-report-value>${selectedEvent.sessionId}</devtools-report-value>
-          <devtools-report-key>${i18nString(UIStrings.type)}</devtools-report-key>
-          <devtools-report-value>${getEventTypeString(selectedEvent)}</devtools-report-value>
-          <devtools-report-key>${i18nString(UIStrings.eventResult)}</devtools-report-key>
-          <devtools-report-value>${succeededToString(selectedEvent.succeeded)}</devtools-report-value>
+          ${renderKeyValue(i18nString(UIStrings.keySite), selectedEvent.site, 'dbsc-event-site')}
+          ${
+          selectedEvent.sessionId &&
+          renderKeyValue(i18nString(UIStrings.sessionId), selectedEvent.sessionId, 'dbsc-event-session-id')}
+          ${renderKeyValue(i18nString(UIStrings.type), getEventTypeString(selectedEvent), 'dbsc-event-type')}
+          ${
+          renderKeyValue(
+              i18nString(UIStrings.eventResult), succeededToString(selectedEvent.succeeded), 'dbsc-event-result')}
           ${creationEventDetails}
           ${refreshEventDetails}
           ${challengeEventDetails}
@@ -870,6 +888,13 @@ export class DeviceBoundSessionsView extends UI.Widget.VBox {
   }
 }
 
+function renderKeyValue(key: string, value: string, id: string): TemplateResult {
+  return html`
+    <devtools-report-key id=${id}>${key}</devtools-report-key>
+    <devtools-report-value role="text" aria-describedby=${id}>${value}</devtools-report-value>
+  `;
+}
+
 function ruleTypeToString(ruleType: Protocol.Network.DeviceBoundSessionUrlRuleRuleType): string {
   switch (ruleType) {
     case Protocol.Network.DeviceBoundSessionUrlRuleRuleType.Exclude:

package/front_end/panels/application/ServiceWorkerUpdateCycleView.ts

@@ -180,7 +180,6 @@ export class ServiceWorkerUpdateCycleView {
       const tr = this.tableElement.createChild('tr', 'service-worker-update-timeline');
       tr.setAttribute('jslog', `${VisualLogging.treeItem('update-timeline').track({
                         click: true,
-                        resize: true,
                         keydown: 'ArrowLeft|ArrowRight|ArrowUp|ArrowDown|Enter|Space',
                       })}`);
       this.rows.push(tr);

package/front_end/panels/application/components/BackForwardCacheView.ts

@@ -353,7 +353,7 @@ function renderFramesPerReason(frames: string[]|undefined): LitTemplate {
   }
   const rows = [html`<div>${i18nString(UIStrings.framesPerIssue, {n: frames.length})}</div>`];
   rows.push(...frames.map(url => html`<div class="text-ellipsis" title=${url}
-    jslog=${VisualLogging.treeItem().track({resize: true})}>${url}</div>`));
+    jslog=${VisualLogging.treeItem()}>${url}</div>`));
   return html`
       <div class="details-list"
       jslog=${VisualLogging.tree('frames-per-issue')}>
@@ -361,9 +361,7 @@ function renderFramesPerReason(frames: string[]|undefined): LitTemplate {
     rows,
     title: i18nString(UIStrings.framesPerIssue, {n: frames.length}),
   } as ExpandableList.ExpandableList.ExpandableListData}
-        jslog=${VisualLogging.treeItem().track({
-    resize: true
-  })}></devtools-expandable-list>
+        jslog=${VisualLogging.treeItem()}></devtools-expandable-list>
       </div>
     `;
 }

package/front_end/panels/autofill/AutofillView.ts

@@ -144,7 +144,7 @@ const DEFAULT_VIEW: View = (input: ViewInput, _output: ViewOutput, target: HTMLE
       // clang-format off
       return html`
         <span class=${spanClasses}
-              jslog=${VisualLogging.item('matched-address-item').track({hover: true, resize: true})}
+              jslog=${VisualLogging.item('matched-address-item').track({hover: true})}
               @mouseenter=${() => input.onHighlightMatchesInAddress(startIndex)}
               @mouseleave=${input.onClearHighlightedMatches}>
           ${templateLines}

package/front_end/panels/browser_debugger/XHRBreakpointsSidebarPane.ts

@@ -238,7 +238,6 @@ export class XHRBreakpointsSidebarPane extends UI.Widget.VBox implements UI.Cont
     listItemElement.setAttribute('jslog', `${VisualLogging.item().track({
                                    click: true,
                                    dblclick: true,
-                                   resize: true,
                                    keydown: 'ArrowUp|ArrowDown|PageUp|PageDown|Enter|Space',
                                  })}`);
     return listItemElement;

package/front_end/panels/common/GeminiRebrandPromoDialog.ts

@@ -77,6 +77,8 @@ export const DEFAULT_VIEW: View = (input, _output, target): void => {
         <div class="title">Gemini 3 Flash in DevTools</div>
         <div class="close-button">
           <devtools-button
+            aria-hidden="true"
+            tabindex="-1"
             .iconName=${'cross'}
             .variant=${Buttons.Button.Variant.ICON}
             .size=${Buttons.Button.Size.REGULAR}

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -1457,7 +1457,6 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     this.elementInternal.className = 'console-message-wrapper';
     this.elementInternal.setAttribute('jslog', `${VisualLogging.item('console-message').track({
                                         click: true,
-                                        resize: true,
                                         keydown: 'ArrowUp|ArrowDown|ArrowLeft|ArrowRight|Enter|Space|Home|End',
                                       })}`);
     this.elementInternal.removeChildren();

package/front_end/panels/css_overview/cssOverviewCompletedView.css

@@ -86,6 +86,11 @@
     height: 25px;
     border-radius: 3px;
     margin-right: 16px;
+
+    &:focus-visible {
+      outline: 2px solid var(--sys-color-state-focus-ring);
+      outline-offset: 2px;
+    }
   }
 
   .block-title {

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -680,7 +680,6 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     this.listItemElement.setAttribute(
         'jslog', `${VisualLogging.treeItem().parent('elementsTreeOutline').track({
           keydown: 'ArrowUp|ArrowDown|ArrowLeft|ArrowRight|Backspace|Delete|Enter|Space|Home|End',
-          resize: true,
           drag: true,
           click: true,
         })}`);

package/front_end/panels/elements/LayoutPane.ts

@@ -228,27 +228,26 @@ const DEFAULT_VIEW: View = (input, output, target) => {
       event.preventDefault();
     }
   };
-  // clang-format off
   const renderElement = (element: LayoutElement): Lit.LitTemplate => html`<div
           class="element"
-          jslog=${VisualLogging.item().track({resize: true})}>
+          jslog=${VisualLogging.item()}>
         <devtools-checkbox
           data-element="true"
           class="checkbox-label"
           .checked=${element.enabled}
           @change=${(e: Event) => input.onElementToggle(element, e)}
-          jslog=${VisualLogging.toggle().track({click: true, resize: true })}>
+          jslog=${VisualLogging.toggle().track({
+    click: true
+  })}>
           <span
               class="node-text-container"
               data-label="true"
               @mouseenter=${(e: MouseEvent) => input.onMouseEnter(element, e)}
               @mouseleave=${(e: MouseEvent) => input.onMouseLeave(element, e)}>
             <devtools-node-text .data=${{
-                nodeId: element.domId,
-                nodeTitle: element.name,
-                nodeClasses: element.domClasses
-              }}>
-            </devtools-node-text>
+    nodeId: element.domId, nodeTitle: element.name, nodeClasses: element.domClasses,
+  }
+  }></devtools-node-text>
           </span>
         </devtools-checkbox>
         <label

package/front_end/panels/elements/components/ElementsBreadcrumbs.ts

@@ -303,7 +303,7 @@ export class ElementsBreadcrumbs extends HTMLElement {
                   data-crumb="true"
                 >
                   <a href="#" draggable=false class="crumb-link"
-                    jslog=${VisualLogging.item().track({click:true, resize:true})}
+                    jslog=${VisualLogging.item().track({click:true})}
                     @click=${this.#onCrumbClick(crumb.node)}
                     @mousemove=${this.#onCrumbMouseMove(crumb.node)}
                     @mouseleave=${this.#onCrumbMouseLeave(crumb.node)}

package/front_end/panels/elements/components/StylePropertyEditor.ts

@@ -194,8 +194,7 @@ export class StylePropertyEditor extends HTMLElement {
     return html`
       <button title=${title}
               class=${classes}
-              jslog=${
-        VisualLogging.item().track({click: true, resize: true}).context(`${propertyName}-${propertyValue}`)}
+              jslog=${VisualLogging.item().track({click: true}).context(`${propertyName}-${propertyValue}`)}
               @click=${() => this.#onButtonClick(propertyName, propertyValue, selected)}>
         <devtools-icon style=${transform} name=${iconInfo.iconName}>
         </devtools-icon>

package/front_end/panels/lighthouse/LighthouseReportRenderer.ts

@@ -197,7 +197,7 @@ export class LighthouseReportRenderer {
         continue;
       }
 
-      auditEl.setAttribute('jslog', `${VisualLogging.item(`lighthouse.audit.${id}`).track({resize: true})}`);
+      auditEl.setAttribute('jslog', `${VisualLogging.item(`lighthouse.audit.${id}`)}`);
 
       let state: string|undefined;
       for (const className of auditEl.classList) {

package/front_end/panels/linear_memory_inspector/components/LinearMemoryValueInterpreter.ts

@@ -60,7 +60,7 @@ function renderEndiannessSetting(
         data-endianness="true" @change=${(e: Event) => onEndiannessChanged((e.target as HTMLSelectElement).value as Endianness)}>
         ${[Endianness.LITTLE, Endianness.BIG].map(endianness => {
             return html`<option value=${endianness} .selected=${currentEndiannes === endianness}
-            jslog=${VisualLogging.item(Platform.StringUtilities.toKebabCase(endianness)).track({click: true, resize: true})}>${
+            jslog=${VisualLogging.item(Platform.StringUtilities.toKebabCase(endianness)).track({click: true})}>${
                 i18n.i18n.lockedString(endianness)}</option>`;
         })}
       </select>

package/front_end/panels/linear_memory_inspector/components/ValueInterpreterDisplay.ts

@@ -104,7 +104,7 @@ export const DEFAULT_VIEW: View = (input: ViewInput, _output: undefined, target:
                     ${VALUE_TYPE_MODE_LIST.filter(x => isValidMode(type, x)).map(mode => {
                       return html`
                         <option value=${mode} .selected=${input.valueTypeModes.get(type) === mode}
-                                jslog=${VisualLogging.item(mode).track({click: true, resize: true})}>${
+                                jslog=${VisualLogging.item(mode).track({click: true})}>${
                           i18n.i18n.lockedString(mode)}
                         </option>`;
                     })}

package/front_end/panels/media/PlayerListView.ts

@@ -73,7 +73,7 @@ const DEFAULT_VIEW: View = (input, _output, target) => {
           })}
                @click=${() => input.onPlayerClick(player.playerID)}
                @contextmenu=${(e: Event) => input.onPlayerContextMenu(player.playerID, e)}
-               jslog=${VisualLogging.item('player').track({click: true, resize: true})}>
+               jslog=${VisualLogging.item('player').track({click: true})}>
             <div class="player-entry-status-icon vbox">
               <div class="player-entry-status-icon-centering">
                 <devtools-icon name=${player.iconName}></devtools-icon>

package/front_end/panels/network/NetworkLogViewColumns.ts

@@ -409,8 +409,7 @@ export class NetworkLogViewColumns {
 
   private createWaterfallHeader(): void {
     this.waterfallHeaderElement = this.waterfallColumn.contentElement.createChild('div', 'network-waterfall-header');
-    this.waterfallHeaderElement.setAttribute(
-        'jslog', `${VisualLogging.tableHeader('waterfall').track({click: true, resize: true})}`);
+    this.waterfallHeaderElement.setAttribute('jslog', `${VisualLogging.tableHeader('waterfall').track({click: true})}`);
     this.waterfallHeaderElement.addEventListener('click', waterfallHeaderClicked.bind(this));
     this.waterfallHeaderElement.addEventListener('contextmenu', event => {
       const contextMenu = new UI.ContextMenu.ContextMenu(event);

package/front_end/panels/network/components/RequestHeaderSection.ts

@@ -59,7 +59,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
     ${headers.map(header => html`
       <devtools-header-section-row
         .data=${{ header }}
-        jslog=${VisualLogging.item('request-header').track({resize: true})}
+        jslog=${VisualLogging.item('request-header')}
       ></devtools-header-section-row>
     `)}
   `, target);

package/front_end/panels/protocol_monitor/JSONEditor.ts

@@ -990,7 +990,7 @@ function renderTargetSelectorRow(input: ViewInput): Lit.TemplateResult|undefined
             jslog=${VisualLogging.dropDown('target-selector').track({change: true})}
             @change=${input.onTargetSelected}>
       ${input.targets.map(target => html`
-        <option jslog=${VisualLogging.item('target').track({click: true, resize: true})}
+        <option jslog=${VisualLogging.item('target').track({click: true})}
                 value=${target.id()} ?selected=${target.id() === input.targetId}>
           ${target.name()} (${target.inspectedURL()})
         </option>`)}

package/front_end/panels/recorder/components/RecordingListView.ts

@@ -140,7 +140,7 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
                   @keydown=${(event: Event) => onKeyDown(recording.storageName, event)}
                   @click=${(event: Event) => onOpenClick(recording.storageName, event)}
                   jslog=${VisualLogging.item()
-                    .track({ click: true, resize: true })
+                    .track({ click: true })
                     .context('recording')}>
                   <div class="icon">
                     <devtools-icon name="flow">

package/front_end/panels/recorder/components/RecordingView.ts

@@ -140,6 +140,14 @@ const UIStrings = {
    * @description The title of the button that open current recording in Performance panel.
    */
   performancePanel: 'Performance panel',
+  /**
+   * @description The announcement when the code sidebar is opened.
+   */
+  codeSidebarOpened: 'Code sidebar opened',
+  /**
+   * @description The announcement when the code sidebar is closed.
+   */
+  codeSidebarClosed: 'Code sidebar closed'
 } as const;
 const str_ = i18n.i18n.registerUIStrings(
     'panels/recorder/components/RecordingView.ts',
@@ -1189,6 +1197,13 @@ export class RecordingView extends UI.Widget.Widget {
 
   showCodeToggle = (): void => {
     this.#showCodeView = !this.#showCodeView;
+
+    if (this.#showCodeView) {
+      UI.ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.codeSidebarOpened));
+    } else {
+      UI.ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.codeSidebarClosed));
+    }
+
     void this.#convertToCode();
   };
 

package/front_end/panels/recorder/components/StepEditor.ts

@@ -646,7 +646,7 @@ export class StepEditor extends LitElement {
   #renderTypeRow(editable: boolean): Lit.TemplateResult {
     this.#renderedAttributes.add('type');
     // clang-format off
-    return html`<div class="row attribute" data-attribute="type" jslog=${VisualLogging.treeItem('type').track({resize: true})}>
+    return html`<div class="row attribute" data-attribute="type" jslog=${VisualLogging.treeItem('type')}>
       <div id="type">type<span class="separator">:</span></div>
       <devtools-suggestion-input
         aria-labelledby="type"
@@ -667,7 +667,7 @@ export class StepEditor extends LitElement {
       return;
     }
     // clang-format off
-    return html`<div class="row attribute" data-attribute=${attribute} jslog=${VisualLogging.treeItem(Platform.StringUtilities.toKebabCase(attribute)).track({resize: true})}>
+    return html`<div class="row attribute" data-attribute=${attribute} jslog=${VisualLogging.treeItem(Platform.StringUtilities.toKebabCase(attribute))}>
       <div id=${attribute}>${attribute}<span class="separator">:</span></div>
       <devtools-suggestion-input
         .disabled=${this.disabled}
@@ -706,7 +706,7 @@ export class StepEditor extends LitElement {
     }
     // clang-format off
     return html`
-      <div class="attribute" data-attribute="frame" jslog=${VisualLogging.treeItem('frame').track({resize: true})}>
+      <div class="attribute" data-attribute="frame" jslog=${VisualLogging.treeItem('frame')}>
         <div class="row">
           <div id="frame">frame<span class="separator">:</span></div>
           ${this.#renderDeleteButton('frame')}

package/front_end/panels/settings/KeybindsSettingsTab.ts

@@ -344,8 +344,7 @@ export class ShortcutListItem {
     this.settingsTab = settingsTab;
     this.item = item;
     this.element = document.createElement('div');
-    this.element.setAttribute(
-        'jslog', `${VisualLogging.item().context(item.id()).track({keydown: 'Escape', resize: true})}`);
+    this.element.setAttribute('jslog', `${VisualLogging.item().context(item.id()).track({keydown: 'Escape'})}`);
     this.editedShortcuts = new Map();
     this.shortcutInputs = new Map();
     this.shortcuts = UI.ShortcutRegistry.ShortcutRegistry.instance().shortcutsForAction(item.id());

package/front_end/panels/settings/keybindsSettingsTab.css

@@ -166,3 +166,60 @@ button.text-button {
   min-height: fit-content;
   margin-top: 10px;
 }
+
+@media (forced-colors: active) {
+  /* Keyboard focus on wrapper element (shortcut items) */
+  .keybinds-list-item-wrapper {
+    &:focus,
+    &:focus-visible {
+      background-color: Highlight !important; /* stylelint-disable-line declaration-no-important */
+      forced-color-adjust: none;
+
+      & .keybinds-list-text,
+      & .keybinds-action-name {
+        color: HighlightText !important; /* stylelint-disable-line declaration-no-important */
+      }
+
+      & .keybinds-key {
+        background: HighlightText;
+        color: Highlight;
+      }
+    }
+
+    /* Hover state (shortcut items) */
+    &:has(.keybinds-list-item:hover) {
+      background-color: Highlight !important; /* stylelint-disable-line declaration-no-important */
+      forced-color-adjust: none;
+
+      & .keybinds-list-text {
+        color: HighlightText !important; /* stylelint-disable-line declaration-no-important */
+      }
+
+      & .keybinds-key {
+        background: HighlightText;
+        color: Highlight;
+      }
+    }
+  }
+
+  /* Editing state */
+  .keybinds-list-item.keybinds-editing {
+    background-color: Highlight !important; /* stylelint-disable-line declaration-no-important */
+    forced-color-adjust: none;
+
+    & .keybinds-list-text {
+      color: HighlightText !important; /* stylelint-disable-line declaration-no-important */
+    }
+  }
+
+  /* Category headers (e.g., "Background Services", "Debugger") */
+  .keybinds-category-header {
+    &:hover,
+    &:focus,
+    &:focus-visible {
+      background-color: Highlight !important; /* stylelint-disable-line declaration-no-important */
+      color: HighlightText !important; /* stylelint-disable-line declaration-no-important */
+      forced-color-adjust: none;
+    }
+  }
+}