From fe7267ae932479e764f5c878f35344f8bf9b3787 Mon Sep 17 00:00:00 2001
From: Alexey Pyltsyn <lex61rus@gmail.com>
Date: Thu, 15 Oct 2020 18:03:48 +0300
Subject: [PATCH] refactor(v2): make accessible copy code button from keyboard
 (#3588)

---
 .../src/theme/CodeBlock/index.tsx                    |  4 +---
 .../src/theme/CodeBlock/styles.module.css            | 12 +++++++-----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.tsx b/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.tsx
index 416cb40307..c7df008743 100644
--- 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
index 9d5e4ad962..597146a72f 100644
--- 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;
 }