dequelabs / dequelabs/axe-core
`<slot>` with `display: inline-block` causes color-contrast to be incomplete
- Dominant language
- JavaScript
- Stars
- 7.5k
- Forks
- 933
- Avg merge
- 2d 23h
- Merged PRs (30d)
- 17
Description
### Product
`axe-core` via `@axe-core/playwright`
### Product Version
_No response_
### Latest Version
- [X] I have tested the issue with the latest version of the product
### Issue Description
#### Expectation
Adding `display: inline-block` styling to a `` 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:
```html
Slotted
const shadowRoot3 = document
.querySelector('#shadow-root-3')
.attachShadow({ mode: 'open' });
shadowRoot3.innerHTML = `
<button id="shadow-button-3"><slot style="display:inline-block;"/></button>
`;
```
and add this line to your `axe-playwright.spec.ts` ["with include shadow DOM" test](https://github.com/dequelabs/axe-core-npm/blob/364e944faa86f679785b46976d04fe329d32c45b/packages/playwright/test/axe-playwright.spec.ts#L623)
```ts
.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. 👍
Contributor guide
Assessment
This issue has not been assessed yet.