From bc4efcd3d561d6c616d6c44597799d0c5f2626b1 Mon Sep 17 00:00:00 2001
From: Lene Gadewoll <lene.gadewoll@elastic.co>
Date: Tue, 2 Apr 2024 10:57:53 +0200
Subject: [PATCH 1/5] refactor(EuiBreadcrumb): update color to ensure min.
 color contrast 4.5

---
 .../breadcrumbs/_breadcrumb_content.styles.ts | 23 ++++++++++++++-----
 .../header_breadcrumbs.stories.tsx            |  1 -
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/components/breadcrumbs/_breadcrumb_content.styles.ts b/src/components/breadcrumbs/_breadcrumb_content.styles.ts
index ff3a8952be7..b639ee524f3 100644
--- a/src/components/breadcrumbs/_breadcrumb_content.styles.ts
+++ b/src/components/breadcrumbs/_breadcrumb_content.styles.ts
@@ -8,7 +8,7 @@
 
 import { css } from '@emotion/react';
 import { UseEuiTheme } from '../../services';
-import { transparentize } from '../../services/color';
+import { tintOrShade } from '../../services/color';
 import {
   euiFontSize,
   euiTextTruncate,
@@ -17,12 +17,23 @@ import {
   logicalBorderRadiusCSS,
   mathWithUnits,
 } from '../../global_styling';
+import { euiButtonColor } from '../../themes/amsterdam/global_styling/mixins/button';
 
 /**
  * Styles cast to inner <a>, <button>, <span> elements
  */
 export const euiBreadcrumbContentStyles = (euiThemeContext: UseEuiTheme) => {
-  const { euiTheme } = euiThemeContext;
+  const { euiTheme, colorMode } = euiThemeContext;
+  const breadcrumbButtonColor = euiButtonColor(euiThemeContext, 'primary');
+  const breadcrumbTextColors = {
+    backgroundColor: tintOrShade(
+      euiTheme.colors.darkestShade,
+      colorMode === 'DARK' ? 0.7 : 0.85,
+      colorMode
+    ),
+    color: tintOrShade(euiTheme.colors.darkestShade, 0.2, colorMode),
+  };
+
   return {
     euiBreadcrumb__content: css`
       /* Unset EuiLink's bolder font weight */
@@ -72,7 +83,7 @@ export const euiBreadcrumbContentStyles = (euiThemeContext: UseEuiTheme) => {
     `,
     application: css`
       ${euiFontSize(euiThemeContext, 'xs')}
-      background-color: ${transparentize(euiTheme.colors.darkestShade, 0.2)};
+      background-color: ${breadcrumbTextColors.backgroundColor};
       clip-path: polygon(
         0 0,
         calc(100% - ${euiTheme.size.s}) 0,
@@ -81,15 +92,15 @@ export const euiBreadcrumbContentStyles = (euiThemeContext: UseEuiTheme) => {
         0 100%,
         ${euiTheme.size.s} 50%
       );
-      color: ${euiTheme.colors.darkestShade};
+      color: ${breadcrumbTextColors.color};
       line-height: ${euiTheme.size.base};
       ${logicalCSS('padding-vertical', euiTheme.size.xs)}
       ${logicalCSS('padding-horizontal', euiTheme.size.base)}
 
       &:is(a),
       &:is(button) {
-        background-color: ${transparentize(euiTheme.colors.primary, 0.2)};
-        color: ${euiTheme.colors.link};
+        background-color: ${breadcrumbButtonColor.backgroundColor};
+        color: ${breadcrumbButtonColor.color};
 
         :focus {
           ${euiFocusRing(euiThemeContext, 'inset')}
diff --git a/src/components/header/header_breadcrumbs/header_breadcrumbs.stories.tsx b/src/components/header/header_breadcrumbs/header_breadcrumbs.stories.tsx
index d82c1fdaf70..ea49fefbcb4 100644
--- a/src/components/header/header_breadcrumbs/header_breadcrumbs.stories.tsx
+++ b/src/components/header/header_breadcrumbs/header_breadcrumbs.stories.tsx
@@ -50,7 +50,6 @@ export const Playground: Story = {
       },
       {
         text: 'Breadcrumb 2',
-        href: '#',
       },
       {
         text: 'Current',

From 857c2ec4c645e632a0b8c5494f3b28cb5eda1477 Mon Sep 17 00:00:00 2001
From: Lene Gadewoll <lene.gadewoll@elastic.co>
Date: Tue, 2 Apr 2024 11:32:36 +0200
Subject: [PATCH 2/5] changelog

---
 changelogs/upcoming/7643.md | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 changelogs/upcoming/7643.md

diff --git a/changelogs/upcoming/7643.md b/changelogs/upcoming/7643.md
new file mode 100644
index 00000000000..091d26b3387
--- /dev/null
+++ b/changelogs/upcoming/7643.md
@@ -0,0 +1 @@
+- Updated `EuiBreadcrumb` styles to ensure min. required color contrast
\ No newline at end of file

From 00f53a061b000d825a19a1a7d479d05157b82fef Mon Sep 17 00:00:00 2001
From: Lene Gadewoll <lene.gadewoll@elastic.co>
Date: Tue, 2 Apr 2024 19:22:40 +0200
Subject: [PATCH 3/5] refactor(EuiBreadcrumb): update style variable naming,
 add comments

---
 .../breadcrumbs/_breadcrumb_content.styles.ts   | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/components/breadcrumbs/_breadcrumb_content.styles.ts b/src/components/breadcrumbs/_breadcrumb_content.styles.ts
index b639ee524f3..811a6809722 100644
--- a/src/components/breadcrumbs/_breadcrumb_content.styles.ts
+++ b/src/components/breadcrumbs/_breadcrumb_content.styles.ts
@@ -24,8 +24,13 @@ import { euiButtonColor } from '../../themes/amsterdam/global_styling/mixins/but
  */
 export const euiBreadcrumbContentStyles = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme, colorMode } = euiThemeContext;
-  const breadcrumbButtonColor = euiButtonColor(euiThemeContext, 'primary');
-  const breadcrumbTextColors = {
+
+  // Reuse button colors for `type="application`" clickable breadcrumbs
+  const applicationButtonColors = euiButtonColor(euiThemeContext, 'primary');
+
+  // Create custom darker gray colors for non-clickable application breadcrumbs
+  // The numbers/ratios are fairly specific here to pass WCAG AA contrast minimums
+  const applicationTextColors = {
     backgroundColor: tintOrShade(
       euiTheme.colors.darkestShade,
       colorMode === 'DARK' ? 0.7 : 0.85,
@@ -83,7 +88,7 @@ export const euiBreadcrumbContentStyles = (euiThemeContext: UseEuiTheme) => {
     `,
     application: css`
       ${euiFontSize(euiThemeContext, 'xs')}
-      background-color: ${breadcrumbTextColors.backgroundColor};
+      background-color: ${applicationTextColors.backgroundColor};
       clip-path: polygon(
         0 0,
         calc(100% - ${euiTheme.size.s}) 0,
@@ -92,15 +97,15 @@ export const euiBreadcrumbContentStyles = (euiThemeContext: UseEuiTheme) => {
         0 100%,
         ${euiTheme.size.s} 50%
       );
-      color: ${breadcrumbTextColors.color};
+      color: ${applicationTextColors.color};
       line-height: ${euiTheme.size.base};
       ${logicalCSS('padding-vertical', euiTheme.size.xs)}
       ${logicalCSS('padding-horizontal', euiTheme.size.base)}
 
       &:is(a),
       &:is(button) {
-        background-color: ${breadcrumbButtonColor.backgroundColor};
-        color: ${breadcrumbButtonColor.color};
+        background-color: ${applicationButtonColors.backgroundColor};
+        color: ${applicationButtonColors.color};
 
         :focus {
           ${euiFocusRing(euiThemeContext, 'inset')}

From b667d657b1cd85f89d44c535ca85de6f11e10fbc Mon Sep 17 00:00:00 2001
From: Lene Gadewoll <lene.gadewoll@elastic.co>
Date: Tue, 2 Apr 2024 19:25:11 +0200
Subject: [PATCH 4/5] docs: update changelog

---
 changelogs/upcoming/7643.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/changelogs/upcoming/7643.md b/changelogs/upcoming/7643.md
index 091d26b3387..be401b67556 100644
--- a/changelogs/upcoming/7643.md
+++ b/changelogs/upcoming/7643.md
@@ -1 +1,3 @@
-- Updated `EuiBreadcrumb` styles to ensure min. required color contrast
\ No newline at end of file
+**Accessibility**
+
+- Updated `EuiHeaderBreadcrumb` styles to ensure min. required color contrast
\ No newline at end of file

From 353ecf5a7f48c8e01aaa402e20c52dff208cba8f Mon Sep 17 00:00:00 2001
From: Lene Gadewoll <lene.gadewoll@elastic.co>
Date: Thu, 4 Apr 2024 10:06:07 +0200
Subject: [PATCH 5/5] refactor(Euibreadcrumb): separate styles

- updates styles to scope design changes to page breadcrumbs only

+ re-adds font-weight for application breadcrumbs
---
 .../breadcrumbs/__snapshots__/breadcrumb.test.tsx.snap      | 2 +-
 src/components/breadcrumbs/_breadcrumb_content.styles.ts    | 1 +
 src/components/breadcrumbs/_breadcrumb_content.tsx          | 5 ++++-
 .../__snapshots__/header_breadcrumbs.test.tsx.snap          | 6 +++---
 4 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/breadcrumbs/__snapshots__/breadcrumb.test.tsx.snap b/src/components/breadcrumbs/__snapshots__/breadcrumb.test.tsx.snap
index 5fe40166674..aae72d83cd5 100644
--- a/src/components/breadcrumbs/__snapshots__/breadcrumb.test.tsx.snap
+++ b/src/components/breadcrumbs/__snapshots__/breadcrumb.test.tsx.snap
@@ -20,7 +20,7 @@ exports[`EuiBreadcrumbCollapsed renders a ... breadcrumb with collapsed content
         class="euiPopover emotion-euiPopover-inline-block-euiBreadcrumb__popoverWrapper"
       >
         <button
-          class="euiLink euiBreadcrumb__content emotion-euiLink-subdued-euiBreadcrumb__popoverButton-euiBreadcrumb__content-application-isInteractive"
+          class="euiLink euiBreadcrumb__content emotion-euiLink-subdued-euiBreadcrumb__popoverButton-euiBreadcrumb__content-application"
           title="See collapsed breadcrumbs"
           type="button"
         >
diff --git a/src/components/breadcrumbs/_breadcrumb_content.styles.ts b/src/components/breadcrumbs/_breadcrumb_content.styles.ts
index 811a6809722..be36e19dbaf 100644
--- a/src/components/breadcrumbs/_breadcrumb_content.styles.ts
+++ b/src/components/breadcrumbs/_breadcrumb_content.styles.ts
@@ -88,6 +88,7 @@ export const euiBreadcrumbContentStyles = (euiThemeContext: UseEuiTheme) => {
     `,
     application: css`
       ${euiFontSize(euiThemeContext, 'xs')}
+      font-weight: ${euiTheme.font.weight.medium};
       background-color: ${applicationTextColors.backgroundColor};
       clip-path: polygon(
         0 0,
diff --git a/src/components/breadcrumbs/_breadcrumb_content.tsx b/src/components/breadcrumbs/_breadcrumb_content.tsx
index bb20a31b21e..fff31ef6f89 100644
--- a/src/components/breadcrumbs/_breadcrumb_content.tsx
+++ b/src/components/breadcrumbs/_breadcrumb_content.tsx
@@ -49,11 +49,13 @@ export const EuiBreadcrumbContent: FunctionComponent<
   truncateLastBreadcrumb,
   ...rest
 }) => {
+  const isApplication = type === 'application';
+
   const classes = classNames('euiBreadcrumb__content', className);
 
   const styles = useEuiMemoizedStyles(euiBreadcrumbContentStyles);
   const cssStyles = [styles.euiBreadcrumb__content, styles[type]];
-  if (type === 'application') {
+  if (isApplication) {
     if (isOnlyBreadcrumb) {
       cssStyles.push(styles.applicationStyles.onlyChild);
     } else if (isFirstBreadcrumb) {
@@ -74,6 +76,7 @@ export const EuiBreadcrumbContent: FunctionComponent<
 
   const interactionStyles =
     (isInteractiveBreadcrumb || isBreadcrumbWithPopover) &&
+    !isApplication &&
     styles.isInteractive;
 
   return (
diff --git a/src/components/header/header_breadcrumbs/__snapshots__/header_breadcrumbs.test.tsx.snap b/src/components/header/header_breadcrumbs/__snapshots__/header_breadcrumbs.test.tsx.snap
index 3ced962f45a..ddd8400aaae 100644
--- a/src/components/header/header_breadcrumbs/__snapshots__/header_breadcrumbs.test.tsx.snap
+++ b/src/components/header/header_breadcrumbs/__snapshots__/header_breadcrumbs.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`EuiHeaderBreadcrumbs is rendered 1`] = `
       data-test-subj="euiBreadcrumb"
     >
       <a
-        class="euiLink euiBreadcrumb__content customClass emotion-euiLink-subdued-euiBreadcrumb__content-application-firstChild-isTruncated-isInteractive"
+        class="euiLink euiBreadcrumb__content customClass emotion-euiLink-subdued-euiBreadcrumb__content-application-firstChild-isTruncated"
         data-test-subj="breadcrumbsAnimals"
         href="#"
         rel="noreferrer"
@@ -28,7 +28,7 @@ exports[`EuiHeaderBreadcrumbs is rendered 1`] = `
       data-test-subj="euiBreadcrumb"
     >
       <button
-        class="euiLink euiBreadcrumb__content emotion-euiLink-subdued-euiBreadcrumb__content-application-isTruncated-isInteractive"
+        class="euiLink euiBreadcrumb__content emotion-euiLink-subdued-euiBreadcrumb__content-application-isTruncated"
         title="Reptiles"
         type="button"
       >
@@ -40,7 +40,7 @@ exports[`EuiHeaderBreadcrumbs is rendered 1`] = `
       data-test-subj="euiBreadcrumb"
     >
       <a
-        class="euiLink euiBreadcrumb__content emotion-euiLink-subdued-euiBreadcrumb__content-application-isTruncated-isInteractive"
+        class="euiLink euiBreadcrumb__content emotion-euiLink-subdued-euiBreadcrumb__content-application-isTruncated"
         href="#"
         rel="noreferrer"
         title="Boa constrictor"