3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-06-15 09:12:24 +02:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source
This commit is contained in:
Alexey Pyltsyn 2020-03-29 07:48:34 +03:00 • committed by GitHub
parent cffb3f9af5
commit cf884f532d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 6 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

3
packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js
View file

@ -5,6 +5,8 @@
* LICENSE file in the root directory of this source tree. * LICENSE file in the root directory of this source tree.
*/ */
/* eslint-disable jsx-a11y/no-noninteractive-tabindex */
import React, {useEffect, useState, useRef} from 'react'; import React, {useEffect, useState, useRef} from 'react';
import classnames from 'classnames'; import classnames from 'classnames';
import Highlight, {defaultProps} from 'prism-react-renderer'; import Highlight, {defaultProps} from 'prism-react-renderer';
@ -117,6 +119,7 @@ export default ({children, className: languageClassName, metastring}) => {
{showCopied ? 'Copied' : 'Copy'} {showCopied ? 'Copied' : 'Copy'}
</button> </button>
<pre <pre
tabIndex="0"
className={classnames(className, styles.codeBlock, { className={classnames(className, styles.codeBlock, {
[styles.codeBlockWithTitle]: codeBlockTitle, [styles.codeBlockWithTitle]: codeBlockTitle,
})}> })}>

3
packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.js
View file

@ -5,6 +5,8 @@
* LICENSE file in the root directory of this source tree. * LICENSE file in the root directory of this source tree.
*/ */
/* eslint-disable jsx-a11y/no-noninteractive-tabindex */
import React, {useEffect, useState, useRef} from 'react'; import React, {useEffect, useState, useRef} from 'react';
import classnames from 'classnames'; import classnames from 'classnames';
import Highlight, {defaultProps} from 'prism-react-renderer'; import Highlight, {defaultProps} from 'prism-react-renderer';
@ -136,6 +138,7 @@ export default ({
{showCopied ? 'Copied' : 'Copy'} {showCopied ? 'Copied' : 'Copy'}
</button> </button>
<pre <pre
tabIndex="0"
className={classnames(className, styles.codeBlock, { className={classnames(className, styles.codeBlock, {
[styles.codeBlockWithTitle]: codeBlockTitle, [styles.codeBlockWithTitle]: codeBlockTitle,
})}> })}>