From 14e72b4a5d718447d6359a9cec7e2878b93a84bd Mon Sep 17 00:00:00 2001
From: "Andrea N. Cardona" <andreancardona@gmail.com>
Date: Tue, 11 May 2021 12:49:13 -0600
Subject: [PATCH 1/7] testing

---
 src/pages/components/accordion/usage.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/components/accordion/usage.mdx b/src/pages/components/accordion/usage.mdx
index f6cb46d6d6a..3adc43a8a9b 100755
--- a/src/pages/components/accordion/usage.mdx
+++ b/src/pages/components/accordion/usage.mdx
@@ -8,7 +8,7 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 
 <PageDescription>
 
-An accordion is a vertically stacked list of headers that reveal or hide
+THE accordion is a vertically stacked list of headers that reveal or hide
 associated sections of content.
 
 </PageDescription>

From 218cddfcd5440acbd6bbc460194c6eb228c6d28b Mon Sep 17 00:00:00 2001
From: "Andrea N. Cardona" <andreancardona@gmail.com>
Date: Thu, 20 May 2021 14:11:01 -0600
Subject: [PATCH 2/7] fix(componeent-demo):
 audit-avt1-component-demo-label-text-area

---
 src/components/ComponentDemo/ComponentDemo.js  | 18 ++++++++++++------
 .../ComponentDemo/ComponentDemo.module.scss    | 13 +++++++++++++
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/src/components/ComponentDemo/ComponentDemo.js b/src/components/ComponentDemo/ComponentDemo.js
index 08de0099403..92b972e1204 100644
--- 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';
@@ -59,6 +60,8 @@ const ComponentDemo = ({ children, src, scope, noInline, components }) => {
   const [knobs, setKnobs] = useState(initialVariant.props.knobs);
   const [links, setLinks] = useState(initialVariant.props.links);
 
+  console.log('something', components[0]);
+
   const themes = {
     White: white,
     'Gray 10': g10,
@@ -162,12 +165,15 @@ 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>
+                  <span className="hidden-editor-label">Editor</span>
+                  <LiveEditor
+                    padding={16}
+                    style={{ overflowX: 'auto', whiteSpace: 'pre' }}
+                    onChange={(updatedCode) => setCode(updatedCode)}
+                    className={editorContainer}
+                  />
+                </label>
               </Code>
               {knobs && (
                 <>
diff --git a/src/components/ComponentDemo/ComponentDemo.module.scss b/src/components/ComponentDemo/ComponentDemo.module.scss
index 0850c96d789..962ee98b655 100644
--- a/src/components/ComponentDemo/ComponentDemo.module.scss
+++ b/src/components/ComponentDemo/ComponentDemo.module.scss
@@ -477,3 +477,16 @@ body {
     }
   }
 }
+
+:global(.hidden-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;
+}

From 2ad2241cfd0e6c821bd09846430c4a248456401c Mon Sep 17 00:00:00 2001
From: "Andrea N. Cardona" <andreancardona@gmail.com>
Date: Thu, 20 May 2021 14:42:18 -0600
Subject: [PATCH 3/7] fix(componeent-demo): updated label title

---
 src/components/ComponentDemo/ComponentDemo.js          | 7 +++++--
 src/components/ComponentDemo/ComponentDemo.module.scss | 2 +-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/ComponentDemo/ComponentDemo.js b/src/components/ComponentDemo/ComponentDemo.js
index 92b972e1204..e8f420ce66e 100644
--- a/src/components/ComponentDemo/ComponentDemo.js
+++ b/src/components/ComponentDemo/ComponentDemo.js
@@ -165,13 +165,16 @@ const ComponentDemo = ({ children, src, scope, noInline, components }) => {
               )}
 
               <Code links={links} code={code} src={src} className={codeRow}>
-                <label>
-                  <span className="hidden-editor-label">Editor</span>
+                <label htmlFor="live-editor-label">
+                  <span className="live-editor-label">
+                    `Live editor for the ${components[0].label} component`
+                  </span>
                   <LiveEditor
                     padding={16}
                     style={{ overflowX: 'auto', whiteSpace: 'pre' }}
                     onChange={(updatedCode) => setCode(updatedCode)}
                     className={editorContainer}
+                    textareaId="live-editor-label"
                   />
                 </label>
               </Code>
diff --git a/src/components/ComponentDemo/ComponentDemo.module.scss b/src/components/ComponentDemo/ComponentDemo.module.scss
index 962ee98b655..880254773ab 100644
--- a/src/components/ComponentDemo/ComponentDemo.module.scss
+++ b/src/components/ComponentDemo/ComponentDemo.module.scss
@@ -478,7 +478,7 @@ body {
   }
 }
 
