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

fix(v2): improve accessibility of code blocks (#4943)

Browse source
This commit is contained in:
Alexey Pyltsyn 2021-06-15 17:28:41 +03:00 • committed by GitHub
parent 52f19e15f0
commit dfe32dac9e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -207,13 +207,14 @@ export default function CodeBlock({
</div> </div>
)} )}
<div className={clsx(styles.codeBlockContent, language)}> <div className={clsx(styles.codeBlockContent, language)}>
<div <pre
/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */ /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
tabIndex={0} tabIndex={0}
className={clsx(className, styles.codeBlock, 'thin-scrollbar', { className={clsx(className, styles.codeBlock, 'thin-scrollbar', {
[styles.codeBlockWithTitle]: codeBlockTitle, [styles.codeBlockWithTitle]: codeBlockTitle,
})}> })}
<div className={styles.codeBlockLines} style={style}> style={style}>
<code className={styles.codeBlockLines}>
{tokens.map((line, i) => { {tokens.map((line, i) => {
if (line.length === 1 && line[0].content === '') { if (line.length === 1 && line[0].content === '') {
line[0].content = '\n'; // eslint-disable-line no-param-reassign line[0].content = '\n'; // eslint-disable-line no-param-reassign
@ -222,19 +223,19 @@ export default function CodeBlock({
const lineProps = getLineProps({line, key: i}); const lineProps = getLineProps({line, key: i});
if (highlightLines.includes(i + 1)) { if (highlightLines.includes(i + 1)) {
lineProps.className = `${lineProps.className} docusaurus-highlight-code-line`; lineProps.className += ' docusaurus-highlight-code-line';
} }
return ( return (
<div key={i} {...lineProps}> <span key={i} {...lineProps}>
{line.map((token, key) => ( {line.map((token, key) => (
<span key={key} {...getTokenProps({token, key})} /> <span key={key} {...getTokenProps({token, key})} />
))} ))}
</div> </span>
); );
})} })}
</div> </code>
</div> </pre>
<button <button
ref={button} ref={button}

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

@ -25,8 +25,7 @@
} }
.codeBlock { .codeBlock {
overflow: auto; padding: 0;
border-radius: var(--ifm-global-radius);
} }
.codeBlockWithTitle { .codeBlockWithTitle {
@ -56,12 +55,12 @@
} }
.codeBlockLines { .codeBlockLines {
font: var(--ifm-code-font-size) / var(--ifm-pre-line-height) font: inherit;
var(--ifm-font-family-monospace);
white-space: pre;
float: left; float: left;
min-width: 100%; min-width: 100%;
padding: var(--ifm-pre-padding); padding: var(--ifm-pre-padding);
display: flex;
flex-direction: column;
} }
@media print { @media print {