Skip to content
PatternFly logo

Backdrop

A backdrop is used to screen the main content of a page when a modal overlay is opened. It prevents the user from doing other work on the page until the modal is dismissed.

Accessibility

To implement an accessible PatternFly backdrop:

  • If using just a backdrop component rather than PatternFly's modal, you must trap focus inside of the modal and disable any functionality outside of it. This can be done with a FocusTrap or any alternative means of disabling all of the content behind the backdrop.

Testing

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

React customization

A backdrop does not have any further React props for accessibility.

HTML/CSS customization

A backdrop does not have any further HTML/CSS attributes or classes for accessibility.


View source on GitHub