Resources & Support: upgrade to va-icon

[randimays]

Description

The Design System team is deprecating Font Awesome and encouraging teams to use <va-icon> where possible by the end of May 2024. Slack post here: https://dsva.slack.com/archives/C03R5SBELQM/p1710776364414359

We need to convert all usage of <i> in this application in vets-website and content-build to <va-icon> to align with the icons in DST's library here: https://design.va.gov/foundation/icons

<va-icon> guidance in Storybook: https://design.va.gov/storybook/?path=/docs/uswds-va-icon--default

Engineering notes

Icons to be converted:

1. https://github.com/department-of-veterans-affairs/vets-website/blob/17621d7d0b4c4a3df774bd3a742aeda72cdae797/src/applications/resources-and-support/components/SearchBar.jsx#L128
2. https://github.com/department-of-veterans-affairs/vets-website/blob/17621d7d0b4c4a3df774bd3a742aeda72cdae797/src/applications/resources-and-support/components/SearchBar.jsx#L135
3. https://github.com/department-of-veterans-affairs/content-build/blob/267e8c01b81d33570a2d97cf9f71e93b23f996fb/src/site/components/browse-by-audience.drupal.liquid#L33
4. https://github.com/department-of-veterans-affairs/content-build/blob/267e8c01b81d33570a2d97cf9f71e93b23f996fb/src/site/paragraphs/lists_of_links.drupal.liquid#L26
5. https://github.com/department-of-veterans-affairs/content-build/blob/267e8c01b81d33570a2d97cf9f71e93b23f996fb/src/site/layouts/media_list_images.drupal.liquid#L82

User story

AS A PO/PM for products/features/applications managed by the Public Websites team I WANT our features/products/applicates migrated to va-icon where appropriate SO THAT when the migration to va-icon and deprecation of Font Awesome takes place, there won't be degraded Veteran-facing experiences in VA.gov.

Quality / testing notes

• [ ] Spot check of all converted icons on mobile and desktop
• [ ] Update any unit / e2e tests where applicable

Acceptance criteria

• [ ] a11y review
• [ ] all instances of <i> that can be converted to <va-icon> are converted

[randimays]

Mid-sprint update: we have been blocked on using va-icon in content-build since 4/19. DST is still working on a fix; it's not clear whether it will be released before the end of our sprint, but flagging the risk here.

• Initial Slack thread to describe the content-build issue
• First content-build fix from DST
• Continuing content-build issues Slack thread

[randimays]

@thejordanwood The slider icon for mobile Resources & Support search does not seem to have an equivalent in USWDS (https://designsystem.digital.gov/components/icon/). Is there an icon there that you think would fit with this interface? Also including the open version of this widget for reference.

We could move to an expand/collapse icon set?

[thejordanwood]

I think we should align with the accordion design and use the subtract and remove icons.

@aklausmeier I want to double check with you on this one since there are a couple of different options we can use, like the expand less/more icons that Randi suggested.

[aklausmeier]

Agree with Jordan, let's use the add and subtract USWDS icons.

[randimays]

Thanks @thejordanwood and @aklausmeier!

[randimays]

Still iterating on design & accessibility feedback for these icons. This will carry over.

[laflannery]

@randimays I think this is already in Prod - can that be true? I encountered it when I was doing my a11y audit of Resources & Support

[randimays]

@laflannery The vets-website piece of this is already in prod (that's the mobile expand/collapse behavior). The content-build piece (PR here: https://github.com/department-of-veterans-affairs/content-build/pull/2086) has not made it there yet.

[randimays]

The content-build piece has been validated in production. We cannot verify the browse-by-audience and media_list_images changes in production as we do not have production usage of them but we have high confidence in their usage / no regression. Closing!