Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update CSS for breadcrumb slash separator #1424

Merged
merged 3 commits into from
May 25, 2021
Merged

Conversation

khiga8
Copy link
Contributor

@khiga8 khiga8 commented May 25, 2021

This PR updates the css used to render the breadcrumb separator and ensures that the separator is not announced by screen readers. Right now, the separator is announced as "slash" but this is unnecessary and can be potentially distracting:

From wai-aria breadcrumb practices:

The separators are part of the visual presentation that signifies the breadcrumb trail, which is already semantically represented by the nav element with its label of Breadcrumb. So, using a display technique that is not represented in the accessibility tree used by screen readers prevents redundant and potentially distracting verbosity.

before:
breadcrumb before change

after:
breadcrumb after change

@changeset-bot
Copy link

changeset-bot bot commented May 25, 2021

🦋 Changeset detected

Latest commit: 31715cb

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

This PR includes changesets to release 1 package
Name Type
@primer/css 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

content: "/";
margin: 0 $em-spacer-5;
display: inline-block;
transform: rotate(15deg);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice!

@jonrohan jonrohan merged commit af5787b into main May 25, 2021
@jonrohan jonrohan deleted the kh-update_breadcrumbs_divider branch May 25, 2021 23:06
@primer-css primer-css mentioned this pull request May 25, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants