backdrop

Backdrops

Use a backdrop to de-emphasize background elements and draw the user's attention to a dialog or other modal content.

Backdrop [d2l-backdrop]

<script type="module">
  import '@brightspace-ui/core/components/button/button.js';
  import '@brightspace-ui/core/components/backdrop/backdrop.js';

  const backdrop = document.querySelector('d2l-backdrop');
  document.querySelector('#target > d2l-button').addEventListener('click', () => {
    backdrop.shown = !backdrop.shown;
  });
</script>
<style>
  #target { position: relative; z-index: 1000; margin: 40px; }
</style>
<div>
  <div id="target"><d2l-button primary>Toggle backdrop</d2l-button></div>
  <d2l-backdrop for-target="target"></d2l-backdrop>
</div>
<span>Background content</span>

Properties:

Property	Type	Description
for-target	String, required	id of the target element to display backdrop behind
no-animate-hide	Boolean	Disables the fade-out transition while the backdrop is being hidden
shown	Boolean	Used to control whether the backdrop is shown
slow-transition	Boolean	Increases the fade transition time to 1200ms (default is 200ms)

Focus Management

Elements with aria-hidden applied (as well as their descendants) are completely hidden from assistive technologies. It's therefore very important that the element with active focus be within the backdrop target.

When showing a backdrop: first move focus inside the target, then set the shown attribute on the backdrop.

When hiding a backdrop: first remove the shown attribute on the backdrop, then if appropriate move focus outside the target.

Accessibility

The backdrop hides background elements from screen reader users by setting aria-hidden="true" on all elements other than the target element specified in for-target.

Before showing the backdrop, focus should be moved inside the target element — see Focus Management for more details.