banner

A banner is used to communicate a general status event or to promote a feature. CdrBanner is a simple wrapper component that allows for composing various banner layouts.

Choosing the right banner type

Banner messaging keeps users informed of important and sometimes time-sensitive changes contextual to inline elements on the page. These messages help to clarify an issue and/or notify users of a potential problem that may require their attention.

There are five information types supported for banners: error, warning, success, informational, and default. Each type corresponds with a color and icon to provide a consistent, universal experience for users.

Structure

• A banner always spans the width of its parent container
• The height of a banner is variable, depending on the content

Behavior

• A banner persists until their conditions are either met or they are dismissed
• Banners with the role of alert are not dismissable

Placement

• Place banners above their area of concern
• Banners persisting across pages should sit alongside the global header

• An icon is both user-configurable and required
• Body copy should not exceed two lines
• Keep content focused on a single message
• You have the option to include a call-to-action

What Cedar provides

• Improved keyboard accessibility: People can interact with the banner component using only a keyboard. We've added keyboard focus styles and support navigation using keyboard-accessible buttons
• Color contrast: We've tested the contrast between text and background colors to meet WCAG 2.1 AA standards, making the text easier to read for users with visual impairments
• Icon images are hidden by default

Development responsibilities

When using this component, here's what you are responsible for:

• Add role="alert" for important or time sensitive messages to ensure the messaging is immediately announced to screen readers. For other content, add aria-live="status"
• There is no need to do anything specific for static messaging which calls out the type of banner in the text and is loaded with the page
• For messages that don't include text to identify what type of banner is displayed, add screen reader-only text adding this information to the start of the message
• When using the optional icon-right or info-action slots, the actionable element should have an aria-label explaining its relationship to the banner and what happens upon click
• Don't rely on color alone to convey your message. Provide an additional indicator along with color, like an icon
• If an input error is automatically detected, identify it and describe the error to the user in text

<cdr-banner type="info">
  <template #icon-left>
    <icon-information-fill />
  </template>
  Static Informational Messaging With No Accessibility Markup Needed
</cdr-banner>

<br>

<cdr-banner type="error" role="alert">
  <template #icon-left>
    <icon-error-fill />
  </template>
  Urgent Error Message With `role="alert"`
</cdr-banner>

<br>

<cdr-banner type="success" aria-live="polite">
  <template #icon-left>
    <icon-check-fill />
  </template>
  Non-Urgent Success Message With `aria-live="polite"`
</cdr-banner>

<br>

<cdr-banner aria-label="Additional information about what kind of message is being displayed">
    <template #icon-left>
      <icon-question-fill />
    </template>
    Generic banner
</cdr-banner>