Repository: GoogleChrome/lighthouse
Pull request #8844 (2019-05-04 00:15:02)

report: metric toggle without JS
Because importing report-features into PSI is a pain

and because we don't need JS :P 

patrickhulce: oh and tests need a bit of love :)

Patch:
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index bcc51735a..7b4d425a0 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -81,7 +81,7 @@ yarn run update:sample-artifacts ScriptElements # update just one artifact
 yarn run update:sample-json # update sample LHR based on sample artifacts
 ```
 
-When updating all artifacts, usually you'll need to revert changes to the `*.devtoolslog.json` and `*.trace.json` files and manually review changes to `artifacts.json` to make sure they are related to your work.
+When updating artifacts, usually you'll need to revert changes to the `*.devtoolslog.json` and `*.trace.json` files and manually review changes to `artifacts.json` to make sure they are related to your work.
 
 ## Tracking Errors
 
diff --git a/lighthouse-core/report/html/renderer/performance-category-renderer.js b/lighthouse-core/report/html/renderer/performance-category-renderer.js
index 05115ee48..0575015c0 100644
--- a/lighthouse-core/report/html/renderer/performance-category-renderer.js
+++ b/lighthouse-core/report/html/renderer/performance-category-renderer.js
@@ -127,10 +127,9 @@ class PerformanceCategoryRenderer extends CategoryRenderer {
     const metricAuditsEl = this.renderAuditGroup(groups.metrics);
 
     // Metric descriptions toggle.
-    const auditGroupHeader = this.dom.find('.lh-audit-group__header', metricAuditsEl);
     const toggleTmpl = this.dom.cloneTemplate('#tmpl-lh-metrics-toggle', this.templateContext);
     const toggleEl = this.dom.find('.lh-metrics-toggle', toggleTmpl);
-    auditGroupHeader.appendChild(toggleEl);
+    metricAuditsEl.prepend(...toggleEl.childNodes);
 
     const keyMetrics = metricAudits.filter(a => a.weight >= 3);
     const otherMetrics = metricAudits.filter(a => a.weight < 3);
diff --git a/lighthouse-core/report/html/renderer/report-ui-features.js b/lighthouse-core/report/html/renderer/report-ui-features.js
index bc252bccf..4144966f5 100644
--- a/lighthouse-core/report/html/renderer/report-ui-features.js
+++ b/lighthouse-core/report/html/renderer/report-ui-features.js
@@ -58,10 +58,6 @@ class ReportUIFeatures {
     this.stickyHeaderEl; // eslint-disable-line no-unused-expressions
     /** @type {HTMLElement} */
     this.highlightEl; // eslint-disable-line no-unused-expressions
-    /** @type {HTMLInputElement} */
-    this.metricDescriptionToggleEl; // eslint-disable-line no-unused-expressions
-    /** @type {HTMLElement} */
-    this.metricAuditGroup; // eslint-disable-line no-unused-expressions
 
     this.onMediaQueryChange = this.onMediaQueryChange.bind(this);
     this.onCopy = this.onCopy.bind(this);
@@ -74,7 +70,6 @@ class ReportUIFeatures {
     this.expandAllDetails = this.expandAllDetails.bind(this);
     this._toggleDarkTheme = this._toggleDarkTheme.bind(this);
     this._updateStickyHeaderOnScroll = this._updateStickyHeaderOnScroll.bind(this);
-    this._toggleMetricDescription = this._toggleMetricDescription.bind(this);
   }
 
   /**
@@ -97,7 +92,6 @@ class ReportUIFeatures {
     this._document.addEventListener('copy', this.onCopy);
     this._document.addEventListener('scroll', this._updateStickyHeaderOnScroll);
     window.addEventListener('resize', this._updateStickyHeaderOnScroll);
-    this._setupMetricDescriptionToggleElements();
     const topbarLogo = this._dom.find('.lh-topbar__logo', this._document);
     topbarLogo.addEventListener('click', this._toggleDarkTheme);
   }
@@ -260,26 +254,6 @@ class ReportUIFeatures {
     this._copyAttempt = false;
   }
 
-  _setupMetricDescriptionToggleElements() {
-    const metricDescriptionToggleEl = this._document.querySelector('.lh-metrics-toggle__input');
-    // No metrics if performance category wasn't run.
-    if (!metricDescriptionToggleEl) return;
-
-    this.metricDescriptionToggleEl = /** @type {HTMLInputElement} */ (metricDescriptionToggleEl);
-    this.metricAuditGroup = this._dom.find('.lh-audit-group--metrics', this._document);
-    this.metricDescriptionToggleEl.addEventListener('input', this._toggleMetricDescription);
-    this.metricAuditGroup.addEventListener('click', e => {
-      const el = /** @type {HTMLElement} */ (e.target);
-      if (el.closest('.lh-metric__title')) this.metricDescriptionToggleEl.click();
-    });
-  }
-
-  _toggleMetricDescription() {
-    this.metricDescriptionToggleEl.blur();
-    const show = this.metricDescriptionToggleEl.checked;
-    this.metricAuditGroup.classList.toggle('lh-audit-group--metrics__show-descriptions', show);
-  }
-
   /**
    * Copies the report JSON to the clipboard (if supported by the browser).
    */
diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css
index 2522e0e23..310b00fac 100644
--- a/lighthouse-core/report/html/report-styles.css
+++ b/lighthouse-core/report/html/report-styles.css
@@ -602,30 +602,36 @@
   color: var(--secondary-text-color);
   padding: var(--expandable-padding);
 }
-.lh-audit-group--metrics__show-descriptions .lh-metric__description {
-  display: block;
-}
 
 .lh-metric__value {
   white-space: nowrap; /* No wrapping between metric value and the icon */
   font-weight: 500;
 }
 
-.lh-metrics-toggle {
-  position: relative;
+/* No-JS toggle switch */
+/* Keep this selector sync'd w/ `magicSelector` in report-ui-features-test.js */
+ .lh-metrics-toggle__input:checked ~ .lh-columns .lh-metric__description {
+  display: block;
 }
+
 .lh-metrics-toggle__input {
   cursor: pointer;
   opacity: 0;
   position: absolute;
-  width: 100%;
-  height: 100%;
+  right: 0;
+  width: 74px;
+  height: 28px;
+  top: -3px;
 }
-.lh-metrics-toggle label {
+.lh-metrics-toggle__label {
   display: flex;
   background-color: #eee;
   border-radius: 20px;
   overflow: hidden;
+  position: absolute;
+  right: 0;
+  top: -3px;
+  pointer-events: none;
 }
 .lh-metrics-toggle__input:focus + label {
   outline: -webkit-focus-ring-color auto 3px;
@@ -647,14 +653,14 @@
   fill: var(--color-metric-toggle-lines);
 }
 
-.lh-metrics-toggle label {
+.lh-metrics-toggle__label  {
   background-color: var(--metrics-toggle-color);
 }
 
-.lh-metrics-toggle label .lh-metrics-toggle__icon--less {
+.lh-metrics-toggle__label .lh-metrics-toggle__icon--less {
   padding-left: 8px;
 }
-.lh-metrics-toggle label .lh-metrics-toggle__icon--more {
+.lh-metrics-toggle__label .lh-metrics-toggle__icon--more {
   padding-right: 8px;
 }
 
@@ -833,6 +839,7 @@
 
 .lh-audit-group {
   margin-bottom: var(--audits-margin-bottom);
+  position: relative;
 }
 
 .lh-audit-group__header::before {
diff --git a/lighthouse-core/report/html/templates.html b/lighthouse-core/report/html/templates.html
index 06160ed05..76d5d0024 100644
--- a/lighthouse-core/report/html/templates.html
+++ b/lighthouse-core/report/html/templates.html
@@ -72,7 +72,7 @@ limitations under the License.
 <template id="tmpl-lh-metrics-toggle">
   <div class="lh-metrics-toggle">
     <input class="lh-metrics-toggle__input" type="checkbox" name="toggle-metric-descriptions">
-    <label for="toggle-metric-descriptions">
+    <label class="lh-metrics-toggle__label" for="toggle-metric-descriptions">
       <div class="lh-metrics-toggle__icon lh-metrics-toggle__icon--less" aria-hidden="true">
         <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
           <path class="lh-metrics-toggle__lines" d="M4 9h16v2H4zm0 4h10v2H4z" />
@@ -339,7 +339,7 @@ limitations under the License.
     </svg>
 
     <a href="" class="lh-topbar__url" target="_blank" rel="noopener"></a>
-    
+
     <div class="lh-export">
       <button class="report-icon report-icon--share lh-export__button" title="Export report"></button>
       <div class="lh-export__dropdown">
diff --git a/lighthouse-core/scripts/update-report-fixtures.js b/lighthouse-core/scripts/update-report-fixtures.js
index 300941ab6..e59f726d2 100644
--- a/lighthouse-core/scripts/update-report-fixtures.js
+++ b/lighthouse-core/scripts/update-report-fixtures.js
@@ -8,7 +8,6 @@
 const cli = require('../../lighthouse-cli/run.js');
 const cliFlags = require('../../lighthouse-cli/cli-flags.js');
 const assetSaver = require('../lib/asset-saver.js');
-
 const artifactPath = 'lighthouse-core/test/results/artifacts';
 
 const {server} = require('../../lighthouse-cli/test/fixtures/static-server.js');
@@ -63,7 +62,7 @@ async function update(artifactName) {
     // Revert everything except the one artifact
     const newArtifacts = await assetSaver.loadArtifacts(artifactPath);
     if (!(artifactName in newArtifacts) && !(artifactName in oldArtifacts)) {
-      console.warn(`❌ Unknown artifact name: '${artifactName}'. Reverting artifacts...`); // eslint-disable-line no-console
+      throw Error('Unknown artifact name: ' + artifactName);
     }
     const finalArtifacts = oldArtifacts;
     finalArtifacts[artifactName] = newArtifacts[artifactName];
diff --git a/proto/sample_v2_round_trip.json b/proto/sample_v2_round_trip.json
index d9f5ba95c..3885c9a55 100644
--- a/proto/sample_v2_round_trip.json
+++ b/proto/sample_v2_round_trip.json
@@ -2356,16 +2356,53 @@
         "tap-targets": {
             "description": "Interactive elements like buttons and links should be large enough (48x48px), and have enough space around them, to be easy enough to tap without overlapping onto other elements. [Learn more](https://developers.google.com/web/fundamentals/accessibility/accessible-styles#multi-device_responsive_design).",
             "details": {
-                "headings": [],
-                "items": [],
+                "headings": [
+                    {
+                        "itemType": "node", 
+                        "key": "tapTarget", 
+                        "text": "Tap Target"
+                    }, 
+                    {
+                        "itemType": "text", 
+                        "key": "size", 
+                        "text": "Size"
+                    }, 
+                    {
+                        "itemType": "node", 
+                        "key": "overlappingTarget", 
+                        "text": "Overlapping Target"
+                    }
+                ], 
+                "items": [
+                    {
+                        "height": 18.0, 
+                        "overlapScoreRatio": 0.8333333333333334, 
+                        "overlappingTarget": {
+                            "path": "3,HTML,1,BODY,18,BUTTON", 
+                            "selector": "body > button.small-button", 
+                            "snippet": "<button class=\"small-button\">Do something else</button>", 
+                            "type": "node"
+                        }, 
+                        "overlappingTargetScore": 720.0, 
+                        "size": "200x18", 
+                        "tapTarget": {
+                            "path": "3,HTML,1,BODY,17,BUTTON", 
+                            "selector": "body > button.small-button", 
+                            "snippet": "<button class=\"small-button\">Do something</button>", 
+                            "type": "node"
+                        }, 
+                        "tapTargetScore": 864.0, 
+                        "width": 200.0
+                    }
+                ], 
                 "type": "table"
-            },
-            "displayValue": "100% appropriately sized tap targets",
-            "id": "tap-targets",
-            "score": 1.0,
-            "scoreDisplayMode": "binary",
-            "title": "Tap targets are sized appropriately"
-        },
+            }, 
+            "displayValue": "0% appropriately sized tap targets", 
+            "id": "tap-targets", 
+            "score": 0.0, 
+            "scoreDisplayMode": "binary", 
+            "title": "Tap targets are not sized appropriately"
+        }, 
         "td-headers-attr": {
             "description": "Screen readers have features to make navigating tables easier. Ensuring `<td>` cells using the `[headers]` attribute only refer to other cells in the same table may improve the experience for screen reader users. [Learn more](https://dequeuniversity.com/rules/axe/3.1/td-headers-attr?application=lighthouse).",
             "id": "td-headers-attr",
@@ -3641,11 +3678,11 @@
                     "id": "structured-data",
                     "weight": 0.0
                 }
-            ],
-            "description": "These checks ensure that your page is optimized for search engine results ranking. There are additional factors Lighthouse does not check that may affect your search ranking. [Learn more](https://support.google.com/webmasters/answer/35769).",
-            "id": "seo",
-            "manualDescription": "Run these additional validators on your site to check additional SEO best practices.",
-            "score": 0.82,
+            ], 
+            "description": "These checks ensure that your page is optimized for search engine results ranking. There are additional factors Lighthouse does not check that may affect your search ranking. [Learn more](https://support.google.com/webmasters/answer/35769).", 
+            "id": "seo", 
+            "manualDescription": "Run these additional validators on your site to check additional SEO best practices.", 
+            "score": 0.73, 
             "title": "SEO"
         }
     },


Test patch:
diff --git a/lighthouse-cli/test/fixtures/dobetterweb/dbw_tester.html b/lighthouse-cli/test/fixtures/dobetterweb/dbw_tester.html
index a5fb28e31..5e0042bd4 100644
--- a/lighthouse-cli/test/fixtures/dobetterweb/dbw_tester.html
+++ b/lighthouse-cli/test/fixtures/dobetterweb/dbw_tester.html
@@ -182,6 +182,16 @@
 <!-- FAIL(efficient-animated-content): animated gif found -->
 <img src="lighthouse-rotating.gif" width="811" height="462">
 
+<!-- FAIL(tap-targets): buttons too close together -->
+<style>
+.small-button {
+  display: block;
+  width: 200px;
+}
+</style>
+<button class="small-button">Do something</button>
+<button class="small-button">Do something else</button>
+
 <!-- Some websites overwrite the original Error object. The captureJSCallUsage function
   relies on the native Error object and prepareStackTrace from V8. When overwriting the stack
   property the e.stack inside the gatherer won't be in the correct format
diff --git a/lighthouse-cli/test/smokehouse/dobetterweb/dbw-expectations.js b/lighthouse-cli/test/smokehouse/dobetterweb/dbw-expectations.js
index 230403e1b..c39d18480 100644
--- a/lighthouse-cli/test/smokehouse/dobetterweb/dbw-expectations.js
+++ b/lighthouse-cli/test/smokehouse/dobetterweb/dbw-expectations.js
@@ -155,12 +155,12 @@ module.exports = [
         },
         'dom-size': {
           score: 1,
-          numericValue: 31,
+          numericValue: 34,
           details: {
             items: [
-              {statistic: 'Total DOM Elements', value: '31'},
+              {statistic: 'Total DOM Elements', value: '34'},
               {statistic: 'Maximum DOM Depth', value: '3'},
-              {statistic: 'Maximum Child Elements', value: '29'},
+              {statistic: 'Maximum Child Elements', value: '32'},
             ],
           },
         },
diff --git a/lighthouse-core/test/report/html/renderer/performance-category-renderer-test.js b/lighthouse-core/test/report/html/renderer/performance-category-renderer-test.js
index 2d03ab6d8..776763a7c 100644
--- a/lighthouse-core/test/report/html/renderer/performance-category-renderer-test.js
+++ b/lighthouse-core/test/report/html/renderer/performance-category-renderer-test.js
@@ -41,6 +41,7 @@ describe('PerfCategoryRenderer', () => {
     const detailsRenderer = new DetailsRenderer(dom);
     renderer = new PerformanceCategoryRenderer(dom, detailsRenderer);
 
+    // TODO: don't call a LH.ReportResult `sampleResults`, which is typically always LH.Result
     sampleResults = Util.prepareReportResult(sampleResultsOrig);
     category = sampleResults.reportCategories.find(cat => cat.id === 'performance');
   });
@@ -173,4 +174,36 @@ describe('PerfCategoryRenderer', () => {
       assert.ok(Number.isFinite(wastedMs), 'Finite number not returned by wastedMs');
     });
   });
+
+  // This is done all in CSS, but tested here.
+  describe('metric description toggles', () => {
+    let container;
+    let toggle;
+    const metricsSelector = '.lh-audit-group--metrics';
+    const toggleSelector = '.lh-metrics-toggle__input';
+    const magicSelector = '.lh-metrics-toggle__input:checked ~ .lh-columns .lh-metric__description';
+    let getDescriptionsAfterCheckedToggle;
+
+    describe('works if there is a performance category', () => {
+      beforeAll(() => {
+        container = renderer.render(category, sampleResults.categoryGroups);
+        const metricsAuditGroup = container.querySelector(metricsSelector);
+        toggle = metricsAuditGroup.querySelector(toggleSelector);
+        // In the CSS, our magicSelector will flip display from `none` to `block`
+        getDescriptionsAfterCheckedToggle = _ => metricsAuditGroup.querySelectorAll(magicSelector);
+      });
+
+      it('descriptions hidden by default', () => {
+        assert.ok(getDescriptionsAfterCheckedToggle().length === 0);
+      });
+
+      it('can toggle description visibility', () => {
+        assert.ok(getDescriptionsAfterCheckedToggle().length === 0);
+        toggle.click();
+        assert.ok(getDescriptionsAfterCheckedToggle().length > 2);
+        toggle.click();
+        assert.ok(getDescriptionsAfterCheckedToggle().length === 0);
+      });
+    });
+  });
 });
diff --git a/lighthouse-core/test/report/html/renderer/report-ui-features-test.js b/lighthouse-core/test/report/html/renderer/report-ui-features-test.js
index 8f2b50d59..09c8ed5ea 100644
--- a/lighthouse-core/test/report/html/renderer/report-ui-features-test.js
+++ b/lighthouse-core/test/report/html/renderer/report-ui-features-test.js
@@ -162,41 +162,4 @@ describe('ReportUIFeatures', () => {
       });
     });
   });
-
-  describe('metric description toggles', () => {
-    let container;
-    let metricsAuditGroup;
-    let toggle;
-    const metricsClass = 'lh-audit-group--metrics';
-    const toggleClass = 'lh-metrics-toggle__input';
-    const showClass = 'lh-audit-group--metrics__show-descriptions';
-
-    describe('works if there is a performance category', () => {
-      beforeAll(() => {
-        container = render(sampleResults);
-        metricsAuditGroup = dom.find(`.${metricsClass}`, container);
-        toggle = dom.find(`.${toggleClass}`, metricsAuditGroup);
-      });
-
-      it('descriptions hidden by default', () => {
-        assert.ok(!metricsAuditGroup.classList.contains(showClass));
-      });
-
-      it('can toggle description visibility', () => {
-        assert.ok(!metricsAuditGroup.classList.contains(showClass));
-        toggle.click();
-        assert.ok(metricsAuditGroup.classList.contains(showClass));
-        toggle.click();
-        assert.ok(!metricsAuditGroup.classList.contains(showClass));
-      });
-    });
-
-    it('report still works if performance category does not run', () => {
-      const lhr = JSON.parse(JSON.stringify(sampleResults));
-      delete lhr.categories.performance;
-      container = render(lhr);
-      assert.ok(!container.querySelector(`.${metricsClass}`));
-      assert.ok(!container.querySelector(`.${toggleClass}`));
-    });
-  });
 });
diff --git a/lighthouse-core/test/results/artifacts/artifacts.json b/lighthouse-core/test/results/artifacts/artifacts.json
index 8509b2cdd..93732cd0f 100644
--- a/lighthouse-core/test/results/artifacts/artifacts.json
+++ b/lighthouse-core/test/results/artifacts/artifacts.json
@@ -2002,7 +2002,40 @@
     "status": 404,
     "content": null
   },
-  "TapTargets": [],
+  "TapTargets": [
+    {
+      "clientRects": [
+        {
+          "width": 200,
+          "height": 18,
+          "left": 8,
+          "top": 1268.8125,
+          "right": 208,
+          "bottom": 1286.8125
+        }
+      ],
+      "snippet": "<button class=\"small-button\">Do something</button>",
+      "path": "3,HTML,1,BODY,17,BUTTON",
+      "selector": "body > button.small-button",
+      "href": ""
+    },
+    {
+      "clientRects": [
+        {
+          "width": 200,
+          "height": 18,
+          "left": 8,
+          "top": 1286.8125,
+          "right": 208,
+          "bottom": 1304.8125
+        }
+      ],
+      "snippet": "<button class=\"small-button\">Do something else</button>",
+      "path": "3,HTML,1,BODY,18,BUTTON",
+      "selector": "body > button.small-button",
+      "href": ""
+    }
+  ],
   "ServiceWorker": {
     "versions": [],
     "registrations": []
diff --git a/lighthouse-core/test/results/sample_v2.json b/lighthouse-core/test/results/sample_v2.json
index c045c7cdd..6ab2a57a4 100644
--- a/lighthouse-core/test/results/sample_v2.json
+++ b/lighthouse-core/test/results/sample_v2.json
@@ -2979,15 +2979,52 @@
     },
     "tap-targets": {
       "id": "tap-targets",
-      "title": "Tap targets are sized appropriately",
+      "title": "Tap targets are not sized appropriately",
       "description": "Interactive elements like buttons and links should be large enough (48x48px), and have enough space around them, to be easy enough to tap without overlapping onto other elements. [Learn more](https://developers.google.com/web/fundamentals/accessibility/accessible-styles#multi-device_responsive_design).",
-      "score": 1,
+      "score": 0,
       "scoreDisplayMode": "binary",
-      "displayValue": "100% appropriately sized tap targets",
+      "displayValue": "0% appropriately sized tap targets",
       "details": {
         "type": "table",
-        "headings": [],
-        "items": []
+        "headings": [
+          {
+            "key": "tapTarget",
+            "itemType": "node",
+            "text": "Tap Target"
+          },
+          {
+            "key": "size",
+            "itemType": "text",
+            "text": "Size"
+          },
+          {
+            "key": "overlappingTarget",
+            "itemType": "node",
+            "text": "Overlapping Target"
+          }
+        ],
+        "items": [
+          {
+            "tapTarget": {
+              "type": "node",
+              "snippet": "<button class=\"small-button\">Do something</button>",
+              "path": "3,HTML,1,BODY,17,BUTTON",
+              "selector": "body > button.small-button"
+            },
+            "overlappingTarget": {
+              "type": "node",
+              "snippet": "<button class=\"small-button\">Do something else</button>",
+              "path": "3,HTML,1,BODY,18,BUTTON",
+              "selector": "body > button.small-button"
+            },
+            "tapTargetScore": 864,
+            "overlappingTargetScore": 720,
+            "overlapScoreRatio": 0.8333333333333334,
+            "size": "200x18",
+            "width": 200,
+            "height": 18
+          }
+        ]
       }
     },
     "hreflang": {
@@ -3623,7 +3660,7 @@
         }
       ],
       "id": "seo",
-      "score": 0.82
+      "score": 0.73
     },
     "pwa": {
       "title": "Progressive Web App",
@@ -5270,7 +5307,8 @@
         "audits[render-blocking-resources].details.headings[1].label",
         "audits[unminified-javascript].details.headings[1].label",
         "audits[uses-webp-images].details.headings[2].label",
-        "audits[uses-text-compression].details.headings[1].label"
+        "audits[uses-text-compression].details.headings[1].label",
+        "audits[tap-targets].details.headings[1].text"
       ],
       "lighthouse-core/audits/byte-efficiency/total-byte-weight.js | title": [
         "audits[total-byte-weight].title"
@@ -5456,7 +5494,7 @@
       "lighthouse-core/audits/seo/robots-txt.js | description": [
         "audits[robots-txt].description"
       ],
-      "lighthouse-core/audits/seo/tap-targets.js | title": [
+      "lighthouse-core/audits/seo/tap-targets.js | failureTitle": [
         "audits[tap-targets].title"
       ],
       "lighthouse-core/audits/seo/tap-targets.js | description": [
@@ -5465,11 +5503,17 @@
       "lighthouse-core/audits/seo/tap-targets.js | displayValue": [
         {
           "values": {
-            "decimalProportion": 1
+            "decimalProportion": 0
           },
           "path": "audits[tap-targets].displayValue"
         }
       ],
+      "lighthouse-core/audits/seo/tap-targets.js | tapTargetHeader": [
+        "audits[tap-targets].details.headings[0].text"
+      ],
+      "lighthouse-core/audits/seo/tap-targets.js | overlappingTargetHeader": [
+        "audits[tap-targets].details.headings[2].text"
+      ],
       "lighthouse-core/audits/seo/hreflang.js | title": [
         "audits.hreflang.title"
       ],