Described form group a11y (#2783)

* WIP * Improving texts * Tests * Changelog * Improve description * Update src-docs/src/views/form_layouts/form_layouts_example.js Co-Authored-By: Andrea Del Rio <delrio.andre@gmail.com> * Update CHANGELOG.md Co-Authored-By: Andrea Del Rio <delrio.andre@gmail.com> * Minor fix * Adding fieldset and legend * Adding accessibility warning * Using title in legend * Changelog * Putting title as node back and using EuiInnerText Co-authored-by: Andrea Del Rio <delrio.andre@gmail.com>
elastic · Jan 29, 2020 · 5a8a1c7 · 5a8a1c7
1 parent d8eb4df
commit 5a8a1c7
Show file tree

Hide file tree

Showing 6 changed files with 708 additions and 412 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,6 +11,7 @@ No public interface changes since `18.3.0`.
 - 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))
 - Improved `EuiIcon` a11y by using a `title` and `aria-labelledby` ([#2786](https://github.com/elastic/eui/pull/2786))
 - Improved compressed `EuiPagination` by including active and last page numbers ([#2779](https://github.com/elastic/eui/pull/2779))
@@ -39,6 +40,10 @@ No public interface changes since `18.3.0`.
 
 - Fixed `useRenderToText` and `EuiButtonToggle` from attempting state updates on unmounted components ([#2797](https://github.com/elastic/eui/pull/2797))
 
+**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`

diff --git a/src-docs/src/views/form_layouts/described_form_group.js b/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={[

diff --git a/src-docs/src/views/form_layouts/form_layouts_example.js b/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>