report: add label to provide context for subItems

core/audits/accessibility/axe-audit.js

@@ -15,11 +15,17 @@ import * as i18n from '../../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.createIcuMessageFn(import.meta.url, 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
@@ -80,7 +86,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,
       }));
     }

core/audits/accessibility/color-contrast.js

@@ -22,6 +22,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. The last sentence starting with 'Learn' becomes link text to additional documentation. */
   description: 'Low-contrast text is difficult or impossible for many users to read. ' +
       '[Learn how to provide sufficient color contrast](https://dequeuniversity.com/rules/axe/4.4/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.createIcuMessageFn(import.meta.url, UIStrings);
@@ -39,6 +41,10 @@ class ColorContrast extends AxeAudit {
       requiredArtifacts: ['Accessibility'],
     };
   }
+
+  static get relatedNodesLabel() {
+    return str_(UIStrings.backgroundElementHeader);
+  }
 }
 
 export default ColorContrast;

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

@@ -19,6 +19,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. The last sentence starting with 'Learn' 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 how to fix duplicate ARIA IDs](https://dequeuniversity.com/rules/axe/4.4/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.createIcuMessageFn(import.meta.url, UIStrings);
@@ -36,6 +38,10 @@ class DuplicateIdAria extends AxeAudit {
       requiredArtifacts: ['Accessibility'],
     };
   }
+
+  static get relatedNodesLabel() {
+    return str_(UIStrings.relatedElementsHeader);
+  }
 }
 
 export default DuplicateIdAria;

core/audits/byte-efficiency/byte-efficiency-audit.js

@@ -26,6 +26,7 @@ const WASTED_MS_FOR_SCORE_OF_ZERO = 5000;
  * @property {Array<LH.Audit.ByteEfficiencyItem>} items
  * @property {Map<string, number>=} wastedBytesByUrl
  * @property {LH.Audit.Details.Opportunity['headings']} headings
+ * @property {LH.Audit.Details.Table['subItemsLabel']=} subItemsLabel
  * @property {LH.IcuMessage} [displayValue]
  * @property {LH.IcuMessage} [explanation]
  * @property {Array<string | LH.IcuMessage>} [warnings]
@@ -229,6 +230,7 @@ class ByteEfficiencyAudit extends Audit {
     }
 
     const details = Audit.makeOpportunityDetails(result.headings, results, wastedMs, wastedBytes);
+    details.subItemsLabel = result.subItemsLabel;
 
     return {
       explanation: result.explanation,

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

@@ -238,6 +238,7 @@ class DuplicatedJavascript extends ByteEfficiencyAudit {
     return {
       items,
       headings,
+      subItemsLabel: str_(i18n.UIStrings.scriptResourceType),
       wastedBytesByUrl,
     };
   }

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

@@ -467,6 +467,7 @@ class LegacyJavascript extends ByteEfficiencyAudit {
     return {
       items,
       headings,
+      subItemsLabel: str_(i18n.UIStrings.columnLocation),
       wastedBytesByUrl,
     };
   }

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

@@ -155,6 +155,7 @@ class UnusedJavaScript extends ByteEfficiencyAudit {
         {key: 'wastedBytes', valueType: 'bytes', subItemsHeading: {key: 'sourceWastedBytes'}, label: str_(i18n.UIStrings.columnWastedBytes)},
         /* eslint-enable max-len */
       ],
+      subItemsLabel: str_(i18n.UIStrings.module),
     };
   }
 }

core/audits/csp-xss.js

@@ -173,6 +173,7 @@ class CspXss extends Audit {
       /* eslint-enable max-len */
     ];
     const details = Audit.makeTableDetails(headings, results);
+    details.subItemsLabel = str_(i18n.UIStrings.reasons);
 
     return {
       score,

core/audits/dobetterweb/inspector-issues.js

@@ -64,6 +64,7 @@ class IssuesPanelEntries extends Audit {
       issueType: 'Mixed content',
       subItems: {
         type: 'subitems',
+        label: str_(i18n.UIStrings.columnURL),
         items: Array.from(requestUrls).map(url => ({url})),
       },
     };
@@ -85,6 +86,7 @@ class IssuesPanelEntries extends Audit {
       issueType: 'Cookie',
       subItems: {
         type: 'subitems',
+        label: str_(i18n.UIStrings.columnURL),
         items: Array.from(requestUrls).map(url => {
           return {
             url,
@@ -110,6 +112,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,
@@ -135,6 +138,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,

core/audits/non-composited-animations.js

@@ -186,6 +186,7 @@ class NonCompositedAnimations extends Audit {
     }
 
     const details = Audit.makeTableDetails(headings, results);
+    details.subItemsLabel = str_(i18n.UIStrings.reasons);
 
     let displayValue;
     if (results.length > 0) {

core/audits/seo/hreflang.js

@@ -136,6 +136,7 @@ class Hreflang extends Audit {
     }];
 
     const details = Audit.makeTableDetails(headings, invalidHreflangs);
+    details.subItemsLabel = str_(i18n.UIStrings.reasons);
 
     return {
       score: Number(invalidHreflangs.length === 0),

core/audits/third-party-facades.js

@@ -187,7 +187,10 @@ class ThirdPartyFacades extends Audit {
         product: productWithCategory,
         transferSize: entitySummary.transferSize,
         blockingTime: entitySummary.blockingTime,
-        subItems: {type: 'subitems', items},
+        subItems: {
+          type: 'subitems',
+          items,
+        },
       });
     }
 
@@ -212,7 +215,10 @@ class ThirdPartyFacades extends Audit {
       displayValue: str_(UIStrings.displayValue, {
         itemCount: results.length,
       }),
-      details: Audit.makeTableDetails(headings, results),
+      details: {
+        ...Audit.makeTableDetails(headings, results),
+        subItemsLabel: str_(i18n.UIStrings.scriptResourceType),
+      },
     };
   }
 }

core/lib/i18n/i18n.js

@@ -88,6 +88,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. */