File

packages/components/eui-block-content/eui-block-content.component.ts

Description

Component that wraps content and manages focus state when content is blocked. Provides accessibility attributes and handles focus restoration when blocking/unblocking.

Basic blocked content

<eui-block-content [isBlocked]="isLoading">
  <form>
    <input type="text" />
    <button>Submit</button>
  </form>
</eui-block-content>

With custom ARIA attributes

<eui-block-content
  role="region"
  ariaLabel="User profile section"
  [isBlocked]="isSaving">
  <div>Content that can be blocked</div>
</eui-block-content>

isLoading = true;

loadData(): void {
  this.isLoading = true;
  this.service.getData().subscribe(() => {
    this.isLoading = false;
  });
}

Accessibility

• Automatically blurs focused elements when content is blocked
• Restores focus to previously focused element when unblocked
• Uses ARIA role and label for screen reader context
• Prevents keyboard interaction with blocked content
• Focus management ensures users don't interact with disabled content

Notes

• Use isBlocked to control blocking state (typically tied to loading/saving states)
• Default role is 'region', can be customized via role input
• Default ariaLabel is 'block content wrapper', should be customized for context
• Focus is automatically saved and restored during block/unblock transitions
• Blocked state applies visual styling (typically overlay or disabled appearance)
• Commonly used with loading indicators or during async operations
• Does not prevent programmatic changes, only user interaction

<ng-content/>