DropdownMenu: `aria-checked` state is visually unclear

[Marc-pi]

Description

This an old UX issue : the blue highlight is not aligned with the active state and it brings confusion : user is clicking again on the desired value, and by clicking he's desactivating it !!! This is very annoying

ping @richtabor > this is another quickwin issue :-)

Step-by-step reproduction instructions

1. Use a block that permits to select container width within the toobar (ex: group > row)
2. Select the 3nd value of the dropdown
3. Click again and observe the blue hightlight, that is always set on the first elements, despite it is the first that is activated
   • the icon is turned plain black, but the higlight is not set on the right value

Screenshots, screen recording, code snippet

Environment info

• WP6.3 and below
• Gutenberg 16.5 and below

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

[Ren2049]

Also I find the black background not enough to indicate the selected state, it could be blue and maybe even cover the entire cell including the text. With a black background it looks like an icon, not like a state.

[Mamaduka]

The outline/highlight indicates the focused element. When you open any drop-down, the first item receives the focus; doing otherwise will be an accessibility issue.

[Ren2049]

Then please consider changing the background color of the selected state/cell to a light blue.

[Marc-pi]

yep, the UI behavior drives my customer crazy, it is not natural and brings confusion (seems the feature is buggy) adjustements about color / focus are needed, it is one of the most frequent feature in use when we build our templates

as stated by @Ren2049

Double clicks to deselect layout icons is counter intuitive, can lead to layout issues Only deselect by selecting something else.

i wanted for months to publish this issue also

poke @richtabor

The outline/highlight indicates the focused element. When you open any drop-down, the first item receives the focus; doing otherwise will be an accessibility issue.

why not focus the current active instead of the first one in any case ???

[afercia]

The highlight is actually the focus indication and it is required.

Also I find the black background not enough to indicate the selected state

Rather, I'd consider to improve the indication of the selected state. I'd agree the icon background/fill color change isn't a great indicator in a dropdown menu. Worth noting this issue applies to other menus as well, e.g. the 'Justify' menu.

To me, the editor uses too many, different, visual patterns to indicate the selected item in a menu. FOr example: a checkmark or a dot, or an icon with inverted colors. See screenshot with a couple examples:

In my opinion, a good UI should only use one pattern to indicate selection in a dropdown menu to provide a choesive, predictable experience to users. As such, I'd think this needs some new deisign to consider the selection indication holistically throughout hte whole editor UI.

Raising this issue from enhancement ot bug, as lack of clarity in the UI is a bug.