Audit avt1 component demo label text area (carbon-design-system#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 <[email protected]> * fix: add label variable Co-authored-by: Josefina Mancilla <[email protected]> Co-authored-by: TJ Egan <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
emyarod · Jun 9, 2021 · 21d068d · 21d068d
1 parent f3be587
commit 21d068d
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 6 deletions.
diff --git a/src/components/ComponentDemo/ComponentDemo.js b/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 && (
                 <>

diff --git a/src/components/ComponentDemo/ComponentDemo.module.scss b/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;
+}