From 46fa4985800ab70d2917fe57be10b80ad32c7c08 Mon Sep 17 00:00:00 2001
From: Connor Clark <cjamcl@google.com>
Date: Mon, 10 Jun 2019 10:56:41 -0700
Subject: [PATCH 1/2] report: make tools menu focus-able

---
 lighthouse-core/report/html/templates.html | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/lighthouse-core/report/html/templates.html b/lighthouse-core/report/html/templates.html
index ffa2f896fd4c..2f9c323cf874 100644
--- a/lighthouse-core/report/html/templates.html
+++ b/lighthouse-core/report/html/templates.html
@@ -262,6 +262,14 @@
       height: var(--lh-tools-icon-size);
       cursor: pointer;
       margin-right: 5px;
+      /* Override default button styles. */
+      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>

From 831bfe7f078079a02129b02bf9922b0030305723 Mon Sep 17 00:00:00 2001
From: Connor Clark <cjamcl@google.com>
Date: Mon, 10 Jun 2019 13:46:41 -0700
Subject: [PATCH 2/2] comment

---
 lighthouse-core/report/html/templates.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lighthouse-core/report/html/templates.html b/lighthouse-core/report/html/templates.html
index 2f9c323cf874..2e6d9cc3238c 100644
--- a/lighthouse-core/report/html/templates.html
+++ b/lighthouse-core/report/html/templates.html
@@ -262,7 +262,7 @@
       height: var(--lh-tools-icon-size);
       cursor: pointer;
       margin-right: 5px;
-      /* Override default button styles. */
+      /* This is actually a button element, but we want to style it like a transparent div. */
       display: flex;
       background: none;
       color: inherit;