From 3e2bcd9f5e2c22fabf54cf2c6845432f6f48bf0a Mon Sep 17 00:00:00 2001
From: Alexey Antonov <alexwizp@gmail.com>
Date: Mon, 19 Aug 2024 15:47:53 +0300
Subject: [PATCH 1/3] [EuiFieldSearch] update clear button `aria-label`

---
 .../form/field_search/field_search.tsx        | 70 +++++++++++--------
 .../__snapshots__/search_bar.test.tsx.snap    |  2 +-
 .../__snapshots__/selectable.test.tsx.snap    |  2 +-
 .../selectable_search.test.tsx.snap           |  2 +-
 4 files changed, 44 insertions(+), 32 deletions(-)

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..db6cf0f40fe 100644
--- a/packages/eui/src/components/form/field_search/field_search.tsx
+++ b/packages/eui/src/components/form/field_search/field_search.tsx
@@ -8,6 +8,7 @@
 
 import React, { Component, InputHTMLAttributes, KeyboardEvent } from 'react';
 import classNames from 'classnames';
+import { EuiI18n } from '../../i18n';
 
 import { Browser } from '../../../services/browser';
 import { CommonProps } from '../../common';
@@ -256,36 +257,47 @@ export class EuiFieldSearchClass extends Component<
     ];
 
     return (
-      <EuiFormControlLayout
-        icon="search"
-        fullWidth={fullWidth}
-        isLoading={isLoading}
-        isInvalid={isInvalid}
-        isDisabled={disabled}
-        clear={
-          isClearable
-            ? { onClick: this.onClear, 'data-test-subj': 'clearSearchButton' }
-            : undefined
-        }
-        compressed={compressed}
-        append={append}
-        prepend={prepend}
+      <EuiI18n
+        token="euiFieldSearch.clearSearchButtonLabel"
+        default="Clear search input"
       >
-        <EuiValidatableControl isInvalid={isInvalid}>
-          <input
-            type="search"
-            id={id}
-            name={name}
-            placeholder={placeholder}
-            className={classes}
-            css={cssStyles}
-            onKeyUp={(e) => this.onKeyUp(e, incremental, onSearch)}
-            disabled={disabled}
-            ref={this.setRef}
-            {...rest}
-          />
-        </EuiValidatableControl>
-      </EuiFormControlLayout>
+        {(clearSearchButtonLabel: string) => (
+          <EuiFormControlLayout
+            icon="search"
+            fullWidth={fullWidth}
+            isLoading={isLoading}
+            isInvalid={isInvalid}
+            isDisabled={disabled}
+            clear={
+              isClearable
+                ? {
+                    onClick: this.onClear,
+                    'aria-label': clearSearchButtonLabel,
+                    'data-test-subj': 'clearSearchButton',
+                  }
+                : undefined
+            }
+            compressed={compressed}
+            append={append}
+            prepend={prepend}
+          >
+            <EuiValidatableControl isInvalid={isInvalid}>
+              <input
+                type="search"
+                id={id}
+                name={name}
+                placeholder={placeholder}
+                className={classes}
+                css={cssStyles}
+                onKeyUp={(e) => this.onKeyUp(e, incremental, onSearch)}
+                disabled={disabled}
+                ref={this.setRef}
+                {...rest}
+              />
+            </EuiValidatableControl>
+          </EuiFormControlLayout>
+        )}
+      </EuiI18n>
     );
   }
 }
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"
         >
           <button
-            aria-label="Clear input"
+            aria-label="Clear search input"
             class="euiFormControlLayoutClearButton emotion-euiFormControlLayoutClearButton"
             data-test-subj="clearSearchButton"
             type="button"
diff --git a/packages/eui/src/components/selectable/__snapshots__/selectable.test.tsx.snap b/packages/eui/src/components/selectable/__snapshots__/selectable.test.tsx.snap
index 8c6494496e6..47a902001ec 100644
--- a/packages/eui/src/components/selectable/__snapshots__/selectable.test.tsx.snap
+++ b/packages/eui/src/components/selectable/__snapshots__/selectable.test.tsx.snap
@@ -385,7 +385,7 @@ exports[`EuiSelectable search value supports inheriting initialSearchValue from
         class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-right"
       >
         <button
-          aria-label="Clear input"
+          aria-label="Clear search input"
           class="euiFormControlLayoutClearButton emotion-euiFormControlLayoutClearButton"
           data-test-subj="clearSearchButton"
           type="button"
diff --git a/packages/eui/src/components/selectable/selectable_search/__snapshots__/selectable_search.test.tsx.snap b/packages/eui/src/components/selectable/selectable_search/__snapshots__/selectable_search.test.tsx.snap
index d93c0477ede..fea4a1fb07f 100644
--- a/packages/eui/src/components/selectable/selectable_search/__snapshots__/selectable_search.test.tsx.snap
+++ b/packages/eui/src/components/selectable/selectable_search/__snapshots__/selectable_search.test.tsx.snap
@@ -110,7 +110,7 @@ exports[`EuiSelectableSearch renders placeholder, value, name, and other remaini
       class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-right"
     >
       <button
-        aria-label="Clear input"
+        aria-label="Clear search input"
         class="euiFormControlLayoutClearButton emotion-euiFormControlLayoutClearButton"
         data-test-subj="clearSearchButton"
         type="button"

From ac463162d6128c01126e5c2e4f5dd4f978768020 Mon Sep 17 00:00:00 2001
From: Alexey Antonov <alexwizp@gmail.com>
Date: Mon, 19 Aug 2024 16:25:35 +0300
Subject: [PATCH 2/3] changelog

---
 packages/eui/changelogs/upcoming/7970.md | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 packages/eui/changelogs/upcoming/7970.md

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

From 24f43eb911032582125629cbe5c155fbb061f9d7 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Mon, 19 Aug 2024 13:06:10 -0700
Subject: [PATCH 3/3] [nit] import order

---
 .../eui/src/components/form/field_search/field_search.tsx   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

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 db6cf0f40fe..850e2745947 100644
--- a/packages/eui/src/components/form/field_search/field_search.tsx
+++ b/packages/eui/src/components/form/field_search/field_search.tsx
@@ -8,15 +8,15 @@
 
 import React, { Component, InputHTMLAttributes, KeyboardEvent } from 'react';
 import classNames from 'classnames';
-import { EuiI18n } from '../../i18n';
 
-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,