Unify Breadcrumbs + fix a11y issues

.changeset/fair-countries-taste.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Unify Breadcrumbs + fix a11y issue

packages/react/src/Breadcrumbs/Breadcrumbs.tsx

@@ -15,11 +15,14 @@ const Wrapper = styled.li`
   white-space: nowrap;
   list-style: none;
   &::after {
-    padding-right: 0.5em;
-    padding-left: 0.5em;
-    color: ${get('colors.fg.muted')};
     font-size: ${get('fontSizes.1')};
-    content: '/';
+    content: '';
+    display: inline-block;
+    height: 0.8em;
+    margin: 0 0.5em;
+    border-right: 0.1em solid;
+    border-color: ${get('colors.fg.muted')};
+    transform: rotate(15deg) translateY(0.0625em);
   }
   &:first-child {
     margin-left: 0;
@@ -67,13 +70,17 @@ const BreadcrumbsItem = styled.a.attrs<StyledBreadcrumbsItemProps>(props => ({
   display: inline-block;
   font-size: ${get('fontSizes.1')};
   text-decoration: none;
-  &:hover {
+  &:hover,
+  &:focus {
     text-decoration: underline;
   }
   &.selected {
     color: ${get('colors.fg.default')};
     pointer-events: none;
   }
+  &.selected:focus {
+    text-decoration: none;
+  }
   ${sx};
 `
 

packages/react/src/Breadcrumbs/__tests__/__snapshots__/BreadcrumbsItem.test.tsx.snap

@@ -9,7 +9,8 @@ exports[`Breadcrumbs.Item respects the "selected" prop 1`] = `
   text-decoration: none;
 }
 
-.c0:hover {
+.c0:hover,
+.c0:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
@@ -19,6 +20,11 @@ exports[`Breadcrumbs.Item respects the "selected" prop 1`] = `
   pointer-events: none;
 }
 
+.c0.selected:focus {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
 <a
   aria-current="page"
   className="c0 selected"