Feedback: The border color control is confusing

[carolinan]

What problem does this address?

I was attempting to add a border to a group block, but it took me several minutes to find out where the border color control was.

The control has no visual label or even a tooltip for sighted users.
In comparison, the main color panel for background, text and link has a clear visual label that says "Color" so I never have to consider what the icon means.

On its own, this crossed over circle icon does not represent color to me, nor an "empty color swatch" but "Stop".
Here is why... https://korkortonline.se/en/theory/road-signs/prohibitory-signs/ https://www.hse.gov.uk/workplacetransport/safetysigns/prohibitory.htm

Puzzled, I first clicked on the ellipsis menu in the Border panel.
I was expecting to need to enable the color control since it was not visible by default.
But the menu dropdown has no working options: Both the border and border radius options are visible but disabled.
Since the options are disabled I also can't hide any of the controls if I want to.

I wont pretend to be a designer or UX person :) But isn't the color important enough to be more prominent and its own element?

I am using Gutenberg 13.4.0 on WordPress 6.0.

[aaronrobertshaw]

Hi @carolinan 👋

You might be interested in some of the current efforts to improve the accessibility of the border controls. In particular, some of the friction you've experienced might be lessened by the addition of a tooltip to the border control's color dropdown button via #42348.

But isn't the color important enough to be more prominent and its own element?

Originally, the border color, style, and width, were all separate controls however they took up too much real estate in the inspector controls sidebar when split. There were also issues around how tightly related all the controls were e.g. removing border style when width was zero, or restoring previous a border color selection when adjusting the border width to zero and back etc.

You can read through some additional history and context about the current control design in #35602

[ciampo]

cc @WordPress/gutenberg-design

[jameskoster]

On its own, this crossed over circle icon does not represent color to me

I think this is a big part of the problem. I've been caught out by a similar issue in the past (#37752).

If the swatch always represented the actual value (including the transparent texture when none is set) that would help a lot imo.

[aaronrobertshaw]

If the swatch always represented the actual value

This is where the catch currently is. It appears that the block editor doesn't actually have access to the merged theme.json and global styles values that would determine the default value to be shown in the control here when the block itself doesn't have a selection.

There is an open PR (#34178) that aims to address this however, it is rather old so that fix might no longer be valid.

[carolinan]

I am closing this because there is now a tooltip when hovering over the control.