Widgets page: don't use icon-only control for no reason

[afercia]

Describe the bug

For accessibility, user interface controls that use only icons and no visible text are an anti-pattern, for many reasons. This issue has been discussed at length over 3 years of the Gutenberg development (so far) and the accessibility team always strongly recommended to prefer controls with visible text, where possible.

In some cases, the UI doesn't provide enough space to display text, for example in the various block editor toolbars. In these cases, the accessibility team accepted the usage of icon-only controls as a compromise and to not block development. The problem is still pending a solution and some important exploration for alternative layouts were made, see for example #10524.

However, when the UI does provide sufficient space to use text, there's really no reason to use only icons.

In the new widgets page, the full-width "Add block" button displayed at the bottom of each widgets area uses only an icon:

In this case, there's no reason to use an icon. Visible text should be used instead.

[mapk]

Good catch! We've actually updated this design since. Here's the new design which looks just like the current Block Editor.

So I'll close this issue regarding the Widget Editor. Thanks!

[mapk]

In case I wasn't too clear, I mean that the design has been updated, but it still has yet to be implemented in the code.

[afercia]

Thanks @mapk. I'd like to close this issue when the code will be implemented, also because the screenshot you attached in your comment shows an empty widgets area while my issue is about the "add" button displayed when a widgets area does have active widgets.

What the new design proposes in this case? Where I can see the new proposed design? Thanks.

[mapk]

I'd like to close this issue when the code will be implemented,

Totally cool, thanks for reopening.

my issue is about the "add" button displayed when a widgets area does have active widgets.

Maybe I wasn't clear, but these areas will act just like the Post Editor. So even with blocks, there won't be a large + button at the bottom.

This gives a pretty decent understanding: #24663 (comment)

Basically there's no indicator to add a block below just like in the current Editor. Adding a new block can be achieved by tapping Enter on the keyboard to get the / inserter or moving the mouse to the topbar + Inserter.

[afercia]

Thanks for the clarification.

Basically there's no indicator to add a block below just like in the current Editor.

Actually, in the block editor that depends on what the selected block type is. Paragraphs don't show any control to add a block after them. Other block types do, for example the Image block. So I wouldn't say there's a "standard" pattern in the block editor.

[mapk]

Paragraphs don't show any control to add a block after them. Other block types do, for example the Image block.

Yep, thanks for pointing that out. It work just like that.

[afercia]

On a side note: while I do understand some of the reasoning behind that design decision, I think the fact paragraphs and other block types behave differently is confusing for users and the current behavior tends to be a bit too smart to be actually useful. I'd like to see that behavior reconsidered.

[draganescu]

I believe #25635 closed this?

[afercia]

Well, the "default block list appender" is an icon-only control...

[mapk]

I suggest we close this because we're attempting to bring the widget areas on par with the post editor to maintain consistency and predictability for users.

If there's a problem with that icon because it's implemented differently than in the post editor, let's fix that, but otherwise this issue should address the overall implementation and shouldn't focus solely on the Widget Screen.

[afercia]

we're attempting to bring the widget areas on par with the post editor to maintain consistency and predictability for users

I'm not sure this is a value per se. The two user interfaces are pretty different and have different needs. The block editor one is way more complex and, to some extent, I understand the need to decrease the overall visual "weight". Granted, changing the icon-only button also on the block editor would be very appreciated.

Instead, the widgets user interface is way "lighter" than the block editor one. Also, there's a lot of space to expand the icon-only button and change it to a button with visible text.

From an accessibility perspective, icon-only controls are an anti-pattern and should be only used when there's no other option. In this widgets screen I don't see any need to use icon-only controls and I'd like to see some exploration to use buttons with visible text instead. 🙂

[draganescu]

Hi @afercia it's hard to follow what this issue in particular is about. Can we open separate issues on generic design feedback and close this one as the actual thing (the icon only add button) is now gone and the behavior is consistent with other places in WordPress. I am not saying anything about any other comment here, just a ping to form new discussion on the unrelated points on this issue.

[afercia]

@draganescu not my intent to get into arguments but, honestly, I don't understand this kind of feedback.

it's hard to follow what this issue in particular is about.

It's very simple actually. Avoid to use icon-only controls and use them only when there are no other options.

close this one as the actual thing (the icon only add button) is now gone

It's not gone. It's just replaced with another icon-only button: the "+" button.

and the behavior is consistent with other places in WordPress

The fact the behavior is not ideal also in other places (though consistently non-ideal) doesn't mean this is not an issue.

I tried to explain in my previous comment that the Widgets screen and the Block editor screen are two very different cases. Even if I create a new issue focusing on the general design pattern, then there will be the need to differentiate anyways between the specific cases so we would need a new issue for the block editor page, a new one for the Widgets page, a new one for the xyz page, and so on. I don't understand what is the value in closing an issue and then having to open a new issue that will be basically identical.

I'd also like to add that the accessibility team is pointing out icon-only controls are an accessibility anti-pattern since at least a couple years now. The icon-only anti-pattern was one of the main points outlined in the Gutenberg accessibility report published on October 2018. See https://make.wordpress.org/accessibility/2018/10/29/report-on-the-accessibility-status-of-gutenberg/

Can we open separate issues on generic design feedback

Actually, there's already a general issue on the icon-only controls, created on April 2019. See #15311

I do realize that not all developers and designers may be aware of discussions and issues raised (several times) in the past and that's understandable but this is a long standing issue that seems to be continuously deprioritized and postponed. I'm not sure that's the best way to improve collaboration between teams.

[noisysocks]

Both the post editor and widgets editor use the same component for the block appender. A single code change will fix it in both places. I'm going to close this issue in favour of #15311 which tracks the broader issue here. I've added a note to #15311.

[afercia]

Fair enough, as long as the change is included in the things to have for the WordPress 5.6 release, as the Widgets page is a new feature.

[draganescu]

Howdy @afercia I really did not mean to come across as if I have an issue with anything you said :D It wasn't even feedback!

What I meant was that as a comment here to an issue that is solved (the big plus button in the widgets editor) the real problem is less visible and we should open one or update the root issue discussing the general problem.

I think pointing this to #15311 is a good idea!