VACMS-17436: Update links for manage your health care section

[chriskim2311]

Summary

For this PR we are adding 2 new links under the Manage your health care section.

Download VA Health Chat and Connect to VA Care.

Also we changed the header as well to an h2 to fix an a11y defect.

Related issue(s)

department-of-veterans-affairs/va.gov-cms#17436

Testing done

Tested locally at /greater-los-angeles-health-care/

Verified links are working and redirecting to correct address.

Screenshots

What areas of the site does it impact?

VA Health Care system pages

Acceptance criteria

Add VA Health Chat

• add 'chat' USWDS v3 icon
• include aria-hidden="true" on icon
• add link text "Download VA Health Chat" with a link [https://mobile.va.gov/app/va-health-chat]

Add VA Health connect

• add 'phone' USWDS v3 icon
• include aria-hidden="true" on icon
• add link text "Connect to VA care" with a link https://www.va.gov/health/connect-to-va-care/index.asp

Additional Acceptance Criteria

• all existing links remain
• new links should appear below existing links
• Change header to h2 (currently h3)

Quality Assurance & Testing

• I fixed|updated|added unit tests and integration tests for each feature (if applicable).
• No sensitive information (i.e. PII/credentials/internal URLs/etc.) is captured in logging, hardcoded, or specs
• Linting warnings have been addressed
• Documentation has been updated (link to documentation *if necessary)
• Screenshot of the developed feature is added
• Accessibility testing has been performed

Error Handling

• Browser console contains no warnings or errors.
• Events are being sent to the appropriate logging solution
• Feature/bug has a monitor built into Datadog or Grafana (if applicable)

[va-vfs-bot]

Icon found

Icons can be decorative, but sometimes they are used to convey meaning. If there are any semantics associated with an icon, those semantics should also be conveyed to a screen reader.

What you can do

Review the markup and see if the icon provides information that isn't represented textually, or wait for a VSP review.

Note:

Font Awesome is deprecated. Please use va-icon instead. For more information, visit the migration documentation: Migrate from font awesome to va-icon

[laflannery]

@chriskim2311 aria-hidden was added on the va-link which is not correct this is for the icon only and in fact is already being done automatically because we are using va-icon. Can you remove this from the links?

[randimays]

There's an additional AC in the ticket about keeping these links "below existing links" but on mobile they are nested within the other links per the structure:

Could we confirm with Michelle & design what the behavior should be on mobile? (If we need to reorder things, we can use flex / order to achieve this simply, I think).

[laflannery]

@randimays Nice catch! Unfortunately though I believe flex order is the property that makes the tab order and the visual order off and confusing (If I'm thinking of the right thing?) However I had a different question for Design I pinged Amanda on in Slack and I will add this to that thread

[va-vfs-bot]

Icon found

Icons can be decorative, but sometimes they are used to convey meaning. If there are any semantics associated with an icon, those semantics should also be conveyed to a screen reader.

What you can do

Review the markup and see if the icon provides information that isn't represented textually, or wait for a VSP review.

Note:

Font Awesome is deprecated. Please use va-icon instead. For more information, visit the migration documentation: Migrate from font awesome to va-icon

[laflannery]

Looks good!

[chriskim2311]

@randimays Can you review this PR thanks!

[IGallupSoCo]

LGTM