refactor(v2): make accessible copy code button from keyboard

facebook · Oct 14, 2020 · c6680c6 · c6680c6
1 parent 5be3471
commit c6680c6
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 8 deletions.
diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.tsx b/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.tsx
@@ -5,8 +5,6 @@
  * 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 clsx from 'clsx';
 import Highlight, {defaultProps} from 'prism-react-renderer';
@@ -210,6 +208,7 @@ export default ({
           )}
           <div className={styles.codeBlockContent}>
             <button
+              tabIndex={0}
               ref={button}
               type="button"
               aria-label="Copy code to clipboard"
@@ -220,7 +219,6 @@ export default ({
               {showCopied ? 'Copied' : 'Copy'}
             </button>
             <div
-              tabIndex={0}
               className={clsx(className, styles.codeBlock, {
                 [styles.codeBlockWithTitle]: codeBlockTitle,
               })}>

diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css b/packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css
@@ -36,19 +36,21 @@
   color: var(--ifm-color-white);
   cursor: pointer;
   opacity: 0;
-  outline: none;
+  user-select: none;
   padding: 0.4rem 0.5rem;
   position: absolute;
   right: calc(var(--ifm-pre-padding) / 2);
   top: calc(var(--ifm-pre-padding) / 2);
-  visibility: hidden;
-  transition: opacity 200ms ease-in-out, visibility 200ms ease-in-out,
-    bottom 200ms ease-in-out;
+  transition: opacity 200ms ease-in-out;
 }
 
 .codeBlockTitle:hover + .codeBlockContent .copyButton,
 .codeBlockContent:hover > .copyButton {
-  visibility: visible;
+  outline: none;
+  opacity: 1;
+}
+
+.copyButton:focus {
   opacity: 1;
 }