Open sarajewett-toast opened 8 months ago
@sarajewett-toast Can you explain more about this what do you mean by the below text??
role="group"
This will prompt screen readers to announce each input as a member of the same group.
Currently when we arrive at our OTP input component, when using Voiceover on a Mac, the screenreader announces "Please enter verification code. Digit 1 0 edit text telephone" (where 0 is our placeholder value). I don't know what "edit text telephone" is supposed to convey to the user, but the hope is that adding role="group"
to the containing <div>
will prompt the screenreader to instead announce something more useful, such as "Digit 1, Verification code inputs, group". (This would of course also require the group to have an aria-label along the lines of "Verification code inputs".)
Our team's app recently went through an accessibility audit where the OTPInput component was flagged with the following issue:
The suggested remediation is to add
role="group"
to the<div>
containing the inputs. This will prompt screen readers to announce each input as a member of the same group.