From dfe32dac9ee10ab63d54e97c993d9ec12d7bb2a4 Mon Sep 17 00:00:00 2001
From: Alexey Pyltsyn <lex61rus@gmail.com>
Date: Tue, 15 Jun 2021 17:28:41 +0300
Subject: [PATCH] fix(v2): improve accessibility of code blocks (#4943)

---
 .../src/theme/CodeBlock/index.tsx               | 17 +++++++++--------
 .../src/theme/CodeBlock/styles.module.css       |  9 ++++-----
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.tsx b/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.tsx
index 77bbc902de..a0534e6ae6 100644
--- a/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.tsx
@@ -207,13 +207,14 @@ export default function CodeBlock({
             </div>
           )}
           <div className={clsx(styles.codeBlockContent, language)}>
-            <div
+            <pre
               /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
               tabIndex={0}
               className={clsx(className, styles.codeBlock, 'thin-scrollbar', {
                 [styles.codeBlockWithTitle]: codeBlockTitle,
-              })}>
-              <div className={styles.codeBlockLines} style={style}>
+              })}
+              style={style}>
+              <code className={styles.codeBlockLines}>
                 {tokens.map((line, i) => {
                   if (line.length === 1 && line[0].content === '') {
                     line[0].content = '\n'; // eslint-disable-line no-param-reassign
@@ -222,19 +223,19 @@ export default function CodeBlock({
                   const lineProps = getLineProps({line, key: i});
 
                   if (highlightLines.includes(i + 1)) {
-                    lineProps.className = `${lineProps.className} docusaurus-highlight-code-line`;
+                    lineProps.className += ' docusaurus-highlight-code-line';
                   }
 
                   return (
-                    <div key={i} {...lineProps}>
+                    <span key={i} {...lineProps}>
                       {line.map((token, key) => (
                         <span key={key} {...getTokenProps({token, key})} />
                       ))}
-                    </div>
+                    </span>
                   );
                 })}
-              </div>
-            </div>
+              </code>
+            </pre>
 
             <button
               ref={button}
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 6aedbd715d..d7e70077d8 100644
--- a/packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css
@@ -25,8 +25,7 @@
 }
 
 .codeBlock {
-  overflow: auto;
-  border-radius: var(--ifm-global-radius);
+  padding: 0;
 }
 
 .codeBlockWithTitle {
@@ -56,12 +55,12 @@
 }
 
 .codeBlockLines {
-  font: var(--ifm-code-font-size) / var(--ifm-pre-line-height)
-    var(--ifm-font-family-monospace);
-  white-space: pre;
+  font: inherit;
   float: left;
   min-width: 100%;
   padding: var(--ifm-pre-padding);
+  display: flex;
+  flex-direction: column;
 }
 
 @media print {