The d2l-backdrop
element displays a semi-transparent backdrop behind a specified sibling target element. It also hides elements other than the target from assistive technologies by applying aria-hidden="true"
.
<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>
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) |
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.