Banner

A banner is a 1-line, full color, full width container that can be used to communicate short snippets of information to users. Banners are un-intrusive and non-dismissible.

Accessibility

To implement an accessible PatternFly banner:

Check the color contrast of a banner and any text on it to make sure they can be read by users with color blindness or other visual impairments.
When a banner is used to convey status, add an icon that also conveys status visually, and provide screen reader text using .pf-screen-reader or an equivalent.

Testing

At a minimum, a banner should meet the following criteria:

A user should not be able to focus on the banner with keyboard controls.
A user should be able to have a screen reader describe the contents of the banner, but not focus on or interact with the banner otherwise.
If the banner conveys status, a status icon and .pf-screen-reader element is included.

React customization

The following React props have been provided for more fine-tuned control over accessibility.

Prop	Applied to	Reason
`screenReaderText="[visually hidden text that describes the banner status]"`	`Banner`	Adds text that is accessible only to assistive technologies and is not visually rendered. This prop should only be passed in when the banner is meant to convey status.

HTML/CSS customization

The following HTML attributes and PatternFly classes can be used for more fine-tuned control over accessibility.

Attribute or class	Applied to	Reason
`.pf-screen-reader`	`span`	Provides an accessible description of the type of banner. Required if banner conveys status

View source on GitHub