Breadcrumb separators are focusable with the voiceover cursor and get also announced

I will work in this

Hi, I was not able to reproduce.

Can you upload the videos that you mensioned?

not sure why the videos havent been uploaded and added back then. apologies. in both videos i first tab through the breadcrumb and then shift tab back to the start as illustrated by the keycastr output. then i do the same by stepping through the breadcrumb one way pressing VO arrow right... in claro the separators are announced and in focus, in olivero they are ignored.

I guess it happens because Claro is using content property for drawing the separators. The possible fix would be to use background-image instead like Olivero does.

ll66382 → made their first commit to this issue’s fork.

I noticed this hadn't been worked in a bit so, prepared a merge request. Hopefully I've gotten the steps right. Thanks @chi for the helpful pointer in #5. I'll attached screen captures and notes shortly.

I've attached screen captures showing for https://git.drupalcode.org/project/drupal/-/merge_requests/12046 breadcrumb separators with different visibility modes in macOS, also a VoiceOver screen recording from iOS. Unfortunately, I couldn't test high contrast mode on Windows; I did check appearance with Windows 11 Edge. Any feedback appreciated.

The update uses Olivero's approach for rotated borders instead of SVG.

The Needs Review Queue Bot → tested this issue. It no longer applies to Drupal core. Therefore, this issue status is now "Needs work".

This does not mean that the patch necessarily needs to be re-rolled or the MR rebased. Read the Issue Summary, the issue tags and the latest discussion here to determine what needs to be done.

Consult the Drupal Contributor Guide → to find step-by-step guides for working with issues.

thanks for the MR @ll66382, i finally found the time today to test MR12046, a few observations:

1. The MR fixes the basic problem the issue is about. i've tested in voiceover on macos sequoia and neither by tabbing nor by the voiceover cursor the seperators are announced anymore, excellent!
2. If you compare the styling of the seperator between 11.x and the MR you will notice that the MR increases the separator size (compare in styling.mp4) - it seems like the separator is bigger now compared to the drupal design system
3. The orientation of the separator in LTR is correct but for RTL it points up instead of to the left

And the separator looks fine in forced color dark mode - it is possible to test those in for example edge on macos (what i did) . In the screenshot you see the necessary settings to set the forced color dark mode in the rendering tab:

the other option is the page color setting in the accessibility section of the edge settings.

and there things look also fine in for example the desert theme

Thank you for this detailed review rkoller - it's appreciated! I hope to have things ready by Monday.

PR updated and moving this back to Needs review. Thanks for your review.

• Checked Design System → figma section on breadcrumbs
• Adjusted breadcrumb margins
• Adjusted breadcrumb size and line thickness

Pipeline appears to have issues. And can summary be flushed out as the proposed solution isn’t clear

The reason why the pipeline is failing, the linter requires vertical-align come before border-inline-end, but vertical-align is at the end. and looking at https://git.drupalcode.org/project/drupal/-/merge_requests/12046/diffs that also notifies that the file was modified in the source and the target branch - needs someone with write access to resolve that. and i guess the MR could need a rebase in any way, due to the rename of the SandboxManagerBase class in package manager, that is requiring me to uninstall project browser when i try to checkout this MR for testing.

and i am in the process of reviewing the latest changes by @ll66382, will post another comment later.

About the styling, i am not that savvy and familiar with Figma for being able to extract the exact specifics, but in case I interpret the current changes in the MR correctly then:

• the padding between a breadcrumb item and a breadcrumb separator is 0.5rem in the MR while in the styleguide it is set to 0.75rem same as for Claro without the MR
• the separator has the extend of 4px by 4px (width by height) while in the figma file it looks like 3px by 6px..

the increase in separator size got fixed. thanks! oh and the separator is still pointing upwards for RTL languages.