[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

https://github.com/mui/material-ui/blob/b57951355a60566aeafc88c9aa49c7f198968b3c/packages/mui-base/src/Select/Select.tsx#L219

<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]

https://github.com/mui/material-ui/pull/41656

[ZeeshanTamboli]

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

[github-actions[bot]]

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.