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

facebook · Mar 29, 2020 · cf884f5 · cf884f5
1 parent cffb3f9
commit cf884f5
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 0 deletions.
diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js b/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js
@@ -5,6 +5,8 @@
  * 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 classnames from 'classnames';
 import Highlight, {defaultProps} from 'prism-react-renderer';
@@ -117,6 +119,7 @@ export default ({children, className: languageClassName, metastring}) => {
               {showCopied ? 'Copied' : 'Copy'}
             </button>
             <pre
+              tabIndex="0"
               className={classnames(className, styles.codeBlock, {
                 [styles.codeBlockWithTitle]: codeBlockTitle,
               })}>

diff --git a/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.js b/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.js
@@ -5,6 +5,8 @@
  * 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 classnames from 'classnames';
 import Highlight, {defaultProps} from 'prism-react-renderer';
@@ -136,6 +138,7 @@ export default ({
               {showCopied ? 'Copied' : 'Copy'}
             </button>
             <pre
+              tabIndex="0"
               className={classnames(className, styles.codeBlock, {
                 [styles.codeBlockWithTitle]: codeBlockTitle,
               })}>