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

Accessibility violations prompted by the bx-tab from the tabs Web Component #10921

Closed
2 tasks done
jc-corrales opened this issue Sep 8, 2023 · 1 comment · Fixed by #11047
Closed
2 tasks done

Accessibility violations prompted by the bx-tab from the tabs Web Component #10921

jc-corrales opened this issue Sep 8, 2023 · 1 comment · Fixed by #11047
Assignees
@pjudge
Labels
accessibility Has accessibility requirement bug Something isn't working dev Needs some dev work package: carbon web components severity 3 Affects minor functionality, has a workaround

Comments

@jc-corrales
Copy link

Description

When scanning the bx-tabs with the IBM Equal Access Accessibility checker, it will throw this error for the a tag within the ShadowRoot:

Interactive component with ARIA role 'tab' does not have a programmatically associated name Interactive component must have a programmatically associated name

I am seeing this also in my project. And because it is prompted by an A tag from within the shadowRoot, the only potential workaround I can see is by direct override via JS, which I don't feel would be a best practice.

Component(s) impacted

Tabs

Browser

Chrome, Microsoft Edge

Carbon for IBM.com version

v1.31.0

Severity

Severity 3 = The problem is visible or noticeable to users but does not impede the usability or functionality. Affects minor functionality, has a workaround.

Application/website

Legal Entity Repository, can be found in storybook itself

Package

@carbon/web-components

CodeSandbox example

Don't have

Steps to reproduce the issue (if applicable)

  1. Open storybook "https://web-components-v1.carbondesignsystem.com/?path=/story/introduction-welcome--page"
  2. Open the tabs component
  3. Run the IBM Equal Access Accessibility Checker
  4. Identify errors that say "The tabbable element's role 'none' is not a widget role"

Release date (if applicable)

No response

Code of Conduct
@jc-corrales jc-corrales added bug Something isn't working dev Needs some dev work labels Sep 8, 2023
@kennylam kennylam moved this to Backlog in Carbon for IBM.com Sep 11, 2023
@kennylam kennylam added the severity 3 Affects minor functionality, has a workaround label Sep 11, 2023
@pjudge
Copy link
Contributor

pjudge commented Oct 10, 2023

Hi! Can I be assigned to this issue? I'd love to help out. Thanks

@pjudge pjudge mentioned this issue Oct 17, 2023
Merged
@kodiakhq kodiakhq bot closed this as completed in #11047 Oct 28, 2023
kodiakhq bot pushed a commit that referenced this issue Oct 28, 2023
@pjudge
10921: add aria-label to anchor tags inside bx-tabs for accessbility (#…
7f51280 
…11047)

### Related Ticket(s)

Closes #10921 

### Description

This PR adds `aria-label` to the <a> tags inside of `bx-tab` component. Since the text inside the <a> tags is in a slot in the shadow dom, the links are being flagged for not having meaningful text. This PR fixes that. 

### Changelog

**Changed**

- Adds `aria-label` with the link text to <a> tags inside bx-tab component.

