Improved accessibility of CodeBlock

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>
     );

client/app/components/CodeBlock.less

@@ -8,7 +8,7 @@
   position: relative;
   min-height: 32px;
 
-  code {
+  textarea {
     padding: 0;
     font-size: 85%;
   }

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>