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

[ui-shell]: IBM Accessibility violation error #10918

Closed
1 of 2 tasks
jc-corrales opened this issue Sep 7, 2023 · 0 comments · Fixed by #11044
Closed
1 of 2 tasks

[ui-shell]: IBM Accessibility violation error #10918

jc-corrales opened this issue Sep 7, 2023 · 0 comments · Fixed by #11044
Assignees
@sangeethababu9223
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

The bx-side-nav-menu-item tag from the UI Shell component is throwing the following accessibility error:
Violation

The tabbable element's role 'none' is not a widget role
A tabbable element must have a valid widget role

It seems the problem can be fixed when I assign those tags the role="button".

Component(s) impacted

UI Shell Component
bx-side-nav-menu-item tag

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
  2. Open the UI shell component
  3. Open one of the menus with dropdowns from the example
  4. Run the IBM Equal Access Accessibility Checker
  5. 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 7, 2023
@kennylam kennylam added accessibility Has accessibility requirement package: carbon web components severity 3 Affects minor functionality, has a workaround labels Sep 11, 2023
@kennylam kennylam moved this to Backlog in Carbon for IBM.com Sep 11, 2023
@kennylam kennylam changed the title IBM Accessibility violation error [ui-shell]: IBM Accessibility violation error Sep 11, 2023
@sangeethababu9223 sangeethababu9223 self-assigned this Oct 17, 2023
@sangeethababu9223 sangeethababu9223 moved this from Backlog to Doing in Carbon for IBM.com Oct 17, 2023
@sangeethababu9223 sangeethababu9223 mentioned this issue Oct 17, 2023
Merged
@sangeethababu9223 sangeethababu9223 moved this from Doing to Review in Carbon for IBM.com Oct 17, 2023
@kodiakhq kodiakhq bot closed this as completed in #11044 Oct 26, 2023
kodiakhq bot pushed a commit that referenced this issue Oct 26, 2023
@sangeethababu9223
fix(ui-shell): a11y issue with side nav item (#11044)
9eb94ea 
### Related Ticket(s)

Closes #10918

### Description

The bx-side-nav-menu-item tag in UI Shell component throws accessibility error.
 
### Changelog


**Changed**

- Added role attribute value button to the element.


<!-- 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) -->
<img width="1696" alt="Screenshot 2023-10-17 at 3 51 06 PM" src="https://github.com/carbon-design-system/carbon-for-ibm-dotcom/assets/58620134/e4264482-547e-4bc0-bc18-6bb5dde8b785">
@github-project-automation github-project-automation bot moved this from Review to Done in Carbon for IBM.com Oct 26, 2023
kennylam pushed a commit that referenced this issue Oct 28, 2023
@sangeethababu9223 @kennylam
fix(ui-shell): a11y issue with side nav item (#11044)
a8a7588 
### Related Ticket(s)

Closes #10918

### Description

The bx-side-nav-menu-item tag in UI Shell component throws accessibility error.
 
### Changelog


**Changed**

- Added role attribute value button to the element.


<!-- 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) -->
<img width="1696" alt="Screenshot 2023-10-17 at 3 51 06 PM" src="https://github.com/carbon-design-system/carbon-for-ibm-dotcom/assets/58620134/e4264482-547e-4bc0-bc18-6bb5dde8b785">
kennylam pushed a commit to kennylam/carbon-for-ibm-dotcom that referenced this issue Dec 4, 2023
@sangeethababu9223
fix(ui-shell): a11y issue with side nav item (carbon-design-system#11044
16ed4a3 
)

### Related Ticket(s)

Closes carbon-design-system#10918

### Description

The bx-side-nav-menu-item tag in UI Shell component throws accessibility error.
 
### Changelog


**Changed**

- Added role attribute value button to the element.


<!-- 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) -->
<img width="1696" alt="Screenshot 2023-10-17 at 3 51 06 PM" src="https://github.com/carbon-design-system/carbon-for-ibm-dotcom/assets/58620134/e4264482-547e-4bc0-bc18-6bb5dde8b785">
kennylam pushed a commit to kennylam/carbon-for-ibm-dotcom that referenced this issue Jun 11, 2024
@sangeethababu9223
fix(ui-shell): a11y issue with side nav item (carbon-design-system#11044
c8d41cc 
)

### Related Ticket(s)

Closes carbon-design-system#10918

### Description

The bx-side-nav-menu-item tag in UI Shell component throws accessibility error.
 
### Changelog


**Changed**

- Added role attribute value button to the element.


<!-- 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) -->
<img width="1696" alt="Screenshot 2023-10-17 at 3 51 06 PM" src="https://github.com/carbon-design-system/carbon-for-ibm-dotcom/assets/58620134/e4264482-547e-4bc0-bc18-6bb5dde8b785">
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@sangeethababu9223 sangeethababu9223

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.

fix(ui-shell): a11y issue with side nav item sangeethababu9223/carbon-for-ibm-dotcom
3 participants
@kennylam @jc-corrales @sangeethababu9223