fix(react): hide svg icon images in a11y tree in Rating component #2469
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
🦋 Changeset detectedLatest commit: e6f1e08 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
0618
approved these changes
Aug 16, 2022
jacoblogan
approved these changes
Aug 16, 2022
zchenwei
approved these changes
Aug 16, 2022
ioanabrooks
approved these changes
Aug 16, 2022
Merged
calebpollman
added a commit
that referenced
this pull request
Aug 18, 2022
…saging/main (#2482) * chore: Update yarn.lock (#2440) * update yarn.lock * updated yarn.lock to include geocoder update Co-authored-by: Joe Buono <joebuono@amazon.com> * Fix location search bug (#2450) * fix: update maplibre-gl-js-amplify to v2.0.3 to fix location search bug * fix: update to maplibre-gl-js-amplify v2.0.4 * fix: pin maplibre-gl-js-amplify version * Create hip-horses-arrive.md * fix(react): hide svg icon images in a11y tree in Rating component (#2469) * fix(react): hide svg icon images in a11y tree in Rating component * Version Packages (#2461) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Joe Buono <joebuono724@gmail.com> Co-authored-by: Joe Buono <joebuono@amazon.com> Co-authored-by: thaddmt <68032955+thaddmt@users.noreply.github.com> Co-authored-by: Heather Buchel <hbuchel@gmail.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
calebpollman
added a commit
that referenced
this pull request
Aug 25, 2022
…latest release commit (#2485) * chore: Update yarn.lock (#2440) * update yarn.lock * updated yarn.lock to include geocoder update Co-authored-by: Joe Buono <joebuono@amazon.com> * Fix location search bug (#2450) * fix: update maplibre-gl-js-amplify to v2.0.3 to fix location search bug * fix: update to maplibre-gl-js-amplify v2.0.4 * fix: pin maplibre-gl-js-amplify version * Create hip-horses-arrive.md * fix(react): hide svg icon images in a11y tree in Rating component (#2469) * fix(react): hide svg icon images in a11y tree in Rating component * Version Packages (#2461) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * fix(docs): type error on fragment (#2477) Co-authored-by: 0618 <o.6180339@gmail.com> * add @types/react to resolutions field * chore(ui): Set `predictableActionArguments` to true (#2468) * Set `predictableActionArguments` to true * Create clean-suns-fix.md * Add predictableActionArguments to `true` * Delete the auth-with-username environment (#2489) * Revert "chore(ui): Set `predictableActionArguments` to true (#2468)" (#2492) This reverts commit 665c426. * fix(ci): Change e2e environments to auth-with-username-no-attributes (#2491) * Change e2e environments to auth-with-username-no-attributes * Remove additional attribute from sign-up test Co-authored-by: William Lee <43682783+wlee221@users.noreply.github.com> * chore: remove stale chmod line in package.json (#2497) * Remove chmod in package.json * remove chmod in canary as well * [REVERT] poc run without chmod * [REVERT]: add missing environement * [REVERT]: Add amplify cli * trigger-ci * [REVERT]: Remove unneeded codes in POC workflow * use yarn environments pull instead of yarn pull * Why doesn't this work? * This should work! * Remove duplciate shell call * Remove poc workflow * chore(hosting): Skip cypress binary installation (#2508) * chore(environments): move environments to their own folder (#2501) * Split environments into respective folders * chore(environments): Update scripts for environments split (#2502) * Initial approach * Simpler solution * Add auth/geo/datastore scripts * Add general pull command * Explicitly get path to the shell file * fix typo * chore(environments): update `awsExports` to point to new paths (#2504) * Update react aws-exports * Vue aws-exports update * Angular aws-exports updates * Dial code (#2459) * rename countryCode to dialCode * begin deprecating countryCode by adding in duplicate dialCode props and updating all examples to use dialCode props * update props table * duplicate phone number field tests using dialCode * update tests * add required field to phoneNumberFieldProps, added deprecation warning * update e2e tests * update phone number field documentation * rename countrycode files to dialcode * update angular and vue dial code select name * update angular and vue to dial code * return default label to country code and undo e2e test changes * update unit tests * update e2e tests to revert change to dial code * Create swift-kids-help.md * Update docs/src/pages/[platform]/components/phonenumberfield/react.mdx add `role="none"` to docs alert Co-authored-by: Heather Buchel <hbuchel@gmail.com> * Update swift-kids-help.md Co-authored-by: Jacob Logan <lognjc@amazon.com> Co-authored-by: Heather Buchel <hbuchel@gmail.com> * Add troubleshooting steps for CRA and geo components (#2511) * fix(environments): fix environments pull on CI (#2512) * POC run against guides * Try bash instead of sh * Add debug line * Use printf instead of echo * Add more comments * Update import path in guides * Adjust comments * Adjust comment * Remove extraneous comments * More comments adjustment * Revert "POC run against guides" This reverts commit 88bceca. * update changeset (#2515) Co-authored-by: Jacob Logan <lognjc@amazon.com> Co-authored-by: Joe Buono <joebuono724@gmail.com> Co-authored-by: Joe Buono <joebuono@amazon.com> Co-authored-by: thaddmt <68032955+thaddmt@users.noreply.github.com> Co-authored-by: Heather Buchel <hbuchel@gmail.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: MJ <0618@users.noreply.github.com> Co-authored-by: 0618 <o.6180339@gmail.com> Co-authored-by: William Lee <43682783+wlee221@users.noreply.github.com> Co-authored-by: Shane Laymance <shane.laymance@gmail.com> Co-authored-by: jacoblogan <jacob.maiola.logan@gmail.com> Co-authored-by: Jacob Logan <lognjc@amazon.com>
calebpollman
pushed a commit
to calebpollman/amplify-ui
that referenced
this pull request
Aug 25, 2022
…s-amplify#2469) * fix(react): hide svg icon images in a11y tree in Rating component
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description of changes
This PR fixes the Rating component so it only announces the accessible rating text, and not any unlabeled images (the SVG icons).
Also updated the docs to remove the ariaLabel examples since they are no longer needed or required.
Context:
Currently, screen readers will announce each rating icon as "image" because the SVG icons are not accessibly labelled. Passing ariaLabels to the icons also makes it read out quite a bit off redundant text; and in the case of using custom icons, the context doesn't quite make sense. In this video example, it will read out "No rating, image" for each icon, and reads it twice for mixed fill icons.
Before
CleanShot.2022-08-16.at.12.22.45.mp4
After
CleanShot.2022-08-16.at.12.00.05.mp4
Issue #, if available
Description of how you validated changes
In local docs instance with Voiceover/Mac
Checklist
yarn testpassessideEffectsfield updatedBy submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.