MuiAutocomplete component- getOptionLabel and aria-label needs to be different, could not able to achieve it

[sowji-code]

In the MuiAutocomplete component,

On inspecting one of the selected Option, for example: "Male" then for accessibility it should display aria-label as "Remove Male" by keeping the Option label text as "Male".

Tried updating code in the
renderInput={params =>
as
'role': 'button',
'aria-label': 'remove' + params.inputProps.value,
but not working.
Looking for a solution.

Search keywords:

[ZeeshanTamboli]

You can use the chip slotProps slotProps.chip:

<Autocomplete
   ...
   slotProps={{ chip: { 'aria-label': `Remove ${option}` } }} 
/>;

See the API documentation for more details.

[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

We value your feedback @sowji-code! How was your experience with our support team?
If you could spare a moment, we'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!

[sowji-code]

the provided solution didn't work. May be because of the version issue.
The below code worked perfectly.

renderTags={(values, props) => {
return (
<>
{values.map((value, i) => (
<Chip className=" MuiAutocomplete-tag MuiChip-sizeSmall"
label={value.label}
aria-label={Remove ${value.label}}
onDelete={e => props({ index: i }).onDelete(e)}
/>
))}
</>
);
}}