Eui: EuiListGroupItem HTML title bug

[bevacqua]

In Cloud: (https://github.com/elastic/cloud/issues/33924)

In EUI docs:

Regardless of the fact that we use a ReactNode for the EuiListGroupItem label and I'm guessing EUI uses string most of the time, we shouldn't render something as an HTML title as well as with an EUI tooltip.

[thompsongl]

This one isn't as straightforward as I thought.

label correctly accepts node values, but all internal assumptions are that the value is a string. Even if we were to hide the hover title attr when EuiTooltip is in play, we'll still run into a11y problems when a long text node is used and showToolTip is false.

We either need to 1) force showToolTip to true or 2) accept another prop (title?) that can be used in place of label when nodes are used.

Also, I'm curious how you're rendering different content in the tooltip and list item. The contents of both are just the label value from what I can tell.

[bevacqua]

All I'm saying is we should likely not pass the title attribute down to the HTML node at all? Why have both? It looks strange

[cchaos]

The title is there in case the text is truncated.

I do realize there is a redundancy when also adding tooltips which we can fix. However, we'll still need a way to sanitizing the children in order to be able to pass a string to the title element. I'm wondering if we can check for a type of string and pass it if it is.

[thompsongl]

We can
1) not pass title if showToolTip is true
2) not pass title if label is a node

both are easy.

The other case we need to figure out is a node with content that will get truncated.

[chandlerprall]

There is a 3rd option... we can ask React to render the element and feed the resulting DOM's innerText back into the title. This probably isn't as bad as it sounds, as we're already rendering the label. The title prop would be empty for a frame or two until we can inspect the text value.

[thompsongl]

I'll take a look at making all of the above happen

[cchaos]

Option 3 is interesting and any solution to this would be a helpful global service as we truncate a lot of text that may be supplied as something other than a string. Ex: EuiFilterButton