Cover Block: fixed background image fails a11y test

[kstarcher]

Description

This is related to #30505 which was fixed and closed, but a slightly different issue.

When a regular background image is used in a cover block, the alt text is correctly added and displayed in an img tag. However, if the "Fixed background" or "Repeated background" options are checked, the img tag switches to a div with role="img". SiteImprove then flags it as not having alt text, because an element with role="img" is supposed to have alt text. This happens regardless of whether or not the image has alt text in the media library.

Step-by-step reproduction instructions

1. Add a cover image block and give it an image background
2. Under "Media Settings", give it alt text
3. Flip the "Fixed Background" switch on
4. Save and view, then run SiteImprove to test for accessibility

Screenshots, screen recording, code snippet

Environment info

WP 6.2 using a custom theme. Gutenberg not installed, just using block editor.
Mac Chrome with SiteImprove extension.

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

[cngodles]

True. If the <div> element has the attribute/value pair of role="img", it either needs an aria-label or a role to be set to presentation. This is a perfect example of automated testing catching this condition.

[joedolson]

This should be able to cover both cases: an image that is presentational or an image that contains content. I don't think users should generally add content images into a fixed background image, but...they probably will, so we might as well support that accessibly.

This means that the fixed cover background should support an alt text field. If the alt text field has content, then the div should have a role of img and an aria-label containing the alt text.

If the alt text does not have content, then the role=imgshould be omitted. Role=presentation is not required, as that's the native role for a div element.

[carolinan]

The block already has an alt text input field when an image is selected, so we should ensure it is not hidden when the fixed or repeated options are enabled.