fix: add keyboard shortcut for Jump To navigation - #1608
abhishekpanda-dev wants to merge 1 commit into
Conversation
|
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? |
|
@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: 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? |

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 lintnpm run checknpx vitest --run test/components/JumpToLinks.test.tsx— 14 tests passedCloses #935