Found use of deprecated attribute 'cdk-focus-initial', use '

Error message

Found use of deprecated attribute 'cdk-focus-initial', use 'cdkFocusInitial' instead. The deprecated attribute will be removed in 8.0.0

What it means

FocusTrap's initial-focus marker was renamed from cdk-focus-initial to cdkFocusInitial. When the trap resolves its initial focus target and finds the old kebab-case attribute, it warns in dev mode that the old name will be removed in 8.0.0.

Source

Thrown at src/cdk/a11y/focus-trap/focus-trap.ts:230

  }

  /**
   * Focuses the element that should be focused when the focus trap is initialized.
   * @returns Whether focus was moved successfully.
   */
  focusInitialElement(options?: FocusOptions): boolean {
    // Contains the deprecated version of selector, for temporary backwards comparability.
    const redirectToElement = this._element.querySelector(
      `[cdk-focus-initial], ` + `[cdkFocusInitial]`,
    ) as HTMLElement;

    if (redirectToElement) {
      // @breaking-change 8.0.0
      if (
        (typeof ngDevMode === 'undefined' || ngDevMode) &&
        redirectToElement.hasAttribute(`cdk-focus-initial`)
      ) {
        console.warn(
          `Found use of deprecated attribute 'cdk-focus-initial', ` +
            `use 'cdkFocusInitial' instead. The deprecated attribute ` +
            `will be removed in 8.0.0`,
          redirectToElement,
        );
      }

      // Warn the consumer if the element they've pointed to
      // isn't focusable, when not in production mode.
      if (
        (typeof ngDevMode === 'undefined' || ngDevMode) &&
        !this._checker.isFocusable(redirectToElement)
      ) {
        console.warn(`Element matching '[cdkFocusInitial]' is not focusable.`, redirectToElement);
      }

      if (!this._checker.isFocusable(redirectToElement)) {
        const focusableChild = this._getFirstTabbableElement(redirectToElement) as HTMLElement;

View on GitHub (pinned to 0411926e7d)

Solutions

Rename cdk-focus-initial to cdkFocusInitial in the template
Grep templates for 'cdk-focus-initial' and fix all instances
Migrate before Angular 8.0.0 where the deprecated attribute is removed

Example fix

// before
<button cdk-focus-initial>Save</button>
// after
<button cdkFocusInitial>Save</button>

Defensive patterns

Strategy: validation

Validate before calling

if (document.querySelector('[cdk-focus-initial]')) {
  console.warn('Deprecated cdk-focus-initial found; use cdkFocusInitial');
}

Prevention

Always use cdkFocusInitial in new templates
Grep for cdk-focus-initial during upgrade prep
Document the marker attribute convention for your team

When it happens

Trigger: focusInitialElement (invoked via focusInitialElementWhenReady) finds the redirect target element still carrying the attribute cdk-focus-initial while ngDevMode is on.

Common situations: Legacy templates predating the attribute rename; upgraded applications that kept old focus-trap markup; following outdated tutorials.

Related errors

AI-assisted analysis of angular/components@0411926e7d (2026-08-31). Data as JSON: /api/errors/7116aa3d4d1b7dee. Report an issue: GitHub.