From 4f88a335bbe2e60589f4b0b8593e53dccca5d517 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Mon, 13 Jan 2020 23:18:09 +0000 Subject: [PATCH 01/13] WIP --- .../form_layouts/described_form_group.js | 27 ++++--------------- .../described_form_group.test.js.snap | 5 ---- .../described_form_group.js | 5 ---- 3 files changed, 5 insertions(+), 32 deletions(-) diff --git a/src-docs/src/views/form_layouts/described_form_group.js b/src-docs/src/views/form_layouts/described_form_group.js index 58c3abe07d1..38f0272b091 100644 --- a/src-docs/src/views/form_layouts/described_form_group.js +++ b/src-docs/src/views/form_layouts/described_form_group.js @@ -86,29 +86,17 @@ export default class extends Component { return ( Single text field} - description={ - - 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{' '} - idAria="someID" to the form group and - pass - describedByIds={[someID]} to its form - row. - - }> - - + description={A single text field to describe}> + + No description}> - + @@ -119,12 +107,7 @@ export default class extends Component { description="Here are three form rows. The first form row does not have a title."> - We do not pass describedByIds when there are - multiple form rows. - - }> + helpText={This is a help text}>
); - - // If user has defined an aria ID, assume they have passed the ID to - // the form row describedByIds and skip describedby here. - ariaProps['aria-describedby'] = userAriaId ? null : ariaId; } return ( @@ -109,7 +105,6 @@ EuiDescribedFormGroup.propTypes = { titleSize: PropTypes.oneOf(TITLE_SIZES), title: PropTypes.node.isRequired, description: PropTypes.node, - idAria: PropTypes.string, }; EuiDescribedFormGroup.defaultProps = { From 5e113bf352cbd156da11031463c199e1a3ec69fc Mon Sep 17 00:00:00 2001 From: miukimiu Date: Tue, 21 Jan 2020 16:28:05 +0000 Subject: [PATCH 02/13] Improving texts --- .../form_layouts/described_form_group.js | 20 ++++++++++++++----- .../form_layouts/form_layouts_example.js | 7 +++---- .../described_form_group.js | 3 +++ 3 files changed, 21 insertions(+), 9 deletions(-) diff --git a/src-docs/src/views/form_layouts/described_form_group.js b/src-docs/src/views/form_layouts/described_form_group.js index 38f0272b091..253a442f08d 100644 --- 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'; @@ -87,15 +88,24 @@ export default class extends Component { Single text field} - description={A single text field to describe}> - + description={ + + A single text field that can be used to display additional text. + It can have{' '} + + links + {' '} + or any other type of content. + + }> + This is a help text}> - No description}> + No description}> diff --git a/src-docs/src/views/form_layouts/form_layouts_example.js b/src-docs/src/views/form_layouts/form_layouts_example.js index 75570fda683..fb8ac4e6fab 100644 --- a/src-docs/src/views/form_layouts/form_layouts_example.js +++ b/src-docs/src/views/form_layouts/form_layouts_example.js @@ -118,10 +118,9 @@ export const FormLayoutsExample = { text: (

