Placeholder component: Replace upload icon with text when rendering labels

[RahiDroid]

What?

• Renders the text label instead of the upload icon for the Placeholder component when the Show button text labels preference is enabled.
• Fixes a minor UI issue with the block mover when labels are enabled.
• Reduces specificity for the Featured image block's styles so that it can be overwritten when labels are to be rendered for the placeholder. This change overlaps with a change in Post Featured Image: Fix borders after addition of overlay feature #44286, but is required for this PR as well. Credit to the PR author.

Why?

• Check out Accessibility issue with the Overlay functionality #44115 (comment)

How?

Testing Instructions

Since this PR touches a couple of widely used components' styles, it should be tested thoroughly.

1. Open the post editor.
2. Go to Options > Preferences > General and enable Show button text labels. See this comment for visuals of this option.
3. Insert a Post Featured Image block.
4. Move your focus on the block by clicking on it if you don't see any button or block controls for it.
5. You should see a button with the label Add a featured image instead of the circular upload button.

Screenshots or screencast

Before	After

[jasmussen]

Nice, that makes good sense! Can the label be generic, just "Add"? Or even "Add media"?

[RahiDroid]

Nice, that makes good sense! Can the label be generic, just "Add"? Or even "Add media"?

Thank you for checking @jasmussen! This line ensures that whatever is passed in the aria-label attribute, which is the label prop on the Button component gets used as the text/label. Do you suggest we add a fallback to the Button component in case we don't get passed the label attribute? I don't think a Button will be able to has a default/generic label. Or were you referring to any other label?

[jasmussen]

Can we just change the aria-label to be "Add" or "Add media"? Mainly it's a question of fitting in constrained contexts, which is more likely to be possible with shorter phrases. Otherwise could we have the button use a regular label and have the aria label as a tooltip?

[RahiDroid]

@jasmussen Understood. I have shortened the button labels to be Add media which I believe is bit more descriptive compared to only Add and would make more sense for users using screen readers. The Button component currently uses the describedBy prop as the Tooltip and falls back to the label if it's not there. So I think we can let that logic be that way.

Here's what I am seeing after the change,

[jasmussen]

That seems like a good starting point to me.

In general we are challenged with space, there's no getting around that, and I would love a full iteration on how we can improve the "labels only" mode in a cohesive way. Not saying that to block this one, just noting that I'd love to see an experiene as refined as the MacOS Finder "labels only" mode, for example, which seems more considered than what we have today.

For this PR, though, seems like it mainly needs a code review.

[joedolson]

Should this be 'Add Image' instead of 'Add Media'? In these two contexts, as far as I know, we only support image assets, so I think that the greater specificity is advantageous. Otherwise, changes look good to me!

[RahiDroid]

Should this be 'Add Image' instead of 'Add Media'? In these two contexts, as far as I know, we only support image assets, so I think that the greater specificity is advantageous. Otherwise, changes look good to me!

Yup, totally agree on that. I have made that change, updated the screenshots in the PR description, and have updated my branch.

Thank you for looking into it. @joedolson you can proceed with the re-review of the code.

[RahiDroid]

Just a note for reviewers: The failing tests don't seem to be related to this PR.

[RahiDroid]

Hi @joedolson @jasmussen 👋

Could you please help me with a review on this one? Or guide me if there's anything the PR needs.

[joedolson]

I think it looks good as far as accessibility concerns go; I appreciate your handling the move up/move down alignment issues, as well. Code review will need to come from somebody with write access to the repository, but I can definitely give my thumbs up on the UI changes.

[RahiDroid]

@mikachan!! I need your help (yet again 🙈). Could you please help me know who could code review this PR?

[carolinan]

@RahiDroid Hi, are you able to solve the merge conflict and rebase the PR?

[RahiDroid]

Hi @carolinan, I'll look into this after few hours. Busy with work at the moment.

[RahiDroid]

@carolinan It appears that the blocks are being rendered inside an iframe, Editor canvas. And the class show-icon-labels gets added outside that iframe, and hence the styles don't affect the content part of the blocks any more. (It used to, previously)

If you go to that iframe and maybe add the class show-icon-labels on the body, you'll see the labels show up instead of the icons; when the preference is set to see labels.

Do you have any insights on this? Have there been any changes related to this lately? It would help me dig this further.

Edit: I have updated the branch with latest trunk if you wish to take a look.