Update CSS for breadcrumb slash separator

khiga8 · khiga8 · commit 30597af94da4 · 2021-05-25T15:31:16.000-07:00
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 {

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@primer/css': patch
 +---
++
 +Ensures that the visual slash separator for breadcrumbs is not announced by screenreaders.