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

…44631)
mui · Dec 4, 2024 · 6c6cb7e · 6c6cb7e
1 parent 1262b2a
commit 6c6cb7e
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
         )}