Keyboard navigation doesn't work on navigation menus
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 11.3k
- Forks
- 5.2k
- PR merge metrics
- No merged PRs in 30d
Description
Now that accessibility is becoming a requirement in public institutions in US, I'm trying to evaluate accessibility of our code. In particular I'm trying keyboard navigation in a menu that uses your Menu widget. The menu's structure is a 'ul' container of 'li' items, with an 'a' inside each 'li' linking to a different page.
If I only use a 'menu()' call on the 'ul' element, arrow navigation works fine, but nothing happens when I press 'return' or 'space'. If I add a handler for the 'select' event that triggers a 'click' on the 'a' element, it gets into a loop and I get a 'Uncaught InternalError: too much recursion'.
I thought I could avoid it by checking whether the 'ui.item[0]' is different from 'ui.item.prevObject[0]' before triggering the 'click' event, but they seem to always be the same.
So I'm out of options here, either I'm missing something or there's a bug somewhere. I'd say it should work without any customization, as this is a widespread pattern.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the Menu widget's keyboard handling and the select-event path for a ul containing li elements with links, reproducing the menu() case described in the issue. Done means Return and Space activate the selected link without requiring a custom handler or causing recursive clicks; the issue does not name a source file or test.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, jquery
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100