Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat: Allow scrolling via keyboard in code blocks #2264

Merged
merged 2 commits into from
Nov 30, 2023

Conversation

jhildenbiddle
Copy link
Member

Summary

See title and original issue (below).

Related issue, if any:

#2224

What kind of change does this PR introduce?

Feature

For any code change:

  • No documentation changes required
  • No automated tests required

Note: These changes were tested and verified with the docsify-copy-code plugin.

Does this PR introduce a breaking change?

No

Tested in the following browsers:

  • Chrome
  • Firefox
  • Safari
  • Edge

@vercel
Copy link

vercel bot commented Oct 14, 2023

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
docsify-preview ✅ Ready (Inspect) Visit Preview 💬 Add feedback Nov 30, 2023 5:41am

@jhildenbiddle jhildenbiddle changed the title Allow scrolling via keyboard in code blocks Feat: Allow scrolling via keyboard in code blocks Oct 14, 2023
@trusktr
Copy link
Member

trusktr commented Oct 22, 2023

Can we see before/after videos?

@jhildenbiddle
Copy link
Member Author

jhildenbiddle commented Oct 22, 2023

Can we see before/after videos?

Even better...

https://docsify-preview-git-2224-scrollable-code-docsifyjs.vercel.app/#/more-pages?id=sidebar

  1. Click the "Sidebar" heading in the content area
  2. Hit TAB three times so the focus is on code block.
    CleanShot 2023-10-22 at 15 07 23@2x
    Note: Tab/focus behavior may be determined by your browser setting. For example, here are the settings for Safari 17:
    CleanShot 2023-10-22 at 15 09 02@2x
  3. Use the arrow keys to scroll right/left.

Now try the same thing on https://docsify.js.org/#/more-pages?id=sidebar:

  1. Click the "Sidebar" heading in the content area
  2. Hit TAB three times. Notice that it is not possible to focus on the code block, making it impossible to scroll the code block using the arrow keys.

@jhildenbiddle jhildenbiddle marked this pull request as ready for review November 2, 2023 16:02
@jhildenbiddle jhildenbiddle requested a review from a team November 2, 2023 16:07
@jhildenbiddle jhildenbiddle linked an issue Nov 16, 2023 that may be closed by this pull request
1 task
@jhildenbiddle jhildenbiddle merged commit b8a5fea into develop Nov 30, 2023
9 checks passed
@jhildenbiddle jhildenbiddle deleted the 2224-scrollable-code branch November 30, 2023 05:45
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.

Accessibility - scrollable code region should be focusable
4 participants