Update ARIA attributes on ranges

aitchiss commented 2 years ago

Fixes https://github.com/omgovich/react-colorful/issues/171

In the `Hue` component:

aria-valuetext has been changed to aria-valuenow. Since the "human understandable" value is numeric, we don't need both valuetext and valuenow, and valuenow is the "required" attribute
aria-valuemin has been set to 0 and aria-valuemax has been set to 360 to provide a bit more context for screen reader users

In the `Alpha` component:

aria-valuenow has been added. This is in addition to aria-valuetext. Screen readers will generally read out the more understandable valuetext, but valuenow is a required attribute to accompany it
aria-valuemin has been set to 0 and aria-valuemax has been set to 100

In the `Saturation` component:

No change has been made! I don't believe there is an available numeric representation of the current value, so in this case I believe we can omit aria-valuenow for the time being until https://github.com/omgovich/react-colorful/issues/152 is addressed.

Snapshot tests have been updated to reflect the new attributes 🙂

Check out the docs for aria-valuenow for more context

omgovich commented 2 years ago

Oh, wow! Thanks a lot for this contribution! I'll check it as far as I can!

omgovich commented 2 years ago

Tested it locally with VoiveOver and added a simple test for that. Everything works well. Thanks again!

aitchiss commented 2 years ago

Thank you @omgovich!

smellai commented 2 years ago

@aitchiss thanks for this improvement! @omgovich looks like the demo in the homepage is not updated yet with this change?

Looking forward the fix for #152 too

omgovich / react-colorful