[bug] color-contrast issue detection incosistent

[DerTimonius]

Product

playwright

Product Version

4.7.3

Latest Version

• [X] I have tested the issue with the latest version of the product

Issue Description

Expectation

When performing accessibility tests they should consistently detect color-contrast issues.

Actual

Of the two visible color-contrast issues, only the button is detected as a problem

How to Reproduce

I created a small reproduction repo: https://github.com/DerTimonius/axe-playwright-bug-reproduction

Additional context

The Chrome extension is showing the same behavior.

[straker]

Thanks for the issue. I looked into it and think I've identified what's going on. The problem is that our code looks at the element stack for each individual text rect of the paragraph. The top 2 lines include the <div id="root"> element in their element stack but the last line is too short and does not overlap with the root element. This causes the code to exit with a Needs Review message of partial overlap. The problem is that the missing element does not contribute to the background color, but we don't know that at the point of the code this happens.

Will need to discuss with @WilcoFiers what should happen in this case.

[straker]

I'm going to move this bug to axe-core since that is where the problem is occurring.

[DerTimonius]

(sorry for the late reply, somehow didn't get a notification..)

Thanks for looking into this. I found this bug while writing e2e tests at work and it only seems to happen with modals if the background color of the normal page is changing, though in case of the tests they detect a nonexistent issue (dark text with light background in the modal, dark background of the page outside the modal).