[EuiBreadcrumbs] Not visually clear if a breadcrumb has a link

[Dosant]

For the new serverless navigation in Kibana we're changing the look of breadcrumbs from EuiHeaderBreadcrumbs to EuiBreadcrumbs elastic/kibana#166593

Currently in EuiBreadcrumbs it it not visually clear if a breadcrumb has a link or not, for example comparing to EuiHeaderBreadcrumbs:

https://codesandbox.io/s/thirsty-cray-5xspnj?file=/demo.tsx

Do you think we could change this and add a visual difference between a crumb with and without a link in the default EuiBreadcrumbs look?

cc @MichaelMarcialis @ryankeairns

[MichaelMarcialis]

Assuming we wish to maintain the minimalistic nature of these breadcrumbs (which I personally do), the first areas that come to mind where we could apply such visual affordance for linked vs. non-linked breadcrumbs are font weight and color.

Currently, it looks like we use a font weight of 500 for all breadcrumbs. The current/active breadcrumb uses our default text color, while all other breadcrumbs use our subdued text color. On hover/focus of a linked breadcrumb, an underline decoration is added. Without hovering/focusing, the user won't know if a breadcrumb is a link or not.

Perhaps we could update these styles with the following subtle changes to accommodate for a light affordance prior to the user attempting to hover/focus:

• All breadcrumbs switch to 400 font weight, except the current/active breadcrumb (which stays at the current 500).
• Linked breadcrumbs switch to using the default text color (instead of subdued).

It's subtle, but I think it's enough of an offset to indicate to users that something is different about them, without hurting the minimalism of the component. What do you think, @ryankeairns?

[ryankeairns]

Agreed. I briefly poked around at this yesterday and also noted the general use of the subdued color. As has been stated with the proposed changes, they are subtle may be all that is needed.

+1 for the proposed changes.

[cee-chen]

Going to be annoying and insert my non-designer opinion: that is absolutely too subtle for me to notice at a glance personally, especially at smaller font sizes 😅 (or, e.g. for users with low vision acuity).

Could we consider the good old "underline if a link and do not underline if not" pattern, which is generally held to be an accessibility best practice?

[ryankeairns]

Going to be annoying and insert my non-designer opinion: that is absolutely too subtle for me to notice at a glance personally, especially at smaller font sizes 😅 (or, e.g. for users with low vision acuity).

Could we consider the good old "underline if a link and do not underline if not" pattern, which is generally held to be an accessibility best practice?

It's easy enough to try and see how it looks. Let's take a peek when this reaches the PR stage.