carbon-design-system/carbon

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

Open

#15,898 opened on Mar 5, 2024

 (6 comments) (0 reactions) (0 assignees)JavaScript (1,733 forks)batch import
afrohackscomponent: menugood first issue 👋hacktoberfestneeds: community contributionstatus: help wanted 👐type: bug 🐛type: docs 📖

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

  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

Contributor guide