va-process-list: accessibility updates (staging review)

[powellkerry]

Chromatic

https://65235-process-list-accessibility--60f9b557105290003b387cd5.chromatic.com

Description

• add sr-only text for statuses (pending, active, and complete)
• choose darker color for pending status that meets accessibility requirements
• add alt text to checkbox image in css

Closes department-of-veterans-affairs/va.gov-team#65235

Testing done

Local testing with Chrome and Mac VoiceOver

Screenshots

Only visual change is to the color on pending.

Before:

After:

Acceptance criteria

• [ ]

Definition of done

• Documentation has been updated, if applicable
• A link has been provided to the originating GitHub issue (or connected to it via ZenHub)

[Andrew565]

LGTM

[rsmithadhoc]

The changes for the collab cycle feedback looked good to me. Those additional SR only messages read out fine.

However, I noticed that the checkmark icon doesn't show in Firefox. I cleared site data and tried a private window but got the same result. It correctly read out "1" that is showing, and then the new "Completed:" label, so I don't have any huge concern for accessibility, but something we should fix. If it isn't something quick, a new issue is fine since everything mentioned was addressed and this may have been pre-existing. Everything in Chrome looked good, including reading the alt text for the icon.

[powellkerry]

@rsmithadhoc the update I added to include alt text for the css image was not supported in Firefox or Safari. I have added a fallback declaration which fixes this issue.

::slotted(va-process-list-item[checkmark='true']):before {
  color: var(--color-green) !important;
  border-color: var(--color-green) !important;
  content: url(../../assets/green-check.svg) !important; // Alt text is currently not supported in FF and Safari, This is a fallback declaration (10/27/2023)
  content: url(../../assets/green-check.svg) / "Completed" !important;
}

[rsmithadhoc]

Thanks @powellkerry, looks good to me!