Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Component: CTA - Screen reader - Play icon information on card is not read for screen reader user. #2728

Closed
Praveen-sr opened this issue Jun 11, 2020 · 5 comments
Closed

Component: CTA - Screen reader - Play icon information on card is not read for screen reader user. #2728

Praveen-sr opened this issue Jun 11, 2020 · 5 comments
Assignees
@IgnacioBecerra
Labels
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
Sprint 21-03

Comments

@Praveen-sr
Copy link

Detailed description

Issue :- Visually there is a play icon present near the link indicating this link opens a video. But the same info is not available for the screen reader user.

Expected :-
Convey the same info for the screen reader user as well. This can be done by adding the text "plays video" along with the link text /label.
@Praveen-sr Praveen-sr added bug Something isn't working QA QA testing work performed by the testing team members severity 4 Affects minor functionality, no workaround needed labels Jun 11, 2020
@RobertaJHahn RobertaJHahn added this to the Sprint 20-14 milestone Jun 12, 2020
@RobertaJHahn RobertaJHahn added the dev Needs some dev work label Jun 29, 2020
@kennylam
Copy link
Member

kennylam commented Jul 9, 2020

@Praveen-sr Adding copy such as 'plays video' is challenging since this would need to be translated, and not enforceable by us since we can't control what copy is used for the link. This is the same issue for all links that play video or open the url in a new page/tab.

Maybe one solution would be to provide an aria-label/title for these types of links as props, using us-en as the default. Users would could then add copy in whatever language is needed and the responsibility of providing the translation is theirs.

@jeffchew @asudoh @annawen1 @ljcarot Thoughts?

@Praveen-sr
Copy link
Author

@kennylam Aria label can be used if there is an interactive element like a link or a button. Because Screen reader generally do not pick the aria label on non-interactive elements. If it is an image tag, providing alt text for the image would be a better solution.

@andysherman2121 andysherman2121 self-assigned this Jul 14, 2020
@kennylam
Copy link
Member

@kennylam Aria label can be used if there is an interactive element like a link or a button. Because Screen reader generally do not pick the aria label on non-interactive elements. If it is an image tag, providing alt text for the image would be a better solution.

@Praveen-sr I was talking more about putting the aria-label/title on the link itself and not the play icon. or even the CTA link. But yes, it would be on an interactive, tabbable element. As a prop we could default it to English, while still allowing users to override in the required language.

@jeffchew @ljcarot @andysherman2121 Thoughts?

@andysherman2121
Copy link
Contributor

@kennylam I agree, this is definitely the best solution I can think of. This would give the user the ability to change the prop to whatever language they want. So we don't have to handle any of the translation

@jeffchew jeffchew modified the milestones: Sprint 20-16, Sprint 20-17 Aug 14, 2020
@jeffchew
Copy link
Member

@RobertaJHahn moving this out to the next release.

cc: @andysherman2121

@RobertaJHahn RobertaJHahn added the package: react Work necessary for the Carbon for IBM.com react components package label Sep 17, 2020
@RobertaJHahn RobertaJHahn removed this from the Sprint 20-19 milestone Sep 28, 2020
@RobertaJHahn RobertaJHahn added this to the Sprint 20-20 milestone Sep 28, 2020
@andysherman2121 andysherman2121 removed their assignment Nov 11, 2020
@RobertaJHahn RobertaJHahn removed the QA QA testing work performed by the testing team members label Nov 12, 2020
@IgnacioBecerra IgnacioBecerra self-assigned this Jan 28, 2021
@IgnacioBecerra IgnacioBecerra mentioned this issue Feb 4, 2021
Merged
kodiakhq bot pushed a commit that referenced this issue Feb 12, 2021
@IgnacioBecerra
fix(cta): add default aria-label for different types (#5096)
728499f 
### 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
@IgnacioBecerra
fix(cta): add default aria-label for different types (carbon-design-s…
cffb465 
…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
Assignees

@IgnacioBecerra IgnacioBecerra

Labels
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
Projects
None yet
Milestone
Sprint 21-03
Development

No branches or pull requests
7 participants
@kennylam @jeffchew @ljcarot @IgnacioBecerra @RobertaJHahn @andysherman2121 @Praveen-sr