[EuiSteps] Accessibility Enhancements for EuiSteps and EuiStepsHorizontal

[breehall]

Originated from this comment in #6850

There are a few accessibility enhancements to be made with EuiSteps and EuiStepsHorizontal. Each is described below.

1. Add a halo to the current step

The current (blue) dot is very similar in hue and intensity to the completed (green) steps. The completed steps do have a black check mark, but at small size I'm not sure this is enough to meet the requirements of SC 1.4.1: Use of Color (Level A). I'd recommend adding a differentiation to the current step, like a bold outer halo of the same color with 2-4px of whitespace between the dot and the outer border.

Proposed solution: Add a halo to the current step that matches its primary color. This change should not be applied to any other status.

---

2. Update disabled text color to meet 4:5.1 contrast ratio (for light mode and dark mode)
   The current coloring of step titles that are disabled do not currently have a good contrast ratio. Let's use a color utility to increase the contrast on the text for better visibility.

[JasonStoltz]

There should be a high contrast styling mix in that we can use to help here.

[breehall]

Hey @andreadelrio, can you take a look at the first item on this list and let know what you think in terms of design? This halo would only be added to the current step (for both vertical and horizontal steps) and should match the color of the step as well.

[andreadelrio]

@1Copenut would any of this achieve the a11y objective behind this change? I mocked the halo as inner as well.

Outer halo

Inner halo

[1Copenut]

Thank you for these comps @andreadelrio. I'm personally a fan of the outer halo, 2px, because it visually bumps the border out of alignment with the others and becomes a hold that my eye latches onto.

I wanted to ask a follow on question about our steps' intent as UI elements.

If I understand correctly, the vertical steps where each one is numbered and all are in blue, are used to outline a set of instructions that must be done in order. If that's correct, does it make sense to offer this style here, or reserve it for the horizontal steps only?

The docs mention this for horizontal steps:

For use when forms/setup instructions can and should be split into multiple pages. Each step should correspond to an individual page of form elements, using the status key to denote the user's progress.

That's where I feel the different style for the current page makes the most impact, where each step is a link to a new page. Users who are done with 3 of 5 steps, and on step 4 will appreciate seeing those check marks on steps 1, 2, and 3, and the bigger halo around the current step 4 in blue.

I hope this makes sense, please ping me if you'd like to discuss in a Zoom chat!

[andreadelrio]

Thank you for these comps @andreadelrio. I'm personally a fan of the outer halo, 2px, because it visually bumps the border out of alignment with the others and becomes a hold that my eye latches onto.

I wanted to ask a follow on question about our steps' intent as UI elements.

If I understand correctly, the vertical steps where each one is numbered and all are in blue, are used to outline a set of instructions that must be done in order. If that's correct, does it make sense to offer this style here, or reserve it for the horizontal steps only?

The docs mention this for horizontal steps:

For use when forms/setup instructions can and should be split into multiple pages. Each step should correspond to an individual page of form elements, using the status key to denote the user's progress.

That's where I feel the different style for the current page makes the most impact, where each step is a link to a new page. Users who are done with 3 of 5 steps, and on step 4 will appreciate seeing those check marks on steps 1, 2, and 3, and the bigger halo around the current step 4 in blue.

I hope this makes sense, please ping me if you'd like to discuss in a Zoom chat!

I think there was a misunderstanding between your initial suggestion Add a halo to the current step and what Bree and then I mocked up (i.e. halo on completed step). I think the halo on the current steps makes perfect sense. I don't see any harm in adding it to both horizontal and vertical steps. I also prefer the outer halo, we should try with 2px.

[breehall]

Thank you both so much! Just to confirm, we will be adding an outer halo of 2px to the current step for both EuiSteps and EuiStepsHorizontal.

[breehall]

Both PRs (#7032 & #7048) have merged, so this issue can be closed.