From 6c6cb7ee9e9fa52b858d453e7bd7ff23fae3aae2 Mon Sep 17 00:00:00 2001
From: Ari Shoham <arishoham@gmail.com>
Date: Wed, 4 Dec 2024 00:51:18 -0800
Subject: [PATCH] [Select][TextField] Fix screen reader from saying
 `&ZeroWidthSpace` (#44631)

---
 packages/mui-base/src/Select/Select.tsx                    | 4 +++-
 packages/mui-material/src/FormHelperText/FormHelperText.js | 4 +++-
 packages/mui-material/src/InputAdornment/InputAdornment.js | 4 +++-
 packages/mui-material/src/OutlinedInput/NotchedOutline.js  | 4 +++-
 packages/mui-material/src/Select/SelectInput.js            | 4 +++-
 5 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/packages/mui-base/src/Select/Select.tsx b/packages/mui-base/src/Select/Select.tsx
index 6d1828324bf65f..5f99b7b47022c0 100644
--- a/packages/mui-base/src/Select/Select.tsx
+++ b/packages/mui-base/src/Select/Select.tsx
@@ -216,7 +216,9 @@ const Select = React.forwardRef(function Select<
         {renderValue(selectedOptionsMetadata) ?? placeholder ?? (
           // fall back to a zero-width space to prevent layout shift
           // from https://github.com/mui/material-ui/pull/24563
-          <span className="notranslate">&#8203;</span>
+          <span className="notranslate" aria-hidden>
+            &#8203;
+          </span>
         )}
       </Button>
       {buttonDefined && (
diff --git a/packages/mui-material/src/FormHelperText/FormHelperText.js b/packages/mui-material/src/FormHelperText/FormHelperText.js
index 14cad8a81fff28..118d43be9d4fa3 100644
--- a/packages/mui-material/src/FormHelperText/FormHelperText.js
+++ b/packages/mui-material/src/FormHelperText/FormHelperText.js
@@ -128,7 +128,9 @@ const FormHelperText = React.forwardRef(function FormHelperText(inProps, ref) {
     >
       {children === ' ' ? (
         // notranslate needed while Google Translate will not fix zero-width space issue
-        <span className="notranslate">&#8203;</span>
+        <span className="notranslate" aria-hidden>
+          &#8203;
+        </span>
       ) : (
         children
       )}
diff --git a/packages/mui-material/src/InputAdornment/InputAdornment.js b/packages/mui-material/src/InputAdornment/InputAdornment.js
index 4d0b4df0e73b1d..abb06efb23735f 100644
--- a/packages/mui-material/src/InputAdornment/InputAdornment.js
+++ b/packages/mui-material/src/InputAdornment/InputAdornment.js
@@ -149,7 +149,9 @@ const InputAdornment = React.forwardRef(function InputAdornment(inProps, ref) {
             {/* To have the correct vertical alignment baseline */}
             {position === 'start' ? (
               /* notranslate needed while Google Translate will not fix zero-width space issue */
-              <span className="notranslate">&#8203;</span>
+              <span className="notranslate" aria-hidden>
+                &#8203;
+              </span>
             ) : null}
             {children}
           </React.Fragment>
diff --git a/packages/mui-material/src/OutlinedInput/NotchedOutline.js b/packages/mui-material/src/OutlinedInput/NotchedOutline.js
index 0dabd05e27b542..0fff01342a45ff 100644
--- a/packages/mui-material/src/OutlinedInput/NotchedOutline.js
+++ b/packages/mui-material/src/OutlinedInput/NotchedOutline.js
@@ -96,7 +96,9 @@ export default function NotchedOutline(props) {
           <span>{label}</span>
         ) : (
           // notranslate needed while Google Translate will not fix zero-width space issue
-          <span className="notranslate">&#8203;</span>
+          <span className="notranslate" aria-hidden>
+            &#8203;
+          </span>
         )}
       </NotchedOutlineLegend>
     </NotchedOutlineRoot>
diff --git a/packages/mui-material/src/Select/SelectInput.js b/packages/mui-material/src/Select/SelectInput.js
index e8e7dc989c6808..c38b326cd13d21 100644
--- a/packages/mui-material/src/Select/SelectInput.js
+++ b/packages/mui-material/src/Select/SelectInput.js
@@ -516,7 +516,9 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
         {/* So the vertical align positioning algorithm kicks in. */}
         {isEmpty(display) ? (
           // notranslate needed while Google Translate will not fix zero-width space issue
-          <span className="notranslate">&#8203;</span>
+          <span className="notranslate" aria-hidden>
+            &#8203;
+          </span>
         ) : (
           display
         )}