react-otp-input

react-otp-input copied to clipboard

Ensure that we follow WAI-ARIA guidelines specifications and have the correct aria attributes.

Hey @apollonian I would like to work on that. Can you provide a little more description about the issue and assign it to me ?

Yes please @rahulmalhotra!

The component currently renders a number of input elements (specified via numInputs prop with the default being 4). While I believe these inputs can be navigated by keyboard, the component lacks any aria-* attributes for screen readers or other assistive tech. For e.g. I think it would be good if we add an aria-describedby or aria-label prop to the component which can be used incase a label is not associated to it.

Let me know if you have any other doubts. :)

Thanks..!! I am working on the same :-)

Hey @apollonian and @ajayns I am planning to add input value to aria-label and type of input to the aria-describedby like below:-

aria-label={value} aria-describedby={isInputNum ? 'number input' : 'alphabet input'}

Is there any specific value you want to suggest ?

@rahulmalhotra aria-describedby wouldn't work the way you have commented. This attributes needs to refer to an id present somewhere in the markup.

example:

<button ... aria-describedby="nameHeleper">submit</button>
<p id="nameHelper">By clicking the submit button, you agree to share your info with us</p>

and with input fields aria-labelledby is more suitable which works the same as described above.

I think in that case, adding an aria-label will be fine. Waiting for the confirmation on this @apollonian

@rahulmalhotra Yep! Also, aria-label could be a prop that you pass to the component (in the snippet I see that it is value) and is applied to the wrapper. And we'll add aria-labelledby to inputs as @vikas-parashar mentioned. I think that would be a good approach.

Got that. But is there any specific value that I should use for aria-label and aria-labelledby ? I am using {value} currently for aria-label and there's nothing I have thought yet for aria-labelledby

@rahulmalhotra We'll add them as props for the component itself.

Okay. Cool. I'll update that soon.

I can take a look and add any aria-props, or fixes towards violations, will be using deque axe testing platform if you don't mind?

have added in some color contrasting in the pr as well as creating a landmark for a main. If possible, do you mind adding in the "hacktoberfest-accepted", if participating?, if so that'd be awesome. Hopefully this will help out!

https://github.com/devfolioco/react-otp-input/pull/219

We are now passing aria-label prop to the input component and since the input component is fully customizable now with v3, you can provide override the prop if needed