Cuando se utiliza una información sobre herramientas alrededor de un botón de icono, el botón obtendrá automáticamente el nombre completo del título de la información sobre herramientas. El ejemplo de los documentos hace que un lector de pantalla lo lea como "Eliminar, botón", lo cual es bueno.

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

Pero tratar de hacer lo mismo cuando simplemente usa un ícono svg no funciona.

En lugar de tener solo

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

Hace que la imagen sea inaccesible debido a cómo MUI maneja a11y por defecto para SvgIcons . Entonces, lo que puedo hacer es simplemente pasar el título de la información sobre herramientas al accesorio titleAccess del ícono.

 const title = "Delete"; <Tooltip title={title}> <DeleteIcon titleAccess={title}/> </Tooltip>

Que funciona bien La información sobre herramientas funciona al pasar el mouse sobre ella y un lector de pantalla puede acceder a ella y leerla como "Eliminar, imagen". ¿Es esta la forma en que se supone que debe hacerse esto? ¿O es posible que el ícono tome el título de la información sobre herramientas directamente para que no sea necesario configurar el título dos veces?

El caso de uso que tengo para esto es mostrar un icono que explica el estado de existencias de un artículo. Por lo tanto, se supone que no es interactivo, pero es posible que los usuarios obtengan una explicación de texto si no entienden el ícono.

Aquí hay un codesandbox con los diferentes ejemplos en ejecución: https://codesandbox.io/s/mui-icon-tooltip-a11y-9smgoc?file=/src/App.tsx