report: add label to provide context for subItems #13858

connorjclark · 2022-04-15T18:18:48Z

This adds a field label to TableSubItems, to help improve context when rendering subitems underneath a table item row.

Audit	subitem label
axe-audit (base)	Related Elements
color-contrast	Background Element
duplicate-id-aria	Duplicate Elements
duplicated-javascript	Script
legacy-javascript	Location
unused-javascript	Module
csp-xss	Reasons
inspector-issues	URL
non-composited-animations	Reasons
hreflang	Reasons
third-party-facades	Script

Did not give third-party-web a subitems label because it seems good already

cnn report here: https://lighthouse-1065v6gec-googlechrome.vercel.app/gh-pages/viewer/?gist=8fdec0793bab3abea4e66bc1129b06d7

connorjclark · 2022-04-15T18:21:44Z

hr too much?

light mode

adamraine · 2022-04-15T19:11:34Z

hr too much?

IMO yes. Would underline work?

connorjclark · 2022-04-15T19:44:23Z

wb some width: max-content on the lh-text to limit the size to just under the text?

underline looks pretty weaksauce imo:

adamraine · 2022-04-15T20:00:55Z

Yeah underline is weaksauce, bad idea. Even the shortened line looks a little weird.

I played around a bit, I think the full line would work better if it were gray instead of white/black:

brendankenny

overall I like it better, but the audits with screenshots maybe need another iteration. The screenshot makes it harder to differentiate the levels and they also get busier with the extra label and hr

