3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-05-22 13:37:05 +02:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source
This commit is contained in:
Alexey Pyltsyn 2020-10-15 18:03:48 +03:00 • committed by GitHub
parent aed1ce7850
commit fe7267ae93
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 8 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

4
packages/docusaurus-theme-classic/src/theme/CodeBlock/index.tsx
View file

@ -5,8 +5,6 @@
* 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 clsx from 'clsx'; import clsx from 'clsx';
import Highlight, {defaultProps} from 'prism-react-renderer'; import Highlight, {defaultProps} from 'prism-react-renderer';
@ -210,6 +208,7 @@ export default ({
)} )}
<div className={styles.codeBlockContent}> <div className={styles.codeBlockContent}>
<button <button
tabIndex={0}
ref={button} ref={button}
type="button" type="button"
aria-label="Copy code to clipboard" aria-label="Copy code to clipboard"
@ -220,7 +219,6 @@ export default ({
{showCopied ? 'Copied' : 'Copy'} {showCopied ? 'Copied' : 'Copy'}
</button> </button>
<div <div
tabIndex={0}
className={clsx(className, styles.codeBlock, { className={clsx(className, styles.codeBlock, {
[styles.codeBlockWithTitle]: codeBlockTitle, [styles.codeBlockWithTitle]: codeBlockTitle,
})}> })}>

12
packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css
View file

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