dequelabs / dequelabs/axe-core

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

Open
#4,468 2 comments 1 reaction 0 assignees View on GitHub
color contrast fix
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.