Audit avt1 component demo label text area (#2335)

* testing

* fix(componeent-demo): audit-avt1-component-demo-label-text-area

* fix(componeent-demo): updated label title

* fix: undo change

* fix: remove console log

* Update src/components/ComponentDemo/ComponentDemo.js

Co-authored-by: TJ Egan <tw15egan@gmail.com>

* fix: add label variable

Co-authored-by: Josefina Mancilla <32556167+jnm2377@users.noreply.github.com>
Co-authored-by: TJ Egan <tw15egan@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

src/components/ComponentDemo/ComponentDemo.js

@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/label-has-associated-control */
 /* eslint-disable import/no-extraneous-dependencies */
 import React, { useState, useContext } from 'react';
 import getTheme from 'gatsby-theme-carbon/src/components/Code/getTheme';
@@ -84,6 +85,8 @@ const ComponentDemo = ({ children, src, scope, noInline, components }) => {
       return currentVariant.props.children;
     });
   };
+
+  const labelText = `Live editor for the ${components[0].label} component`;
 
   // TODO max width editor handle multiple clicks use regex for individual props?
   // allow for write-in props
@@ -162,12 +165,16 @@ const ComponentDemo = ({ children, src, scope, noInline, components }) => {
               )}
 
               <Code links={links} code={code} src={src} className={codeRow}>
-                <LiveEditor
-                  padding={16}
-                  style={{ overflowX: 'auto', whiteSpace: 'pre' }}
-                  onChange={(updatedCode) => setCode(updatedCode)}
-                  className={editorContainer}
-                />
+                <label htmlFor="live-editor-label">
+                    <span className="live-editor-label">{labelText}</span>
+                  </label>
+                  <LiveEditor
+                    padding={16}
+                    style={{ overflowX: 'auto', whiteSpace: 'pre' }}
+                    onChange={(updatedCode) => setCode(updatedCode)}
+                    className={editorContainer}
+                    textareaId="live-editor-label"
+                  />
               </Code>
               {knobs && (
                 <>

src/components/ComponentDemo/ComponentDemo.module.scss

@@ -477,3 +477,16 @@ body {
     }
   }
 }
+
+:global(.live-editor-label) {
+  position: absolute;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  border: 0;
+  margin: -1px;
+  clip: rect(0, 0, 0, 0);
+  visibility: inherit;
+  white-space: nowrap;
+}