-
Notifications
You must be signed in to change notification settings - Fork 158
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
fix(cta): add default aria-label for different types #5096
fix(cta): add default aria-label for different types #5096
Conversation
Deploy preview created for package Built with commit: b5367f3e5d3a5b76fa2edd3891b6f53b83a40fda |
Deploy preview created for package Built with commit: b5367f3e5d3a5b76fa2edd3891b6f53b83a40fda |
Deploy preview created for package Built with commit: b5367f3e5d3a5b76fa2edd3891b6f53b83a40fda |
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.
LGTM!
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.
LGTM too!
…ystem#5096) ### Related Ticket(s) carbon-design-system#2728 carbon-design-system#2384 carbon-design-system#4142 carbon-design-system#4060 ### Description Added an `aria-label` to inform screen reader users the CTA about the type of link they are focused on, such as `external`, `video`, or `download`. The default label is provided in English by default, but the message can be a custom translation that is passed in using the `ariaLabel` prop by adopters. This PR also changes the `role` of LinkList to `listitem` with the use of a custom `ariaRole` prop to specify different roles depending on the use within components. ### Changelog **New** - added `ariaLabel` to `CTA` component for adopters to customize the message in a different language - added `ariaProp` to `CTA` component to set a custom role depending on the use in other components **Changed** - `aria-label` message for CTA Text and Card - set `role='listitem` in `LinkList` <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "package: styles": Carbon Expressive --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) -->
Related Ticket(s)
#2728
#2384
#4142
#4060
Description
Added an
aria-label
to inform screen reader users the CTA about the type of link they are focused on, such asexternal
,video
, ordownload
. The default label is provided in English by default, but the message can be a custom translation that is passed in using theariaLabel
prop by adopters.This PR also changes the
role
of LinkList tolistitem
with the use of a customariaRole
prop to specify different roles depending on the use within components.Changelog
New
ariaLabel
toCTA
component for adopters to customize the message in a different languageariaProp
toCTA
component to set a custom role depending on the use in other componentsChanged
aria-label
message for CTA Text and Cardrole='listitem
inLinkList