From 4a868288574ac1002ec6d084d53262126d9c9a82 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Thu, 5 Mar 2020 19:16:37 +0000
Subject: [PATCH 1/3] Removing fieldset and replacing by div role group

---
 .../described_form_group.test.tsx.snap        | 990 ++++++++----------
 .../described_form_group.tsx                  |  44 +-
 2 files changed, 473 insertions(+), 561 deletions(-)

diff --git a/src/components/form/described_form_group/__snapshots__/described_form_group.test.tsx.snap b/src/components/form/described_form_group/__snapshots__/described_form_group.test.tsx.snap
index ab5e77d8b1a..77f97ad1b28 100644
--- a/src/components/form/described_form_group/__snapshots__/described_form_group.test.tsx.snap
+++ b/src/components/form/described_form_group/__snapshots__/described_form_group.test.tsx.snap
@@ -12,100 +12,88 @@ exports[`EuiDescribedFormGroup is rendered 1`] = `
     </h3>
   }
 >
-  <EuiInnerText>
-    <fieldset
-      aria-label="aria-label"
-      className="euiDescribedFormGroup testClass1 testClass2"
-      data-test-subj="test subject string"
+  <div
+    aria-label="aria-label"
+    className="euiDescribedFormGroup testClass1 testClass2"
+    data-test-subj="test subject string"
+    role="group"
+  >
+    <EuiFlexGroup
+      gutterSize="l"
     >
-      <EuiScreenReaderOnly>
-        <legend
-          className="euiScreenReaderOnly"
-        >
-          Title
-        </legend>
-      </EuiScreenReaderOnly>
-      <EuiFlexGroup
-        gutterSize="l"
+      <div
+        className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
       >
-        <div
-          className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
-        >
-          <EuiFlexItem>
-            <div
-              className="euiFlexItem"
+        <EuiFlexItem>
+          <div
+            className="euiFlexItem"
+          >
+            <EuiTitle
+              className="euiDescribedFormGroup__title"
+              size="xs"
             >
-              <span>
-                <EuiTitle
-                  aria-hidden="true"
-                  className="euiDescribedFormGroup__title"
-                  size="xs"
-                >
-                  <h3
-                    aria-hidden="true"
-                    className="euiTitle euiTitle--xsmall euiDescribedFormGroup__title"
-                  >
-                    Title
-                  </h3>
-                </EuiTitle>
-              </span>
-              <EuiText
-                className="euiDescribedFormGroup__description"
-                color="subdued"
-                size="s"
+              <h3
+                className="euiTitle euiTitle--xsmall euiDescribedFormGroup__title"
               >
-                <div
-                  className="euiText euiText--small euiDescribedFormGroup__description"
+                Title
+              </h3>
+            </EuiTitle>
+            <EuiText
+              className="euiDescribedFormGroup__description"
+              color="subdued"
+              size="s"
+            >
+              <div
+                className="euiText euiText--small euiDescribedFormGroup__description"
+              >
+                <EuiTextColor
+                  color="subdued"
+                  component="div"
                 >
-                  <EuiTextColor
-                    color="subdued"
-                    component="div"
+                  <div
+                    className="euiTextColor euiTextColor--subdued"
                   >
-                    <div
-                      className="euiTextColor euiTextColor--subdued"
-                    >
-                      Test description
-                    </div>
-                  </EuiTextColor>
-                </div>
-              </EuiText>
-            </div>
-          </EuiFlexItem>
-          <EuiFlexItem
-            className="euiDescribedFormGroup__fields euiDescribedFormGroup__fieldPadding--xsmall"
+                    Test description
+                  </div>
+                </EuiTextColor>
+              </div>
+            </EuiText>
+          </div>
+        </EuiFlexItem>
+        <EuiFlexItem
+          className="euiDescribedFormGroup__fields euiDescribedFormGroup__fieldPadding--xsmall"
+        >
+          <div
+            className="euiFlexItem euiDescribedFormGroup__fields euiDescribedFormGroup__fieldPadding--xsmall"
           >
-            <div
-              className="euiFlexItem euiDescribedFormGroup__fields euiDescribedFormGroup__fieldPadding--xsmall"
+            <EuiFormRow
+              describedByIds={Array []}
+              display="row"
+              fullWidth={false}
+              hasChildLabel={true}
+              hasEmptyLabelSpace={false}
+              labelType="label"
             >
-              <EuiFormRow
-                describedByIds={Array []}
-                display="row"
-                fullWidth={false}
-                hasChildLabel={true}
-                hasEmptyLabelSpace={false}
-                labelType="label"
+              <div
+                className="euiFormRow"
+                id="generated-id-row"
               >
                 <div
-                  className="euiFormRow"
-                  id="generated-id-row"
+                  className="euiFormRow__fieldWrapper"
                 >
-                  <div
-                    className="euiFormRow__fieldWrapper"
-                  >
-                    <input
-                      id="generated-id"
-                      onBlur={[Function]}
-                      onFocus={[Function]}
-                    />
-                  </div>
+                  <input
+                    id="generated-id"
+                    onBlur={[Function]}
+                    onFocus={[Function]}
+                  />
                 </div>
-              </EuiFormRow>
-            </div>
-          </EuiFlexItem>
-        </div>
-      </EuiFlexGroup>
-    </fieldset>
-  </EuiInnerText>
+              </div>
+            </EuiFormRow>
+          </div>
+        </EuiFlexItem>
+      </div>
+    </EuiFlexGroup>
+  </div>
 </EuiDescribedFormGroup>
 `;
 
@@ -120,80 +108,68 @@ exports[`EuiDescribedFormGroup props description is not rendered when it's not p
     </h3>
   }
 >
-  <EuiInnerText>
-    <fieldset
-      aria-label="aria-label"
-      className="euiDescribedFormGroup testClass1 testClass2"
-      data-test-subj="test subject string"
+  <div
+    aria-label="aria-label"
+    className="euiDescribedFormGroup testClass1 testClass2"
+    data-test-subj="test subject string"
+    role="group"
+  >
+    <EuiFlexGroup
+      gutterSize="l"
     >
-      <EuiScreenReaderOnly>
-        <legend
-          className="euiScreenReaderOnly"
-        >
-          Title
-        </legend>
-      </EuiScreenReaderOnly>
-      <EuiFlexGroup
-        gutterSize="l"
+      <div
+        className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
       >
-        <div
-          className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
-        >
-          <EuiFlexItem>
-            <div
-              className="euiFlexItem"
+        <EuiFlexItem>
+          <div
+            className="euiFlexItem"
+          >
+            <EuiTitle
+              className="euiDescribedFormGroup__title"
+              size="xs"
             >
-              <span>
-                <EuiTitle
-                  aria-hidden="true"
-                  className="euiDescribedFormGroup__title"
-                  size="xs"
-                >
-                  <h3
-                    aria-hidden="true"
-                    className="euiTitle euiTitle--xsmall euiDescribedFormGroup__title"
-                  >
-                    Title
-                  </h3>
-                </EuiTitle>
-              </span>
-            </div>
-          </EuiFlexItem>
-          <EuiFlexItem
-            className="euiDescribedFormGroup__fields euiDescribedFormGroup__fieldPadding--xsmall"
+              <h3
+                className="euiTitle euiTitle--xsmall euiDescribedFormGroup__title"
+              >
+                Title
+              </h3>
+            </EuiTitle>
+          </div>
+        </EuiFlexItem>
+        <EuiFlexItem
+          className="euiDescribedFormGroup__fields euiDescribedFormGroup__fieldPadding--xsmall"
+        >
+          <div
+            className="euiFlexItem euiDescribedFormGroup__fields euiDescribedFormGroup__fieldPadding--xsmall"
           >
-            <div
-              className="euiFlexItem euiDescribedFormGroup__fields euiDescribedFormGroup__fieldPadding--xsmall"
+            <EuiFormRow
+              describedByIds={Array []}
+              display="row"
+              fullWidth={false}
+              hasChildLabel={true}
+              hasEmptyLabelSpace={false}
+              labelType="label"
             >
-              <EuiFormRow
-                describedByIds={Array []}
-                display="row"
-                fullWidth={false}
-                hasChildLabel={true}
-                hasEmptyLabelSpace={false}
-                labelType="label"
+              <div
+                className="euiFormRow"
+                id="generated-id-row"
               >
                 <div
-                  className="euiFormRow"
-                  id="generated-id-row"
+                  className="euiFormRow__fieldWrapper"
                 >
-                  <div
-                    className="euiFormRow__fieldWrapper"
-                  >
-                    <input
-                      id="generated-id"
-                      onBlur={[Function]}
-                      onFocus={[Function]}
-                    />
-                  </div>
+                  <input
+                    id="generated-id"
+                    onBlur={[Function]}
+                    onFocus={[Function]}
+                  />
                 </div>
-              </EuiFormRow>
-            </div>
-          </EuiFlexItem>
-        </div>
-      </EuiFlexGroup>
-    </fieldset>
-  </EuiInnerText>
+              </div>
+            </EuiFormRow>
+          </div>
+        </EuiFlexItem>
+      </div>
+    </EuiFlexGroup>
+  </div>
 </EuiDescribedFormGroup>
 `;
 
@@ -210,100 +186,88 @@ exports[`EuiDescribedFormGroup props fullWidth is rendered 1`] = `
     </h3>
   }
 >
-  <EuiInnerText>
-    <fieldset
-      aria-label="aria-label"
-      className="euiDescribedFormGroup euiDescribedFormGroup--fullWidth testClass1 testClass2"
-      data-test-subj="test subject string"
+  <div
+    aria-label="aria-label"
+    className="euiDescribedFormGroup euiDescribedFormGroup--fullWidth testClass1 testClass2"
+    data-test-subj="test subject string"
+    role="group"
+  >
+    <EuiFlexGroup
+      gutterSize="l"
     >
-      <EuiScreenReaderOnly>
-        <legend
-          className="euiScreenReaderOnly"
-        >
-          Title
-        </legend>
-      </EuiScreenReaderOnly>
-      <EuiFlexGroup
-        gutterSize="l"
+      <div
+        className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
       >
-        <div
-          className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
-        >
-          <EuiFlexItem>
-            <div
-              className="euiFlexItem"
+        <EuiFlexItem>
+          <div
+            className="euiFlexItem"
+          >
+            <EuiTitle
+              className="euiDescribedFormGroup__title"
+              size="xs"
             >
-              <span>
-                <EuiTitle
-                  aria-hidden="true"
-                  className="euiDescribedFormGroup__title"
-                  size="xs"
-                >
-                  <h3
-                    aria-hidden="true"
-                    className="euiTitle euiTitle--xsmall euiDescribedFormGroup__title"
-                  >
-                    Title
-                  </h3>
-                </EuiTitle>
-              </span>
-              <EuiText
-                className="euiDescribedFormGroup__description"
-                color="subdued"
-                size="s"
+              <h3
+                className="euiTitle euiTitle--xsmall euiDescribedFormGroup__title"
               >
-                <div
-                  className="euiText euiText--small euiDescribedFormGroup__description"
+                Title
+              </h3>
+            </EuiTitle>
+            <EuiText
+              className="euiDescribedFormGroup__description"
+              color="subdued"
+              size="s"
+            >
+              <div
+                className="euiText euiText--small euiDescribedFormGroup__description"
+              >
+                <EuiTextColor
+                  color="subdued"
+                  component="div"
                 >
-                  <EuiTextColor
-                    color="subdued"
-                    component="div"
+                  <div
+                    className="euiTextColor euiTextColor--subdued"
                   >
-                    <div
-                      className="euiTextColor euiTextColor--subdued"
-                    >
-                      Test description
-                    </div>
-                  </EuiTextColor>
-                </div>
-              </EuiText>
-            </div>
-          </EuiFlexItem>
-          <EuiFlexItem
-            className="euiDescribedFormGroup__fields euiDescribedFormGroup__fieldPadding--xsmall"
+                    Test description
+                  </div>
+                </EuiTextColor>
+              </div>
+            </EuiText>
+          </div>
+        </EuiFlexItem>
+        <EuiFlexItem
+          className="euiDescribedFormGroup__fields euiDescribedFormGroup__fieldPadding--xsmall"
+        >
+          <div
+            className="euiFlexItem euiDescribedFormGroup__fields euiDescribedFormGroup__fieldPadding--xsmall"
           >
-            <div
-              className="euiFlexItem euiDescribedFormGroup__fields euiDescribedFormGroup__fieldPadding--xsmall"
+            <EuiFormRow
+              describedByIds={Array []}
+              display="row"
+              fullWidth={true}
+              hasChildLabel={true}
+              hasEmptyLabelSpace={false}
+              labelType="label"
             >
-              <EuiFormRow
-                describedByIds={Array []}
-                display="row"
-                fullWidth={true}
-                hasChildLabel={true}
-                hasEmptyLabelSpace={false}
-                labelType="label"
+              <div
+                className="euiFormRow euiFormRow--fullWidth"
+                id="generated-id-row"
               >
                 <div
-                  className="euiFormRow euiFormRow--fullWidth"
-                  id="generated-id-row"
+                  className="euiFormRow__fieldWrapper"
                 >
-                  <div
-                    className="euiFormRow__fieldWrapper"
-                  >
-                    <input
-                      id="generated-id"
-                      onBlur={[Function]}
-                      onFocus={[Function]}
-                    />
-                  </div>
+                  <input
+                    id="generated-id"
+                    onBlur={[Function]}
+                    onFocus={[Function]}
+                  />
                 </div>
-              </EuiFormRow>
-            </div>
-          </EuiFlexItem>
-        </div>
-      </EuiFlexGroup>
-    </fieldset>
-  </EuiInnerText>
+              </div>
+            </EuiFormRow>
+          </div>
+        </EuiFlexItem>
+      </div>
+    </EuiFlexGroup>
+  </div>
 </EuiDescribedFormGroup>
 `;
 
@@ -320,100 +284,88 @@ exports[`EuiDescribedFormGroup props gutterSize is rendered 1`] = `
     </h3>
   }
 >
-  <EuiInnerText>
-    <fieldset
-      aria-label="aria-label"
-      className="euiDescribedFormGroup testClass1 testClass2"
-      data-test-subj="test subject string"
+  <div
+    aria-label="aria-label"
+    className="euiDescribedFormGroup testClass1 testClass2"
+    data-test-subj="test subject string"
+    role="group"
+  >
+    <EuiFlexGroup
+      gutterSize="s"
     >
-      <EuiScreenReaderOnly>
-        <legend
-          className="euiScreenReaderOnly"
-        >
-          Title
-        </legend>
-      </EuiScreenReaderOnly>
-      <EuiFlexGroup
-        gutterSize="s"
+      <div
+        className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
       >
-        <div
-          className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
-        >
-          <EuiFlexItem>
-            <div
-              className="euiFlexItem"
+        <EuiFlexItem>
+          <div
+            className="euiFlexItem"
+          >
+            <EuiTitle
+              className="euiDescribedFormGroup__title"
+              size="xs"
             >
-              <span>
-                <EuiTitle
-                  aria-hidden="true"
-                  className="euiDescribedFormGroup__title"
-                  size="xs"
-                >
-                  <h3
-                    aria-hidden="true"
-                    className="euiTitle euiTitle--xsmall euiDescribedFormGroup__title"
-                  >
-                    Title
-                  </h3>
-                </EuiTitle>
-              </span>
-              <EuiText
-                className="euiDescribedFormGroup__description"
-                color="subdued"
-                size="s"
+              <h3
+                className="euiTitle euiTitle--xsmall euiDescribedFormGroup__title"
               >
-                <div
-                  className="euiText euiText--small euiDescribedFormGroup__description"
+                Title
+              </h3>
+            </EuiTitle>
+            <EuiText
+              className="euiDescribedFormGroup__description"
+              color="subdued"
+              size="s"
+            >
+              <div
+                className="euiText euiText--small euiDescribedFormGroup__description"
+              >
+                <EuiTextColor
+                  color="subdued"
+                  component="div"
                 >
-                  <EuiTextColor
-                    color="subdued"
-                    component="div"
+                  <div
+                    className="euiTextColor euiTextColor--subdued"
                   >
-                    <div
-                      className="euiTextColor euiTextColor--subdued"
-                    >
-                      Test description
-                    </div>
-                  </EuiTextColor>
-                </div>
-              </EuiText>
-            </div>
-          </EuiFlexItem>
-          <EuiFlexItem
-            className="euiDescribedFormGroup__fields euiDescribedFormGroup__fieldPadding--xsmall"
+                    Test description
+                  </div>
+                </EuiTextColor>
+              </div>
+            </EuiText>
+          </div>
+        </EuiFlexItem>
+        <EuiFlexItem
+          className="euiDescribedFormGroup__fields euiDescribedFormGroup__fieldPadding--xsmall"
+        >
+          <div
+            className="euiFlexItem euiDescribedFormGroup__fields euiDescribedFormGroup__fieldPadding--xsmall"
           >
-            <div
-              className="euiFlexItem euiDescribedFormGroup__fields euiDescribedFormGroup__fieldPadding--xsmall"
+            <EuiFormRow
+              describedByIds={Array []}
+              display="row"
+              fullWidth={false}
+              hasChildLabel={true}
+              hasEmptyLabelSpace={false}
+              labelType="label"
             >
-              <EuiFormRow
-                describedByIds={Array []}
-                display="row"
-                fullWidth={false}
-                hasChildLabel={true}
-                hasEmptyLabelSpace={false}
-                labelType="label"
+              <div
+                className="euiFormRow"
+                id="generated-id-row"
               >
                 <div
-                  className="euiFormRow"
-                  id="generated-id-row"
+                  className="euiFormRow__fieldWrapper"
                 >
-                  <div
-                    className="euiFormRow__fieldWrapper"
-                  >
-                    <input
-                      id="generated-id"
-                      onBlur={[Function]}
-                      onFocus={[Function]}
-                    />
-                  </div>
+                  <input
+                    id="generated-id"
+                    onBlur={[Function]}
+                    onFocus={[Function]}
+                  />
                 </div>
-              </EuiFormRow>
-            </div>
-          </EuiFlexItem>
-        </div>
-      </EuiFlexGroup>
-    </fieldset>
-  </EuiInnerText>
+              </div>
+            </EuiFormRow>
+          </div>
+        </EuiFlexItem>
+      </div>
+    </EuiFlexGroup>
+  </div>
 </EuiDescribedFormGroup>
 `;
 
@@ -430,100 +382,88 @@ exports[`EuiDescribedFormGroup props titleSize is rendered 1`] = `
   }
   titleSize="l"
 >
-  <EuiInnerText>
-    <fieldset
-      aria-label="aria-label"
-      className="euiDescribedFormGroup testClass1 testClass2"
-      data-test-subj="test subject string"
+  <div
+    aria-label="aria-label"
+    className="euiDescribedFormGroup testClass1 testClass2"
+    data-test-subj="test subject string"
+    role="group"
+  >
+    <EuiFlexGroup
+      gutterSize="l"
     >
-      <EuiScreenReaderOnly>
-        <legend
-          className="euiScreenReaderOnly"
-        >
-          Title
-        </legend>
-      </EuiScreenReaderOnly>
-      <EuiFlexGroup
-        gutterSize="l"
+      <div
+        className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
       >
-        <div
-          className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
-        >
-          <EuiFlexItem>
-            <div
-              className="euiFlexItem"
+        <EuiFlexItem>
+          <div
+            className="euiFlexItem"
+          >
+            <EuiTitle
+              className="euiDescribedFormGroup__title"
+              size="l"
             >
-              <span>
-                <EuiTitle
-                  aria-hidden="true"
-                  className="euiDescribedFormGroup__title"
-                  size="l"
-                >
-                  <h3
-                    aria-hidden="true"
-                    className="euiTitle euiTitle--large euiDescribedFormGroup__title"
-                  >
-                    Title
-                  </h3>
-                </EuiTitle>
-              </span>
-              <EuiText
-                className="euiDescribedFormGroup__description"
-                color="subdued"
-                size="s"
+              <h3
+                className="euiTitle euiTitle--large euiDescribedFormGroup__title"
               >
-                <div
-                  className="euiText euiText--small euiDescribedFormGroup__description"
+                Title
+              </h3>
+            </EuiTitle>
+            <EuiText
+              className="euiDescribedFormGroup__description"
+              color="subdued"
+              size="s"
+            >
+              <div
+                className="euiText euiText--small euiDescribedFormGroup__description"
+              >
+                <EuiTextColor
+                  color="subdued"
+                  component="div"
                 >
-                  <EuiTextColor
-                    color="subdued"
-                    component="div"
+                  <div
+                    className="euiTextColor euiTextColor--subdued"
                   >
-                    <div
-                      className="euiTextColor euiTextColor--subdued"
-                    >
-                      Test description
-                    </div>
-                  </EuiTextColor>
-                </div>
-              </EuiText>
-            </div>
-          </EuiFlexItem>
-          <EuiFlexItem
-            className="euiDescribedFormGroup__fields euiDescribedFormGroup__fieldPadding--large"
+                    Test description
+                  </div>
+                </EuiTextColor>
+              </div>
+            </EuiText>
+          </div>
+        </EuiFlexItem>
+        <EuiFlexItem
+          className="euiDescribedFormGroup__fields euiDescribedFormGroup__fieldPadding--large"
+        >
+          <div
+            className="euiFlexItem euiDescribedFormGroup__fields euiDescribedFormGroup__fieldPadding--large"
           >
-            <div
-              className="euiFlexItem euiDescribedFormGroup__fields euiDescribedFormGroup__fieldPadding--large"
+            <EuiFormRow
+              describedByIds={Array []}
+              display="row"
+              fullWidth={false}
+              hasChildLabel={true}
+              hasEmptyLabelSpace={false}
+              labelType="label"
             >
-              <EuiFormRow
-                describedByIds={Array []}
-                display="row"
-                fullWidth={false}
-                hasChildLabel={true}
-                hasEmptyLabelSpace={false}
-                labelType="label"
+              <div
+                className="euiFormRow"
+                id="generated-id-row"
               >
                 <div
-                  className="euiFormRow"
-                  id="generated-id-row"
+                  className="euiFormRow__fieldWrapper"
                 >
-                  <div
-                    className="euiFormRow__fieldWrapper"
-                  >
-                    <input
-                      id="generated-id"
-                      onBlur={[Function]}
-                      onFocus={[Function]}
-                    />
-                  </div>
+                  <input
+                    id="generated-id"
+                    onBlur={[Function]}
+                    onFocus={[Function]}
+                  />
                 </div>
-              </EuiFormRow>
-            </div>
-          </EuiFlexItem>
-        </div>
-      </EuiFlexGroup>
-    </fieldset>
-  </EuiInnerText>
+              </div>
+            </EuiFormRow>
+          </div>
+        </EuiFlexItem>
+      </div>
+    </EuiFlexGroup>
+  </div>
 </EuiDescribedFormGroup>
 `;
 
@@ -539,166 +479,154 @@ exports[`EuiDescribedFormGroup ties together parts for accessibility 1`] = `
     </h3>
   }
 >
-  <EuiInnerText>
-    <fieldset
-      aria-label="aria-label"
-      className="euiDescribedFormGroup testClass1 testClass2"
-      data-test-subj="test subject string"
+  <div
+    aria-label="aria-label"
+    className="euiDescribedFormGroup testClass1 testClass2"
+    data-test-subj="test subject string"
+    role="group"
+  >
+    <EuiFlexGroup
+      gutterSize="l"
     >
-      <EuiScreenReaderOnly>
-        <legend
-          className="euiScreenReaderOnly"
-        >
-          Title
-        </legend>
-      </EuiScreenReaderOnly>
-      <EuiFlexGroup
-        gutterSize="l"
+      <div
+        className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
       >
-        <div
-          className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
-        >
-          <EuiFlexItem>
-            <div
-              className="euiFlexItem"
+        <EuiFlexItem>
+          <div
+            className="euiFlexItem"
+          >
+            <EuiTitle
+              className="euiDescribedFormGroup__title"
+              size="xs"
             >
-              <span>
-                <EuiTitle
-                  aria-hidden="true"
-                  className="euiDescribedFormGroup__title"
-                  size="xs"
-                >
-                  <h3
-                    aria-hidden="true"
-                    className="euiTitle euiTitle--xsmall euiDescribedFormGroup__title"
-                  >
-                    Title
-                  </h3>
-                </EuiTitle>
-              </span>
-              <EuiText
-                className="euiDescribedFormGroup__description"
-                color="subdued"
-                size="s"
+              <h3
+                className="euiTitle euiTitle--xsmall euiDescribedFormGroup__title"
               >
-                <div
-                  className="euiText euiText--small euiDescribedFormGroup__description"
+                Title
+              </h3>
+            </EuiTitle>
+            <EuiText
+              className="euiDescribedFormGroup__description"
+              color="subdued"
+              size="s"
+            >
+              <div
+                className="euiText euiText--small euiDescribedFormGroup__description"
+              >
+                <EuiTextColor
+                  color="subdued"
+                  component="div"
                 >
-                  <EuiTextColor
-                    color="subdued"
-                    component="div"
+                  <div
+                    className="euiTextColor euiTextColor--subdued"
                   >
-                    <div
-                      className="euiTextColor euiTextColor--subdued"
-                    >
-                      Test description
-                    </div>
-                  </EuiTextColor>
-                </div>
-              </EuiText>
-            </div>
-          </EuiFlexItem>
-          <EuiFlexItem
-            className="euiDescribedFormGroup__fields euiDescribedFormGroup__fieldPadding--xsmall"
+                    Test description
+                  </div>
+                </EuiTextColor>
+              </div>
+            </EuiText>
+          </div>
+        </EuiFlexItem>
+        <EuiFlexItem
+          className="euiDescribedFormGroup__fields euiDescribedFormGroup__fieldPadding--xsmall"
+        >
+          <div
+            className="euiFlexItem euiDescribedFormGroup__fields euiDescribedFormGroup__fieldPadding--xsmall"
           >
-            <div
-              className="euiFlexItem euiDescribedFormGroup__fields euiDescribedFormGroup__fieldPadding--xsmall"
+            <EuiFormRow
+              describedByIds={Array []}
+              display="row"
+              error={
+                Array [
+                  "Error one",
+                  "Error two",
+                ]
+              }
+              fullWidth={false}
+              hasChildLabel={true}
+              hasEmptyLabelSpace={false}
+              helpText="Help text"
+              isInvalid={true}
+              label="Label"
+              labelType="label"
             >
-              <EuiFormRow
-                describedByIds={Array []}
-                display="row"
-                error={
-                  Array [
-                    "Error one",
-                    "Error two",
-                  ]
-                }
-                fullWidth={false}
-                hasChildLabel={true}
-                hasEmptyLabelSpace={false}
-                helpText="Help text"
-                isInvalid={true}
-                label="Label"
-                labelType="label"
+              <div
+                className="euiFormRow"
+                id="generated-id-row"
               >
                 <div
-                  className="euiFormRow"
-                  id="generated-id-row"
+                  className="euiFormRow__labelWrapper"
                 >
-                  <div
-                    className="euiFormRow__labelWrapper"
+                  <EuiFormLabel
+                    aria-invalid={true}
+                    className="euiFormRow__label"
+                    htmlFor="generated-id"
+                    isFocused={false}
+                    isInvalid={true}
+                    type="label"
                   >
-                    <EuiFormLabel
+                    <label
                       aria-invalid={true}
-                      className="euiFormRow__label"
+                      className="euiFormLabel euiFormRow__label euiFormLabel-isInvalid"
                       htmlFor="generated-id"
-                      isFocused={false}
-                      isInvalid={true}
-                      type="label"
                     >
-                      <label
-                        aria-invalid={true}
-                        className="euiFormLabel euiFormRow__label euiFormLabel-isInvalid"
-                        htmlFor="generated-id"
-                      >
-                        Label
-                      </label>
-                    </EuiFormLabel>
-                  </div>
-                  <div
-                    className="euiFormRow__fieldWrapper"
+                      Label
+                    </label>
+                  </EuiFormLabel>
+                </div>
+                <div
+                  className="euiFormRow__fieldWrapper"
+                >
+                  <input
+                    aria-describedby="generated-id-help generated-id-error-0 generated-id-error-1"
+                    id="generated-id"
+                    onBlur={[Function]}
+                    onFocus={[Function]}
+                  />
+                  <EuiFormErrorText
+                    className="euiFormRow__text"
+                    id="generated-id-error-0"
+                    key="Error one"
                   >
-                    <input
-                      aria-describedby="generated-id-help generated-id-error-0 generated-id-error-1"
-                      id="generated-id"
-                      onBlur={[Function]}
-                      onFocus={[Function]}
-                    />
-                    <EuiFormErrorText
-                      className="euiFormRow__text"
+                    <div
+                      aria-live="polite"
+                      className="euiFormErrorText euiFormRow__text"
                       id="generated-id-error-0"
-                      key="Error one"
                     >
-                      <div
-                        aria-live="polite"
-                        className="euiFormErrorText euiFormRow__text"
-                        id="generated-id-error-0"
-                      >
-                        Error one
-                      </div>
-                    </EuiFormErrorText>
-                    <EuiFormErrorText
-                      className="euiFormRow__text"
+                      Error one
+                    </div>
+                  </EuiFormErrorText>
+                  <EuiFormErrorText
+                    className="euiFormRow__text"
+                    id="generated-id-error-1"
+                    key="Error two"
+                  >
+                    <div
+                      aria-live="polite"
+                      className="euiFormErrorText euiFormRow__text"
                       id="generated-id-error-1"
-                      key="Error two"
                     >
-                      <div
-                        aria-live="polite"
-                        className="euiFormErrorText euiFormRow__text"
-                        id="generated-id-error-1"
-                      >
-                        Error two
-                      </div>
-                    </EuiFormErrorText>
-                    <EuiFormHelpText
-                      className="euiFormRow__text"
+                      Error two
+                    </div>
+                  </EuiFormErrorText>
+                  <EuiFormHelpText
+                    className="euiFormRow__text"
+                    id="generated-id-help"
+                  >
+                    <div
+                      className="euiFormHelpText euiFormRow__text"
                       id="generated-id-help"
                     >
-                      <div
-                        className="euiFormHelpText euiFormRow__text"
-                        id="generated-id-help"
-                      >
-                        Help text
-                      </div>
-                    </EuiFormHelpText>
-                  </div>
+                      Help text
+                    </div>
+                  </EuiFormHelpText>
                 </div>
-              </EuiFormRow>
-            </div>
-          </EuiFlexItem>
-        </div>
-      </EuiFlexGroup>
-    </fieldset>
-  </EuiInnerText>
+              </div>
+            </EuiFormRow>
+          </div>
+        </EuiFlexItem>
+      </div>
+    </EuiFlexGroup>
+  </div>
 </EuiDescribedFormGroup>
 `;
diff --git a/src/components/form/described_form_group/described_form_group.tsx b/src/components/form/described_form_group/described_form_group.tsx
index ae5b8a558af..23f065d8365 100644
--- a/src/components/form/described_form_group/described_form_group.tsx
+++ b/src/components/form/described_form_group/described_form_group.tsx
@@ -8,9 +8,6 @@ import { EuiTitle, EuiTitleSize, EuiTitleProps } from '../../title';
 import { EuiText } from '../../text';
 import { EuiFlexGroup, EuiFlexItem, EuiFlexGroupGutterSize } from '../../flex';
 
-import { EuiScreenReaderOnly } from '../../accessibility';
-import { EuiInnerText } from '../../inner_text';
-
 const paddingSizeToClassNameMap = {
   xxxs: 'euiDescribedFormGroup__fieldPadding--xxxsmall',
   xxs: 'euiDescribedFormGroup__fieldPadding--xxsmall',
@@ -25,7 +22,7 @@ export const PADDING_SIZES = keysOf(paddingSizeToClassNameMap);
 export type EuiDescribedFormGroupPaddingSize = keyof typeof paddingSizeToClassNameMap;
 
 export type EuiDescribedFormGroupProps = CommonProps &
-  Omit<HTMLAttributes<HTMLFieldSetElement>, 'title'> & {
+  Omit<HTMLAttributes<HTMLDivElement>, 'title'> & {
     /**
      * One or more `EuiFormRow`s
      */
@@ -85,31 +82,18 @@ export const EuiDescribedFormGroup: React.FunctionComponent<
   }
 
   return (
-    <EuiInnerText>
-      {(ref, innerText) => (
-        <fieldset className={classes} {...rest}>
-          <EuiScreenReaderOnly>
-            <legend>{innerText}</legend>
-          </EuiScreenReaderOnly>
-
-          <EuiFlexGroup gutterSize={gutterSize}>
-            <EuiFlexItem>
-              <span ref={ref}>
-                <EuiTitle
-                  size={titleSize}
-                  aria-hidden="true"
-                  className="euiDescribedFormGroup__title">
-                  {title}
-                </EuiTitle>
-              </span>
-
-              {renderedDescription}
-            </EuiFlexItem>
-
-            <EuiFlexItem className={fieldClasses}>{children}</EuiFlexItem>
-          </EuiFlexGroup>
-        </fieldset>
-      )}
-    </EuiInnerText>
+    <div role="group" className={classes} {...rest}>
+      <EuiFlexGroup gutterSize={gutterSize}>
+        <EuiFlexItem>
+          <EuiTitle size={titleSize} className="euiDescribedFormGroup__title">
+            {title}
+          </EuiTitle>
+
+          {renderedDescription}
+        </EuiFlexItem>
+
+        <EuiFlexItem className={fieldClasses}>{children}</EuiFlexItem>
+      </EuiFlexGroup>
+    </div>
   );
 };

From 586d5c383dfff45c7d0d5e4e03a3f58996e25bf6 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Thu, 5 Mar 2020 19:49:08 +0000
Subject: [PATCH 2/3] Adding changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e4b18e24370..390bc24f98d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,7 @@
 - Added `sections` and `position` props to `EuiHeader` ([#2928](https://github.com/elastic/eui/pull/2928))
 - Added `gutterSize` prop to `EuiListGroup` ([#2980](https://github.com/elastic/eui/pull/2980))
 - Added `color` prop to `EuiListGroupItem` and updated size style ([#2980](https://github.com/elastic/eui/pull/2980))
+- Improved `EuiDescribedFormGroup` a11y by allowing the `EuiTitle` to be visible to accessibility tools ([#2989](https://github.com/elastic/eui/pull/2989))
 
 **Bug Fixes**
 

From 91891ea4f115a5bb5014542698db3b2eb728f571 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Mon, 9 Mar 2020 16:37:25 +0000
Subject: [PATCH 3/3] Moving changelog description into bug fixes

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 98c48d64037..c55059a96cb 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,7 +9,6 @@
 - Added `sections` and `position` props to `EuiHeader` ([#2928](https://github.com/elastic/eui/pull/2928))
 - Added `gutterSize` prop to `EuiListGroup` ([#2980](https://github.com/elastic/eui/pull/2980))
 - Added `color` prop to `EuiListGroupItem` and updated size style ([#2980](https://github.com/elastic/eui/pull/2980))
-- Improved `EuiDescribedFormGroup` a11y by allowing the `EuiTitle` to be visible to accessibility tools ([#2989](https://github.com/elastic/eui/pull/2989))
 
 **Bug Fixes**
 
@@ -17,6 +16,7 @@
 - Fixed `EuiButton` and other textual components' disabled contrast ([#2874](https://github.com/elastic/eui/pull/2874))
 - Fixed z-index conflict with cell popovers in `EuiDataGrid` while in full screen mode ([#2959](https://github.com/elastic/eui/pull/2959))
 - Adjusted the header on `EuiDataGrid` to fix to the top within constrained containers and full screen mode  ([#2959](https://github.com/elastic/eui/pull/2959))
+- Refactored `EuiDescribedFormGroup` to allow the content inside the `EuiTitle` to be accessible to screen reader users ([#2989](https://github.com/elastic/eui/pull/2989))
 
 **Breaking changes**