diff --git a/CHANGELOG.md b/CHANGELOG.md index 04ca018c2f7..c55059a96cb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,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** 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`] = ` } > - -
+ - - - Title - - - -
- -
+
+ - - - - -
+ + +
+ - -
- Test description -
-
-
-
-
- - + +
+ +
+
+ +
-
-
-
- -
+
-
-
- -
- -
-
+ + + + + + + `; @@ -120,80 +108,68 @@ exports[`EuiDescribedFormGroup props description is not rendered when it's not p } > - -
+ - - - Title - - - -
- -
+
+ - - - -
- - + Title + + +
+
+ +
-
-
-
- -
+
-
-
- -
- -
-
+ + + + + + + `; @@ -210,100 +186,88 @@ exports[`EuiDescribedFormGroup props fullWidth is rendered 1`] = ` } > - -
+ - - - Title - - - -
- -
+
+ - - - - -
+ + +
+ - -
- Test description -
-
-
-
-
- - + +
+ +
+
+ +
-
-
-
- -
+
-
-
- -
- -
-
+ + + + + + + `; @@ -320,100 +284,88 @@ exports[`EuiDescribedFormGroup props gutterSize is rendered 1`] = ` } > - -
+ - - - Title - - - -
- -
+
+ - - - - -
+ + +
+ - -
- Test description -
-
-
-
-
- - + +
+ +
+
+ +
-
-
-
- -
+
-
-
- -
- -
-
+ + + + + + + `; @@ -430,100 +382,88 @@ exports[`EuiDescribedFormGroup props titleSize is rendered 1`] = ` } titleSize="l" > - -
+ - - - Title - - - -
- -
+
+ - - - - -
+ + +
+ - -
- Test description -
-
-
-
-
- - + +
+ +
+
+ +
-
-
-
- -
+
-
-
- -
- -
-
+ + + + + + + `; @@ -539,166 +479,154 @@ exports[`EuiDescribedFormGroup ties together parts for accessibility 1`] = ` } > - -
+ - - - Title - - - -
- -
+
+ - - - - -
+ + +
+ - -
- Test description -
-
-
-
-
- - + +
+ +
+
+ +
-
-
-
- - - -
-
+ +
+
+ + - - -
- Error one -
-
- + + +
-
- Error two -
- - + + +
-
- Help text -
- -
+ Help text +
+
- -
- -
- -
-
+ + + + + + + `; 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, 'title'> & { + Omit, 'title'> & { /** * One or more `EuiFormRow`s */ @@ -85,31 +82,18 @@ export const EuiDescribedFormGroup: React.FunctionComponent< } return ( - - {(ref, innerText) => ( -
- - {innerText} - - - - - - - - - {renderedDescription} - - - {children} - -
- )} -
+
+ + + + {title} + + + {renderedDescription} + + + {children} + +
); };