report: add label to provide context for subItems

lighthouse-core/audits/accessibility/axe-audit.js

@@ -16,11 +16,17 @@ const i18n = require('../../lib/i18n/i18n.js');
 const UIStrings = {
   /** Label of a table column that identifies HTML elements that have failed an audit. */
   failingElementsHeader: 'Failing Elements',
+  /** Label of a table column that identifies HTML elements that are related to a failure in an audit. */
+  relatedElementsHeader: 'Related Elements',
 };
 
 const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
 
 class AxeAudit extends Audit {
+  static get relatedNodesLabel() {
+    return str_(UIStrings.relatedElementsHeader);
+  }
+
   /**
    * Base class for audit rules which reflect assessment performed by the aXe accessibility library
    * See https://github.com/dequelabs/axe-core/blob/6b444546cff492a62a70a74a8fc3c62bd4729400/doc/API.md#results-object for result type and format details
@@ -81,7 +87,10 @@ class AxeAudit extends Audit {
         },
         subItems: axeNode.relatedNodes.length ? {
           type: 'subitems',
-          items: axeNode.relatedNodes.map(node => ({relatedNode: Audit.makeNodeItem(node)})),
+          label: this.relatedNodesLabel,
+          items: axeNode.relatedNodes.map(node => ({
+            relatedNode: Audit.makeNodeItem(node),
+          })),
         } : undefined,
       }));
     }

lighthouse-core/audits/accessibility/color-contrast.js

@@ -23,6 +23,8 @@ const UIStrings = {
   /** Description of a Lighthouse audit that tells the user *why* they should try to pass. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation. */
   description: 'Low-contrast text is difficult or impossible for many users to read. ' +
       '[Learn more](https://web.dev/color-contrast/).',
+  /** Label of a table column that identifies a single HTML element that is the background of another HTML element. */
+  backgroundElementHeader: 'Background Element',
 };
 
 const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
@@ -40,6 +42,10 @@ class ColorContrast extends AxeAudit {
       requiredArtifacts: ['Accessibility'],
     };
   }
+
+  static get relatedNodesLabel() {
+    return str_(UIStrings.backgroundElementHeader);
+  }
 }
 
 module.exports = ColorContrast;

lighthouse-core/audits/accessibility/duplicate-id-aria.js

@@ -20,6 +20,8 @@ const UIStrings = {
   failureTitle: 'ARIA IDs are not unique',
   /** Description of a Lighthouse audit that tells the user *why* they should try to pass. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation. */
   description: 'The value of an ARIA ID must be unique to prevent other instances from being overlooked by assistive technologies. [Learn more](https://web.dev/duplicate-id-aria/).',
+  /** Label of a table column that identifies HTML elements that are duplicates of another HTML element. */
+  relatedElementsHeader: 'Duplicate Elements',
 };
 
 const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
@@ -37,6 +39,10 @@ class DuplicateIdAria extends AxeAudit {
       requiredArtifacts: ['Accessibility'],
     };
   }
+
+  static get relatedNodesLabel() {
+    return str_(UIStrings.relatedElementsHeader);
+  }
 }
 
 module.exports = DuplicateIdAria;

lighthouse-core/audits/byte-efficiency/duplicated-javascript.js

@@ -208,6 +208,7 @@ class DuplicatedJavascript extends ByteEfficiencyAudit {
         totalBytes: 0,
         subItems: {
           type: 'subitems',
+          label: str_(i18n.UIStrings.scriptResourceType),
           items: subItems,
         },
       });
@@ -221,6 +222,7 @@ class DuplicatedJavascript extends ByteEfficiencyAudit {
         totalBytes: 0,
         subItems: {
           type: 'subitems',
+          label: str_(i18n.UIStrings.scriptResourceType),
           items: Array.from(overflowUrls).map(url => ({url})),
         },
       });

lighthouse-core/audits/byte-efficiency/legacy-javascript.js

