When using a tooltip around an icon button the button automatically will get the a11y name of the tooltip title. The example from the docs makes it so a screen reader reads it as "Delete, button" which is good.

<Tooltip title="Delete">
  <IconButton>
    <DeleteIcon />
  </IconButton>
</Tooltip>

But trying to do the same thing when simply using an svg icon does not work.

Instead having just

<Tooltip title="Delete">
  <DeleteIcon />
</Tooltip>

Makes it so the image is inaccessible due to how MUI default handles a11y for SvgIcons. So what I can do is simply passing the tooltip title to the titleAccess prop of the icon.

const title = "Delete";

<Tooltip title={title}>
  <DeleteIcon titleAccess={title}/>
</Tooltip>

Which works fine. The tooltip works on hover and a screen reader can access it and reads it as "Delete, image". Is this the way how this is supposed to be done though? Or is it possible for the icon to pickup the title from the tooltip directly so the title does not need to be set twice?

The use case I have for this is to show an icon that explains stock status of an item. So it is supposed to be non interactive but possible for users to get a text explanation if they don't understand the icon.

Here is a codesandbox with the different examples running: https://codesandbox.io/s/mui-icon-tooltip-a11y-9smgoc?file=/src/App.tsx