[DropdownMenu]: incorrect focus behavior for keyboard navigation

[NatalliaAlieva]

Case №1

Description

After activating the dropdown or its submenu, the focus doesn't automatically move to the first active item. Instead, it requires pressing the Tab key, which is not aligned with accessibility standards.

Steps to Reproduce

1. Open Dropdown Menu component.
2. Use the keyboard to navigate (Tab) and activate (Enter) the "Alex Smith" dropdown example.
3. Observe the focus behavior after the dropdown opens.
4. Navigate to a submenu using the right arrow key and observe the focus behavior.

Actual result

After opening the dropdown and submenu, the focus doesn't move to the first active item. It requires pressing the Tab key.

Screen.Recording.2024-12-23.at.12.37.04.mov

Expected result

After opening the dropdown or any submenu level, the focus should automatically move to the first active item.

Screen.Recording.2024-12-23.at.12.42.18.mov

Case №2

Description

When pressing Esc while a submenu is open, the entire dropdown closes instead of just the submenu.

Steps to Reproduce

1. Open Dropdown Menu component.
2. Use the keyboard to navigate (Tab) and activate (Enter) the "Alex Smith" dropdown example.
3. Navigate to a submenu using the right arrow key.
4. While the submenu is open, press the Esc key.

Actual result

Pressing Esc closes the entire dropdown.

Screen.Recording.2024-12-23.at.12.54.39.mov

Expected result

Pressing Esc should only close the currently open submenu, while keeping the main dropdown.

Screen.Recording.2024-12-23.at.12.43.19.mov

Note

Failed WCAG Checkpoint:
2.1.1 Keyboard (Level A)
https://www.w3.org/TR/WCAG22/#keyboard
2.4.3 Focus Order (Level A)
https://www.w3.org/TR/WCAG22/#focus-order
Pattern Example
https://www.w3.org/WAI/ARIA/apg/patterns/menubar/examples/menubar-navigation/