[material-ui][Select] "&ZeroWidthSpace" is being rendered as child element

[tejasparkar]

Steps to reproduce

Link to live example: (required)

Steps:
1.Open the url https://mui.com/material-ui/react-select/
2. Inspect the code in browser
3. Try navigation with screen reader and observe

Current behavior

material-ui/packages/mui-base/src/Select/Select.tsx

Line 219 in b579513

<span className="notranslate">&#8203;</span>

<Button {...buttonProps}>
    {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>
    )}
  </Button>

No response

Expected behavior

<Button {...buttonProps}>
    {renderValue(selectedOptionsMetadata) ?? placeholder ?? (
      // fall back to a zero-width space to prevent layout shift
      // from https://github.com/mui/material-ui/pull/24563
      <span aria-hidden="true" className="notranslate">&#8203;</span>
    )}
  </Button>

No response

Context

No response

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: accessibility

[maryamabdi76]

@mj12albert I can work on this issue.

[tejasparkar]

#41656

[ZeeshanTamboli]

@tejasparkar What's the problem with the screen reader announcing? What is it announcing incorrectly?

[github-actions]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.