Breadcrumb separators are focusable

The situation is different for Gin, Claro and Olivero:

Gin uses the "/" character as content of the ::before pseudo element in its css:

.gin-breadcrumb__item + .gin-breadcrumb__item::before {
  content: "/";
  opacity: .3;
  font-size: var(--gin-font-size-xs);
  vertical-align: middle;
  display: inline-block;
  padding: 0 .5em;
  background: none;
}

/themes/contrib/gin/dist/css/components/breadcrumb.css

Claro uses an svg as content of the ::before pseudo element in its css:
https://eleven.ddev.site/core/themes/claro/css/components/breadcrumb.css...

.breadcrumb__item + .breadcrumb__item::before {
  display: inline-block;
  padding: 0 0.75rem;
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' height='8' width='5'%3e%3cpath fill='currentColor' d='M1.207.647L.5 1.354 3.146 4 .5 6.647l.707.707L4.561 4z'/%3e%3c/svg%3e");
}

/core/themes/claro/css/components/breadcrumb.css

Olivero has an empty ::before pseudo element in its css, but creates the separator by rotating borders :) :

.breadcrumb__item:nth-child(n + 2)::before {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-inline: 1rem 1.25rem;
  content: "";
  transform: rotate(45deg); /* LTR */
  border-block-start: 2px solid var(--color--gray-45);
  border-inline-end: 2px solid var(--color--gray-45);
}

/core/themes/olivero/css/components/breadcrumb.css

I think we can conclude that the Claro and Gin issues are separate (though related) and that a separate issue is need for Claro

As for the possible solutions: Gin can use the method from Olivero, reemoving the content and using a (rotated) border, or an alternative text can be defined for the content property https://developer.mozilla.org/en-US/docs/Web/CSS/content#image_combined_... &&
https://dev.to/whitep4nth3r/hide-text-in-css-pseudo-elements-from-screen...

I'll have a look at the latter to see if there are any drawbacks.

So actually, there is a couple of approaches possible:

- it can be done like in Oliveiro using CSS borders and transforming them. See the Olivero CSS example above
- it can be left like it is now because the separator is visible and the screen reader pronounces it so the behaviour is the same for both experiences. But one could also argue that the screen reader already knows that this is a list so an extra separator is redundant.
- another option is to add an alternative text in the CSS, but I would not prefer that because that means having content in the CSS files and that may open a new can of (multilingual) worms
- I also had a quick look at how other websites solve this and for example on the MDN website is using a mask-image property for a separator image. See for example https://developer.mozilla.org/en-US/docs/Web/CSS :

.breadcrumbs-container li .breadcrumb:after {
    background-color: var(--icon-secondary);
    content: "";
    display: block;
    flex-shrink: 0;
    height: 12px;
    margin-right: .5rem;
    -webkit-mask-image: url(/static/media/chevron.05a124d379047e16d746.svg);
    mask-image: url(/static/media/chevron.05a124d379047e16d746.svg);
    -webkit-mask-size: 12px;
    mask-size: 12px;
    transform: rotate(-90deg);
    width: 12px
}

Claro is facing the same problem: 🐛 Breadcrumb separators are focusable with the voiceover cursor and get also announced Active

The solution in that ticket is to follow what Olivero does.

I made the necessary CSS changes so that the same solution as Olivero is being used