a11y- Callouts should use descriptive text for icons #7882
Conversation
katiegoines
changed the title
katiegoines
requested review from
reesscot,
srquinn21,
swaminator and
a team
as code owners
src/components/Callout/Callout.tsx
Outdated
| > | ||
| <View>{children}</View> | ||
| <Flex> | ||
| <div role="img" aria-label="info" className="amplify-message__icon"> |
There was a problem hiding this comment.
Instead of wrapping this in an IMG role, I think you should be able to pass aria-hidden="false" to the Icon and pass it an appropriate aria-label.
src/components/Callout/Callout.tsx
Outdated
| <View>{children}</View> | ||
| <Flex> | ||
| <div role="img" aria-label="info" className="amplify-message__icon"> | ||
| <IconInfo aria-hidden={true} /> |
There was a problem hiding this comment.
I think we should account for the warning variation as well
There was a problem hiding this comment.
I've added in labeling to account for the variation however currently only the Info icon is being used regardless of the message type
There was a problem hiding this comment.
There is a warning variation that is used for Callout, like here: https://docs.amplify.aws/swift/build-a-backend/add-aws-services/analytics/set-up-analytics/#initialize-amplify-analytics
There was a problem hiding this comment.
Although I just checked and we don't have an IconWarning so it would have to be added.
There was a problem hiding this comment.
Added the IconWarning and adjusted the logic to account for the variation
Co-authored-by: Heather Buchel <[email protected]>
Co-authored-by: Heather Buchel <[email protected]>
Co-authored-by: Heather Buchel <[email protected]>
Description of changes:
[Issue] There are meaningful "Info" icons but they are marked as decorative.
[Fix] Since the icon is part of Amplify UI component we cannot remove the aria-hidden without updating that component. We could move those icons inline to the content (and use hasIcon={false} on the component)
Staging: https://a11y-callout-icons.d1egzztxsxq9xz.amplifyapp.com/gen1/react/start/getting-started/
Example of page with protected callout: https://a11y-callout-icons.d1egzztxsxq9xz.amplifyapp.com/react/build-a-backend/data/data-modeling/relationships/
Related GitHub issue #, if available:
Instructions
If this PR should not be merged upon approval for any reason, please submit as a DRAFT
Which product(s) are affected by this PR (if applicable)?
Which platform(s) are affected by this PR (if applicable)?
Please add the product(s)/platform(s) affected to the PR title
Checks
Does this PR conform to the styleguide?
Does this PR include filetypes other than markdown or images? Please add or update unit tests accordingly.
Are any files being deleted with this PR? If so, have the needed redirects been created?
Are all links in MDX files using the MDX link syntax rather than HTML link syntax?
ref: MDX:
[link](https://docs.amplify.aws/)HTML:
<a href="https://docs.amplify.aws/">link</a>When this PR is ready to merge, please check the box below
By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.