[PRP-340] Changing label elements, correcting screen reader behavior.… - Githubissues

navapbc / wic-participant-recertification-portal

https://navapbc.github.io/wic-participant-recertification-portal/

Apache License 2.0

0 stars 1 forks source link

[PRP-340] Changing label elements, correcting screen reader behavior.… #108

Closed microwavenby closed 1 year ago

microwavenby commented 1 year ago

… Updating i18n text

Ticket

https://wicmtdp.atlassian.net/browse/PRP-340

Changes

Document item is no longer a <Label> element
<Label> element is the text in the drop target "Click to choose a file"
I18n strings changed to indicate "Click" behavior

Context for reviewers

We CAN disable the file input component's focus and setaria-hidden and use the label's click through behavior to trigger the browser's picker -- but it means coding some custom javascript to ensure the space / enter keys work when tabbing through page elements. See this page for a bit of info on the kind of work we're discussing

Testing

Go through the page flow to /upload
Turn on your screen reader
Tab through the page to the file picker
Hear (or see with visual cues in the screen reader) "Click to choose a file to upload", of type "button"

upload-accessibility

This page currently passes Lighthouse accessibility as well

danielladevera-nava commented 1 year ago

Went through the dev build and validated VoiceOver read this as expected per the testing instructions. TYSM!! 🥇

github-actions[bot] commented 1 year ago

Chromatic_Build : Link to latest build in Chromatic 🌈 Link to storybook build in Chromatic