Keep focus on sidebar links after navigation#2740
Conversation
|
Someone is attempting to deploy a commit to the Docsify Team on Vercel. A member of the Team first needs to authorize it. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
paulhibbitts
left a comment
There was a problem hiding this comment.
Thanks very much for this helpful PR @puneetdixit200 !
My knowledge of accessibility is quite basic - I used the following steps to test your PR:
- Open PR preview
- Use the TAB key to step through elements of the user interface, stoping on a navigation item in the Sidebar
- Use the RETURN key to activate selected link and display relevant content
- Using the TAB key stop on a second navigation item in the Sidebar
- Use the RETURN key to activate the second selected link and display relevant content
Doing the above I see that the selected Sidebar item keeps focus - please confirm this is a valid test of the changes you submitted. Thanks again, Paul.
paulhibbitts
left a comment
There was a problem hiding this comment.
Thanks very much @puneetdixit200 for this PR! Based on my own review this PR looks to address the keyboard navigation issue, and @msftedad has also looked at the same PR build with the same assessment.
Summary
Keeps keyboard focus on the activated sidebar link after Docsify finishes rendering the destination route.
For hash-mode navigation, the router now carries the original link click event through the
hashchangecallback. The event layer uses that clicked sidebar link to focus the matching link in the freshly rendered sidebar instead of moving focus to the main heading, whose programmatic focus is intentionally visually hidden.Related issue, if any:
Fixes #2600
What kind of change does this PR introduce?
For any code change,
Does this PR introduce a breaking change?
Tested in the following browsers:
Verification run:
npm run buildnpx playwright test test/e2e/sidebar.test.js --project=chromiumnpm run test:unitnpm run lintgit diff --check