[Select][TextField] Fix screen reader from saying &ZeroWidthSpace (#44631)

Author: arishoham

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 && (

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
       )}

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>

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>

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
         )}