Tab Issue When Creating a Block Item

[prjseal]

Which exact Umbraco version are you using? For example: 9.0.1 - don't just write v9

8.17.0

Bug summary

When using the tab key to go through the properties it doesn't tab to the colour picker properties. See gif

Specifics

No response

Steps to reproduce

Create a block list Creata a block item Tab through the properties Try to tab to the colour properties

Expected result / actual result

I would like to be able to tab to all properties and use the keyboard as much as possible for accessibility reasons

[bjarnef]

Yeah, the color picker isn't really accessible. Originally Umbraco used Spectrum http://bgrins.github.io/spectrum/ but later updated to use the v2 (fork of the original repository) https://seballot.github.io/spectrum/

It could probably use a button element and toggle the popup. However the palette still isn't navigable from keyboard.

Not sure if HQ has considered something regarding color picker is the UI library yet? or it is worth looking at before backoffice rebuild?

Something I also had in mind when building the Color Pickr package is that I wanted it to include touch support and built on vanilla JS, where I used this project https://github.com/Simonwep/pickr

I also found this accessible color, with touch support and built on vanilla JS: https://github.com/mdbassit/Coloris

However we probably can't replace the existing color picker library used in <umb-color-picker> component without breaking, so if we wanted to use another color picker, it should probably be a new component.

Or it could be a web component in the UI library. Maybe something like this: https://www.npmjs.com/package/color-picker-web-component

https://gh.grahamsh.com/color-picker/

[kjac]

Hi everyone.

I can confirm that this is still an issue in V10. Unfortunately this is an upstream issue in the chosen color picker component as correctly pointed out by Bjarne.

I honestly have my doubts if this can be fixed from within Umbraco, but I'll mark this as up for grabs all the same if anyone wants to have a go at it.

[github-actions[bot]]

Hi @prjseal,

We're writing to let you know that we would love some help with this issue. We feel that this issue is ideal to flag for a community member to work on it. Once flagged here, folk looking for issues to work on will know to look at yours. Of course, please feel free work on this yourself ;-). If there are any changes to this status, we'll be sure to let you know.

For more information about issues and states, have a look at this blog post.

Thanks muchly, from your friendly Umbraco GitHub bot :-)

[bjarnef]

I submitted a PR https://github.com/seballot/spectrum/pull/38 to fix some accessibility issues in the spectrum-colorpicker2 color picker used in Umbraco.

[kjac]

You rock @bjarnef 🚀

Let's keep this issue open for a bit to keep track of that PR and hopefully have an updated and tab-friendly dependency eventually 🤞