[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.

[arionkoder-fmazzoni]

@ZeeshanTamboli sorry to revive this, but the issue is that screen readers are reading the ZeroWidthSpace, tried this on MacOS Chrome with VoiceOver

Can this be reopened or can we try a new pr to fix this a11y issue?