Improve the a11y of the 3-dots menu and the rest of the LH report

https://screencast.googleplex.com/cast/NjcyNjcxNjU5OTgyODQ4MHxiZDU0ZWM0Yy01OQ

Bug: 40272029
Change-Id: I6f125b6b9e4a6f691e8028fd9bcd11fefd77aa5d
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7261896
Reviewed-by: Connor Clark <cjamcl@chromium.org>
Auto-Submit: Danil Somsikov <dsv@chromium.org>
Commit-Queue: Danil Somsikov <dsv@chromium.org>

Author: danilsomsikov

front_end/panels/lighthouse/LighthousePanel.ts

@@ -104,6 +104,7 @@ export class LighthousePanel extends UI.Panel.Panel {
 
     this.renderToolbar();
     this.auditResultsElement = this.contentElement.createChild('div', 'lighthouse-results-container');
+    this.auditResultsElement.addEventListener('keydown', this.onKeyDown.bind(this));
     this.renderStartView();
 
     this.controller.recomputePageAuditability();
@@ -365,4 +366,13 @@ export class LighthousePanel extends UI.Panel.Panel {
     }
     return els;
   }
+
+  private onKeyDown(event: KeyboardEvent): void {
+    // The LHR's tool button is a toggle. When the user hits escape, the default behavior
+    // is to close the tool drawer. We want to prevent this behavior and instead let the
+    // LHR's tool button handle the event and close the tool's dropdown.
+    if (event.key === 'Escape' && this.auditResultsElement.querySelector('.lh-tools__button.lh-active')) {
+      event.handled = true;
+    }
+  }
 }

front_end/panels/lighthouse/lighthousePanel.css

@@ -19,9 +19,6 @@ button.view-trace {
   margin: 10px;
 }
 
-.lighthouse-results-container {
-  position: relative;
-}
 /** `window.opener` is null for windows opened from DevTools. This breaks
     the LH viewer app, so disable this feature. */
 
@@ -63,3 +60,49 @@ select.lighthouse-report {
 .lh-devtools .lh-element-screenshot__overlay {
   position: absolute;
 }
+
+.lighthouse-results-container {
+  position: relative;
+
+  :focus-visible {
+    outline: -webkit-focus-ring-color auto 1px;
+  }
+
+  .lh-tools__button {
+    height: var(--sys-size-9);
+    width: var(--sys-size-9);
+    min-width: var(--sys-size-9);
+
+    &:focus-visible {
+      border-radius: var(--sys-shape-corner-full);
+      outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
+    }
+
+    &.lh-active + .lh-tools__dropdown {
+      clip: rect(-8px, 204px, 270px, -10px);  /* stylelint-disable-line property-no-deprecated */
+    }
+  }
+
+  .lh-tools__dropdown {
+    padding: var(--sys-size-5) 0;
+    border-radius: var(--sys-shape-corner-small);
+    box-shadow: var(--sys-elevation-level3);
+    top: 24px;
+
+    &:hover a:focus {
+      background-color: transparent;
+    }
+
+    a {
+      height: var(--sys-size-11);
+      padding: 0 var(--sys-size-8);
+      white-space: nowrap;
+      align-items: center;
+
+      &::before {
+        content: none;
+      }
+    }
+  }
+
+}