[Bug]: Menu in storybook not behaving properly, does not have a trigger
#15,898 opened on Mar 5, 2024
Repository metrics
- Stars
- (7,442 stars)
- PR merge metrics
- (Avg merge 9d 14h) (106 merged PRs in 30d)
Description
Package
@carbon/react
Browser
Chrome
Package version
https://react.carbondesignsystem.com/?path=/story/components-menu--playground
React version
No response
Description
Brief description
When choosing the Menu playground in the left navigation in storybook, the menu is already opened. As well, the 'Skip to canvas' link that normally appears in the tab order after activating the item in the left nav is absent. This means that it is not possible to confirm it meets its expected keyboard behaviour for receiving focus, activating the menu, or dismissing the menu.
Reproduction/example
https://react.carbondesignsystem.com/?path=/story/components-menu--playground
Steps to reproduce
- Open storybook and choose Playground immediately underneath.
- Press Tab (the Skip to canvas link should appear; it doesn't)
- Navigate to the main content area via keyboard
- Note that the menu is already expanded, not collapsed. Expectation is that the menu trigger that opens the menu should be available, and activating it should open the menu
- Focus should be able to be put in the menu via keyboard (it cannot)
- Use a pointer to put focus on the menu
- Press Esc to dismiss the menu (nothing happens; the menu does not collapse as expected)
Note: Once the focus is placed on the menu, the keyboard interaction seems to work fine, EXCEPT the lack of the dismissal when pressing Esc
Expected behaviour
- Open storybook and choose Playground immediately underneath.
- Press Tab; the Skip to canvas link appears
- Activate the Skip to canvas link and press Tab twice, which positions to the main content; focus falls on the menu trigger, which is collapsed (i.e., the menu is not open)
- Activate the menu with Space or Enter; the menu expands, showing the menu items, and preferably putting focus on the first item
- Navigate down through the menu items by pressing the down arrow; reaching the bottom item should cause focus to wrap to the top menu item
- Press Esc; the menu collapses and focus returns to the menu trigger
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