Backdrop

A backdrop is a semi-transparent overlay that dims the content behind a modal or popover.

<div class="tng-backdrop"></div>
<button
  class="tng-icon-button on-contrast is-neutral | p-absolute at-top-right inset-lg"
  aria-label="Close"
>
  <i class="tng-icon icon-close" aria-hidden="true"></i>
</button>

Accessibility

Screen readers

• The backdrop is purely decorative — it should not be in the accessibility tree. A standalone <div class="tng-backdrop"> has no semantic role and is ignored automatically.
• When used with <dialog> or popover, the ::backdrop pseudo-element is generated by the browser and is never exposed to assistive technologies.

Focus management

• Set inert on the background content while the overlay is visible to prevent focus from escaping behind the backdrop.
• The close button overlaying the backdrop must have an accessible label (e.g. aria-label="Close").