Skip to content

fix: add keyboard shortcut for Jump To navigation - #1608

Open
abhishekpanda-dev wants to merge 1 commit into
processing:mainfrom
abhishekpanda-dev:fix/jump-to-keyboard-shortcut
Open

abhishekpanda-dev wants to merge 1 commit into
processing:mainfrom
abhishekpanda-dev:fix/jump-to-keyboard-shortcut

Conversation

@abhishekpanda-dev

Copy link
Copy Markdown

Description

Adds the keyboard shortcut requested in #935 for the Jump To navigation.

Pressing Alt + J (Option + J on macOS) now focuses the Jump To toggle without opening or closing it. The shortcut is also shown next to the heading so users can discover it.

The shortcut is ignored when the user is typing in inputs, textareas, selects, contenteditable elements, or the CodeMirror editor.

I also added aria-keyshortcuts="Alt+J" and tests covering the shortcut behavior, editable contexts, modifier combinations, macOS behavior, and listener cleanup.

Testing

  • npm run lint
  • npm run check
  • npx vitest --run test/components/JumpToLinks.test.tsx — 14 tests passed
  • Manually tested Alt + J in the browser and confirmed it focuses the Jump To button without toggling the menu

Closes #935

@Nwakaego-Ego

Copy link
Copy Markdown
Contributor

Hi @abhishekpanda-dev, thank you for working on this PR. I tested the changes locally on Windows and confirmed that pressing Alt + J moves focus to the existing Jump To toggle and shows a visible focus outline without opening or closing it. Enter and Space still open and close the toggle, while Tab moves through the navigation links as expected. I also checked the layout at 150% browser zoom. The heading, shortcut label, and chevron remained on the same line without overlapping or being cut off. All the tests passed, including ESLint.

cc @doradocodes, could you please take a look in case I missed anything?

@doradocodes

doradocodes commented Oct 2, 2026 •

Copy link
Copy Markdown
Contributor

@abhishekpanda-dev I also tested your implementation on Mac and it's working as expected. However, I'm not sure if the location of the shortcut label should be here:
Screenshot 2026-10-02 at 12 56 42 PM

Let's discuss more about where this label should be (or if it's even necessary). Maybe we can compare it to other websites?

cc'ing @coseeian do you have any thoughts about where this label should go?

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Navigation] Quick access keys to jump to the side navigation

3 participants