processing
[Menu] Menu list automatically expands on Tab key navigation but is not visible
Title
[Menu] Menu list automatically expands on Tab key navigation but is not visible
Description
When using a mouse or keyboard to activate the "menu" button, the "menu list" panel expands and displays correctly. However, when keyboard users navigate to the "menu" button (typically the third Tab stop) and then press the Tab key to move focus away, the "menu list" block automatically expands, but there is not enough space for it to be fully displayed on the screen. This prevents users from perceiving or interacting with the menu options, which poses a significant barrier for keyboard and assistive technology users.
Steps to Reproduce
- Navigate to
/(the home page). - Switch to a mobile viewport (e.g., using device simulation in browser DevTools).
- Use the Tab key to focus the "menu" button (usually the third Tab stop).
- Press the Tab key again to move focus away from the "menu" button.
- Observe that the "menu list" block automatically expands, but it is not fully visible due to insufficient screen space.
Actual Behavior
When the "menu list" panel expands automatically after moving focus away from the "menu" button using keyboard navigation, there is not enough space to display the panel. As a result, some or all menu options may be hidden or inaccessible.
Expected Behavior
The "menu list" panel should always be fully visible and accessible whenever it is expanded, whether triggered by mouse or keyboard click, or by automatic expansion. Its appearance and layout should match the behavior when the "menu" button is activated by mouse or keyboard clicking, with sufficient space to display all menu options.
Environments
No response
Suggested Fix
- **Option 1(recommend):Do not automatically expand the "menu list" panel when focus leaves the "menu" button; instead, only expand the panel when activated by mouse or keyboard click.
- **Option 2:Ensure that when the "menu list" panel is expanded automatically via keyboard navigation, its behavior matches that of expansion triggered by mouse or keyboard clicks, so the panel is always fully visible and accessible.
Reference
No response
What is your operating system?
None
Web browser and version
No response
hey i would like to take this task @coseeian and just for doubt a silly one could you explain why tab would be used in mobile use?
While most mobile users rely on touch, low vision users may zoom in on desktop browsers, triggering the mobile layout and navigating with the Tab key—using either a screen reader or screen magnifier. Some users with motor disabilities also use external keyboards on mobile devices for Tab navigation. So even if a user interface is designed for mobile, it's important to ensure accessibility for keyboard navigation. Thanks for picking up this task!
@coseeian Oh great thank for responding . I didnt think of it this way. Would love to help .. I have also put a PR for the Focus issue. It would be great if you could check that out too. Once again thank you for your time
Hi @AshmitSherigar are you still working on this one as well? Please respond in the next 7 days; that isn't a deadline to finish the task, but just to confirm that you're on it. If you're not actively working on it, we can then open this task to volunteers again! Thank you.
