Prevent menu list from auto-expanding on Tab key navigation

[AshmitSherigar]

Fix: Prevent menu list from auto-expanding on Tab key navigation

Problem

When keyboard users navigate using the Tab key, the menu list would auto-expand after the "Menu" button lost focus. On small viewports, this leads to the menu expanding off-screen, making it inaccessible for keyboard and assistive tech users.
(See issue #915)

Solution

This PR ensures that the menu list only expands when explicitly activated by click or keyboard press, and does not auto-expand when focus leaves the "Menu" button. A keydown listener checks for Tab and closes the menu if focus moves outside.

Changes Made

• Added a useEffect with a keydown event listener to detect when focus leaves the menu/button
• If the menu is open and the new focus is outside both, it closes the menu

Accessibility Impact

• Improves accessibility for keyboard users by preventing unexpected or hidden UI behavior
• Keeps focus management clean and predictable

---

Closes #915

[AshmitSherigar]

@coseeian could you review this PR

[coseeian]

When the menu button's aria-expanded attribute is set to false, screen readers can still access the navigation items (Reference, Tutorials, Examples, Contribute, Community, About) by tab key or browser mode, even though the menu list is visually hidden. These navigation items should be hidden from the accessibility tree and tab key sequence when the menu list is not visible.

[coseeian]

Additionally, in the desktop layout, pressing the Tab key from the top of the page, the third tab stop focuses an element that has no accessible name or label. It appears to be the menu button intended for the mobile layout. This button should also be completely hidden from both the accessibility tree and the tab sequence in desktop view.

[AshmitSherigar]

@coseeian could u check it now maybe

[coseeian]

It works fine on mobile, but in the desktop layout, the third tab stop focuses an element with no accessible name or label—screen readers do not announce anything for this element. This element should be hidden from both the accessibility tree and the tab sequence in the desktop layout.