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

[ZeeshanTamboli]

I'll reopen it but I can't confirm it's an issue. I use Windows OS.

[mj12albert]

Sorry for not getting to this earlier 🙏

I agree aria-hidden is the right solution here

@tejasparkar would you still like to work on this?

[arishoham]

@mj12albert I have a PR to fix it, mind helping me get it merged? #44631

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@tejasparkar How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.

[ben-pomelo]

Thanks for fixing this! I found a very similar issue: #44740 and put up a straightforward fix: #44731 would love it if you'd take a look @mj12albert or @mnajdova ❤️