diff --git a/packages/eui/changelogs/upcoming/7970.md b/packages/eui/changelogs/upcoming/7970.md new file mode 100644 index 00000000000..9ac2adfbed5 --- /dev/null +++ b/packages/eui/changelogs/upcoming/7970.md @@ -0,0 +1,3 @@ +**Accessibility** + +- Updated the `aria-label` attribute for the `EuiFieldSearch` clear button diff --git a/packages/eui/src/components/form/field_search/field_search.tsx b/packages/eui/src/components/form/field_search/field_search.tsx index 33bcc8e3348..850e2745947 100644 --- a/packages/eui/src/components/form/field_search/field_search.tsx +++ b/packages/eui/src/components/form/field_search/field_search.tsx @@ -9,13 +9,14 @@ import React, { Component, InputHTMLAttributes, KeyboardEvent } from 'react'; import classNames from 'classnames'; -import { Browser } from '../../../services/browser'; -import { CommonProps } from '../../common'; import { keys, withEuiStylesMemoizer, WithEuiStylesMemoizerProps, } from '../../../services'; +import { Browser } from '../../../services/browser'; +import { CommonProps } from '../../common'; +import { EuiI18n } from '../../i18n'; import { EuiFormControlLayout, @@ -256,36 +257,47 @@ export class EuiFieldSearchClass extends Component< ]; return ( - - - this.onKeyUp(e, incremental, onSearch)} - disabled={disabled} - ref={this.setRef} - {...rest} - /> - - + {(clearSearchButtonLabel: string) => ( + + + this.onKeyUp(e, incremental, onSearch)} + disabled={disabled} + ref={this.setRef} + {...rest} + /> + + + )} + ); } } diff --git a/packages/eui/src/components/search_bar/__snapshots__/search_bar.test.tsx.snap b/packages/eui/src/components/search_bar/__snapshots__/search_bar.test.tsx.snap index 2799498afc5..08c3a91eca2 100644 --- a/packages/eui/src/components/search_bar/__snapshots__/search_bar.test.tsx.snap +++ b/packages/eui/src/components/search_bar/__snapshots__/search_bar.test.tsx.snap @@ -119,7 +119,7 @@ exports[`SearchBar render - provided query, filters 1`] = ` class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-right" >