Add more docs around different browser + screen reader behaviours for LabeledField #2403
Conversation
A new build was pushed to Chromatic! 🚀https://5e1bf4b385e3fb0020b7073c-rlugudlftv.chromatic.com/ Chromatic results:
|
|
Size Change: 0 B Total Size: 98.8 kB ℹ️ View Unchanged
|
beaesguerra
changed the title
| @@ -25,3 +25,84 @@ prop is not provided, a unique id will be auto-generated! | |||
| - The `LabeledField` component does not need to be used with the `CheckboxGroup` | |||
| or `RadioGroup` components since those components already have accessible labels | |||
| built-in when the `label` prop is used. | |||
|
|
|||
There was a problem hiding this comment.
Elaborating more around the screen reader behaviour from a previous PR comment: #2344 (comment)
GeraldRequired Reviewers
Don't want to be involved in this pull request? Comment |
npm Snapshot: Published🎉 Good news!! We've packaged up the latest commit from this PR (12ead53) and published all packages with changesets to npm. You can install the packages in webapp by running: ./services/static/dev/tools/deploy_wonder_blocks.js --tag="PR2403"Packages can also be installed manually by running: yarn add @khanacademy/wonder-blocks-<package-name>@PR2403 |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## wb-1783-use-lf-in-stories #2403 +/- ##
=================================================
=================================================
Continue to review full report in Codecov by Sentry.
|
beaesguerra
force-pushed
the
wb-1783-use-lf-in-stories
branch
from
8959097 to
070a249
Compare
|
The parent pull-request (#2400) has been merged into |
|
There was a problem hiding this comment.
This is soo well written and super detailed! This looks good to me, but I'd love to get a review from @marcysutton as well.
| ### Error messages | ||
|
|
||
| The error message is implemented following the | ||
| [W3 Form Notifications On Focus Change](https://www.w3.org/WAI/tutorials/forms/notifications/#on-focus-change) |
There was a problem hiding this comment.
nit: adjusting the title of the W3C standards body!
| [W3 Form Notifications On Focus Change](https://www.w3.org/WAI/tutorials/forms/notifications/#on-focus-change) | |
| [W3C-WAI Form Notifications On Focus Change](https://www.w3.org/WAI/tutorials/forms/notifications/#on-focus-change) |
| so that any updates to the error message is announced. | ||
|
|
||
| Different browsers and screen readers announce this differently unfortunately | ||
| (in both the W3 example and LabeledField stories). The following documents the |
There was a problem hiding this comment.
| (in both the W3 example and LabeledField stories). The following documents the | |
| (in both the W3C example and LabeledField stories). The following documents the |
Summary:
Documenting the different browser + screen reader behaviours for reference since there are some browser/screen reader inconsistencies!
Issue: WB-1842
Test plan:
?path=/docs/packages-labeledfield-accessibility--docs)Recordings:
Interacting with fields with errors
Safari + VoiceOver
safari-vo-errors.mov
Chrome + NVDA
chrome-nvda-errors.mov
Firefox + NVDA
firefox-nvda-errors.mov
Error validation while filling out fields
Safari + VoiceOver
safari-vo-validation.mov
Chrome + NVDA
chrome-nvda-validation-3.mov
Firefox + NVDA
firefox-nvda-validation-3.mov
Error validation after submission
Safari + VoiceOver
safari-vo-submit.mov
Chrome + NVDA
chrome-nvda-submit.mov
Firefox + NVDA
firefox-nvda-submit.mov