USWDS - Footer: Move social icon images into their own element.

[mejiaj]

Description

Fixes issue #4207.

Improved accessibility of USA Footer's social nav. Social icons were converted to inline images with alt text to ensure there's a meaningful text alternative.

⚠ Requires a manual change to Footer's social navigation.

New markup

<a class="usa-social-link" href="{{ social-network-link }}">
  <img class="usa-social-link__icon" src="path-to-usa-icons/usa-icons/facebook.svg" alt="Facebook">
</a>

Old markup

<a class="usa-social-link usa-social-link--facebook" href="{{ social-network-link }}">
  <span>Facebook</span>
</a>

Preview links

Footer (default) →
Footer Big →

Additional information

The reported ANDI issue USWDS <= 2.12.0.

Before you hit Submit, make sure you’ve done whichever of these applies to you:

• Follow the 18F Front End Coding Style Guide and Accessibility Guide.
• Run npm test and make sure the tests for the files you have changed have passed.
• Run your code through HTML_CodeSniffer and make sure it’s error free.
• Title your pull request using this format: [Website] - [UI component]: Brief statement describing what this pull request solves.

[mejiaj]

Odd, locally it builds fine. But on federalist footer--big I see:

https://federalist-3b6ba08e-0df4-44c9-ac73-6fc193b0e19c.app.cloud.gov/preview/uswds/uswds/jm-footer-bg-images/components/detail/footer--big.html

[mejiaj]

We only have the search icon to fix in header besides the social nav icons in footer.

Found background images in Core component. Images related to functionality in bold:

Banner

• Accordion arrow
  No ANDI issue because there's visible button text

Header

• Mobile dropdown accordion
• Desktop dropdown arrow
• Search magnifying glass

Footer

• Logo
• Footer--big accordion
• Social nav icons

Identifier

None

[mejiaj]

Thanks for the feedback! Updated markup in big variant to match.

[thisisdano]

LGTM — Holding til next minor release