[Additional Info] Chevron and underline in va-additional-info component do not meet minimum color contrast ratio

[andaleliz]

Bug Report

What happened

The chevron icon and underline in the va-additional-info component use primary-alt-dark as a fill color, which does not meet minimum color contrast ratio for WCAG Success Criteria 1.4.11.

What I expected to happen

Since the chevron and underline are the sole methods of communicating visually that this is an expandable component, I expect both would have a minimum contrast ratio of 3:1.

Steps to reproduce:

1. Check out the va-additional-info component in Storbook.
2. Use inspect tools to verify the color of the icon and dotted line are color-primary-alt-dark aka #00a6d2
3. Plug the hex value #00a6d2 into your favorite contrast checker tool (here's one if you don't have a fave)
4. See the contrast ratio is 2.84:1

Possible solution

Update CSS variable for icon and dotted line to color-primary or color-primary-alt-darkest. I don't have a strong opinion either way, as long as it meets a11y success criteria.

For consistency you may want to also update the blue left border to match, though I don't believe the blue border is part of the bug issue since the success criteria is related to signifying interactivity and the border appears after the interaction.

[GnatalieH]

@andaleliz we want to keep all of the elements the same blue color, for the sake of simplicity and good design, so I'd update the ticket to mention the blue left border, too. Thanks.

[andaleliz]

I don't believe the blue border is part of the bug issue though. The success criteria is related to signifying interactivity and the border appears after the interaction.

If the DSC wants to update that for consistency too, I'm cool with that, but I think it's a separate thing. I can add a note about it though.

[GnatalieH]

Whatever the case, we want everything to be the same color and that was part of the original DSC ask. So handling it together seems to make sense, from a development perspective, even though the blue border isn't specifically part of the bug. I just want to make sure we aren't using different blue colors, which would make things worse IMO.

[andaleliz]

Yep, I totally agree with you! I just want to keep things focused in the tickets I create. In the past, things can get muddy when I group multiple things together, so I try to keep my bug reports as simple as possible.

If the design system team decides to address this, I imagine separate design and FE tickets would spin out of this and the team can group things in whatever way is most efficient for them.

[humancompanion-usds]

I'm going to move the color to primary-alt-darkest which is #046b99 and passes. I'm grabbing this since we're adding guidance on Additional Info. I'll also update Sketch.

[humancompanion-usds]

Reopening to track the Sketch changes.

[GnatalieH]

This looks good to me @humancompanion-usds and @caw310. I checked the Sketch library.

[humancompanion-usds]

Actually, I tested the responsiveness of the content, as Liz raised that in one of the issues as a reason she has to detach the symbol, and sure enough the content was not responding how I thought it might. So I compared notes with the Card component in USWDS and found that it pins content to the left, top, and right. I was missing the pin to the right which caused it to behave quite oddly. Anyway, fixed, but I haven't starred a new release yet. Let's do that once the buttons are in.

[GnatalieH]

@humancompanion-usds thanks for figuring that out! I would've never thought to pin it to the right, either. I spent HOURS on this component trying to make it responsive when I updated it months ago. Thanks!