Update CSS for breadcrumb slash separator

primer · May 25, 2021 · 30597af · 30597af
1 parent e02694d
commit 30597af
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/.changeset/violet-peaches-retire.md b/.changeset/violet-peaches-retire.md
@@ -0,0 +1,5 @@
+---
+'@primer/css': patch
+---
+
+Ensures that the visual slash separator for breadcrumbs is not announced by screenreaders.
diff --git a/src/breadcrumb/breadcrumb.scss b/src/breadcrumb/breadcrumb.scss
@@ -6,10 +6,12 @@
   list-style: none;
 
   &::after {
-    padding-right: $em-spacer-5;
-    padding-left: $em-spacer-5;
-    color: var(--color-text-disabled);
-    content: "/";
+    margin: 0 $em-spacer-5;
+    display: inline-block;
+    transform: rotate(15deg);
+    border-right: 0.1em solid var(--color-text-disabled);;
+    height: 0.8em;
+    content: '';
   }
 
   &:first-child {