[tooltip] `aria-label` overwrites trigger's visible text

[abdermaiza]

Steps to reproduce

Steps:

1. Open this link to live example: https://mui.com/material-ui/react-tooltip/
2. Look at the tooltip code (the HTML generated in the browser console)
3. There is an aria-label attribute inside the button
4. That will unfortunately overwrite the button content, for assistive technologies like screen readers.

Current behavior

The aria-label inside the button is erasing the accessible name of this button, like:
<button type="button" aria-label="add">Margin</button>

Screen readers will here read "Button add", instead of "Button Margin add".

Expected behavior

The aria-label inside the button should be removed, like:
<button type="button">Margin <span class="MuiTouchRipple-root css-4mb1j7">Add</span></button>

To provide an accessible tooltip, we should only generate a text in the span inside this button, when focusing it.

Context

Make the MUI tooltip more accessible (comprehensive) for screen reader users.

Your environment

Chrome v142, tested with NVDA.

Search keywords: tooltip

[mj12albert]

@abdermaiza I agree we shouldn't force-set aria-label here, the other way around would be better – if the trigger is an icon without visible text, the user should specify aria-label, but I think it would be a breaking change to do this

In the mean time the forced aria-label can be unset: aria-label={undefined}

https://stackblitz.com/edit/4pyuzrvk?file=src%2FDemo.tsx

[abdermaiza]

Ok, your workaround (unset the aria-label) seems good, many thanks!