jquery / jquery/jquery-ui

Keyboard navigation doesn't work on navigation menus

Open
#2,404 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Needs info
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.