[EuiSelectableTemplateSitewide] Allow default a link behavior for results

[rshen91]

I'm opening this issue to reference in a future PR of mine. The global search component within Kibana is using the EuiSelectableTemplateSitewide component and in issue elastic/kibana#147710 I am tasked with having the default link behavior of cmd + click open the global search results into a new tab.

Some avenues I plan to explore in a PR through EUI is through the renderOptions prop to have the <li> from EuiSelectableList be wrapped in an tag. I want to make sure that this doesn't impact styling.

The pickle with window.open() is that we want to use Kibana's navigateToUrl() function that prevents full reloads of Kibana to make it a better user experience.

This issue seems connected to this already existing issue #6376 (but please correct me if I'm wrong).

[cee-chen]

Hey Rachel! Real quick, can we get a priority level from you/your team on this and when you'd want this by?

There are accessibility concerns here (the option roles that selectable items naturally come with, that might clash with link/<a> tags) that we'd need to loop @1Copenut in on, which would take a little while as he's out on PTO right now.

In the interim, I think elastic/kibana#147710 is resolvable without needing native <a> link rendering - you simply need to detect ctrl/cmd keypress in the click event (see #5408 (comment)).

The pickle with window.open() is that we want to use Kibana's navigateToUrl() function that prevents full reloads of Kibana to make it a better user experience.

This sentence doesn't make sense to me, I'm sorry. A new page/tab will always cause a full load of Kibana in any case, that's straight up how they work. Default link behavior wouldn't change this. window.open() is frankly as close to browser-level new tab behavior as it gets. Can you clarify exactly why this wouldn't work for you all?

[1Copenut]

@cee-chen is right mentioning the option roles will compete with the A tag's natural link role. I also think wrapping the option list item with an EuiLink will create a markup pattern UL > A > LI that will throw axe-core errors due to improper child rows existing in the list.

It's perfectly valid to add a click handler to the list item so we can open that item in a new tab. We should also consider keyboard behavior allowing users to Cmd/Ctrl + Enter keypress to open the item in a new tab. This is also a default behavior.

The trick will be communicating to screen readers that these non-links will behave like links including opening in new tabs using default user behaviors.

LMK if I've missed the original problem statement or you'd like to discuss further.

[rshen91]

Sorry! I did a fix on the Kibana side that was merged recently - elastic/kibana#183762
Closing!