report: remove href from category score gauge (#13180)

GoogleChrome · Oct 6, 2021 · 8b3b298 · 8b3b298
1 parent c219a9c
commit 8b3b298
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 5 deletions.
diff --git a/flow-report/src/wrappers/report.tsx b/flow-report/src/wrappers/report.tsx
@@ -17,6 +17,8 @@ import {useReportRenderer} from './report-renderer';
 export function convertChildAnchors(element: HTMLElement, index: number) {
   const links = element.querySelectorAll('a') as NodeListOf<HTMLAnchorElement>;
   for (const link of links) {
+    if (!link.href) continue;
+
     // Check if the link destination is in the report.
     const currentUrl = new URL(location.href);
     currentUrl.hash = '';

diff --git a/report/assets/templates.html b/report/assets/templates.html
@@ -549,7 +549,7 @@
 
 <!-- Lighthouse score gauge -->
 <template id="gauge">
-  <a href="#" class="lh-gauge__wrapper">
+  <a class="lh-gauge__wrapper">
     <!-- Wrapper exists for the ::before plugin icon. Cannot create pseudo-elements on svgs. -->
     <div class="lh-gauge__svg-wrapper">
       <svg viewBox="0 0 120 120" class="lh-gauge">
@@ -565,7 +565,7 @@
 
 <!-- Lighthouse category fraction -->
 <template id="fraction">
-  <a href="#" class="lh-fraction__wrapper">
+  <a class="lh-fraction__wrapper">
     <div class="lh-fraction__content-wrapper">
       <div class="lh-fraction__content">
         <div class="lh-fraction__background"></div>

diff --git a/report/renderer/category-renderer.js b/report/renderer/category-renderer.js
@@ -333,7 +333,6 @@ export class CategoryRenderer {
   renderScoreGauge(category, groupDefinitions) { // eslint-disable-line no-unused-vars
     const tmpl = this.dom.createComponent('gauge');
     const wrapper = this.dom.find('a.lh-gauge__wrapper', tmpl);
-    this.dom.safelySetHref(wrapper, `#${category.id}`);
 
     if (Util.isPluginCategory(category.id)) {
       wrapper.classList.add('lh-gauge__wrapper--plugin');

diff --git a/report/renderer/components.js b/report/renderer/components.js
diff --git a/report/renderer/report-renderer.js b/report/renderer/report-renderer.js
@@ -166,6 +166,12 @@ export class ReportRenderer {
         {gatherMode: report.gatherMode}
       );
 
+      // For normal score gauges (not the fraction gauge), set the gauge href
+      // to link to the category.
+      const gaugeWrapperEl = /** @type {HTMLAnchorElement} */ (
+        categoryGauge.querySelector('a.lh-gauge__wrapper'));
+      if (gaugeWrapperEl) this._dom.safelySetHref(gaugeWrapperEl, `#${category.id}`);
+
       if (Util.isPluginCategory(category.id)) {
         pluginGauges.push(categoryGauge);
       } else if (renderer.renderCategoryScore === categoryRenderer.renderCategoryScore) {