Breadcrumb separators are exposed to the accessibility tree

I know I'm not even remotely a VoiceOver expert, so this is speculation based on some observations.

To me, it looks like VoiceOver VO Right Arrow is selecting them rather than focusing them. It doesn't look like the same thing as tabbing through interactive elements.

The only way to stop this with the current markup may be aria-hidden="true".

I was able to reproduce the black rectangular VO cursor moving onto the separators with VO Right Arrow.

But when I move onto a separator, the link that I just moved away from retains the blue focus indicator that normally follows the tab key. When I press ENTER, the browser follows the link that has the focus indicator.

To me, this means that the separators don't receive focus.

See the attached video 3583516-5-breadcrumb.480p.mov.

VO Right Arrow also allows selection of lists, paragraphs, and arbitrary text nodes, even when they aren't part of the tab order and have focusable="false". I couldn't find any documentation for focusable="false".

See the attached video 3583516-5-arbitrary-text-elements.480p.mov.

Here's a test codepen.

Another idea

@rkoller noted in the Gin issue that this doesn't happen in Olivero.

I think it's because Olivero does this with just empty blocks that have two right-angle borders rotated slightly. Doing something like that would also be an option here (a single-sided border rotated slightly).

Olivero's CSS:

.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);
        border-block-start: 2px solid var(--color--gray-45);
        border-inline-end: 2px solid var(--color--gray-45);
    }
}

Tested MR !16772 on Drupal 11.x. Visually, the breadcrumb separators appear correctly as chevrons (>). During keyboard navigation, tabbing moves focus exclusively through links (Home, Administration, etc.) and completely skips separators. Additionally, accessibility testing confirmed that screen readers ignore the separators and do not read them aloud. Everything works as expected!

Thanks @angel_devoeted.

Visually, the breadcrumb separators appear correctly as chevrons (>)

To me, chevrons are incorrect.

My suggestion in #5 was to adapt the technique from Olivero so that they appear as they do currently (as slashes with same size / positioning / spacing / color).

Using a single-sided border might do that (instead of a two-sided border that shows the full corner).

If they appear as chevrons instead of slashes, then my guess is that it would be considered a visual regression. That's up to the theme maintainers, though.

To be more precise, the intention behind my suggestion was to adapt the technique from Olivero so that they appear as they do currently.

Anyway, the pipeline is failing. So back to Needs work for that.

There's a number of issues wrong with the breadcrumbs CSS

• There's unused selectors. Claro's .breadcrumb selector still exists, although its not in use. Currently in use is .gin-breadcrumb
• There's unneeded specificity. The breadcrumbs do not exist within the toolbar, and do not need the :is(#extra-specificity-hack, [data-drupal-admin-styles]) { hack.
• The slash doesn't flip for RTL

In addition, we can do an easier fix for removing it from the accessibility tree by doing a content: "/" / ""; The extra =/ ""; is like empty alt text for the content property. I manually tested this in VO with Chrome and Safari. Details on this are on MDN at https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/co...

Note I can't figure out how to make a new branch. I posted in Slack at https://drupal.slack.com/archives/CGKLP028K/p1788029852101539.

Updating IS

MR created. This should be good to go.

Tested before & after.

With the MR, VoiceOver does not select or announce the separators (as expected).

I'll upload a screencast tomorrow.

P.S. I like the branch name: 3583516-This-one-will-work :-).

Here's a screencast of VoiceOver in Edge with the MR, in dark mode.

This needs to be reworked since we just got #3605702: Remove remaining Gin and Claro implementation names from Default Admin theme in.

Brought back up to date. Setting back to RTBC per #23

Note that there's some old Claro styles being removed. These were not in use because the namespace was gin-breadcrumb, however, now they're redundant and so are being removed.

With #3605702: Remove remaining Gin and Claro implementation names from Default Admin theme in, is gin-breadcrumb still correct?

Definitely not! Not sure what I was thinking :D

Hope it's okay I RTBC all I did was drop .gin- in line line.

Reviewed and posted a few comments on the MR.

@amateescu's comments are resolved or addressed. This should be ready!

Feedback for this one appears to be addressed. Breadcrumbs appear to be working. Checked both regular and dark mode

The pipeline is failing.

Looks like a performance test failing on the asset size change. I'm looking into it.

I'm leaving at RTBC in case that decision was made in spite of the pipeline.

Pipeline is passing now.

This had a commit conflict on performance tests, rebasing also had a conflict on at least one previous commit, so I merged in main then updated the test from there.

Committed/pushed to main, thanks!

Moving to 11.x for backport.

Green backport.

11.x MR diff checks out against the main commit, only difference is the performance test numbers.

Committed b94ae96 and pushed to 11.x. Thanks!