Package

@carbon/react

Browser

Chrome

Package version

v1.67.0

React version

^17.0.0

Description

SideNavMenus are inaccessible for keyboard users. Keyboard users are unable to tab through the list of SideNavMenus without being wrapped in a SideNav. You can manually add the tabIndex to the SideNavMenu but this functionality was working pre v1.55.0 by using the isSideNavExpanded. This prop now no longer has any affect despite what the code says.
https://github.com/carbon-design-system/carbon/blob/main/packages/react/src/components/UIShell/SideNavMenu.tsx#L125C1-L126C1

Follow-up questions that are related.

1. Is the SideNav component mandatory? If so, is this in any documentation that I can reference in the future?
2. What does the isSideNavExpanded supposed to do? The documentation on that is confusing.

This would be severity 2 if there was no way to manually add the tabIndex because keyboard users would not be able to access large sections of the site. Since this has a workaround that the dev can implement it is severity 4 in those cases. Feel free to change the severity as seen fit.

Reproduction/example

https://stackblitz.com/edit/github-ynms4h-6sxsuy?file=src%2FApp.jsx

Steps to reproduce

1. With the mouse, click on the first SideNavMenu.
2. Try and tab through using the keyboard to access the other SideNavMenus

Suggested Severity

Severity 3 = User can complete task, and/or has a workaround within the user experience of a given component.

Application/PAL

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems