Skip to content

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

Merged
thisisdano merged 5 commits into
developfrom
jm-footer-bg-images
Dec 9, 2021
Merged

USWDS - Footer: Move social icon images into their own element.#4211
thisisdano merged 5 commits into
developfrom
jm-footer-bg-images

Conversation

@mejiaj

@mejiaj mejiaj commented May 27, 2021

Copy link
Copy Markdown
Contributor

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.
image

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 mejiaj marked this pull request as ready for review May 27, 2021 17:50
@mejiaj mejiaj requested a review from thisisdano May 27, 2021 17:50
@jAigret-Bix jAigret-Bix linked an issue Jun 28, 2021 that may be closed by this pull request
2 tasks
@mejiaj

mejiaj commented Jul 8, 2021

Copy link
Copy Markdown
Contributor Author

@mejiaj

mejiaj commented Jul 8, 2021

Copy link
Copy Markdown
Contributor Author

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

Comment thread src/components/footer/footer--big.njk Outdated
Comment thread src/components/footer/footer--big.njk Outdated
Comment thread src/components/footer/footer--big.njk Outdated
Comment thread src/components/footer/footer--big.njk Outdated
@mejiaj mejiaj requested a review from thisisdano July 21, 2021 13:40
@mejiaj

mejiaj commented Jul 21, 2021

Copy link
Copy Markdown
Contributor Author

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

@thisisdano thisisdano left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM — Holding til next minor release

@thisisdano thisisdano merged commit e00227b into develop Dec 9, 2021
@thisisdano thisisdano deleted the jm-footer-bg-images branch December 9, 2021 18:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Update footer images

3 participants