Primary (bright blue), Light, Dark, Warning

True, false (warning variant is not dismissible)

Page Banner and System Warning Banner can appear simultaneously. However, there can only be one Page Banner at a time.

Use the Page Banner component for temporary promotions-only.

Don’t stack Page Banners. There can only be one Page Banner at any given time.

Don’t use the Page Banner component as a Cookie Banner - the Cookie Banner will be a separate component.

Dismissible:
It requires a user action to be dismissed.

Default persistence:
It is globally persistent and non-modal, allowing the user to either ignore them or interact with them at any time.

Note: The System Warning banner is different from in its global persistence. The System Warning banner should be used for system warning messages impacting the global experience (i.e. IE is no longer supported,) while the Alert component should be used for messages about a specific action in a local experience (i.e. login error.)

Scrolling behavior:
When scrolling, banners should move with content and scroll off the screen.

Position:

• Page banners should be positioned below the top navigation bar.

• System warning banners should be positioned above the top navigation bar.

1) System Warning banners are presumed to be highest priority – urgent/must-notice in every case. There are two ways to (try to) ensure this for screen reader users:
a) Give the container role=”alert” and aria-live=”assertive”. role=”alert” has an implicit aria-live=”assertive” everywhere except for in IE11, but in this case that is just what we want, so being explicit makes it worth adding it.

The aria-live=”assertive” value means “flush the speech output queue and speak this immediately.”
Note: if something else on the page also has role=”alert” or aria-live=”assertive”, that downstream content flush will override this (presumably more urgent, intended) content in the speech queue, defeating the intended hierarchy of urgency on the page. So having multiple “urgent” or “alert” things on the page at once is tricky.

b) Put the container at the top of the page – particularly, make the content first, before any other items in the tab order.
Note: There is an Axe rule (best practice, not a strict WCAG 2.1AA requirement) saying that all content should be in one of the standard top-level containers (those being <header>, <main>, <footer>, <aside> or their ARIA equivalent roles). So if a the System Warning banner is a div above the <header>, Axe will throw a warning. In this case I might call that a false positive error (the need for urgency / noticeability overrides the desire for tidiness). But some might argue that the intent of this rule is precisely to make content more noticeable, and putting the System Warning at the top of <header> would do that. In any case, if we suppress / turn off these Axe rules, then they don’t help us in other more clearly relevant scenarios. So I recommend that the container for the System Warning banner should be the very first child of the <header> element.

2) Page banners are generally given role=”alert”, but in scenarios where there are more than one present at a time, we have a repeat of point 1) above. The W3C recommends putting page-level messages in a list structure at the top of the page. Here’s my recommended container structure:
<div role=”[Jeff check]” aria-live=”