From cc283422ca4df6a440741c1ea1e5f36768cbfe59 Mon Sep 17 00:00:00 2001
From: "noa.santo" <noa.santo@satellytes.com>
Date: Mon, 2 Sep 2024 16:47:08 +0200
Subject: [PATCH 1/3] fix: change breadcrumb text color from rgb(0, 0, 0, 0.5)
 to rgb(0, 0, 0, 0.65) to make color contrast WCAG AA compliant fix: add
 aria-label and roll to breadcrumb container fix: remove overflow: hidden from
 BreadcrumbContainer to prevent focus outline cutoff

---
 src/components/layout/breadcrumb/breadcrumb.tsx | 3 +--
 src/components/layout/theme.tsx                 | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/layout/breadcrumb/breadcrumb.tsx b/src/components/layout/breadcrumb/breadcrumb.tsx
index 5a8987bfa..8543b7a6a 100644
--- a/src/components/layout/breadcrumb/breadcrumb.tsx
+++ b/src/components/layout/breadcrumb/breadcrumb.tsx
@@ -8,7 +8,6 @@ const BreadcrumbContainer = styled.ol`
   list-style: none;
   display: flex;
   flex-wrap: nowrap;
-  overflow: hidden;
   padding: 0;
 `;
 
@@ -45,7 +44,7 @@ export const Breadcrumb = ({
   breadcrumbEntries,
 }: BreadcrumbProps): JSX.Element => {
   return (
-    <BreadcrumbContainer>
+    <BreadcrumbContainer aria-label="breadcumbs" role="navigation">
       {breadcrumbEntries.map((breadcrumbEntry) => {
         return (
           <BreadcrumbListItem key={breadcrumbEntry.label}>
diff --git a/src/components/layout/theme.tsx b/src/components/layout/theme.tsx
index 8c1875c6d..e54615dda 100644
--- a/src/components/layout/theme.tsx
+++ b/src/components/layout/theme.tsx
@@ -25,7 +25,7 @@ export const theme: DefaultTheme = {
         light: '#3E61EE',
         hover: '#202840',
       },
-      breadcrumb: 'rgba(0, 0, 0, 0.5)',
+      breadcrumb: 'rgba(0, 0, 0, 0.65)',
       link: {
         default: '#3E61EE',
         hover: '#4D79FF',

From 5ac8d36511dc20845b478c37fe7623e4cc901827 Mon Sep 17 00:00:00 2001
From: "noa.santo" <noa.santo@satellytes.com>
Date: Mon, 9 Sep 2024 16:21:11 +0200
Subject: [PATCH 2/3] chore (a11y): use nav landmark instead of role navigation
 on the breadcrumb container

---
 .../layout/breadcrumb/breadcrumb.tsx          | 20 ++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/components/layout/breadcrumb/breadcrumb.tsx b/src/components/layout/breadcrumb/breadcrumb.tsx
index 8543b7a6a..b264cc2d9 100644
--- a/src/components/layout/breadcrumb/breadcrumb.tsx
+++ b/src/components/layout/breadcrumb/breadcrumb.tsx
@@ -44,14 +44,16 @@ export const Breadcrumb = ({
   breadcrumbEntries,
 }: BreadcrumbProps): JSX.Element => {
   return (
-    <BreadcrumbContainer aria-label="breadcumbs" role="navigation">
-      {breadcrumbEntries.map((breadcrumbEntry) => {
-        return (
-          <BreadcrumbListItem key={breadcrumbEntry.label}>
-            <Link to={breadcrumbEntry.pathname}>{breadcrumbEntry.label}</Link>
-          </BreadcrumbListItem>
-        );
-      })}
-    </BreadcrumbContainer>
+    <nav aria-label="breadcrumbs">
+      <BreadcrumbContainer aria-label="breadcumbs">
+        {breadcrumbEntries.map((breadcrumbEntry) => {
+          return (
+            <BreadcrumbListItem key={breadcrumbEntry.label}>
+              <Link to={breadcrumbEntry.pathname}>{breadcrumbEntry.label}</Link>
+            </BreadcrumbListItem>
+          );
+        })}
+      </BreadcrumbContainer>
+    </nav>
   );
 };

From 08c54d2c79c922eead9c84a7ae09b57e5edfbb8a Mon Sep 17 00:00:00 2001
From: "noa.santo" <noa.santo@satellytes.com>
Date: Thu, 19 Sep 2024 17:22:16 +0200
Subject: [PATCH 3/3] fix (a11y): breadcrumb focus outline now works without
 side effects

---
 src/components/layout/breadcrumb/breadcrumb.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/layout/breadcrumb/breadcrumb.tsx b/src/components/layout/breadcrumb/breadcrumb.tsx
index b264cc2d9..8d4ba2edb 100644
--- a/src/components/layout/breadcrumb/breadcrumb.tsx
+++ b/src/components/layout/breadcrumb/breadcrumb.tsx
@@ -8,7 +8,9 @@ const BreadcrumbContainer = styled.ol`
   list-style: none;
   display: flex;
   flex-wrap: nowrap;
-  padding: 0;
+  overflow-x: clip;
+  padding-left: 4px;
+  transform: translateX(-4px);
 `;
 
 const BreadcrumbListItem = styled.li`
@@ -31,6 +33,10 @@ const BreadcrumbListItem = styled.li`
   }
 `;
 
+const BreadcrumbLink = styled(Link)`
+  display: inline-block;
+`;
+
 interface BreadcrumbProps {
   breadcrumbEntries: BreadcrumbEntry[];
 }
@@ -49,7 +55,9 @@ export const Breadcrumb = ({
         {breadcrumbEntries.map((breadcrumbEntry) => {
           return (
             <BreadcrumbListItem key={breadcrumbEntry.label}>
-              <Link to={breadcrumbEntry.pathname}>{breadcrumbEntry.label}</Link>
+              <BreadcrumbLink to={breadcrumbEntry.pathname}>
+                {breadcrumbEntry.label}
+              </BreadcrumbLink>
             </BreadcrumbListItem>
           );
         })}