From 7f520a6c61a1e06e529341c34d5d9ae790cecf27 Mon Sep 17 00:00:00 2001
From: Andrew Musgrave <andrew.musgrave@shopify.com>
Date: Mon, 9 Aug 2021 12:04:44 -0400
Subject: [PATCH 1/3] Fully removed clear button when there is no text

---
 src/components/TextField/TextField.scss |  4 ---
 src/components/TextField/TextField.tsx  | 35 ++++++++++++-------------
 2 files changed, 17 insertions(+), 22 deletions(-)

diff --git a/src/components/TextField/TextField.scss b/src/components/TextField/TextField.scss
index b1058a4b242..da3dc7d1a70 100644
--- a/src/components/TextField/TextField.scss
+++ b/src/components/TextField/TextField.scss
@@ -231,10 +231,6 @@ $stacking-order: (
   &:disabled {
     cursor: default;
   }
-
-  &.ClearButton-hidden {
-    @include visually-hidden;
-  }
 }
 
 .Spinner {
diff --git a/src/components/TextField/TextField.tsx b/src/components/TextField/TextField.tsx
index 45b56584cfd..7ae49069e40 100644
--- a/src/components/TextField/TextField.tsx
+++ b/src/components/TextField/TextField.tsx
@@ -274,24 +274,23 @@ export function TextField({
   }
 
   const clearButtonVisible = normalizedValue !== '';
-  const clearButtonClassName = classNames(
-    styles.ClearButton,
-    !clearButtonVisible && styles['ClearButton-hidden'],
-  );
-
-  const clearButtonMarkup = clearButton ? (
-    <button
-      type="button"
-      testID="clearButton"
-      className={clearButtonClassName}
-      onClick={handleClearButtonPress}
-      disabled={disabled}
-      tabIndex={clearButtonVisible ? 0 : -1}
-    >
-      <VisuallyHidden>{i18n.translate('Polaris.Common.clear')}</VisuallyHidden>
-      <Icon source={CircleCancelMinor} color="base" />
-    </button>
-  ) : null;
+  const clearButtonClassName = classNames(styles.ClearButton);
+
+  const clearButtonMarkup =
+    clearButtonVisible && clearButton ? (
+      <button
+        type="button"
+        testID="clearButton"
+        className={clearButtonClassName}
+        onClick={handleClearButtonPress}
+        disabled={disabled}
+      >
+        <VisuallyHidden>
+          {i18n.translate('Polaris.Common.clear')}
+        </VisuallyHidden>
+        <Icon source={CircleCancelMinor} color="base" />
+      </button>
+    ) : null;
 
   const handleNumberChange = useCallback(
     (steps: number) => {

From 3f7dc8d371daef3bef8e1671db65b62992c09462 Mon Sep 17 00:00:00 2001
From: Andrew Musgrave <andrew.musgrave@shopify.com>
Date: Mon, 9 Aug 2021 12:16:20 -0400
Subject: [PATCH 2/3] Fixed tests & added changelog

---
 UNRELEASED.md                                     |  1 +
 src/components/TextField/TextField.tsx            |  3 +--
 src/components/TextField/tests/TextField.test.tsx | 10 +++++-----
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/UNRELEASED.md b/UNRELEASED.md
index 8dae4c28da3..03fe0d65fb5 100644
--- a/UNRELEASED.md
+++ b/UNRELEASED.md
@@ -18,6 +18,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - Fixed a bug in `Banner` where loading state wasn't getting passed to `primaryAction` ([#4338](https://github.com/Shopify/polaris-react/pull/4338))
 - Fixed `Popover` not correctly positioning itself ([#4357](https://github.com/Shopify/polaris-react/pull/4357))
 - Fixed a bug `TextField` where Safari would render the incorrect text color ([#4344](https://github.com/Shopify/polaris-react/pull/4344))
+- Fixed screen readers reading out the clear button in `TextField` when when there is no input ([#4369](https://github.com/Shopify/polaris-react/pull/4369))
 - Fix bug in Safari where `Button` text is gray instead of white after changing state from disabled to enabled ([#4270](https://github.com/Shopify/polaris-react/pull/4270))
 - Bring back borders on the `IndexTable` sticky cells ([#4150](https://github.com/Shopify/polaris-react/pull/4150))
 - Adjust `IndexTable` sticky z-index to avoid collisions with focused `TextField` ([#4150](https://github.com/Shopify/polaris-react/pull/4150))
diff --git a/src/components/TextField/TextField.tsx b/src/components/TextField/TextField.tsx
index 7ae49069e40..9f0d610ed49 100644
--- a/src/components/TextField/TextField.tsx
+++ b/src/components/TextField/TextField.tsx
@@ -274,14 +274,13 @@ export function TextField({
   }
 
   const clearButtonVisible = normalizedValue !== '';
-  const clearButtonClassName = classNames(styles.ClearButton);
 
   const clearButtonMarkup =
     clearButtonVisible && clearButton ? (
       <button
         type="button"
         testID="clearButton"
-        className={clearButtonClassName}
+        className={styles.ClearButton}
         onClick={handleClearButtonPress}
         disabled={disabled}
       >
diff --git a/src/components/TextField/tests/TextField.test.tsx b/src/components/TextField/tests/TextField.test.tsx
index 980c7814f1f..aa383c93e30 100644
--- a/src/components/TextField/tests/TextField.test.tsx
+++ b/src/components/TextField/tests/TextField.test.tsx
@@ -1068,8 +1068,8 @@ describe('<TextField />', () => {
       expect(findByTestID(textField, 'clearButton').exists()).toBeTruthy();
     });
 
-    it('renders a visually hidden clear button in inputs without a value', () => {
-      const textField = mountWithAppProvider(
+    it('does not render a clear button in inputs without a value', () => {
+      const textField = mountWithApp(
         <TextField
           id="MyTextField"
           label="TextField"
@@ -1079,9 +1079,9 @@ describe('<TextField />', () => {
         />,
       );
 
-      const clearButton = findByTestID(textField, 'clearButton');
-      expect(clearButton.hasClass('ClearButton-hidden')).toBeTruthy();
-      expect(clearButton.prop('tabIndex')).toBe(-1);
+      expect(textField).not.toContainReactComponent('button', {
+        testID: 'clearButton',
+      });
     });
 
     it('calls onClearButtonClicked() with an id when the clear button is clicked', () => {

From 841e43981d03bc4396050e64fec536d0edfa0a78 Mon Sep 17 00:00:00 2001
From: Andrew Musgrave <andrew.musgrave@shopify.com>
Date: Thu, 12 Aug 2021 10:40:27 -0400
Subject: [PATCH 3/3] Update UNRELEASED.md

Co-authored-by: Daniel Leroux <dleroux@users.noreply.github.com>
---
 UNRELEASED.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/UNRELEASED.md b/UNRELEASED.md
index 03fe0d65fb5..b611852ec6f 100644
--- a/UNRELEASED.md
+++ b/UNRELEASED.md
@@ -18,7 +18,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - Fixed a bug in `Banner` where loading state wasn't getting passed to `primaryAction` ([#4338](https://github.com/Shopify/polaris-react/pull/4338))
 - Fixed `Popover` not correctly positioning itself ([#4357](https://github.com/Shopify/polaris-react/pull/4357))
 - Fixed a bug `TextField` where Safari would render the incorrect text color ([#4344](https://github.com/Shopify/polaris-react/pull/4344))
-- Fixed screen readers reading out the clear button in `TextField` when when there is no input ([#4369](https://github.com/Shopify/polaris-react/pull/4369))
+- Fixed screen readers reading out the clear button in `TextField` when there is no input ([#4369](https://github.com/Shopify/polaris-react/pull/4369))
 - Fix bug in Safari where `Button` text is gray instead of white after changing state from disabled to enabled ([#4270](https://github.com/Shopify/polaris-react/pull/4270))
 - Bring back borders on the `IndexTable` sticky cells ([#4150](https://github.com/Shopify/polaris-react/pull/4150))
 - Adjust `IndexTable` sticky z-index to avoid collisions with focused `TextField` ([#4150](https://github.com/Shopify/polaris-react/pull/4150))