diff --git a/ui/components/component-library/text-field-search/text-field-search.js b/ui/components/component-library/text-field-search/text-field-search.js
index 72bbb6517..1bcc79687 100644
--- a/ui/components/component-library/text-field-search/text-field-search.js
+++ b/ui/components/component-library/text-field-search/text-field-search.js
@@ -4,6 +4,7 @@ import classnames from 'classnames';
 
 import { ButtonIcon, ButtonIconSize, Icon, IconName, IconSize } from '..';
 import { TextField, TEXT_FIELD_TYPES } from '../text-field';
+import { useI18nContext } from '../../../hooks/useI18nContext';
 
 export const TextFieldSearch = ({
   className,
@@ -15,37 +16,40 @@ export const TextFieldSearch = ({
   value,
   onChange,
   ...props
-}) => (
-  <TextField
-    className={classnames('mm-text-field-search', className)}
-    value={value}
-    onChange={onChange}
-    type={TEXT_FIELD_TYPES.SEARCH}
-    endAccessory={
-      value && showClearButton ? (
-        <>
-          <ButtonIcon
-            className="mm-text-field__button-clear"
-            ariaLabel="Clear" // TODO: i18n
-            iconName={IconName.Close}
-            size={ButtonIconSize.SM}
-            onClick={clearButtonOnClick}
-            {...clearButtonProps}
-          />
-          {endAccessory}
-        </>
-      ) : (
-        endAccessory
-      )
-    }
-    startAccessory={<Icon name={IconName.Search} size={IconSize.Sm} />}
-    inputProps={{
-      marginRight: showClearButton ? 6 : 0,
-      ...inputProps,
-    }}
-    {...props}
-  />
-);
+}) => {
+  const t = useI18nContext();
+  return (
+    <TextField
+      className={classnames('mm-text-field-search', className)}
+      value={value}
+      onChange={onChange}
+      type={TEXT_FIELD_TYPES.SEARCH}
+      endAccessory={
+        value && showClearButton ? (
+          <>
+            <ButtonIcon
+              className="mm-text-field__button-clear"
+              ariaLabel={t('clear')}
+              iconName={IconName.Close}
+              size={ButtonIconSize.Sm}
+              onClick={clearButtonOnClick}
+              {...clearButtonProps}
+            />
+            {endAccessory}
+          </>
+        ) : (
+          endAccessory
+        )
+      }
+      startAccessory={<Icon name={IconName.Search} size={IconSize.Sm} />}
+      inputProps={{
+        marginRight: showClearButton ? 6 : 0,
+        ...inputProps,
+      }}
+      {...props}
+    />
+  );
+};
 
 TextFieldSearch.propTypes = {
   /**
diff --git a/ui/components/component-library/text-field-search/text-field-search.scss b/ui/components/component-library/text-field-search/text-field-search.scss
index 78d53ba4f..64e2cb022 100644
--- a/ui/components/component-library/text-field-search/text-field-search.scss
+++ b/ui/components/component-library/text-field-search/text-field-search.scss
@@ -1,5 +1,9 @@
 .mm-text-field-search {
-  ::-webkit-search-cancel-button {
-    display: none; // hides the default search cancel button
+  // hides the native search icon and clear button
+  ::-webkit-search-decoration,
+  ::-webkit-search-cancel-button,
+  ::-webkit-search-results-button,
+  ::-webkit-search-results-decoration {
+    display: none;
   }
 }
diff --git a/ui/components/component-library/text-field-search/text-field-search.test.js b/ui/components/component-library/text-field-search/text-field-search.test.js
index 53bec48e3..73b756e90 100644
--- a/ui/components/component-library/text-field-search/text-field-search.test.js
+++ b/ui/components/component-library/text-field-search/text-field-search.test.js
@@ -29,7 +29,7 @@ describe('TextFieldSearch', () => {
     });
     await user.type(getByRole('searchbox'), 'test value');
     expect(getByRole('searchbox')).toHaveValue('test value');
-    expect(getByRole('button', { name: /Clear/u })).toBeDefined();
+    expect(getByRole('button', { name: /clear/u })).toBeDefined();
   });
   it('should still render with the endAccessory if it exists', async () => {
     const fn = jest.fn();
@@ -43,7 +43,7 @@ describe('TextFieldSearch', () => {
     );
     await user.type(getByRole('searchbox'), 'test value');
     expect(getByRole('searchbox')).toHaveValue('test value');
-    expect(getByRole('button', { name: /Clear/u })).toBeDefined();
+    expect(getByRole('button', { name: /clear/u })).toBeDefined();
     expect(getByText('end-accessory')).toBeDefined();
   });
   it('should fire onClick event when passed to clearButtonOnClick when clear button is clicked', async () => {
@@ -53,7 +53,7 @@ describe('TextFieldSearch', () => {
       clearButtonOnClick: fn,
     });
     await user.type(getByRole('searchbox'), 'test value');
-    await user.click(getByRole('button', { name: /Clear/u }));
+    await user.click(getByRole('button', { name: /clear/u }));
     expect(fn).toHaveBeenCalledTimes(1);
   });
   it('should fire onClick event when passed to clearButtonProps.onClick prop', async () => {
@@ -64,7 +64,7 @@ describe('TextFieldSearch', () => {
       clearButtonOnClick: fn,
     });
     await user.type(getByRole('searchbox'), 'test value');
-    await user.click(getByRole('button', { name: /Clear/u }));
+    await user.click(getByRole('button', { name: /clear/u }));
     expect(fn).toHaveBeenCalledTimes(1);
   });
 });