Color options (react-color): invalid HTML and accessibility barriers

[afercia]

The color picker added for the Button and Cover Text blocks (see #1999 and #2036) produces invalid HTML and is not fully accessible. Actually, the only accessibility feature I see after a first evaluation, is that the color controls are focusable.

It's sad to see UI controls made of <div>s and <span>s being introduced in WordPress. This is really not a step towards a state-of-the-art application. Instead, it's a step backwards.

I'm surprised this external library (react-color) has been introduced in Gutenberg without any preliminary, even quick and basic, evaluation for accessibility and web standards. Together with the calendar (react-datepicker, see #1311), it's the second time that this happens and I'm not sure this is the best path to follow in the effort to find a good balance between pretty functionalities and universal access for everyone.

• invalid markup: span elements inside div elements... div elements inside span elements...
• color controls are focusable but the indication of focus is insufficient: just a very slight box-shadow of the same color of the control, very hard to notice for people with vision impairments (in fact, I've barely noticed it) and almost invisible for some colors, for example the light gray
• complete absence of any semantics: divs and spans without any ARIA roles don't communicate to assistive technologies what they are; not to mention elements with native semantics are always preferable
• absence of any semantic indication of which color is currently selected
• when arrowing with a screen reader, the color controls are completely skipped because they're technically "empty"
• the only information available for screen readers is the title attribute for example: #f78da7 that gets announced, in the best case, as: number f seven eight d a seven group. The word "group" is added by some screen readers because they don't know what all those divs and spans are
• maybe more

For reference:

[mtias]

Sorry, but this is not a finalized proposal. You should see this as live mockup to help us evaluate what we need. Nowhere was it proposed to introduce invalid markup into WordPress.

span elements inside div elements...

I think you mean the opposite?

I'm surprised this external library (react-color) has been introduced in Gutenberg without any preliminary, even quick and basic, evaluation for accessibility and web standards.

The library doesn't force us to use their existing pickers. (It'd be good for us to report issues back to them so they can fix, in any case.) And I've stated that we are likely to build our own using their primitives since we want to have a "clear-color" option, a way to choose whatever color—not just those provided by the palette or the theme—, and obviously accessibility features.

If you have suggestions for how the markup for a list of color circles like the above should be, please, add it here as it'd be helpful once we get to construct our own.

[mtias]

Closing as we have a new color palette component with some improvement. Let's do specific issues to keep improving it.