Update ARIA labels / described by on IDV doc auth FileInput component#7287
Update ARIA labels / described by on IDV doc auth FileInput component#7287
Conversation
When FileInput does not have a file added to it, ensure ARIA label includes the prompt to drag + drop a file. User testing found this was needed, as JAWS does not automatically read `aria-describedby` by default (it requires extra interaction). changelog: Improvements, Accessibility, Improve document upload screen reader text
aduth
left a comment
aduth
left a comment
There was a problem hiding this comment.
LGTM! 👍
In retrospect, it feels odd to me that a label would include dynamic details of the current state of the input or additional instructions on how to use it (the latter being what I'd expect aria-describedby to be used for), though (a) this is how it has existed already and (b) if the feedback is coming direct from screen reader users themselves, I defer to their judgment as being most familiar with real-world usage. Makes me wonder when (if ever) aria-describedby is the right tool. 🤔
| * @param {string} fileLabel String velue of the label for input to display | ||
| * @param {string} fileLabel String value of the label for input to display | ||
| * @param {Blob|string|null|undefined} fileValue File or string for which to generate label. | ||
| * @return {{'aria-label': string} | {'aria-labelledby': string}} |
There was a problem hiding this comment.
This'd be a good file to port to TypeScript, though having just opened the file myself, I see it's a big one, and probably not a task we'd want to undertake here 😅
|
I think Agree, about the TS conversion, I'll file a cleanup ticket. |
2 participants
🎫 Ticket
LG-7770
🛠 Summary of changes
Testing identified that users wanted more detail in the ARIA label attached to the
FileInputcomponent in the IDV doc auth upload step. The request here was that the label include not only the field name ("Front of ID" / "Back of ID"), but the next step as well ("drag file here or choose from folder").How it used to be
Previously, there were two separate hints attached via the
aria-describedbyattribute: "Drag file here..." and "Must be a JPG or PNG".Some screen readers (tested in JAWS) would not read this
aria-describedbycontent initially without the user triggering it in some way, leading to a confusing experience where the user would focus the control and just hear "Front of ID, button".What I changed
This change reworks the component to use
aria-labelledbyto refer to the field name and next step elements, while leaving the "Must be a JPG or PNG" inaria-describedby.The result is the user hearing e.g. "Front of ID - drag file here or choose from folder" on focus, followed by "Must be a JPG or PNG" .
📜 Testing Plan
Provide a checklist of steps to confirm the changes.
👀 Screenshots
Videos of the new functionality are in this Slack thread.
🚀 Notes for Deployment
N/A