@@ -420,6 +420,7 @@ class LegacyJavascript extends ByteEfficiencyAudit {
         url: script.url,
         wastedBytes,
         subItems: {
+          label: str_(i18n.UIStrings.columnLocation),
           type: 'subitems',
           items: [],
         },

lighthouse-core/audits/byte-efficiency/unused-javascript.js

@@ -136,6 +136,7 @@ class UnusedJavaScript extends ByteEfficiencyAudit {
         const commonSourcePrefix = commonPrefix([...bundle.map.sourceInfos.keys()]);
         item.subItems = {
           type: 'subitems',
+          label: str_(i18n.UIStrings.module),
           items: topUnusedSourceSizes.map(({source, unused, total}) => {
             return {
               source: trimCommonPrefix(source, commonSourcePrefix),

lighthouse-core/audits/csp-xss.js

@@ -109,6 +109,7 @@ class CspXss extends Audit {
         },
         subItems: {
           type: 'subitems',
+          label: str_(i18n.UIStrings.reasons),
           items,
         },
       });

lighthouse-core/audits/dobetterweb/inspector-issues.js

@@ -65,6 +65,7 @@ class IssuesPanelEntries extends Audit {
       issueType: 'Mixed content',
       subItems: {
         type: 'subitems',
+        label: str_(i18n.UIStrings.columnURL),
         items: Array.from(requestUrls).map(url => ({url})),
       },
     };
@@ -86,6 +87,7 @@ class IssuesPanelEntries extends Audit {
       issueType: 'Cookie',
       subItems: {
         type: 'subitems',
+        label: str_(i18n.UIStrings.columnURL),
         items: Array.from(requestUrls).map(url => {
           return {
             url,
@@ -111,6 +113,7 @@ class IssuesPanelEntries extends Audit {
       issueType: str_(UIStrings.issueTypeBlockedByResponse),
       subItems: {
         type: 'subitems',
+        label: str_(i18n.UIStrings.columnURL),
         items: Array.from(requestUrls).map(url => {
           return {
             url,
@@ -136,6 +139,7 @@ class IssuesPanelEntries extends Audit {
       issueType: 'Content security policy',
       subItems: {
         type: 'subitems',
+        label: str_(i18n.UIStrings.columnURL),
         items: Array.from(requestUrls).map(url => {
           return {
             url,

lighthouse-core/audits/non-composited-animations.js

@@ -166,6 +166,7 @@ class NonCompositedAnimations extends Audit {
         node: Audit.makeNodeItem(element.node),
         subItems: {
           type: 'subitems',
+          label: str_(i18n.UIStrings.reasons),
           items: allFailureReasons,
         },
       });

lighthouse-core/audits/seo/hreflang.js

@@ -6,7 +6,7 @@
 'use strict';
 
 /** @typedef {string|LH.Audit.Details.NodeValue|undefined} Source */
-/** @typedef {{source: Source, subItems: {type: 'subitems', items: SubItem[]}}} InvalidHreflang */
+/** @typedef {{source: Source, subItems: {type: 'subitems', label: LH.IcuMessage, items: SubItem[]}}} InvalidHreflang */
 /** @typedef {{reason: LH.IcuMessage}} SubItem */
 
 const Audit = require('../audit.js');
@@ -120,6 +120,7 @@ class Hreflang extends Audit {
         source,
         subItems: {
           type: 'subitems',
+          label: str_(i18n.UIStrings.reasons),
           items: reasons.map(reason => ({reason})),
         },
       });

lighthouse-core/audits/third-party-facades.js

@@ -187,7 +187,11 @@ class ThirdPartyFacades extends Audit {
         product: productWithCategory,
         transferSize: entitySummary.transferSize,
         blockingTime: entitySummary.blockingTime,
-        subItems: {type: 'subitems', items},
+        subItems: {
+          type: 'subitems',
+          label: str_(i18n.UIStrings.scriptResourceType),
+          items,
+        },
       });
     }
 

lighthouse-core/lib/i18n/i18n.js

@@ -89,6 +89,10 @@ const UIStrings = {
   thirdPartyResourceType: 'Third-party',
   /** Label used to identify a value in a table where many individual values are aggregated to a single value, for brevity. "Other resources" could also be read as "the rest of the resources". Resource refers to network resources requested by the browser. */
   otherResourcesLabel: 'Other resources',
+  /** Label for a row in a data table; 'Module' refers to a JavaScript module file. */
+  module: 'Module',
+  /** Label for a row in a data table; What follows are reasons why something failed or occurred. */
+  reasons: 'Reasons',
   /** The name of the metric that marks the time at which the first text or image is painted by the browser. Shown to users as the label for the numeric metric value. Ideally fits within a ~40 character limit. */
   firstContentfulPaintMetric: 'First Contentful Paint',
   /** The name of the metric that marks the time at which the page is fully loaded and is able to quickly respond to user input (clicks, taps, and keypresses feel responsive). Shown to users as the label for the numeric metric value. Ideally fits within a ~40 character limit. */