From 00a1685b1b37ad1ad5770880f9653dbd06d2cf3f Mon Sep 17 00:00:00 2001
From: Rafael Wendel <rafawendel2010@gmail.com>
Date: Mon, 1 Mar 2021 20:12:39 -0300
Subject: [PATCH] Improved accessibility of CodeBlock

---
 client/app/components/CodeBlock.jsx                  |  4 ++--
 client/app/components/CodeBlock.less                 |  2 +-
 client/app/components/queries/ApiKeyDialog/index.jsx | 12 ++++++++----
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/client/app/components/CodeBlock.jsx b/client/app/components/CodeBlock.jsx
index 13a643dc1..e80961025 100644
--- a/client/app/components/CodeBlock.jsx
+++ b/client/app/components/CodeBlock.jsx
@@ -66,9 +66,9 @@ export default class CodeBlock extends React.Component {
 
     return (
       <div className="code-block">
-        <code {...props} ref={this.ref}>
+        <textarea {...props} ref={this.ref}>
           {children}
-        </code>
+        </textarea>
         {this.copyFeatureEnabled && copyButton}
       </div>
     );
diff --git a/client/app/components/CodeBlock.less b/client/app/components/CodeBlock.less
index a983818c9..4cc8861c0 100644
--- a/client/app/components/CodeBlock.less
+++ b/client/app/components/CodeBlock.less
@@ -8,7 +8,7 @@
   position: relative;
   min-height: 32px;
 
-  code {
+  textarea {
     padding: 0;
     font-size: 85%;
   }
diff --git a/client/app/components/queries/ApiKeyDialog/index.jsx b/client/app/components/queries/ApiKeyDialog/index.jsx
index 163dfdabe..ba2ef4b14 100644
--- a/client/app/components/queries/ApiKeyDialog/index.jsx
+++ b/client/app/components/queries/ApiKeyDialog/index.jsx
@@ -56,12 +56,16 @@ function ApiKeyDialog({ dialog, ...props }) {
 
         <h5>Example API Calls:</h5>
         <div className="m-b-10">
-          <span>Results in CSV format:</span>
-          <CodeBlock copyable>{csvUrl}</CodeBlock>
+          <label htmlFor="csv-codeblock">Results in CSV format:</label>
+          <CodeBlock id="csv-codeblock" copyable>
+            {csvUrl}
+          </CodeBlock>
         </div>
         <div>
-          <span>Results in JSON format:</span>
-          <CodeBlock copyable>{jsonUrl}</CodeBlock>
+          <label htmlFor="json-codeblock">Results in JSON format:</label>
+          <CodeBlock id="json-codeblock" copyable>
+            {jsonUrl}
+          </CodeBlock>
         </div>
       </div>
     </Modal>