Lighthouse failing with axe-core Error: Cannot read properties of undefined (reading 'actualNode')

[rajsite]

🧹 Tech Debt

Looks like lighthouse is failing intermittently on main, since: 090ed10
See: https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1699279168857-58396.report.html

And consistently with the changes proposed here: #1646
See: https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1699279168857-58396.report.html

With error message:

axe-core Error: Cannot read properties of undefined (reading 'actualNode')

See:

Issue status: @kjohn1922 found a workaround in #1646, we should try and report it upstream to axe-core or lighthouse

[rajsite]

@kjohn1922 thanks for digging in and finding a workaround for what was breaking axe core in lighthouse. If you're feeling ambitious can try to reproduce and report it upstream to https://github.com/dequelabs/axe-core

[rajsite]

Found a way to reproduce the axe-core error in dev tools when running against lighthouse:

1. Navigate to a built page that causes the error in lighthouse, i.e. currently: https://nimble.ni.dev/storybook/example-client-app/#/customapp
2. Open dev tools, in the sources tab under breakpoints enable Pause on caught exceptions
3. In dev tools in the console run the latest axe-core on the page, i.e.

   (((fn)=>window.axe?fn():document.body.append(Object.assign(document.createElement('script'),{src:'https://unpkg.com/axe-core/axe.js',onload:fn})))(()=>axe.run().then(results=>console.log(results)).catch(err=>console.error(err))));

   Note: the script is loading unminified code and targeting the latest version. As of writing the version resolved to https://unpkg.com/axe-core@4.8.4/axe.js
4. The script will download and run, may take a few seconds, but should break on the line resulting in an error

A bookmarklet version of the script:

javascript:(function()%7B(((fn)%3D%3Ewindow.axe%3Ffn()%3Adocument.body.append(Object.assign(document.createElement('script')%2C%7Bsrc%3A'https%3A%2F%2Funpkg.com%2Faxe-core%2Faxe.js'%2Conload%3Afn%7D)))(()%3D%3Eaxe.run().then(results%3D%3Econsole.log(results)).catch(err%3D%3Econsole.error(err))))%3B%7D)()%3B

[rajsite]

The lighthouse update merged as part of #1786 caused this card issue to come-up again so the card was disabled in the example app and the accessibility assertions re-enabled as part of #1809

[rajsite]

Assigning to myself to file an issue upstream to axe-core

[rajsite]

Created a minimal reproducing example that causes the lighthouse failure

live page: https://axecore-lighthouse-failure.glitch.me/
edit page: https://glitch.com/edit/#!/axecore-lighthouse-failure

Reported an issue to axe-core so hopefully they can handle shadow roots better: dequelabs/axe-core#4335

Reported an issue to lighthouse so hopefully they can be more robust to axe-core failures and still generate accessibility scores: GoogleChrome/lighthouse#15828

Marking the issue blocked. If either the lighthouse or axe-core issue is resolved we may be able to unblock this issue and re-enable the nimble-card in the angular app:

nimble/angular-workspace/projects/example-client-app/src/app/customapp/customapp.component.html

Lines 45 to 59 in fe357da

	<!-- Disabled as it breaks accessibility tooling, see: https://github.com/ni/nimble/issues/1650
	<div class="sub-container">
	<div class="container-label">Card</div>
	<nimble-card>
	<span slot="title">Title of the card</span>
	<nimble-number-field>Numeric field 1</nimble-number-field>
	<nimble-number-field>Numeric field 2</nimble-number-field>
	<nimble-select>
	<nimble-list-option value="1">Option 1</nimble-list-option>
	<nimble-list-option value="2">Option 2</nimble-list-option>
	<nimble-list-option value="3">Option 3</nimble-list-option>
	</nimble-select>
	</nimble-card>
	</div>
	-->