id	section
Banner	components

import { Checkbox, List, ListItem } from '@patternfly/react-core';

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:

If the banner conveys status, a status icon and .pf-screen-reader element is included.} />

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.

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