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.

Sign up for GitHub

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

Jump to bottom

axe-core's selectors incorrectly handle the xmlns attribute #4302

Closed
1 task done
thuey opened this issue Jan 16, 2024 · 0 comments · Fixed by #4303
Closed
1 task done

axe-core's selectors incorrectly handle the xmlns attribute #4302

thuey opened this issue Jan 16, 2024 · 0 comments · Fixed by #4303
Labels
ungroomed Ticket needs a maintainer to prioritize and label

Comments

@thuey
Copy link
Contributor

thuey commented Jan 16, 2024 •
edited
Loading

Product

axe-core

Product Version

4.8.1

Latest Version

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

Issue Description

Expectation

The selector produced by axe-core should match an element on the page.

Actual

The selector produced by axe-core does not match an element on the page. This manifests itself in the axe DevTools Extension as being unable to highlight or inspect an element.

How to Reproduce

The underlying problem can be reproduced using this code snippet:

<html>

<body>
  <svg xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
  </svg>
  <svg xmlns="http://www.w3.org/1999/svg">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
  </svg>
</body>

</html>

Using axe-core's utilities to generate a selector results in an unusable selector:

const tree = axe.utils.getFlattenedTree(document)
> undefined
axe._selectorData = axe.commons.utils.getSelectorData(tree)
> {classes: {…}, tags: {…}, attributes: {…}}
axe.commons.utils.getSelector(document.querySelectorAll('circle')[0])
> ':root > circle'

Additional context

I've dug into axe-core, and it looks like the reason why this happens is because similar.length === 0 here. The reason why the list of similar is empty is because the clippath element does not "match" the selector svg[viewBox="0 0 80 80"][fill="none"][xmlns="http://www.w3.org/2000/svg"] > defs > clippath , even though it "should". The problem is with the xmlns attribute selector. If you remove it, the selector works. You can even play around with it with the code snippet I'll post in the thread and using document.querySelectorAll--the browser does not like the xmlns attribute. I was about to post an issue in Chromium, but tried it out in other browsers and realized they all have the same issue. After further digging, it seems that not supporting namespaces is just part of the spec.

A possible solution is to add xmlns to the list of ignored attributes:

axe-core/lib/core/utils/get-selector.js

Line 8 in f3569c5

const ignoredAttributes = [

@thuey thuey added the ungroomed Ticket needs a maintainer to prioritize and label label Jan 16, 2024
@thuey thuey mentioned this issue Jan 17, 2024
Merged
thuey added a commit that referenced this issue Jan 18, 2024
@thuey
fix(utils/get-selector): ignore 'xmlns' attribute when generating a s…
938b411 
…elector (#4303)

Ignore the "xmlns" attribute when generating a selector, since the
selector spec does not support namespaces.

Closes: #4302
straker pushed a commit that referenced this issue Feb 7, 2024
@thuey @straker
fix(utils/get-selector): ignore 'xmlns' attribute when generating a s…
8c68546 
…elector (#4303)

Ignore the "xmlns" attribute when generating a selector, since the
selector spec does not support namespaces.

Closes: #4302
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
ungroomed Ticket needs a maintainer to prioritize and label
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(utils/get-selector): ignore 'xmlns' attribute when generating a selector dequelabs/axe-core
1 participant
@thuey