Improve Placeholder instructions accessibility

[afercia]

Description

Follow-up to #38366

To make screen readers read out the Placeholder instructions text, #38366 changed the markup to wrap the contents in a fieldset, and the instructions in a legend. There are a few problems with this approach:

• it's semantically incorrect. The legend element is meant to give the fieldset an accessible name. It's not a place for generic instructions. Instead, it's meant to establish an association between the fieldset name and the control labels, to clarify the labels. A good explanation of correct usage is available on the GOV.UK blog at https://accessibility.blog.gov.uk/2016/07/22/using-the-fieldset-and-legend-elements/
• More pragmatically, some screen readers repeat the legend text when focusing each control contained within the fieldset. This adds a lot of noise for screen reader users.
• Worth also noting that sometimes the instructions text is so generic that is a bit pointless. For example: 'Insert a table for sharing data' doesn't help users to understand how to use the block controls nor clarifies the control labels.

I do understand the good intent of the change from #38366 as it's important to make sure important instructions are available to all users. However, I'd like to propose to explore a better solution.

Lastly, sometimes the Placeholder doesn't render any control but it still renders a fieldset and legend. That's basically a semantic group that doesn't actually group anything.

See screenshots below to illustrate some cases, tested with VoiceOver and Safari.

Step-by-step reproduction instructions

• Use Safari and VoiceOver.
• Add blocks with a placeholder e.g.: Image, Columns, Table.
• Observe that when the block is added for the first time, the instructions text is read out twice.
• Press Tab to navigate to the other controls within the Placeholder.
• Observe that the instructions text is read out when focusing each control.

Screenshots, screen recording, code snippet

Instructions read out twice when adding a block for the first time:

Table block: the Instructions text 'Insert a table for sharing data.' is repeated for each control, which is redundant and a bit pointless:

Audio block: the Instructions text 'Upload an audio file, pick one from your media library, or add one with a URL.' is repeated for each control:

Columns block (BlockVariationPicker): the Instructions text 'Select a variation to start with.'is repeated for each control:

Template part block: the Instructions text 'Choose an existing template part or create a new one.' is repeated for each control:

Table of Contents block: the fieldset is empty: it shouldn't be a fieldset in the first place:

Various media block: when the user doesn't have permission to upload media, the fieldset is empty and the legend is only used to show the text 'To edit this block, you need permission to upload media.'. This should be a notice rather than a fieldset + legend:

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

[afercia]

Thinking a bit more in depth, I'm not sure the Placeholder can render a fieldset + legend element in the first place. That would only be appropriate when the placeholder content is made of form controls. However, there are cases where the content is not made of form controls. Some examples (there are more ones):

Latest Posts block. When there are no published posts, the informative text is rendered within a fieldset:

Calendar block. When there are no published posts, the informative text is rendered within a fieldset:

Categories list and Reusable blocks. While the block is 'resolving', ie. still fetching content, the fieldset only contains a spinner:

More importantly: to my understanding third party blocks could provide placeholder with any kind of content, even with nested forms and fieldsets, which is less than ideal. As there's no way to predict what kind of content will be within the placeholder, assuming a fieldset is hte most appropriate markup seems not ideal.