Bug / UI : Colours crossed out still selectable

[Lewiscowles1986]

when using the https://ecommerce-vue-nuggets.herokuapp.com/ variance selector for colour, even if the colour visually looks disabled, I can still select it and interact with it as-if it were a valid choice.

Why report this

This is confusing for the end user

Expected behaviour

• tab-selectable & keyboard interaction with colour variant
• disabled / not available variant cannot be selected or tabbed to (standard form behaviour)
• use of custom-styled form-elements with labels for accessibility

[Shreerang]

Let's address the 2 things here -

First things first. Accessibility is not implemented for any of the components. I am actively working on fixing it. It is on my priority list.

As far as the selecting "unavailable color" is concerned, it is valid feature and not really a bug. On an e-commerce site, the color picker usually works in combination with the size picker. A lot of times, you pick a color and see what sizes are available and vise versa. Also even if a color is unavailable, numerous sites allow you to add that product to wishlist so that the user can be notified when that product in the particular, currently "unavailable" color becomes available.

The unavailable color and size are both represented differently from available colors and sizes. They will also be read differently for screen readers (yet to be implemented.)