refactor(v2): make code blocks accessible from keyboard

facebook · Oct 27, 2020 · 1003e0e · 1003e0e
1 parent d9bfe84
commit 1003e0e
Showing 1 changed file with 13 additions and 11 deletions.
diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.tsx b/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.tsx
@@ -207,18 +207,9 @@ export default ({
  </div>
  )}
  <div className={styles.codeBlockContent}>
- <button
- tabIndex={0}
- ref={button}
- type="button"
- aria-label="Copy code to clipboard"
- className={clsx(styles.copyButton, {
- [styles.copyButtonWithTitle]: codeBlockTitle,
- })}
- onClick={handleCopyCode}>
- {showCopied ? 'Copied' : 'Copy'}
- </button>
  <div
+ /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
+ tabIndex={0}
  className={clsx(className, styles.codeBlock, {
  [styles.codeBlockWithTitle]: codeBlockTitle,
  })}>
@@ -244,6 +235,17 @@ export default ({
  })}
  </div>
  </div>
+
+ <button
+ ref={button}
+ type="button"
+ aria-label="Copy code to clipboard"
+ className={clsx(styles.copyButton, {
+ [styles.copyButtonWithTitle]: codeBlockTitle,
+ })}
+ onClick={handleCopyCode}>
+ {showCopied ? 'Copied' : 'Copy'}
+ </button>
  </div>
  </>
  )}