Description

The breadcrumbs block stylesheet uses CSS generated content to render the separator character between items:

content: var(--separator, "/");

This causes screen readers to announce the separator character (e.g. "slash") between each breadcrumb item, adding unnecessary noise for assistive technology users.

The CSS content property supports an alt text syntax where an empty string after a forward slash instructs screen readers to treat the generated content as presentational:

content: var(--separator, "/") / "";

Expected: Screen readers skip the separator character and announce only the breadcrumb link text.
Current: Screen readers announce the separator character between each breadcrumb item.

Step-by-step reproduction instructions

1. Add the Breadcrumbs block to a template part (e.g. header)
2. View a page with a breadcrumb trail on the front end
3. Navigate with a screen reader (e.g. VoiceOver or NVDA)
4. Observe that the separator character is announced between items

Screenshots, screen recording, code snippet

Environment info

Gutenberg 23.x (WordPress 7.0)
File: packages/block-library/src/breadcrumbs/style.scss

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure