`ContextualMenu`: Dropdown content not reachable by keyboard

[fasih-mehmood]

Description:

When a ContextualMenu is opened, the dropdown content is not correctly focused when the user presses the Tab key. This prevents users from navigating the dropdown's menu items using the keyboard.

This issue appears to be caused by the component's use of a Portal. The Portal renders the dropdown content at the end of the body tag to prevent it from being clipped by overflowing parent containers. However, this placement also moves the dropdown out of its original position in the document's accessibility tree, causing it to receive tab focus only after all other tabbable elements on the page.

Steps to Reproduce:

1. Open a ContextualMenu on a page with other tabbable elements (e.g., buttons, input fields, links).
2. Press the Tab key repeatedly.
3. Observe that the focus cycles through all other tabbable elements on the page before finally reaching the dropdown content.

Expected Behavior:

After the ContextualMenu is opened, pressing Tab should move the focus directly to the first tabbable element within the dropdown content (e.g., the first menu item).

Proposed Solution:

Consider implementing a focus management solution that programmatically moves the focus to the dropdown's first item when the menu is opened and back to the last focused item when the menu is closed.

[Safvan-tsy]

Hey @bartaz @fasih-mehmood,

I’m interested in working on this issue. If nobody is currently working on it, please feel free to assign it to me.