[EuiBreadcrumb] Update color to ensure min. color contrast

changelogs/upcoming/7643.md

@@ -0,0 +1,3 @@
+**Accessibility**
+
+- Updated `EuiHeaderBreadcrumb` styles to ensure min. required color contrast

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"
         >

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,28 @@ 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;
+
+  // 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,
+      colorMode
+    ),
+    color: tintOrShade(euiTheme.colors.darkestShade, 0.2, colorMode),
+  };
+
   return {
     euiBreadcrumb__content: css`
       /* Unset EuiLink's bolder font weight */
@@ -72,7 +88,8 @@ export const euiBreadcrumbContentStyles = (euiThemeContext: UseEuiTheme) => {
     `,
     application: css`
       ${euiFontSize(euiThemeContext, 'xs')}
-      background-color: ${transparentize(euiTheme.colors.darkestShade, 0.2)};
+      font-weight: ${euiTheme.font.weight.medium};
+      background-color: ${applicationTextColors.backgroundColor};
       clip-path: polygon(
         0 0,
         calc(100% - ${euiTheme.size.s}) 0,
@@ -81,15 +98,15 @@ export const euiBreadcrumbContentStyles = (euiThemeContext: UseEuiTheme) => {
         0 100%,
         ${euiTheme.size.s} 50%
       );
-      color: ${euiTheme.colors.darkestShade};
+      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: ${transparentize(euiTheme.colors.primary, 0.2)};
-        color: ${euiTheme.colors.link};
+        background-color: ${applicationButtonColors.backgroundColor};
+        color: ${applicationButtonColors.color};
 
         :focus {
           ${euiFocusRing(euiThemeContext, 'inset')}

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 (

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"

src/components/header/header_breadcrumbs/header_breadcrumbs.stories.tsx

@@ -50,7 +50,6 @@ export const Playground: Story = {
       },
       {
         text: 'Breadcrumb 2',
-        href: '#',
       },
       {
         text: 'Current',