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

Web component: Link List - Beginning and Ending boundary for the cards #4060

Closed
Praveen-sr opened this issue Sep 25, 2020 · 1 comment
Closed

Web component: Link List - Beginning and Ending boundary for the cards #4060

Praveen-sr opened this issue Sep 25, 2020 · 1 comment
Assignees
@ariellalgilmore @IgnacioBecerra
Labels
accessibility Has accessibility requirement bug Something isn't working dev Needs some dev work package: web components Work necessary for the IBM.com Library web components package severity 4 Affects minor functionality, no workaround needed
Milestone
Sprint 21-03

Comments

@Praveen-sr
Copy link

Praveen-sr commented Sep 25, 2020 •
edited
Loading

Detailed description

On JAWS FF & VO iPhone safari

Issue: The beginning and ending boundary for each card is not conveyed for the screen reader user.
Note: Working fine in React Staging

Expected : Provide each card within the landmark region and give appropriate label.

Additional information
@Praveen-sr Praveen-sr added accessibility Has accessibility requirement bug Something isn't working severity 4 Affects minor functionality, no workaround needed labels Sep 25, 2020
@Praveen-sr Praveen-sr changed the title Web component: Beginning and Ending boundary for the cards Web component: Link List - Beginning and Ending boundary for the cards Sep 25, 2020
@RobertaJHahn RobertaJHahn added Airtable Done dev Needs some dev work package: web components Work necessary for the IBM.com Library web components package labels Sep 25, 2020
@RobertaJHahn RobertaJHahn added this to the Sprint 20-21 milestone Sep 25, 2020
@ariellalgilmore ariellalgilmore self-assigned this Jan 25, 2021
@ariellalgilmore ariellalgilmore mentioned this issue Jan 26, 2021
Merged
kodiakhq bot pushed a commit that referenced this issue Jan 29, 2021
@ariellalgilmore
fix(linkList): add aria attribute to item-card (#5010)
09ea8d8 
### Related Ticket(s)

#4060 

### Description

To provide each link-list-item-card with a landmark region and appropriate label to convey beginning and ending boundary for the screen reader user. 

### Changelog

**New**

- `aria-label` attribute

**Changed**

- `role` to using `region`

<!-- 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) -->
@ariellalgilmore
Copy link
Member

@Praveen-sr is it possible to get more info on why this should be labeled a region. The link list cards are passed in href values meaning this is a link item. Should the possible fix instead be changing the React version to a listitem role instead of a region role

cc: @asudoh

@IgnacioBecerra IgnacioBecerra mentioned this issue Feb 11, 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 pushed a commit to IgnacioBecerra/ibm-dotcom-library that referenced this issue Feb 22, 2021
@ariellalgilmore @IgnacioBecerra
fix(linkList): add aria attribute to item-card (carbon-design-system#…
550c1a3 
…5010)

### Related Ticket(s)

carbon-design-system#4060 

### Description

To provide each link-list-item-card with a landmark region and appropriate label to convey beginning and ending boundary for the screen reader user. 

### Changelog

**New**

- `aria-label` attribute

**Changed**

- `role` to using `region`

<!-- 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

@ariellalgilmore ariellalgilmore

@IgnacioBecerra IgnacioBecerra

Labels
accessibility Has accessibility requirement bug Something isn't working dev Needs some dev work package: web components Work necessary for the IBM.com Library web components package severity 4 Affects minor functionality, no workaround needed
Projects
None yet
Milestone
Sprint 21-03
Development

No branches or pull requests
6 participants
@jeffchew @ariellalgilmore @ljcarot @IgnacioBecerra @RobertaJHahn @Praveen-sr