Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

axecore error Cannot read properties of undefined #4335

Open
1 task done
rajsite opened this issue Feb 22, 2024 · 1 comment
Open
1 task done

axecore error Cannot read properties of undefined #4335

rajsite opened this issue Feb 22, 2024 · 1 comment
Labels
Milestone

Comments

@rajsite
Copy link

rajsite commented Feb 22, 2024

Product

axe-core

Product Version

4.8.4

Latest Version

  • I have tested the issue with the latest version of the product

Issue Description

Expectation

I expect axe-core to be able to run without error on pages that include a shadow root such as the following:
https://axecore-lighthouse-failure.glitch.me/

Actual

Notice in the console of the above page that axe-core runs with a result of incomplete.
The incomplete item has:

description:
"Ensures role attribute has an appropriate value for the element"

error stack:

TypeError: Cannot read properties of undefined (reading 'props')
    at prepareContext (https://unpkg.com/axe-core@4.8.4/axe.js:12625:23)
    at _accessibleTextVirtual (https://unpkg.com/axe-core@4.8.4/axe.js:12573:17)
    at accessibleText (https://unpkg.com/axe-core@4.8.4/axe.js:9588:14)
    at https://unpkg.com/axe-core@4.8.4/axe.js:9604:33
    at Array.reduce (<anonymous>)
    at arialabelledbyText (https://unpkg.com/axe-core@4.8.4/axe.js:9603:19)
    at hasAccessibleName (https://unpkg.com/axe-core@4.8.4/axe.js:11698:45)
    at section (https://unpkg.com/axe-core@4.8.4/axe.js:11799:16)
    at implicitRole2 (https://unpkg.com/axe-core@4.8.4/axe.js:11992:16)
    at getElementUnallowedRoles (https://unpkg.com/axe-core@4.8.4/axe.js:19359:27)

impact:
null

How to Reproduce

See above, example page and discussion to view the axe-core result in the console. Page url preproduced as follows: https://axecore-lighthouse-failure.glitch.me/

Additional context

Any thing else we should know about the issue?

The axe-core error results in lighthouse failing to report any accessibility score at all for the page. Filed lighthouse a separate issue to be more robust to axe-core incomplete results: GoogleChrome/lighthouse#15828

@straker
Copy link
Contributor

straker commented Feb 22, 2024

Thanks for the issue. I took a quick look at it appears that the issue is the aria-labelledby on the section element which points to the slot element. The slot element isn't tracked in our virtual tree so that's why the code is failing.

@straker straker added fix Bug fixes Accessible text and removed ungroomed Ticket needs a maintainer to prioritize and label labels Feb 22, 2024
@straker straker added this to the Axe-core 4.9 milestone Feb 22, 2024
rajsite added a commit to ni/nimble that referenced this issue Feb 22, 2024
# Pull Request

## 🤨 Rationale

The card was previously disabled after it started resulting in axe-core
completely failing. After reporting to axe-core their comment in
dequelabs/axe-core#4335 (comment)
made me think we can workaround the axe-core issue by wrapping the slot
in a span and targeting that instead for aria.

While not necessary for runtime behavior or accessibility, the
workaround adds minimal overhead and complexity. Does not need to be
removed after the axe-core fix. Fixes #1650

## 👩‍💻 Implementation

Wraps the slot in a span and use that as the aria target. 

## 🧪 Testing

Can see the PR has a passing lighthouse score with the card re-enabled.

## ✅ Checklist

- [x] I have updated the project documentation to reflect my changes or
determined no changes are needed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants