Described form group a11y

CHANGELOG.md

@@ -6,12 +6,17 @@
 - Converted `EuiFilterButton` to TypeScript ([#2761](https://github.com/elastic/eui/pull/2761))
 - Converted `EuiFilterSelectItem` to TypeScript ([#2761](https://github.com/elastic/eui/pull/2761))
 - Converted `EuiFieldSearch` to TypeScript ([#2775](https://github.com/elastic/eui/pull/2775))
+- Improved `EuiDescribedFormGroup` accessibility by avoiding duplicated output in screen readers ([#2783](https://github.com/elastic/eui/pull/2783))
 - Added `data-test-subj` to the `EuiContextMenuItem` in `EuiTablePagination` ([#2778](https://github.com/elastic/eui/pull/2778))
 
 **Bug fixes**
 
 - Increased column width on `EuiTableHeaderCellCheckbox` to prevent `EuiCheckbox`'s focus ring from getting clipped in `EuiBasicTable` ([#2770](https://github.com/elastic/eui/pull/2770))
 
+**Breaking changes**
+
+- Removed `idAria` prop from `EuiDescribedFormGroup` ([#2783](https://github.com/elastic/eui/pull/2783))
+
 **Deprecations**
 
 - `EuiIcon`'s `logoEnterpriseSearch` type deprecated in favor of `logoWorkplaceSearch`

src-docs/src/views/form_layouts/described_form_group.js

@@ -10,6 +10,7 @@ import {
   EuiRange,
   EuiSelect,
   EuiSwitch,
+  EuiLink,
 } from '../../../../src/components';
 
 import makeId from '../../../../src/components/form/form_row/make_id';
@@ -86,45 +87,34 @@ export default class extends Component {
     return (
       <EuiForm>
         <EuiDescribedFormGroup
-          idAria="single-example-aria"
           title={<h3>Single text field</h3>}
           description={
             <Fragment>
-              When using this with a single form row where this text serves as
-              the help text for the input, it is a good idea to pass{' '}
-              <EuiCode>idAria=&quot;someID&quot;</EuiCode> to the form group and
-              pass
-              <EuiCode>describedByIds=&#123;[someID]&#125;</EuiCode> to its form
-              row.
+              A single text field that can be used to display additional text.
+              It can have{' '}
+              <EuiLink href="http://www.elastic.co" target="_blank">
+                links
+              </EuiLink>{' '}
+              or any other type of content.
             </Fragment>
           }>
-          <EuiFormRow
-            label="Text field"
-            describedByIds={['single-example-aria']}>
-            <EuiFieldText name="first" />
+          <EuiFormRow label="Text field">
+            <EuiFieldText name="first" aria-label="Example" />
           </EuiFormRow>
         </EuiDescribedFormGroup>
 
-        <EuiDescribedFormGroup
-          idAria="no-description"
-          title={<h3>No description</h3>}>
-          <EuiFormRow label="Text field" describedByIds={['no-description']}>
+        <EuiDescribedFormGroup title={<h3>No description</h3>}>
+          <EuiFormRow label="Text field">
             <EuiFieldText name="first" />
           </EuiFormRow>
         </EuiDescribedFormGroup>
 
         <EuiDescribedFormGroup
-          title={<strong>Multiple fields</strong>}
-          titleSize="m"
+          title={<h3>Multiple fields</h3>}
           description="Here are three form rows. The first form row does not have a title.">
           <EuiFormRow
             hasEmptyLabelSpace
-            helpText={
-              <span>
-                We do not pass <EuiCode>describedByIds</EuiCode> when there are
-                multiple form rows.
-              </span>
-            }>
+            helpText={<span>This is a help text</span>}>
             <EuiSelect
               hasNoInitialSelection
               options={[

src-docs/src/views/form_layouts/form_layouts_example.js

@@ -119,17 +119,15 @@ export const FormLayoutsExample = {
         <p>
           Use <EuiCode>EuiDescribedFormGroup</EuiCode> component to associate
           multiple <EuiCode>EuiFormRow</EuiCode>s. It can also simply be used
-          with one <EuiCode>EuiFormRow</EuiCode> as a way to display help text
-          (or additional text) next to the field instead of below (on mobile,
-          will revert to being stacked).
+          with one <EuiCode>EuiFormRow</EuiCode> as a way to display additional
+          text next to the field (on mobile, it will revert to being stacked).
         </p>
       ),
       props: {
         EuiDescribedFormGroup,
       },
       demo: <DescribedFormGroup />,
       snippet: `<EuiDescribedFormGroup
-  idAria="id"
   title={<h3>Set heading level based on context</h3>}
   description={
     <Fragment>
@@ -139,7 +137,6 @@ export const FormLayoutsExample = {
 >
   <EuiFormRow
     label="Text field"
-    describedByIds={['id']}
   >
     <EuiFieldText />
   </EuiFormRow>