report: make tools menu focus-able (#9169)

lighthouse-core/report/html/templates.html

@@ -262,6 +262,14 @@
       height: var(--lh-tools-icon-size);
       cursor: pointer;
       margin-right: 5px;
+      /* This is actually a button element, but we want to style it like a transparent div. */
+      display: flex;
+      background: none;
+      color: inherit;
+      border: none;
+      padding: 0;
+      font: inherit;
+      outline: inherit;
     }
     /*
       Some features in the tools dropdown menu don't work in the DevTools
@@ -278,13 +286,10 @@
     .dark .lh-tools__button svg {
       filter: invert(1);
     }
-    .lh-tools__button:focus,
-    .lh-tools__button.active {
-      outline: none;
-    }
     .lh-tools__button.active + .lh-tools__dropdown {
       opacity: 1;
       clip: rect(-1px, 187px, 242px, -3px);
+      visibility: visible;
     }
     .lh-tools__dropdown {
       position: absolute;
@@ -298,6 +303,7 @@
       box-shadow: 1px 1px 3px #ccc;
       min-width: 125px;
       clip: rect(0, 164px, 0, 0);
+      visibility: hidden;
       opacity: 0;
       transition: all 200ms cubic-bezier(0,0,0.2,1);
     }
@@ -366,12 +372,12 @@
     <a href="" class="lh-topbar__url" target="_blank" rel="noopener"></a>
 
     <div class="lh-tools">
-      <div class="report-icon report-icon--share lh-tools__button" title="Export report">
+      <button class="report-icon report-icon--share lh-tools__button" title="Export report">
         <svg width="100%" height="100%" viewBox="0 0 24 24">
             <path d="M0 0h24v24H0z" fill="none"/>
             <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
         </svg>
-      </div>
+      </button>
       <div class="lh-tools__dropdown">
          <!-- TODO(i18n): localize tools dropdown -->
         <a href="#" class="report-icon report-icon--print" data-action="print-summary">Print Summary</a>