va-textarea: Move Headline location to be W3C compliant

[Andrew565]

Chromatic

https://3681-move-textarea-header--65a6e2ed2314f7b8f98609d8.chromatic.com

---

Description

Closes #3681

Moves the HeaderLevel element around so that it wraps the label element, since labels aren't supposed to have h1-h6 elements as their children.

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

No visual changes.

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)

[rsmithadhoc]

@Andrew565 For screen readers, it announced correctly and showed in the headings menu as expected.

However, I believe the heading styling is now getting overridden by .usa-label:

[Andrew565]

However, I believe the heading styling is now getting overridden by .usa-label:

Good catch, thanks!

[Andrew565]

Label header styles fixed.

[micahchiang]

We have css properties for font families - https://github.com/department-of-veterans-affairs/component-library/blob/main/packages/css-library/dist/tokens/css/variables.css#L127

Would it be possible to use those here?

[Andrew565]

Technically, yes, but I'd have to re-define those variables within the va-textarea.scss file because those variables aren't available in Storybook yet.

[danbrady]

Design approved!