Explore addition of left and right arrow keys to popover menu submenus.
- Dominant language
- TypeScript
- Stars
- 53
- Forks
- 63
- Avg merge
- 2d 4h
- Merged PRs (30d)
- 15
Description
## Summary
The popover menu can currently have sub-menus accessed by keyboard by focussing on the group label and then hitting space or enter. We should explore whether it is best practice to add the ability to use the left and right arrow keys to drill down into the sub-menu also.
## 💬 Description
If we were to implement this, when focussed on a menu group in popover menu, using the right arrow key would open the sub-menu in the same way as hitting enter or space does.
Whilst in a submenu, hitting the left arrow key would always move the user back to the parent menu. Explore whether this should happen regardless of focus position, or only if focus is on the back sub-menu item.
## 💰 User value
Provides an additional method to interact with the component and navigate through its options.
## 📚 User Stories
If relevant, describe the high-level functionality as user stories.
*As an* ICDS user:
*I need* to be able to use the right and left arrow keys to navigate between popover menu sub-menus
*So that* I can more easily navigate the popover menu contents.
## 📝 Acceptance Criteria
If relevant, describe in full detail the different interactions and edge cases that the component or patterns needs to fulfil.
*Given*
*When*
*Then*
## ✏ Designs
If there's a Figma design file (or other mock-up), include it here.
## 🧾 Guidance
If there's written guidance or documentation, include a link to it here.
## Additional info
Tell us anything else useful to help us understand your suggestion.
Contributor guide
Research direction
Start at the popover menu component and review its existing keyboard handling for group labels, Enter/Space activation, submenus, and the back item. Check keyboard-accessibility guidance and resolve whether Left/Right navigation applies regardless of focus; the work is done when the interaction rules, edge cases, and acceptance criteria are agreed and covered by tests.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- accessibility, frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100