Status Variant of Process list uses color alone to convey meaning

[jeana-adhoc]

Bug Report

• I’ve searched for any related issues and avoided creating a duplicate issue.

Here are the other tickets that have been tagged with va-process-list

What happened

The Status Version of the process list relies on color alone to convey meaning. This is a violation of wcag 1.4.1 and VA Experience standard User can perceive all meaningful elements.

The active state of the status list relies on blue to imply the active/current state, and the pending state relies on grey to imply a pending/not-yet state. The active state does include "Current" as sr-only text, and the pending state does include "Pending" as sr-only text, but this is still not visible on the screen.

This is a screenshot of how this component is displaying in our project:

What I expected to happen

I expected additional, non-color clues in the component to indicate why these items were different colors.

Ideas:

1. This could be accomplished by including an icon for active and pending and default states. The flag icon to indicate current process (CST uses this in their current accordion statuses); The history (clock) icon to indicate pending.

2. Or, it could include eyebrow text that's visible on the screen (as well as accessible by a screen reader). Current or Pending would appear above the heading of the step, and next to the number with a circle.

This status variation is not used in USWDS

Reproducing

• Formation version:
• Device: (e.g. iPhone 8, Macbook)
• Browser: (e.g. Firefox, IE 11)

Steps to reproduce:

Urgency

How urgent is this request? Please select the appropriate option below and/or provide details

• This bug is blocking work currently in progress
• This bug is affecting work currently in progress but we have a workaround
• This bug is blocking work planned within the next few sprints
• This bug is not blocking any work
• Other

Details

I needed to get this documented for an accessibility foundational test ticket. Typically I would have liked to work more towards providing a solution here. I totally understand if DST wants to put this back in my court to provide a solution. But, since this is in the VADS, I think other teams may end up with similar issues if they use this component.

[caw310]

Hey team! Please add your planning poker estimate with Zenhub @Andrew565 @ataker @harshil1793 @it-harrison @jamigibbs @micahchiang @powellkerry @rsmithadhoc

[humancompanion-usds]

Design System team is going to come up with designs but, I don't think we're blocked. We could add text to the descriptive text to indicate the state information. Let's discuss @jeana-adhoc

[caw310]

Since this isn't a blocker, moving this to a future sprint since this was added as unplanned.

[Andrew565]

@LWWright7 Could you please link the updated design for Process List here?

[caw310]

Here is the design ticket that should have link to Figma: #3278

[micahchiang]

Current:

Updated Design:

[powellkerry]

@LWWright7 The color of the eyebrow text in figma is #323a45, but it doesn't look like that color exists in USWDS. Looking in AirTable the equivalent should be #3d4551. Let me know if that isn't correct.

[LWWright7]

Thanks for catching this @powellkerry !! It was created incorrectly in the token, but it turns out that it's the same style as the Tag component so I used that text style instead.

This should be fixed now. Thanks Kerry!