report: quick tab

lighthouse-core/lib/i18n/en-US.json

@@ -1435,6 +1435,22 @@
     "message": "Passed audits",
     "description": "Section heading shown above a list of audits that are passing. 'Passed' here refers to a passing grade. This section is collapsed by default, as the user should be focusing on the failed audits instead. Users can click this heading to reveal the list."
   },
+  "lighthouse-core/report/html/renderer/util.js | quickTabFirstAudit": {
+    "message": "Skip to first audit",
+    "description": "This label is shown to users who tab-focus to navigate the Lighthouse report. The first focus element on the page will show this text, and hitting enter will move the document's focus to the specified element."
+  },
+  "lighthouse-core/report/html/renderer/util.js | quickTabFirstAverageAudit": {
+    "message": "Skip to first average audit",
+    "description": "This label is shown to users who tab-focus to navigate the Lighthouse report. The first focus element on the page will show this text, and hitting enter will move the document's focus to the specified element."
+  },
+  "lighthouse-core/report/html/renderer/util.js | quickTabFirstCategory": {
+    "message": "Skip to first category",
+    "description": "This label is shown to users who tab-focus to navigate the Lighthouse report. The first focus element on the page will show this text, and hitting enter will move the document's focus to the specified element."
+  },
+  "lighthouse-core/report/html/renderer/util.js | quickTabFirstFailingAudit": {
+    "message": "Skip to first failing audit",
+    "description": "This label is shown to users who tab-focus to navigate the Lighthouse report. The first focus element on the page will show this text, and hitting enter will move the document's focus to the specified element."
+  },
   "lighthouse-core/report/html/renderer/util.js | snippetCollapseButtonLabel": {
     "message": "Collapse snippet",
     "description": "Label for button that only shows a few lines of the snippet when clicked"

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);
@@ -558,6 +559,58 @@ class ReportUIFeatures {
     }
   }
 
+  _getFirstInterestingElement() {
+    const rules = [
+      {
+        selector: '.lh-audit--fail summary',
+        label: Util.UIStrings.quickTabFirstFailingAudit,
+      },
+      {
+        selector: '.lh-audit--average summary',
+        label: Util.UIStrings.quickTabFirstAverageAudit,
+      },
+      {
+        selector: '.lh-audit--audit summary',
+        label: Util.UIStrings.quickTabFirstAudit,
+      },
+      {
+        selector: '.lh-category-header .lh-gauge__wrapper',
+        label: Util.UIStrings.quickTabFirstCategory,
+      },
+    ];
+
+    const firstValidRule = rules.find(({selector}) => {
+      const el = this._document.querySelector(selector);
+      return Boolean(el);
+    });
+
+    if (!firstValidRule) {
+      return null;
+    }
+
+    return {
+      element: this._dom.find(firstValidRule.selector, this._document),
+      label: firstValidRule.label,
+    };
+  }
+
+  /**
+   * Tab + Enter for quick jump document.activeElement to the first interesting element.
+   */
+  _setUpQuickTabFocus() {
+    const firstInterestingElement = this._getFirstInterestingElement();
+    if (!firstInterestingElement) return;
+    const {element, label} = firstInterestingElement;
+
+    const quickFocusEl = this._dom.find('.lh-a11y-quick-focus', this._document);
+    quickFocusEl.textContent = label;
+    quickFocusEl.classList.remove('disabled');
+    quickFocusEl.addEventListener('click', (e) => {
+      element.focus();
+      e.preventDefault();
+    });
+  }
+
   /**
    * Returns the html that recreates this report.
    * @return {string}

lighthouse-core/report/html/renderer/util.js

@@ -600,6 +600,18 @@ Util.UIStrings = {
 
   /** This label is for a checkbox above a table of items loaded by a web page. The checkbox is used to show or hide third-party (or "3rd-party") resources in the table, where "third-party resources" refers to items loaded by a web page from URLs that aren't controlled by the owner of the web page. */
   thirdPartyResourcesLabel: 'Show 3rd-party resources',
+
+  /** This label is shown to users who tab-focus to navigate the Lighthouse report. The first focus element on the page will show this text, and hitting enter will move the document's focus to the specified element. */
+  quickTabFirstFailingAudit: 'Skip to first failing audit',
+
+  /** This label is shown to users who tab-focus to navigate the Lighthouse report. The first focus element on the page will show this text, and hitting enter will move the document's focus to the specified element. */
+  quickTabFirstAverageAudit: 'Skip to first average audit',
+
+  /** This label is shown to users who tab-focus to navigate the Lighthouse report. The first focus element on the page will show this text, and hitting enter will move the document's focus to the specified element. */
+  quickTabFirstAudit: 'Skip to first audit',
+
+  /** This label is shown to users who tab-focus to navigate the Lighthouse report. The first focus element on the page will show this text, and hitting enter will move the document's focus to the specified element. */
+  quickTabFirstCategory: 'Skip to first category',
 };
 
 if (typeof module !== 'undefined' && module.exports) {

lighthouse-core/report/html/templates.html

@@ -361,8 +361,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"></a>
+
   <div class="lh-topbar">
     <!-- Flat Lighthouse logo.  -->
     <svg class="lh-topbar__logo" viewBox="0 0 192 192">

lighthouse-core/test/results/sample_v2.json

@@ -5051,6 +5051,10 @@
       "opportunityResourceColumnLabel": "Opportunity",
       "opportunitySavingsColumnLabel": "Estimated Savings",
       "passedAuditsGroupTitle": "Passed audits",
+      "quickTabFirstAudit": "Skip to first audit",
+      "quickTabFirstAverageAudit": "Skip to first average audit",
+      "quickTabFirstCategory": "Skip to first category",
+      "quickTabFirstFailingAudit": "Skip to first failing audit",
       "snippetCollapseButtonLabel": "Collapse snippet",
       "snippetExpandButtonLabel": "Expand snippet",
       "thirdPartyResourcesLabel": "Show 3rd-party resources",

proto/lighthouse-result.proto

@@ -359,6 +359,18 @@ message I18n {
 
     // This label is for a filter checkbox above a table of items
     string third_party_resources_label = 20;
+
+    // The first focus element on the page will show this text
+    string quick_tab_first_failing_audit = 21;
+
+    // The first focus element on the page will show this text
+    string quick_tab_first_average_audit = 22;
+
+    // The first focus element on the page will show this text
+    string quick_tab_first_audit = 23;
+
+    // The first focus element on the page will show this text
+    string quick_tab_first_category = 24;
   }
 
   // The message holding all formatted strings

proto/sample_v2_round_trip.json

@@ -3921,6 +3921,10 @@
             "opportunityResourceColumnLabel": "Opportunity",
             "opportunitySavingsColumnLabel": "Estimated Savings",
             "passedAuditsGroupTitle": "Passed audits",
+            "quickTabFirstAudit": "Skip to first audit",
+            "quickTabFirstAverageAudit": "Skip to first average audit",
+            "quickTabFirstCategory": "Skip to first category",
+            "quickTabFirstFailingAudit": "Skip to first failing audit",
             "snippetCollapseButtonLabel": "Collapse snippet",
             "snippetExpandButtonLabel": "Expand snippet",
             "thirdPartyResourcesLabel": "Show 3rd-party resources",