CTA / Content Block Simple - downloads a file, open external link information is not conveyed for the screen reader user. #4142
Assignees
Labels
accessibility
Has accessibility requirement
bug
Something isn't working
dev
Needs some dev work
package: react
Work necessary for the Carbon for IBM.com react components package
severity 4
Affects minor functionality, no workaround needed
Milestone
Comments
Praveen-sr
added
accessibility
RobertaJHahn
added
dev
kodiakhq bot
pushed a commit
that referenced
this issue
Feb 12, 2021
### 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 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) -->
IgnacioBecerra
added a commit
to IgnacioBecerra/ibm-dotcom-library
that referenced
this issue
Feb 22, 2021
…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) -->
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Detailed description
On JAWS FF & iPhone
Issue: There is an icon near these links which indicates it downloads a file, open external link but, the same information is not conveyed for the screen reader user.
Note: the same issue we found in react staging as well.
Expected:
The information conveyed visually should be available for the screen reader user as well. Anyone of the following methods can be used to make it screen reader accessible.
a generic example:
Additional information
The text was updated successfully, but these errors were encountered: