report: quick tab

lighthouse-core/report/html/renderer/report-ui-features.js

@@ -84,6 +84,7 @@ class ReportUIFeatures {
     this._setupToolsButton();
     this._setupThirdPartyFilter();
     this._setUpCollapseDetailsAfterPrinting();
+    this._setUpQuickTabFocus();
     this._resetUIState();
     this._document.addEventListener('keyup', this.onKeyUp);
     this._document.addEventListener('copy', this.onCopy);
@@ -559,6 +560,40 @@ class ReportUIFeatures {
     }
   }
 
+  /**
+   * Tab + Enter for quick jump document.activeElement to the first interesting element.
+   */
+  _setUpQuickTabFocus() {
+    const firstContentSelectors = [
+      {
+        selector: '.lh-audit--fail summary',
+        label: 'Jump to first failing audit.',
+      },
+      {
+        selector: '.lh-audit--average summary',
+        label: 'Jump to first average audit.',
+      },
+      {
+        selector: '.lh-audit--audit summary',
+        label: 'Jump to first audit.',
+      },
+    ];
+
+    const {selector, label} = firstContentSelectors.find(({selector}) => {
+      const el = this._document.querySelector(selector);
+      return Boolean(el && el instanceof HTMLElement);
+    }) || {selector: '.lh-category-header .lh-gauge__wrapper', label: 'Jump to first category.'};
+
+    const startOfContentEl = this._dom.find(selector, this._document);
+    const quickFocusEl = this._dom.find('.lh-a11y-quick-focus', this._document);
+    quickFocusEl.innerText = label;
+    quickFocusEl.classList.remove('disabled');
+    quickFocusEl.addEventListener('click', (e) => {
+      startOfContentEl.focus();
+      e.preventDefault();
+    });
+  }
+
   /**
    * Returns the html that recreates this report.
    * @return {string}

lighthouse-core/report/html/templates.html

@@ -352,8 +352,32 @@
         margin-left: 0;
       }
     }
+
+    .lh-a11y-quick-focus {
+      background-color: var(--color-blue);
+      color: var(--color-white);
+      padding: 20px;
+      clip: rect(1px, 1px, 1px, 1px);
+      margin: 0;
+      height: 1px;
+      width: 1px;
+      overflow: hidden;
+      position: absolute;
+    }
+    .lh-a11y-quick-focus.disabled {
+      visibility: hidden;
+    }
+    .lh-a11y-quick-focus:focus {
+      clip: auto;
+      height: auto;
+      width: auto;
+      z-index: 10000; /* lol */
+    }
   </style>
 
+  <!-- This is disabled by default. Enabled in ReportUIFeatures. -->
+  <a href="#" class="lh-a11y-quick-focus disabled" tabindex="1">asd</a>
+
   <div class="lh-topbar">
     <!-- Flat Lighthouse logo.  -->
     <svg class="lh-topbar__logo" viewBox="0 0 192 192">