va-table: Parse html to plain string before setting it to CSS content

[ataker]

Chromatic

https://va-table-encode-header-string--65a6e2ed2314f7b8f98609d8.chromatic.com

Description

Closes [Mobile] va-table issue in mobile where HTML tags are displaying in headers #3503

For the mobile stacked va-table, the headers are set to the CSS content attribute, which is in plain text. If any HTML entities are passed they would show as unencoded, example: '&' becomes '&'. This adds a parser to have it display properly.

QA Checklist

• Component maintains 1:1 parity with design mocks
• Text is consistent with what's been provided in the mocks
• Component behaves as expected across breakpoints
• Accessibility expert has signed off on code changes (if applicable. If not applicable provide reason why)
• Designer has signed off on changes (if applicable. If not applicable provide reason why)
• Tab order and focus state work as expected
• Changes have been tested against screen readers (if applicable. If not applicable provide reason why)
• New components are covered by e2e tests; updates to existing components are covered by existing test suite
• Changes have been tested in vets-website using Verdaccio (if applicable. If not applicable provide reason why)

Screenshots

Before

After

Acceptance criteria

• QA checklist has been completed
• Screenshots have been attached that cover desktop and mobile screens

Definition of done

• Documentation has been updated, if applicable
• A link has been provided to the originating GitHub issue (or connected to it via ZenHub)

[powellkerry]

LGTM