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

<slot> with display: inline-block causes color-contrast to be incomplete #4468

Open
1 task done
frehner opened this issue May 20, 2024 · 2 comments
Open
1 task done
Labels
color contrast Color contrast issues fix Bug fixes

Comments

@frehner
Copy link

frehner commented May 20, 2024

Product

axe-core via @axe-core/playwright

Product Version

No response

Latest Version

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

Issue Description

Expectation

Adding display: inline-block styling to a <slot> element should not cause the color-contrast rule to be incomplete.

Actual

The color-contrast rule is incomplete with the warning:

Element's background color could not be determined because it is overlapped by another element

How to Reproduce

If you update axe-test-fixtures/fixtures/shadow-dom.html to include this new code:

<span id="shadow-root-3">Slotted</span>

<script>
      const shadowRoot3 = document
        .querySelector('#shadow-root-3')
        .attachShadow({ mode: 'open' });
      shadowRoot3.innerHTML = `
        <button id="shadow-button-3"><slot style="display:inline-block;"/></button>
      `;
</script>

and add this line to your axe-playwright.spec.ts "with include shadow DOM" test

        .include([['#shadow-root-3', '#shadow-button-3']])

And add an assertion for that new element. The test will fail, and you'll find the color-contrast rule will now be in results.incomplete.

Additional context

I'm fairly new to this repo, so I suspect that the issue may be in axe-core but I'm not sure. Let me know if that's the case and that I need to move it there. 👍

@Zidious
Copy link
Contributor

Zidious commented May 20, 2024

Hey @frehner,

Thanks for reporting this issue. We'll investigate and circle back shortly!

@dbjorge dbjorge transferred this issue from dequelabs/axe-core-npm May 20, 2024
@dbjorge
Copy link
Contributor

dbjorge commented May 20, 2024

Thanks for the issue @frehner! Your intuition was correct, this is an axe-core issue and not an axe-core-npm issue; I've transferred it accordingly.

This is happening because axe-core doesn't fully include slots with overridden display styles in its flattened tree - it skips over them and considered the slotted text to be a direct child of the button in this case, but then when it goes to identify "what is the stack of elements at the button's center point", that operation gives back a stack that does include the slot. So color-contrast gives up and says "oops, there's some element on top of the button (the slot), so I guess I have to incomplete the button".

Omitting styled slot elements like this from axe's flattened tree was originally an intentional decision, not an accidental omission (see commit d489c43 within the original shadow DOM implementation PR). The original motivation for omitting it was that Chrome 59 had "broken" support for it. I'm not sure whether there are still any issues with it browser support today, but I note that re-enabling the intentionally-disabled behavior to support this case (removing the false from the conditional on get-flattened-tree.js#L147) does fix this specific repro in chrome stable.

Different recent issue with the same root cause: #4335

@dbjorge dbjorge added the ungroomed Ticket needs a maintainer to prioritize and label label May 20, 2024
@straker straker added fix Bug fixes color contrast Color contrast issues and removed ungroomed Ticket needs a maintainer to prioritize and label labels Jun 3, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
color contrast Color contrast issues fix Bug fixes
Projects
None yet
Development

No branches or pull requests

4 participants