Issue #6001 - remove label in the shortcode block

[bobbingwide]

Description

Removes the Label from inside the shortcode block.

• The icon was wrong anyway ( code-editor rather than shortcode)
• The text label of Shortcode was unnecessary
• It used up space
• It was inconsistent
• Not required now that there's a new visual indicator for block names.

How Has This Been Tested?

Manually.

Screenshots (jpeg or gifs if applicable):

Types of changes

I deleted some code.

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code has proper inline documentation.

[youknowriad]

I believe there's some CSS we can remove as well.

[danielbachhuber]

👍 Seems reasonable to me but I've flagged for a second review.

[youknowriad]

Code looks good, just waiting for a design check @karmatosed @jasmussen to approve.

[afercia]

If I got it correctly, this PR removes the <label> element, if so I'd like to remind once again that any UI control needs to be labeled, especially form fields.

[danielbachhuber]

@afercia Can you suggest how the PR should be updated to include the label in the correct manner?

[afercia]

@danielbachhuber I need a few minutes to finish something and switch VVV installation. In the meantime, Id suggest everyone to not think just visually. Labels are meant to give UI controls and form fields an accessible name. This name is used by assistive technologies and it's required.
You wouldn't every build form without properly associated <label> elements, right?

• screen readaers use labels to announce what the field is about
• speech recognition software use the label to empowe user to voice command click xyz to focus,f or example, a form field or click a button
• visible text label ebnefit all users

[youknowriad]

Good catch @afercia I believe this could be replaced with an aria-label on the PlainText component. Probably less optimal than a visible label but A good alternative if we want to keep it visually this way.

[jasmussen]

Noting that I polished the shortcode block, including the label, in #5605

I will rebase off whatever happens in this PR, but figured I'd share the work in progress.

[afercia]

@youknowriad unfortunately an aria-label wouldn't help so much speech recognition software users. They need a visible accessible name to be able to voice a proper command. For example, they need to know a form field accessible name (given by the label) is "address" to be able to voice a command "click address" and focus the field.

On other controls, e.g. the icon buttons, we're exposing the accessible name given by aria-label with the tooltips. That requires to make the tooltips appear to know the name, it's not 100% ideal but at least it's something.

On a form field we can't use a tooltip, I guess 🙂 There should always be a visible label that matches the accessible name. In this specific case, I'd keep the previous label. Maybe I'd consider to move it above the field, so the field can be full width.

In other cases, for example the post title, we're using a visually hidden <label> only because it mathces the visible text given by the "placeholder" (not a real placeholder indeed). That way, users can see "Add title" and the accessible name given by the label is "Add title",a nd it works.

The most simple thing in this case is to keep the label. Removing it is definitely an accessibility regression compared to the previous implementation.

[bobbingwide]

The outer div for the shortcode block already has an aria-label in the same style of the outer div for a paragraph block. At present there's not much difference between these blocks other than what the user types into them. Ditto for a Heading block.

Does that mean that the textarea field should have the same aria stuff as these blocks.

Strip away the CSS padding around the text field and visually the blocks are very similar.
I know nothing at all about a11y other than what I've heard from Graham Armitage.

Perhaps I'll learn something at #wcldn on Contributor day. If I don't then my Countdown and CSV blocks, both shown above, will fail the test.

[afercia]

The outer div is going to change in #5709 ad needs an aria-abel because it's focusable, and it will have a proper ARIA role.
Non-editable blocks like the shortcode one are different from editable blocks, as they're made of form fields. Form fields need to be labeled. Basic HTML even before being a11y. See also my previous comment #6033 (comment)

[danielbachhuber]

Closing per #6033 (comment)

The most simple thing in this case is to keep the label. Removing it is definitely an accessibility regression compared to the previous implementation.