False positive: Color-contrast rule fails when partially opaque overlay div is placed on top of content

[iamrafan]

Expectation: Not fail the color-contrast rule when partially opaque overlay div is placed on top of a section of view port

Actual: Fails color-contrast rule

Motivation: Once the side panel opens, the blurred out content need not be accessible to the user.

Demo link: https://developer.microsoft.com/en-us/fabric#/components/panel

axe-core version: 3.1.2
axe-Coconut version: 3.7.0

[WilcoFiers]

Interesting. I reran this page with 3.2.2, 3.1.2 and 3.0.3, none of them report it. Is it possible this page has changed since?

[iamrafan]

@WilcoFiers No, I can still repro the issue using axe-core 3.1.2.

[roman-bytes]

@iamrafan Can you shed a little light on how this page is handling trapping the focus within the pop out panel? This will help with debugging. Thanks!

[iamrafan]

@Roman-II I am not on the same team, I am not sure how the focus is being handled here

[cnamal]

Pinged folks from OUFR to provide assistance.

[dzearing]

@kkjeer can you help take a look?

[kkjeer]

Panel uses a FocusTrapZone for focus management. @JasonGore is more familiar with the FocusTrapZone component.

[JasonGore]

This issue is reporting a contrast issue with Overlay. I'm not sure what to do here from a FocusTrapZone perspective. FocusTrapZone does not apply any styling. If there is a FocusTrapZone focus issue to look into, I'd recommend creating a new issue.

[jeankaplansky]

No docs required.

[chandana7393]

Tested, still reproducible.

Tested Environment:
Axe-coconut - 3.8.1.19604v
Chrome -75v
OS - Windows 10 64 bit.

[roman-bytes]

@chandana7393 That screenshot is expected behavior. We still raise an issue, just under needs review and "Element is overlapped by another element." Also took a peek at this myself and the current element being looked at is actually behind the panel on the right side.

[chandana7393]

@Roman-II This behaviour is observed in the previous axe-core version, then what are the changes in this rule and what is the expected output of this ticket would you please let me know.

[roman-bytes]

@chandana7393 The main change is moving those color-contrast violations to needs review. The screenshot you provided is the expected output, as the element is behind the panel.

[chandana7393]

Thank you @Roman-II
Tested, Working as expected.

Tested Environment:
Axe-coconut - 3.8.1.19721v
Chrome - 75.0.3770.142v
OS - Windows 10 64 bit.