No background on Cover block creates a11y issue

[troychaplin]

Description

When adding a cover block and using light coloured text and a low opacity, the lack of background colour on the primary block wrapper leads to an a11y error. Currently the opacity is what appears influence a pass of a fail.

Suggested solution:

• add background color option to cover block and set it to #111111 by default when block is placed on page.

Step-by-step reproduction instructions

I have two ways to easily create a contrast error, both tested in 6.7 and the latest trunk of TT5 as of an hour ago. Both approaches were tested with HTML_CodeSniffer and Firefox Dev Edition and the Wave Accessibility Extension.

Approach 1:

• add cover block
• set opacity to 60

Approach 2:

• add cover block
• use dark image
• remove opacity
• use white (or bright yellow) text

In both cases using the inspector adding a background of black to the main cover div fixes the issue.

Screenshots, screen recording, code snippet

Environment info

• WP 6.7, Gutenberg 19.3.0, TwentyTwentyFive lastest trunk as of Oct 3rd @ 10pm EST
• Impacts all browsers
• Is not system specific

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

[carolinan]

I believe this is a duplicate of #39692?

[richtabor]

It's worth noting that this is dependent on the theme's background color (or the background color of the element the cover block is placed in. It's not possible to account for all variations and setting a fixed background color for the default state of cover block would not be an appropriate solution.

For resetting, there's a bit more of a path. Perhaps when resetting the image (removing it), the overlay value is set higher to engage the light/dark contrast, say 70.