fix: Allow Breadcrumb items to wrap

[smockle]

What are you trying to accomplish?

Breadcrumb item text is currently prevented from wrapping (via white-space: nowrap), which means (at certain viewport sizes and zoom levels) text can overflow offscreen and require horizontal scrolling.

Relatedly, WCAG SC 1.4.10: Reflow states:

Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions…

Screenshots

Before	After

Integration

No changes beyond bumping the version.

List the issues that this change affects.

Part of https://github.com/github/accessibility-audits/issues/7360 (Hubber login required) — This issue can be closed after 1. This PR is merged. 2. A new version of Primer View Components is published. 3. GitHub Classroom’s Primer View Components version is updated.

Risk Assessment

• Low risk the change is small, highly observable, and easily rolled back.

This is a one-line CSS change. It changes the presentation of Breadcrumbs’ text, but it does not change, add, or remove text.

What approach did you choose and why?

I chose to remove the line of CSS that prevented Breadcrumb text from wrapping. The default CSS permits wrapping.

Anything you want to highlight for special attention from reviewers?

Is there any truncation happening in Breadcrumb? If so, how will this change interact?

Accessibility

• No new axe scan violation - This change does not introduce any new axe scan violations.

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Lookbook)
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

[changeset-bot]

🦋 Changeset detected

Latest commit: 4ee72ab

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/view-components	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[jonrohan]

If I recall correctly, I think this was put in because of the truncation that's sometimes used with the breadcrumbs. Could you write a lookbook preview with the truncate-css and Truncate component to see if there's any bad effects there?

[smockle]

Sure! To clarify, are you asking for two stories—one using primer/css’ truncate and one using primer/view_components’ Truncate? Or, does the Truncate component use the truncate CSS under-the-hood, such that only a single story is necessary?

[jonrohan]

I think you could use the deprecated Primer::Truncate for the CSS one and the Primer::Beta::Truncate for the standard way.

[smockle]

Stories added!

• Breadcrumbs > WithDeprecatedTruncate
• Breadcrumbs > WithBetaTruncate

I don’t see any bad effects from removing white-space: nowrap.

[github-actions]

⚠️ Visual differences found

Our visual comparison tests found UI differences. Please review the differences by viewing the files changed tab to ensure that the changes were intentional.

Review visual differences

[jonrohan]

Awesome thanks!