USWDS - Feature: Improve heading semantics of banner component

[aduth]

Is your feature request related to a problem? Please describe.

The visual and informational presentation of the banner component's "Official websites use .gov" and "Secure .gov websites use HTTPS" text are such that they could be interpreted as being headings, while in reality there are no special semantics given to these texts beyond "strong" emphasis.

This was identified during a third-party accessibility audit of our site, which uses the standard USWDS banner component markup.

Relevant text from the report:

after activating Here’s how you know, “Official websites use .gov” is not read as a heading.

Describe the solution you'd like

Ultimately our goals are to ensure that our sites are accessible, while deferring to U.S. Web Design System to provide accessible defaults. We would like to avoid diverging from the given implementation, as this would create a disjointed user experience across government sites, as well as a burdensome developer experience to maintain the separate implementation.

A solution may be one of:

1. Confirm that the current markup is sufficiently accessible as-is
2. Or, update banner component code to assign semantics matching the content hierarchy

Additional context

Current component code reference: https://designsystem.digital.gov/components/banner/#component-code

Example relevant segment of code:

<p>
  <strong>Official websites use .gov</strong><br />A
  <strong>.gov</strong> website belongs to an official government
  organization in the United States.
</p>

The expectation from the reporter may be that the <strong> tag used for "Official websites use .gov" should instead be a heading, e.g. h2.

Code of Conduct

• I agree to follow this project's Code of Conduct.
• I checked the current issues for duplicate feature requests.