How to set options with including image for MultiSelect widget

[AngelaChenBJ]

Hello, I'm using MultiSelect widget, and I need to show options with including image like below, it is just a mock example

My question is how can I set options with including image in MultiSelect widget?
For MultiSelect widget, we provide items like in following format:
items={[{ id: 'item-1', text: 'Item 1' }, { id: 'item-2', text: 'Item 2' }]}
For the shown option content, it is from text field as it has the setting itemToString={item => (item ? item.text : '')}
I wonder how to include an image path in text field, so it can parse the image path correct and show image accordingly in the option, I tried to combine image path into text field, but it shows the path directly instead of image, I also tried to put image info into img widget, then combine it into text field along with other information, it also can't show image correctly. Below is a result from trying to put image info into img widget.

[kglickman]

The Dropdown component has an itemToElement function that you can use to generate the html for each item. The Multiselect widget does not. It would be great if you could add that for this widget, too. Not only would it support the scenario above, but I have a use case where I want the hover text to have different information than just the full, untruncated value of the label. It could be used for that as well.

[joshblack]

Hi there! 👋 Something that is tricky about this situation is how we should communicate both the image and then option text to a screen reader user. Ideally, the option would have a single text value that could be announced. However, as soon as additional information gets included it can make it hard to understand what the value is for the option as multiple things get announced.

Are the images in this example purely decoration, or do they serve some purpose for informing the user about an option?

[AngelaChenBJ]

Actually it has some meaning here, I also expect that the MultiSelect widget can be more flexible to be customized.

[emyarod]

on a side note, here are some related previous discussions on this issue #4913 #4977 #5023 #5578 #5698

[tw15egan]

So would our next steps be to either:

1. Add itemToElement to Multiselect to match the Dropdown experience, introduce possible a11y concerns if implemented improperly

or

2. Remove itemToElement from Dropdown to match the Multiselect experience to ensure proper a11y, reduces the functionality of the components

[kglickman]

You can't remove itemToElement from dropdown. Teams are already using it. In particular, we use it to show a brief name in the list, with a complete name in the title attribute. I don't mean like for ellipsis. It would be like if my name was on the list and said Kate but when you hover it says Kathryn A Glickman.

[sstrubberg]

hey @AngelaChenBJ, sorry for the wait. Finally got this thing triaged. Based on the conversation. This feels like a feature request to add functionality to Multi-select. Due to roadmap contraints, we won't be able to pick this up any time soon, but we're happy to accept a PR if you're up to it. Keep in mind, there is a dicey road ahead with accessibility concerns, so safe travels :)