DP-32007 [a11y] Download link normal state indicator

[ygannett]

Any PRs being created needs a changelog.txt file before being merged into dev. See: Change Log Instructions

Description

• Add a 1-px underline to indicate a link object to a download link at normal state matching the RTE link style

  

• Change the link underline color from Bay Blue 50% tint to Bay Blue 40 % tint to meet the WCAG required color contrast 3:1 against the white background

• Set up a new color variable for the link underline as $c-link (cf, link text has its own variable as $c-font-link)

  • The color is applied to non-text elements to indicate a link (borders, underlines, icons)
  • The color is used for a normal and a hover state of links
  • The variables used for link underlines ($c-primary-lighter, $c-bay-blue-lighter, and the variations of rgba settings [e,g, rgba($c-primary, .5)] ) are consolidated to $c-link
  • $c-primary-lighter and $c-bay-blue-lighter remain to be Bay Blue 50% tint (any decorative elements with these variables retain their intended colors. )

• Add an underline at hover to the button links for the show/hide (expand/close) to indicate the interactive element

  • The same visual components in different templates had inconsistent behaviors (show or not show an underline at hover).
  • Set $c-link for their chevron on the right and underline at hover Before :

After:

• [TEST] Change the color of the arrow icon with links to match the link text color to meet the WCAG required color contrast against the light blue background of the card and the callout link
  • Use the variable $c-font-link as fill: $c-font-link (if we decide to the change color or set up a color variable for the arrow icon, they can be found easily)

Note: The Backstop reference screenshots haven't been updated yet.

Related Issue / Ticket

• JIRA issue
• [Github issue]()

Steps to Test

1.

Screenshots

Use something like licecap to capture gifs to demonstrate behaviors.

Additional Notes:

Anything else to add?

Impacted Areas in Application

*

@TODO

*

Today I learned...

[clairesunstudio]

The above suggestions are all about cleaning up the code comments.

I reviewed the Mayflower backstop report, all looks good except for the file icons colors are lighter now. I think we should at least set that to $c-link or even $c-font-link. What do you think?

I also noticed a change in the footnote size. Can you please confirm that it's expected?

[ygannett]

The backstop failure is not related to this PR's change.