[EuiSteps] Create High Contrast Color for Disabled Step Titles

src-docs/src/views/steps/status.tsx

@@ -55,6 +55,21 @@ export default () => {
     );
   }
 
+  let disabledButton;
+  if (status !== 'disabled') {
+    disabledButton = (
+      <EuiButton color="accent" onClick={() => setStatus('disabled')}>
+        Disabled
+      </EuiButton>
+    );
+  } else {
+    disabledButton = (
+      <EuiButton color="accent" onClick={() => setStatus('incomplete')}>
+        Reset
+      </EuiButton>
+    );
+  }
+
   const firstSetOfSteps = [
     {
       title: 'Normal step',
@@ -75,6 +90,7 @@ export default () => {
             <EuiFlexItem grow={false}> {completeButton} </EuiFlexItem>
             <EuiFlexItem grow={false}> {warningButton} </EuiFlexItem>
             <EuiFlexItem grow={false}> {dangerButton} </EuiFlexItem>
+            <EuiFlexItem grow={false}> {disabledButton} </EuiFlexItem>
           </EuiFlexGroup>
         </>
       ),

src/components/steps/step.styles.ts

@@ -7,7 +7,7 @@
  */
 
 import { css } from '@emotion/react';
-import { UseEuiTheme } from '../../services';
+import { UseEuiTheme, makeHighContrastColor } from '../../services';
 import { mathWithUnits, logicalCSS } from '../../global_styling';
 
 export const euiStepVariables = (euiTheme: UseEuiTheme['euiTheme']) => {
@@ -132,7 +132,9 @@ export const euiStepTitleStyles = (euiThemeContext: UseEuiTheme) => {
     `,
     euiStep__title: css``,
     isDisabled: css`
-      color: ${euiTheme.colors.disabledText};
+      color: ${makeHighContrastColor(euiTheme.colors.disabledText)(
+        euiTheme.colors.body
+      )};
     `,
     // Sizes
     m: css``,

src/components/steps/step_horizontal.styles.ts

@@ -7,7 +7,7 @@
  */
 
 import { css } from '@emotion/react';
-import { UseEuiTheme } from '../../services';
+import { UseEuiTheme, makeHighContrastColor } from '../../services';
 import {
   euiBreakpoint,
   logicalShorthandCSS,
@@ -135,7 +135,9 @@ export const euiStepHorizontalTitleStyles = (euiThemeContext: UseEuiTheme) => {
       }
     `,
     disabled: css`
-      color: ${euiTheme.colors.disabledText};
+      color: ${makeHighContrastColor(euiTheme.colors.disabledText)(
+        euiTheme.colors.body
+      )};
     `,
   };
 };

src/components/steps/step_number.styles.ts

@@ -14,7 +14,7 @@ import {
   euiCanAnimate,
   euiAnimScale,
 } from '../../global_styling';
-import { UseEuiTheme } from '../../services';
+import { UseEuiTheme, makeHighContrastColor } from '../../services';
 import { euiStepVariables } from './step.styles';
 import { euiButtonFillColor } from '../../themes/amsterdam/global_styling/mixins';
 
@@ -67,9 +67,11 @@ export const euiStepNumberStyles = (euiThemeContext: UseEuiTheme) => {
       border: ${euiTheme.border.thick};
     `,
     disabled: css`
-      color: ${euiButtonFillColor(euiThemeContext, 'disabled').color};
       background-color: ${euiButtonFillColor(euiThemeContext, 'disabled')
         .backgroundColor};
+      color: ${makeHighContrastColor(euiTheme.colors.disabledText)(
+        euiButtonFillColor(euiThemeContext, 'disabled').backgroundColor
+      )};
     `,
     loading: css`
       background: transparent;

upcoming_changelogs/7032.md

@@ -0,0 +1 @@
+- Improved the contrast ratio of disabled titles within `EuiSteps` and `EuiStepsHorizontal` to meet WCAG AA guidelines.