-
Notifications
You must be signed in to change notification settings - Fork 10
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add more docs around different browser + screen reader behaviours for LabeledField #2403
base: feature/labeled-field
Are you sure you want to change the base?
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
|
@@ -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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
|
8959097
to
070a249
Compare
The parent pull-request (#2400) has been merged into |
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
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