Description

Some blocks use the BlockVariationPicker to visually present variations, for example the Columns and Query loop blocks.

The visible text below the variation buttons is placed within a <span> element with an ARIA role=presentation. This role doesn't do anything, as it's only meant to remove native roles, if any. A span element doesn't have native role.

If the original intent was to hide this text from assistive technologies, an `aria-hidden="true" should be used instead. However, I'd recommend to keep the text available to assistive technologies, as it may add some value. Worst thing can happen is some redundant information.

Introduced in #19789

From the ARIA 1.2 spec:

presentation role
An element whose implicit native role semantics will not be mapped to the accessibility API. See synonym [none].

For any element with a role of presentation and which is not focusable, the user agent MUST NOT expose the implicit native semantics of the element (the role and its states and properties) to accessibility APIs. However, the user agent MUST expose content and descendant elements that do not have an explicit or inherited role of presentation. Thus, the presentation role causes a given element to be treated as having no role or to be removed from the accessibility tree, but does not cause the content contained within the element to be removed from the accessibility tree.

NOTE
In ARIA 1.1, the working group introduced none as a synonym to the presentation role, due to author confusion surrounding the intended meaning of the word "presentation" or "presentational." Many individuals erroneously consider role="presentation" to be synonymous with aria-hidden="true", and we believe role="none" conveys the actual meaning more unambiguously.

Step-by-step reproduction instructions

• Add a Columns or Query loop block
• Note: to make the block variations appear in the Query loop block, click 'Start empty'.
• Inspect the source of the visible text below the variation buttons.
• observe the role="presentation" attribute is present.
• Optionally test with a screen reader.
• Navigate the variations using the screen reader arrows navigation (ie. with VoiceOver it's Control+Option+Right (or Left) arrow)
• Observe the visible text is read out.

Screenshots, screen recording, code snippet

Query loop block:

Columns block:

Environment info

No response

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