[Bug]: Menu in storybook not behaving properly, does not have a trigger

[mbgower]

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

1. Open storybook and choose Playground immediately underneath.
2. Press Tab (the Skip to canvas link should appear; it doesn't)
3. Navigate to the main content area via keyboard
4. 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
5. Focus should be able to be put in the menu via keyboard (it cannot)
6. Use a pointer to put focus on the menu
7. 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

1. Open storybook and choose Playground immediately underneath.
2. Press Tab; the Skip to canvas link appears
3. 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)
4. Activate the menu with Space or Enter; the menu expands, showing the menu items, and preferably putting focus on the first item
5. 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
6. 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

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

[anjaly0606]

@mbgower , Can I work on this?

[mbgower]

@anjaly0606 I do not own this asset; I merely opened a ticket against it. @tay1orjones may be able to advise

[anjaly0606]

Hi @tay1orjones

Can u advise on this ? Should the menu be not in an open position ?

[tay1orjones]

... focus falls on the menu trigger,

@anjaly0606 @mbgower I think that's the crux of most of this. There isn't a trigger, but there could be.

@carbon-design-system/design What would be the desired trigger? The APG Pattern Examples relating to menu are only "Menu and Menubar" and "Menu Button".

In any case, if a trigger were to be added we'd need to make these additional changes:

• Update VRT tests to first click to open the menu before taking the snapshot so the menu interior is still covered by VRT.
• Update/add a11y e2e keyboard nav tests to ensure the flow (starting from within the story frame) works as expected. So it would effectively start at focus falls on the menu trigger.
• Update the .mdx docs to state that while a trigger is included in the stories for documentation purposes, a trigger is not automatically supplied by the component(s). Menu is a primitive that is intended to be composed with other components to be fully functional. MenuButton and ComboButton are examples of this composition.