### Steps for testing
1. Navigate to [Tabs in Carbon Web Components](https://carbon-web-components.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/11047/index.html?path=/story/components-tabs--default).
2. Click Open Canvas in New Tab box in upper left. 
3. Have IBM Equal Access Accessibility checker installed as Chrome extension. Scan the page.
4. Note the lack of the original accessibility fail ("Interactive component with ARIA role 'tab' does not have a programmatically associated name").
5. Compare by following the same steps at [Carbon Web Components v1 storybook](https://web-components-v1.carbondesignsystem.com/?path=/story/components-tabs--default).

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "test: e2e": Codesandbox examples and e2e integration tests -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->
@github-project-automation github-project-automation bot moved this from Backlog to Done in Carbon for IBM.com Oct 28, 2023
kennylam pushed a commit that referenced this issue Oct 28, 2023
@pjudge @kennylam
10921: add aria-label to anchor tags inside bx-tabs for accessbility (#…
00bdeba 
…11047)

### Related Ticket(s)

Closes #10921 

### Description

This PR adds `aria-label` to the <a> tags inside of `bx-tab` component. Since the text inside the <a> tags is in a slot in the shadow dom, the links are being flagged for not having meaningful text. This PR fixes that. 

### Changelog

**Changed**

- Adds `aria-label` with the link text to <a> tags inside bx-tab component.

### Steps for testing
1. Navigate to [Tabs in Carbon Web Components](https://carbon-web-components.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/11047/index.html?path=/story/components-tabs--default).
2. Click Open Canvas in New Tab box in upper left. 
3. Have IBM Equal Access Accessibility checker installed as Chrome extension. Scan the page.
4. Note the lack of the original accessibility fail ("Interactive component with ARIA role 'tab' does not have a programmatically associated name").
5. Compare by following the same steps at [Carbon Web Components v1 storybook](https://web-components-v1.carbondesignsystem.com/?path=/story/components-tabs--default).

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "test: e2e": Codesandbox examples and e2e integration tests -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->
kennylam pushed a commit to kennylam/carbon-for-ibm-dotcom that referenced this issue Dec 4, 2023
@pjudge
10921: add aria-label to anchor tags inside bx-tabs for accessbility (c…
061a2e1 
…arbon-design-system#11047)

### Related Ticket(s)

Closes carbon-design-system#10921 

### Description

This PR adds `aria-label` to the <a> tags inside of `bx-tab` component. Since the text inside the <a> tags is in a slot in the shadow dom, the links are being flagged for not having meaningful text. This PR fixes that. 

### Changelog

**Changed**

- Adds `aria-label` with the link text to <a> tags inside bx-tab component.

### Steps for testing
1. Navigate to [Tabs in Carbon Web Components](https://carbon-web-components.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/11047/index.html?path=/story/components-tabs--default).
2. Click Open Canvas in New Tab box in upper left. 
3. Have IBM Equal Access Accessibility checker installed as Chrome extension. Scan the page.
4. Note the lack of the original accessibility fail ("Interactive component with ARIA role 'tab' does not have a programmatically associated name").
5. Compare by following the same steps at [Carbon Web Components v1 storybook](https://web-components-v1.carbondesignsystem.com/?path=/story/components-tabs--default).

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "test: e2e": Codesandbox examples and e2e integration tests -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->
kennylam pushed a commit to kennylam/carbon-for-ibm-dotcom that referenced this issue Jun 11, 2024
@pjudge
10921: add aria-label to anchor tags inside bx-tabs for accessbility (c…
a843460 
…arbon-design-system#11047)

### Related Ticket(s)

Closes carbon-design-system#10921 

### Description

This PR adds `aria-label` to the <a> tags inside of `bx-tab` component. Since the text inside the <a> tags is in a slot in the shadow dom, the links are being flagged for not having meaningful text. This PR fixes that. 

### Changelog

**Changed**

- Adds `aria-label` with the link text to <a> tags inside bx-tab component.

### Steps for testing
1. Navigate to [Tabs in Carbon Web Components](https://carbon-web-components.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/11047/index.html?path=/story/components-tabs--default).
2. Click Open Canvas in New Tab box in upper left. 
3. Have IBM Equal Access Accessibility checker installed as Chrome extension. Scan the page.
4. Note the lack of the original accessibility fail ("Interactive component with ARIA role 'tab' does not have a programmatically associated name").
5. Compare by following the same steps at [Carbon Web Components v1 storybook](https://web-components-v1.carbondesignsystem.com/?path=/story/components-tabs--default).

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "test: e2e": Codesandbox examples and e2e integration tests -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "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

@pjudge pjudge

Labels
accessibility Has accessibility requirement bug Something isn't working dev Needs some dev work package: carbon web components severity 3 Affects minor functionality, has a workaround
Projects
Carbon for IBM.com
Archived in project
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

10921: add aria-label to anchor tags inside bx-tabs for accessbility pjudge/carbon-for-ibm-dotcom
3 participants
@kennylam @pjudge @jc-corrales