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

fix(ui-shell): a11y issue with side nav item #11044

Merged
merged 8 commits into from
Oct 26, 2023
Merged

fix(ui-shell): a11y issue with side nav item #11044

merged 8 commits into from
Oct 26, 2023

Conversation

sangeethababu9223
Copy link
Member

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.
Screenshot 2023-10-17 at 3 51 06 PM

@sangeethababu9223 sangeethababu9223 requested a review from a team as a code owner October 17, 2023 10:29
@ibmdotcom-bot
Copy link
Contributor

ibmdotcom-bot commented Oct 17, 2023 •
edited
Loading

Deploy preview created for package React:
https://ibmdotcom-react.s3.us-south.cloud-object-storage.appdomain.cloud/deploy-previews/11044/index.html

Built with commit: 5194beb2aa1d805702c176adbdffe16f96be62f0

@ibmdotcom-bot
Copy link
Contributor

ibmdotcom-bot commented Oct 17, 2023 •
edited
Loading

Deploy preview created for package Carbon Web Components:
https://carbon-web-components.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/11044/index.html

Built with commit: 5194beb2aa1d805702c176adbdffe16f96be62f0

@ibmdotcom-bot
Copy link
Contributor

ibmdotcom-bot commented Oct 17, 2023 •
edited
Loading

Deploy preview created for package Web Components:
https://ibmdotcom-webcomponents.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/11044/index.html

Built with commit: 5194beb2aa1d805702c176adbdffe16f96be62f0

@ibmdotcom-bot
Copy link
Contributor

ibmdotcom-bot commented Oct 17, 2023 •
edited
Loading

Deploy preview created for package Web Components HTML Test Application:
https://ibmdotcom-web-components-html-test-upstream.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/11044/index.html

Built with commit: 5194beb2aa1d805702c176adbdffe16f96be62f0

@ibmdotcom-bot
Copy link
Contributor

ibmdotcom-bot commented Oct 17, 2023 •
edited
Loading

Deploy preview created for package Web Components (React wrapper):
https://ibmdotcom-web-components-react.s3-web.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/11044/index.html

Built with commit: 5194beb2aa1d805702c176adbdffe16f96be62f0

ariellalgilmore
ariellalgilmore reviewed Oct 20, 2023
View reviewed changes
Copy link
Member

@ariellalgilmore ariellalgilmore left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this looks good! But wondering if we can instead of adding it to the story add the role="button" to the bx-side-nav-menu-item directly like this: https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/317d2bee88f8a704a56a4e10492a936fd29bdfe4/packages/carbon-web-components/src/components/tabs/tab.ts#L41C1-L45

@sangeethababu9223
Copy link
Member Author

this looks good! But wondering if we can instead of adding it to the story add the role="button" to the bx-side-nav-menu-item directly like this: https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/317d2bee88f8a704a56a4e10492a936fd29bdfe4/packages/carbon-web-components/src/components/tabs/tab.ts#L41C1-L45

Thanks @ariellalgilmore, I've updated the role as per your comment.

ariellalgilmore
ariellalgilmore approved these changes Oct 25, 2023
View reviewed changes
Copy link
Member

@ariellalgilmore ariellalgilmore left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @sangeethababu9223 !! just need to update snapshots here as well in packages/web-components since this will update the masthead

@ariellalgilmore ariellalgilmore added the Ready to merge Label for the pull requests that are ready to merge label Oct 26, 2023
@kodiakhq kodiakhq bot merged commit 9eb94ea into carbon-design-system:main Oct 26, 2023
kennylam pushed a commit that referenced this pull request 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 pull request 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 pull request 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
Reviewers

@ariellalgilmore ariellalgilmore ariellalgilmore approved these changes

@emyarod emyarod Awaiting requested review from emyarod emyarod is a code owner automatically assigned from carbon-design-system/carbon-for-ibm-com-members

@annawen1 annawen1 Awaiting requested review from annawen1 annawen1 is a code owner automatically assigned from carbon-design-system/carbon-for-ibm-com-members

Assignees
No one assigned
Labels
package: carbon web components Ready to merge Label for the pull requests that are ready to merge
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[ui-shell]: IBM Accessibility violation error
3 participants
@sangeethababu9223 @ibmdotcom-bot @ariellalgilmore