Use EuiDescribedFormGroup component to associate - multiple EuiFormRows. It can also simply be used - with one EuiFormRow as a way to display help text - (or additional text) next to the field instead of below (on mobile, - will revert to being stacked). + multiple EuiFormRows.Or it can also simply be used + with one EuiFormRow as a way to display additional + text next to the field (on mobile, will revert to being stacked).

), props: { diff --git a/src/components/form/described_form_group/described_form_group.js b/src/components/form/described_form_group/described_form_group.js index 269f754e24f..bed27231ce9 100644 --- a/src/components/form/described_form_group/described_form_group.js +++ b/src/components/form/described_form_group/described_form_group.js @@ -103,6 +103,9 @@ EuiDescribedFormGroup.propTypes = { gutterSize: PropTypes.oneOf(GUTTER_SIZES), fullWidth: PropTypes.bool, titleSize: PropTypes.oneOf(TITLE_SIZES), + /** + * For better accessibiity it's recommended the use of HTML headings + */ title: PropTypes.node.isRequired, description: PropTypes.node, }; From 410c204e9728eb6f00bb7558916d526058b5673e Mon Sep 17 00:00:00 2001 From: miukimiu Date: Tue, 21 Jan 2020 20:27:09 +0000 Subject: [PATCH 03/13] Tests --- .../form_layouts/described_form_group.js | 4 +--- .../form_layouts/form_layouts_example.js | 2 +- .../described_form_group.test.js.snap | 23 +++++-------------- .../described_form_group.js | 9 ++------ .../described_form_group.test.js | 10 +------- 5 files changed, 11 insertions(+), 37 deletions(-) diff --git a/src-docs/src/views/form_layouts/described_form_group.js b/src-docs/src/views/form_layouts/described_form_group.js index 253a442f08d..15847213ab3 100644 --- a/src-docs/src/views/form_layouts/described_form_group.js +++ b/src-docs/src/views/form_layouts/described_form_group.js @@ -98,9 +98,7 @@ export default class extends Component { or any other type of content. }> - This is a help text}> + diff --git a/src-docs/src/views/form_layouts/form_layouts_example.js b/src-docs/src/views/form_layouts/form_layouts_example.js index fb8ac4e6fab..a8018fec4d1 100644 --- a/src-docs/src/views/form_layouts/form_layouts_example.js +++ b/src-docs/src/views/form_layouts/form_layouts_example.js @@ -118,7 +118,7 @@ export const FormLayoutsExample = { text: (

Use EuiDescribedFormGroup component to associate - multiple EuiFormRows.Or it can also simply be used + multiple EuiFormRows. Or it can also simply be used with one EuiFormRow as a way to display additional text next to the field (on mobile, will revert to being stacked).

diff --git a/src/components/form/described_form_group/__snapshots__/described_form_group.test.js.snap b/src/components/form/described_form_group/__snapshots__/described_form_group.test.js.snap index a3a4c8900c2..836277363fa 100644 --- a/src/components/form/described_form_group/__snapshots__/described_form_group.test.js.snap +++ b/src/components/form/described_form_group/__snapshots__/described_form_group.test.js.snap @@ -3,7 +3,6 @@ exports[`EuiDescribedFormGroup is rendered 1`] = `
Title @@ -250,7 +244,6 @@ exports[`EuiDescribedFormGroup ties together parts for accessibility 1`] = ` >

Title

@@ -280,12 +273,12 @@ exports[`EuiDescribedFormGroup ties together parts for accessibility 1`] = `
+
{ }); test('ties together parts for accessibility', () => { - const describedFormGroupProps = { - idAria: 'test-id', - }; - const formRowProps = { label: 'Label', helpText: 'Help text', isInvalid: true, error: ['Error one', 'Error two'], - describedByIds: ['test-id'], }; const tree = mount( - + From a683591c461b8baf579ced12d8ff901461f914c3 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Wed, 22 Jan 2020 12:51:28 +0000 Subject: [PATCH 04/13] Changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 84f29b7b639..e9954c9d24e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,7 @@ - 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` accessiblity ([#2783](https://github.com/elastic/eui/pull/2783)) **Bug fixes** From 813d542f048d4189cfd0d7ab0aba7aab72c9779a Mon Sep 17 00:00:00 2001 From: miukimiu Date: Wed, 22 Jan 2020 13:08:29 +0000 Subject: [PATCH 05/13] Improve description --- src-docs/src/views/form_layouts/form_layouts_example.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src-docs/src/views/form_layouts/form_layouts_example.js b/src-docs/src/views/form_layouts/form_layouts_example.js index a8018fec4d1..1c2f10c2516 100644 --- a/src-docs/src/views/form_layouts/form_layouts_example.js +++ b/src-docs/src/views/form_layouts/form_layouts_example.js @@ -118,7 +118,7 @@ export const FormLayoutsExample = { text: (

Use EuiDescribedFormGroup component to associate - multiple EuiFormRows. Or it can also simply be used + multiple EuiFormRows. It can also simply be used with one EuiFormRow as a way to display additional text next to the field (on mobile, will revert to being stacked).

From d83c820b5068e4b566994f03c359935f642f4207 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Thu, 23 Jan 2020 12:45:28 +0000 Subject: [PATCH 06/13] Update src-docs/src/views/form_layouts/form_layouts_example.js Co-Authored-By: Andrea Del Rio --- src-docs/src/views/form_layouts/form_layouts_example.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src-docs/src/views/form_layouts/form_layouts_example.js b/src-docs/src/views/form_layouts/form_layouts_example.js index 1c2f10c2516..54a0b912b94 100644 --- a/src-docs/src/views/form_layouts/form_layouts_example.js +++ b/src-docs/src/views/form_layouts/form_layouts_example.js @@ -120,7 +120,7 @@ export const FormLayoutsExample = { Use EuiDescribedFormGroup component to associate multiple EuiFormRows. It can also simply be used with one EuiFormRow as a way to display additional - text next to the field (on mobile, will revert to being stacked). + text next to the field (on mobile, it will revert to being stacked).

), props: { From 030747d68b568eeab00cbaa44646c7567666ffef Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Thu, 23 Jan 2020 12:47:28 +0000 Subject: [PATCH 07/13] Update CHANGELOG.md Co-Authored-By: Andrea Del Rio --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9265439e502..2e6a5d184f3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,7 +6,7 @@ - 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` accessiblity ([#2783](https://github.com/elastic/eui/pull/2783)) +- 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** From 47815325ddc56b05989aa572573daee90fb89154 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Thu, 23 Jan 2020 13:53:10 +0000 Subject: [PATCH 08/13] Minor fix --- src-docs/src/views/form_layouts/described_form_group.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src-docs/src/views/form_layouts/described_form_group.js b/src-docs/src/views/form_layouts/described_form_group.js index 15847213ab3..aa77d9b9dee 100644 --- a/src-docs/src/views/form_layouts/described_form_group.js +++ b/src-docs/src/views/form_layouts/described_form_group.js @@ -110,8 +110,7 @@ export default class extends Component { Multiple fields} - titleSize="m" + title={

Multiple fields

} description="Here are three form rows. The first form row does not have a title."> Date: Tue, 28 Jan 2020 19:03:28 +0000 Subject: [PATCH 09/13] Adding fieldset and legend --- .../form_layouts/described_form_group.js | 7 +- .../described_form_group.test.js.snap | 93 ++++++++++++------- .../described_form_group.js | 38 +++++--- .../described_form_group.test.js | 19 ++++ 4 files changed, 110 insertions(+), 47 deletions(-) diff --git a/src-docs/src/views/form_layouts/described_form_group.js b/src-docs/src/views/form_layouts/described_form_group.js index aa77d9b9dee..c33087073a9 100644 --- a/src-docs/src/views/form_layouts/described_form_group.js +++ b/src-docs/src/views/form_layouts/described_form_group.js @@ -88,6 +88,7 @@ export default class extends Component { Single text field} + legend="Single text field" description={ A single text field that can be used to display additional text. @@ -103,7 +104,9 @@ export default class extends Component { - No description}> + No description} + legend="No description"> @@ -111,6 +114,7 @@ export default class extends Component { Multiple fields} + legend="Multiple fields" description="Here are three form rows. The first form row does not have a title."> Full width} + legend="Full width" titleSize="xxxs" description={ diff --git a/src/components/form/described_form_group/__snapshots__/described_form_group.test.js.snap b/src/components/form/described_form_group/__snapshots__/described_form_group.test.js.snap index 836277363fa..143dfdc499b 100644 --- a/src/components/form/described_form_group/__snapshots__/described_form_group.test.js.snap +++ b/src/components/form/described_form_group/__snapshots__/described_form_group.test.js.snap @@ -1,11 +1,10 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`EuiDescribedFormGroup is rendered 1`] = ` -

@@ -23,7 +21,6 @@ exports[`EuiDescribedFormGroup is rendered 1`] = ` Test description @@ -44,15 +41,14 @@ exports[`EuiDescribedFormGroup is rendered 1`] = ` -

+ `; exports[`EuiDescribedFormGroup props description is not rendered when it's not provided 1`] = ` -

@@ -83,15 +78,14 @@ exports[`EuiDescribedFormGroup props description is not rendered when it's not p -

+ `; exports[`EuiDescribedFormGroup props fullWidth is rendered 1`] = ` -

@@ -109,7 +102,6 @@ exports[`EuiDescribedFormGroup props fullWidth is rendered 1`] = ` Test description @@ -130,15 +122,14 @@ exports[`EuiDescribedFormGroup props fullWidth is rendered 1`] = ` -

+ `; exports[`EuiDescribedFormGroup props gutterSize is rendered 1`] = ` -

@@ -156,7 +146,6 @@ exports[`EuiDescribedFormGroup props gutterSize is rendered 1`] = ` Test description @@ -177,15 +166,64 @@ exports[`EuiDescribedFormGroup props gutterSize is rendered 1`] = ` -

+ +`; + +exports[`EuiDescribedFormGroup props legend is rendered 1`] = ` +
+ + + Legend for screen readers + + + + + + + Test description + + + + + + + + +
`; exports[`EuiDescribedFormGroup props titleSize is rendered 1`] = ` -

@@ -203,7 +240,6 @@ exports[`EuiDescribedFormGroup props titleSize is rendered 1`] = ` Test description @@ -224,7 +260,7 @@ exports[`EuiDescribedFormGroup props titleSize is rendered 1`] = ` -

+ `; exports[`EuiDescribedFormGroup ties together parts for accessibility 1`] = ` @@ -242,11 +278,10 @@ exports[`EuiDescribedFormGroup ties together parts for accessibility 1`] = ` } titleSize="xs" > -

Title

@@ -273,12 +306,10 @@ exports[`EuiDescribedFormGroup ties together parts for accessibility 1`] = `
-
+ `; diff --git a/src/components/form/described_form_group/described_form_group.js b/src/components/form/described_form_group/described_form_group.js index 49ee6706091..2d4d3b4121d 100644 --- a/src/components/form/described_form_group/described_form_group.js +++ b/src/components/form/described_form_group/described_form_group.js @@ -1,4 +1,4 @@ -import React, { Component } from 'react'; +import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; @@ -7,7 +7,7 @@ import { EuiText } from '../../text/text'; import { EuiFlexGroup, EuiFlexItem } from '../../flex'; import { GUTTER_SIZES } from '../../flex/flex_group'; -import makeId from '../form_row/make_id'; +import { EuiScreenReaderOnly } from '../../accessibility'; const paddingSizeToClassNameMap = { xxxs: 'euiDescribedFormGroup__fieldPadding--xxxsmall', @@ -18,12 +18,7 @@ const paddingSizeToClassNameMap = { l: 'euiDescribedFormGroup__fieldPadding--large', }; -export class EuiDescribedFormGroup extends Component { - constructor(props) { - super(props); - this.ariaId = makeId(); - } - +export class EuiDescribedFormGroup extends PureComponent { render() { const { children, @@ -33,11 +28,10 @@ export class EuiDescribedFormGroup extends Component { titleSize, title, description, + legend, ...rest } = this.props; - const ariaId = this.ariaId; - const classes = classNames( 'euiDescribedFormGroup', { @@ -56,7 +50,6 @@ export class EuiDescribedFormGroup extends Component { if (description) { renderedDescription = ( @@ -65,13 +58,24 @@ export class EuiDescribedFormGroup extends Component { ); } + let legendNode; + if (legend) { + legendNode = ( + + {legend} + + ); + } + return ( -
+
+ {legendNode} + {title} @@ -81,7 +85,7 @@ export class EuiDescribedFormGroup extends Component { {children} -
+ ); } } @@ -99,9 +103,13 @@ EuiDescribedFormGroup.propTypes = { fullWidth: PropTypes.bool, titleSize: PropTypes.oneOf(TITLE_SIZES), /** - * For better accessibiity it's recommended the use of HTML headings + * It's recommended the use of HTML headings */ title: PropTypes.node.isRequired, + /** + * For better accessibility, it's recommended a legend that will act as the group title and it will only be read by screen readers + */ + legend: PropTypes.string, description: PropTypes.node, }; diff --git a/src/components/form/described_form_group/described_form_group.test.js b/src/components/form/described_form_group/described_form_group.test.js index 6bb3911c5ec..6051be5a593 100644 --- a/src/components/form/described_form_group/described_form_group.test.js +++ b/src/components/form/described_form_group/described_form_group.test.js @@ -113,5 +113,24 @@ describe('EuiDescribedFormGroup', () => { expect(component).toMatchSnapshot(); }); + + test('legend is rendered', () => { + const describedFormGroupProps = { + legend: 'Legend for screen readers', + }; + + const component = shallow( + + + + + + ); + + expect(component).toMatchSnapshot(); + }); }); }); From e82745f10e8108e421e2c45570148ffbb9445069 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Tue, 28 Jan 2020 19:21:17 +0000 Subject: [PATCH 10/13] Adding accessibility warning --- .../form_layouts/form_layouts_example.js | 28 +++++++++++++++---- 1 file changed, 22 insertions(+), 6 deletions(-) diff --git a/src-docs/src/views/form_layouts/form_layouts_example.js b/src-docs/src/views/form_layouts/form_layouts_example.js index 54a0b912b94..0d1e7367a71 100644 --- a/src-docs/src/views/form_layouts/form_layouts_example.js +++ b/src-docs/src/views/form_layouts/form_layouts_example.js @@ -9,6 +9,7 @@ import { EuiForm, EuiFormRow, EuiDescribedFormGroup, + EuiCallOut, } from '../../../../src/components'; import FormRows from './form_rows'; @@ -116,12 +117,27 @@ export const FormLayoutsExample = { }, ], text: ( -

- Use EuiDescribedFormGroup component to associate - multiple EuiFormRows. It can also simply be used - with one EuiFormRow as a way to display additional - text next to the field (on mobile, it will revert to being stacked). -

+
+

+ Use EuiDescribedFormGroup component to associate + multiple EuiFormRows. It can also simply be used + with one EuiFormRow as a way to display + additional text next to the field (on mobile, it will revert to + being stacked). +

+ + In order for a described form group to be properly read as a + group with a title, add the legend prop. This + is only for accessibility, however, so it will be visibly + hidden. + + } + /> +
), props: { EuiDescribedFormGroup, From 362d5da7e041541cd606e4c34ff62d26bf0936c4 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Wed, 29 Jan 2020 12:41:39 +0000 Subject: [PATCH 11/13] Using title in legend --- CHANGELOG.md | 5 ++ .../form_layouts/described_form_group.js | 13 +-- .../form_layouts/form_layouts_example.js | 28 ++---- .../described_form_group.test.js.snap | 87 ++++++++----------- .../described_form_group.js | 27 ++---- .../described_form_group.test.js | 23 +---- 6 files changed, 59 insertions(+), 124 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2e6a5d184f3..fe47f3f2d4d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,6 +13,11 @@ - 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)) +- Changed `title` prop of `EuiDescribedFormGroup` to accept a `string` instead of `node` ([#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 index c33087073a9..090e792f47e 100644 --- a/src-docs/src/views/form_layouts/described_form_group.js +++ b/src-docs/src/views/form_layouts/described_form_group.js @@ -87,8 +87,7 @@ export default class extends Component { return ( Single text field} - legend="Single text field" + title="Single text field" description={ A single text field that can be used to display additional text. @@ -104,17 +103,14 @@ export default class extends Component { - No description} - legend="No description"> + Multiple fields} - legend="Multiple fields" + title="Multiple fields" description="Here are three form rows. The first form row does not have a title."> Full width} - legend="Full width" + title="Full width" titleSize="xxxs" description={ diff --git a/src-docs/src/views/form_layouts/form_layouts_example.js b/src-docs/src/views/form_layouts/form_layouts_example.js index 0d1e7367a71..54a0b912b94 100644 --- a/src-docs/src/views/form_layouts/form_layouts_example.js +++ b/src-docs/src/views/form_layouts/form_layouts_example.js @@ -9,7 +9,6 @@ import { EuiForm, EuiFormRow, EuiDescribedFormGroup, - EuiCallOut, } from '../../../../src/components'; import FormRows from './form_rows'; @@ -117,27 +116,12 @@ export const FormLayoutsExample = { }, ], text: ( -
-

- Use EuiDescribedFormGroup component to associate - multiple EuiFormRows. It can also simply be used - with one EuiFormRow as a way to display - additional text next to the field (on mobile, it will revert to - being stacked). -

- - In order for a described form group to be properly read as a - group with a title, add the legend prop. This - is only for accessibility, however, so it will be visibly - hidden. - - } - /> -
+

+ Use EuiDescribedFormGroup component to associate + multiple EuiFormRows. It can also simply be used + with one EuiFormRow as a way to display additional + text next to the field (on mobile, it will revert to being stacked). +

), props: { EuiDescribedFormGroup, diff --git a/src/components/form/described_form_group/__snapshots__/described_form_group.test.js.snap b/src/components/form/described_form_group/__snapshots__/described_form_group.test.js.snap index 143dfdc499b..32a36071ade 100644 --- a/src/components/form/described_form_group/__snapshots__/described_form_group.test.js.snap +++ b/src/components/form/described_form_group/__snapshots__/described_form_group.test.js.snap @@ -6,11 +6,17 @@ exports[`EuiDescribedFormGroup is rendered 1`] = ` className="euiDescribedFormGroup testClass1 testClass2" data-test-subj="test subject string" > + + + Title + +
-
- -
- -
- - + + + + + + + `; diff --git a/src/components/form/described_form_group/described_form_group.js b/src/components/form/described_form_group/described_form_group.js index e4275f0ebc4..3f9d2df5836 100644 --- a/src/components/form/described_form_group/described_form_group.js +++ b/src/components/form/described_form_group/described_form_group.js @@ -8,6 +8,7 @@ import { EuiFlexGroup, EuiFlexItem } from '../../flex'; import { GUTTER_SIZES } from '../../flex/flex_group'; import { EuiScreenReaderOnly } from '../../accessibility'; +import { EuiInnerText } from '../../inner_text'; const paddingSizeToClassNameMap = { xxxs: 'euiDescribedFormGroup__fieldPadding--xxxsmall', @@ -58,26 +59,32 @@ export class EuiDescribedFormGroup extends PureComponent { } return ( -
- - {title} - + + {(ref, innerText) => ( +
+ + {innerText} + - - - + + + + + - {renderedDescription} - + {renderedDescription} + - {children} - -
+ {children} + +
+ )} + ); } } @@ -94,7 +101,10 @@ EuiDescribedFormGroup.propTypes = { gutterSize: PropTypes.oneOf(GUTTER_SIZES), fullWidth: PropTypes.bool, titleSize: PropTypes.oneOf(TITLE_SIZES), - title: PropTypes.string.isRequired, + /** + * For better accessibility, it's recommended the use of HTML headings + */ + title: PropTypes.node.isRequired, description: PropTypes.node, }; diff --git a/src/components/form/described_form_group/described_form_group.test.js b/src/components/form/described_form_group/described_form_group.test.js index db892f41f26..f0e838916b1 100644 --- a/src/components/form/described_form_group/described_form_group.test.js +++ b/src/components/form/described_form_group/described_form_group.test.js @@ -1,5 +1,5 @@ import React from 'react'; -import { shallow, mount } from 'enzyme'; +import { mount } from 'enzyme'; import { requiredProps } from '../../../test'; import { EuiFormRow } from '../form_row'; @@ -9,12 +9,12 @@ jest.mock('../form_row/make_id', () => () => 'generated-id'); describe('EuiDescribedFormGroup', () => { const props = { - title: 'Title', + title:

Title

, description: 'Test description', }; test('is rendered', () => { - const component = shallow( + const component = mount( @@ -50,7 +50,7 @@ describe('EuiDescribedFormGroup', () => { fullWidth: true, }; - const component = shallow( + const component = mount( { gutterSize: 's', }; - const component = shallow( + const component = mount( { titleSize: 'l', }; - const component = shallow( + const component = mount( { }); test("description is not rendered when it's not provided", () => { - const component = shallow( - + const component = mount( + Title}>