devfolioco
Add role="group" to parent element of inputs for accessibility
- Describe the Feature Request
Our team's app recently went through an accessibility audit where the OTPInput component was flagged with the following issue:
The 6 digits edit fields are not grouped together programmatically. When radio buttons, checkboxes and other related form controls are visually presented as being grouped but the grouping is not programmatically exposed, users who cannot perceive the visual grouping may not be aware that the controls are related.
- Describe Preferred Solution
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.
@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".)