[EuiFieldSearch] update clear button aria-label (#7970)

Co-authored-by: Cee Chen <[email protected]>
elastic · Aug 19, 2024 · da774cf · da774cf
1 parent 9fcaaa0
commit da774cf
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 34 deletions.
diff --git a/packages/eui/changelogs/upcoming/7970.md 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
@@ -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 (
-      <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
@@ -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
@@ -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/...src/components/selectable/selectable_search/__snapshots__/selectable_search.test.tsx.snap b/...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"
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		Accessibility

		- Updated the `aria-label` attribute for the `EuiFieldSearch` clear button