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

fix(v2): improve code block scroll accessibility #2476

Merged
merged 1 commit into from
Mar 29, 2020

Conversation

lex111
Copy link
Contributor

@lex111 lex111 commented Mar 29, 2020

Motivation

Refers to #2403

This ensures that this scrollable region has keyboard access.

Have you read the Contributing Guidelines on pull requests?

Yes

Test Plan

Preview.

  1. In the web browser go to https://deploy-preview-2476--docusaurus-2.netlify.com/docs/markdown-features/
  2. Press the tab button to jump to code block.

image

Related PRs

(If this PR adds or changes functionality, please take some time to update the docs at https://github.com/facebook/docusaurus, and link to your PR here.)

@lex111 lex111 added the pr: bug fix This PR fixes a bug in a past release. label Mar 29, 2020
@lex111 lex111 added this to the v2.0.0-alpha.49 milestone Mar 29, 2020
@facebook-github-bot facebook-github-bot added the CLA Signed Signed Facebook CLA label Mar 29, 2020
@@ -117,6 +119,7 @@ export default ({children, className: languageClassName, metastring}) => {
{showCopied ? 'Copied' : 'Copy'}
</button>
<pre
tabIndex="0"
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could add this attribute to the div element with codeBlockLines class, but then the outline is poorly visible, so I added it to the pre tag and disabled the corresponding ESLint rule.

@docusaurus-bot
Copy link
Contributor

docusaurus-bot commented Mar 29, 2020

Deploy preview for docusaurus-2 ready!

Built with commit e63c166

https://deploy-preview-2476--docusaurus-2.netlify.com

Copy link
Contributor

@yangshun yangshun left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would be better to silence just the relevant line instead of the whole file. Otherwise LGTM

EDIT: Just found out that silencing within JSX is not possible yet. So this is the best we can do.

@yangshun yangshun force-pushed the lex111/a11y-scrollable-code-block branch from ed1d5a6 to e63c166 Compare March 29, 2020 04:46
@yangshun yangshun merged commit cf884f5 into master Mar 29, 2020
@lex111 lex111 deleted the lex111/a11y-scrollable-code-block branch March 29, 2020 09:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed Signed Facebook CLA pr: bug fix This PR fixes a bug in a past release.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants