Backdrop

A backdrop is a screen that covers the main content of a page when a modal is opened, to prevent page interaction 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.

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

Users cannot interact with or navigate to the backdrop or any content beneath it using keyboard navigation.
Users cannot interact with the backdrop using a screen reader.

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

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