Accessibility support

[geekf]

With increasing emphasis on making websites accessible to people with disabilities it is good time to make this component A11y compatible too. Not having A11y support has both business and legal impact.

For rating, there's a fine example at W3C WAI Custom Controls.

If you are fine with it I am planning to do that on v1. I am asking to do it on v1 as it has backward compatibility implications as it would require me to change each StarSymbol's span to input type="radio". Alternatively I can keep span and put role radio but it would require custom keyboard handling to be implemented which is not advisable especially for cases where a native control is available.

[mkarajohn]

Nice! Let me ping @dreyescat and see how can we proceed with this

[dreyescat]

I like it! Go for it! 👍

I have to admit I have never dealt with a11y... What kind of backward compatibility implications we will have to face? I mean, will it only internal RatingSymbol structure be affected? Of course, if you need to introduce backward compatible changes then v1 is the place.

Not sure if this is important but I must say that react-rating is closer to a number input with min, max and step than a radio/select component.

[geekf]

There were a few missing characters in my earlier comment. I have updated it. It would require changing span to input which would result in an extra key for people using it inside a form with separate onChange handling. Alternatively they can just use rating component itself for their input.

From what I see in the component using it as number is just an artificial limitation. It can easily be extended to use non-numeric values like having "unlikely, neutral and likely" for a 3 point rating.

[maxchernin]

@mkarajohn @dreyescat

Hi guys, acessability should support atleast two main features, https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex and https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute

does this component support inputProps to control the native element? its recommended to add this attr to accept an object and apply all native attrs like tabindex passed in this obj. can you replace the rating symbol component with a interactive element instead of the elment? this would make it possible to navigate on each symbol using the tab button

aria-label passed to inputprops will allow this component (the rating - not rating symbol) to read a message to the user.

Please consider adding these two first, especially the tabindex, as it would make this component work well on forms, and overall check out

[dreyescat]

I would like to create an accessible version of this component but I haven't figured out how so far.

The original idea comes from the python's range function. That is why I think this component is more similar to an <input type="range"> than an <input type="radio">. In other words, in my opinion this component is closer to a slider than a select component.

I will answer specific questions in issue #101.

[oliviertassinari]

@dreyescat I was wondering about the same thing for a long time too. I think that both radio and slider range is OK. My preference would be toward a radio.