brendankenny · 2022-04-15T20:38:20Z

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

 };

 const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);

 class AxeAudit extends Audit {
+  static get relatedNodesLabel() {


static field or function instead of a getter?

Well, this does match how we handle meta.

brendankenny · 2022-04-15T20:39:08Z

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

@@ -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,


haha, this kind of thing makes me think axe-audit inheritance should just be killed and turned into a function call :)

brendankenny · 2022-04-15T20:43:59Z

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',


singular/plural for this is somewhat unfortunate. "Reasons" (when there's only one reason) seems worse to me than e.g. "Duplicate Elements" for some reason.

Could maybe make it the count an argument and only do a single option for cases that are always singular? I don't know if TC or whatever will complain/get weird with {relatedNodeCount, plural, other {Background Element}}, though.

types/lhr/audit-details.d.ts

report/renderer/details-renderer.js

brendankenny · 2022-04-15T21:26:58Z

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

@@ -98,28 +98,33 @@ describe('LegacyJavaScript audit', () => {
    ]);
    expect(result.items).toHaveLength(1);
    expect(result.items[0]).toMatchInlineSnapshot(`
+Object {


indentation issue with these files?

oops. You have to babysit jest when asking it to -u inline snapshots. It was fixed for a short minute... but regressed at some point. Maybe fixed in latest, idk.

paulirish · 2022-04-15T21:55:09Z

but the audits with screenshots maybe need another iteration.

yeah.. i tried out some styles to shrink the screenshot + constrain the text for subrows. it's.. better.

screenshot and whack-ass styles

.lh-sub-item-row .lh-element-screenshot {
  zoom: 0.4
}

.lh-sub-item-row .lh-node {
  max-height: calc(100px * 0.4);
  overflow: hidden;
  display: block;

}

paulirish

these capitals feel extraneous. (though perhaps we adopted a style for this already?)

i don't have a great idea on the label's typography or graphical delineation...

@Jiwoong can you help us out?

we're adding this label to communicate what these sub items are all about. it looks aiight but you could probably help us with it
especially when theres more thumbnails in the sub items, the layout gets pretty wonky and hard to follow.. especially tricky cuz we autosize based on aspect ratio and the aspect ratios are totally unpredictable. in an above comment i tried shrinking subitem thumbnails. any ideas?

paulirish · 2022-04-15T21:27:20Z

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',


Suggested change

relatedElementsHeader: 'Related Elements',

relatedElementsHeader: 'Related elements',

yeah but Failed Elements :( change that too? it's the (regular) column text

paulirish · 2022-04-15T21:27:43Z

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',


Suggested change

backgroundElementHeader: 'Background Element',

backgroundElementHeader: 'Background element',

paulirish · 2022-04-15T21:27:52Z

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',


Suggested change

relatedElementsHeader: 'Duplicate Elements',

relatedElementsHeader: 'Duplicate elements',

vercel · 2022-12-05T21:48:07Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
lighthouse	✅ Ready (Inspect)	Visit Preview	Dec 6, 2022 at 6:21PM (UTC)

connorjclark · 2022-12-13T22:55:30Z

made the line thinner (pictures have been updated)

connorjclark · 2025-06-11T22:05:24Z

we don't like how we show the sub-row label multiple times

let's add the label to be just below the main header label, but like this:

Failing Element
   | Duplicated Elements

and lets also add that vertical line to the sub row items (like already done for insight audit tables)

connorjclark added 2 commits April 15, 2022 10:53

first pass

1579340

snapshots

56491ce

connorjclark requested a review from a team as a code owner April 15, 2022 18:18

connorjclark requested review from adamraine and removed request for a team April 15, 2022 18:18

connorjclark changed the title ~~report: add subItem label~~ report: add label to provide context for subitems Apr 15, 2022

connorjclark changed the title ~~report: add label to provide context for subitems~~ report: add label to provide context for subItems Apr 15, 2022

fix td

e406077

vercel bot deployed to Preview April 15, 2022 18:29 View deployment

devtools-bot assigned adamraine Apr 15, 2022

devtools-bot added the waiting4reviewer label Apr 15, 2022

connorjclark added 2 commits April 15, 2022 14:18

Merge remote-tracking branch 'origin/master' into subitems-label

467ebd8

lint

7d25e8f

vercel bot deployed to Preview April 15, 2022 21:19 View deployment

brendankenny reviewed Apr 15, 2022

View reviewed changes

paulirish reviewed Apr 15, 2022

View reviewed changes

Merge remote-tracking branch 'origin/main' into subitems-label

e275708

vercel bot deployed to Preview December 5, 2022 21:49 View deployment

table subItemsLabel

f12f550

vercel bot deployed to Preview December 5, 2022 22:03 View deployment

fix opps

fea8745

vercel bot deployed to Preview December 5, 2022 23:37 View deployment

update

8eb2316

vercel bot deployed to Preview December 6, 2022 01:59 View deployment

lint

0fcc356

vercel bot deployed to Preview December 6, 2022 18:21 View deployment

connorjclark added 2 commits December 13, 2022 14:50

make line thinner

59d5653

Merge remote-tracking branch 'origin/main' into subitems-label

8730ae4

vercel bot deployed to Preview December 13, 2022 22:50 View deployment

vercel bot deployed to Preview December 13, 2022 22:52 View deployment

connorjclark added the needs-discussion label Feb 26, 2024

connorjclark added the needs-design label Mar 4, 2024

adamraine assigned paulirish and unassigned adamraine Apr 1, 2024

adamraine removed the needs-discussion label Apr 1, 2024

	relatedElementsHeader: 'Related Elements',
	relatedElementsHeader: 'Related elements',

	backgroundElementHeader: 'Background Element',
	backgroundElementHeader: 'Background element',

	relatedElementsHeader: 'Duplicate Elements',
	relatedElementsHeader: 'Duplicate elements',

report: add label to provide context for subItems #13858

Are you sure you want to change the base?

report: add label to provide context for subItems #13858

Uh oh!

Conversation

connorjclark commented Apr 15, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

connorjclark commented Apr 15, 2022

Uh oh!

adamraine commented Apr 15, 2022

Uh oh!

connorjclark commented Apr 15, 2022

Uh oh!

adamraine commented Apr 15, 2022

Uh oh!

brendankenny left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

paulirish commented Apr 15, 2022

Uh oh!

paulirish left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

connorjclark Apr 15, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

vercel bot commented Dec 5, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

connorjclark commented Dec 13, 2022

Uh oh!

connorjclark commented Jun 11, 2025

Uh oh!

Uh oh!

connorjclark commented Apr 15, 2022 •

edited

Loading

brendankenny left a comment •

edited

Loading

connorjclark Apr 15, 2022 •

edited

Loading

vercel bot commented Dec 5, 2022 •

edited

Loading