-:global(.hidden-editor-label) {
+:global(.live-editor-label) {
   position: absolute;
   overflow: hidden;
   width: 1px;

From e7203bb87f92b388fa9099a6093386f0da4ec6b3 Mon Sep 17 00:00:00 2001
From: Josefina Mancilla <32556167+jnm2377@users.noreply.github.com>
Date: Mon, 31 May 2021 12:09:47 -0500
Subject: [PATCH 4/7] fix: undo change

---
 src/pages/components/accordion/usage.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/components/accordion/usage.mdx b/src/pages/components/accordion/usage.mdx
index 3adc43a8a9b..f6cb46d6d6a 100755
--- a/src/pages/components/accordion/usage.mdx
+++ b/src/pages/components/accordion/usage.mdx
@@ -8,7 +8,7 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 
 <PageDescription>
 
-THE accordion is a vertically stacked list of headers that reveal or hide
+An accordion is a vertically stacked list of headers that reveal or hide
 associated sections of content.
 
 </PageDescription>

From abecf2878c16ddee650d144390993e4d7ea37573 Mon Sep 17 00:00:00 2001
From: Josefina Mancilla <32556167+jnm2377@users.noreply.github.com>
Date: Mon, 31 May 2021 12:11:57 -0500
Subject: [PATCH 5/7] fix: remove console log

---
 src/components/ComponentDemo/ComponentDemo.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/ComponentDemo/ComponentDemo.js b/src/components/ComponentDemo/ComponentDemo.js
index e8f420ce66e..66c02abb8ba 100644
--- a/src/components/ComponentDemo/ComponentDemo.js
+++ b/src/components/ComponentDemo/ComponentDemo.js
@@ -60,8 +60,6 @@ const ComponentDemo = ({ children, src, scope, noInline, components }) => {
   const [knobs, setKnobs] = useState(initialVariant.props.knobs);
   const [links, setLinks] = useState(initialVariant.props.links);
 
-  console.log('something', components[0]);
-
   const themes = {
     White: white,
     'Gray 10': g10,

From c8cb4e5c6c5bd1a6f1a358694d482f263c0770e3 Mon Sep 17 00:00:00 2001
From: Josefina Mancilla <32556167+jnm2377@users.noreply.github.com>
Date: Mon, 31 May 2021 12:13:01 -0500
Subject: [PATCH 6/7] Update src/components/ComponentDemo/ComponentDemo.js

Co-authored-by: TJ Egan <tw15egan@gmail.com>
---
 src/components/ComponentDemo/ComponentDemo.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/ComponentDemo/ComponentDemo.js b/src/components/ComponentDemo/ComponentDemo.js
index 66c02abb8ba..a2b68aa41ce 100644
--- a/src/components/ComponentDemo/ComponentDemo.js
+++ b/src/components/ComponentDemo/ComponentDemo.js
@@ -164,9 +164,8 @@ const ComponentDemo = ({ children, src, scope, noInline, components }) => {
 
               <Code links={links} code={code} src={src} className={codeRow}>
                 <label htmlFor="live-editor-label">
-                  <span className="live-editor-label">
-                    `Live editor for the ${components[0].label} component`
-                  </span>
+                    <span className="live-editor-label">{labelText}</span>
+                  </label>
                   <LiveEditor
                     padding={16}
                     style={{ overflowX: 'auto', whiteSpace: 'pre' }}
@@ -174,7 +173,6 @@ const ComponentDemo = ({ children, src, scope, noInline, components }) => {
                     className={editorContainer}
                     textareaId="live-editor-label"
                   />
-                </label>
               </Code>
               {knobs && (
                 <>

From 48d4a60db8c1eb83959c3cf8735158506fac7038 Mon Sep 17 00:00:00 2001
From: Josefina Mancilla <32556167+jnm2377@users.noreply.github.com>
Date: Mon, 31 May 2021 12:15:16 -0500
Subject: [PATCH 7/7] fix: add label variable

---
 src/components/ComponentDemo/ComponentDemo.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/ComponentDemo/ComponentDemo.js b/src/components/ComponentDemo/ComponentDemo.js
index a2b68aa41ce..8a200ecf2f6 100644
--- a/src/components/ComponentDemo/ComponentDemo.js
+++ b/src/components/ComponentDemo/ComponentDemo.js
@@ -85,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