Found use of deprecated attribute 'cdk-focus-${bound}', use

Error message

Found use of deprecated attribute 'cdk-focus-${bound}', use 'cdkFocusRegion${bound}' instead. The deprecated attribute will be removed in 8.0.0.

What it means

FocusTrap supports region boundary markers via the modern attributes cdkFocusRegionStart/End (and cdkFocusInitial). Older kebab-case attributes cdk-focus-start/cdk-focus-end are deprecated and this dev-mode warning fires when one is found, telling you to migrate before the 8.0.0 removal.

Source

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

    });
  }

  /**
   * Get the specified boundary element of the trapped region.
   * @param bound The boundary to get (start or end of trapped region).
   * @returns The boundary element.
   */
  private _getRegionBoundary(bound: 'start' | 'end'): HTMLElement | null {
    // Contains the deprecated version of selector, for temporary backwards comparability.
    const markers = this._element.querySelectorAll(
      `[cdk-focus-region-${bound}], [cdkFocusRegion${bound}], [cdk-focus-${bound}]`,
    ) as NodeListOf<HTMLElement>;

    if (typeof ngDevMode === 'undefined' || ngDevMode) {
      for (let i = 0; i < markers.length; i++) {
        // @breaking-change 8.0.0
        if (markers[i].hasAttribute(`cdk-focus-${bound}`)) {
          console.warn(
            `Found use of deprecated attribute 'cdk-focus-${bound}', ` +
              `use 'cdkFocusRegion${bound}' instead. The deprecated ` +
              `attribute will be removed in 8.0.0.`,
            markers[i],
          );
        } else if (markers[i].hasAttribute(`cdk-focus-region-${bound}`)) {
          console.warn(
            `Found use of deprecated attribute 'cdk-focus-region-${bound}', ` +
              `use 'cdkFocusRegion${bound}' instead. The deprecated attribute ` +
              `will be removed in 8.0.0.`,
            markers[i],
          );
        }
      }
    }

    if (bound == 'start') {
      return markers.length ? markers[0] : this._getFirstTabbableElement(this._element);

View on GitHub (pinned to 0411926e7d)

Solutions

Rename the attribute in the template from cdk-focus-start to cdkFocusRegionStart (or cdk-focus-end to cdkFocusRegionEnd)
Search the codebase for 'cdk-focus-' to catch all occurrences
Upgrade fully before Angular 8.0.0 when the deprecated attributes stop being recognized

Example fix

// before
<div cdk-focus-start></div>
// after
<div cdkFocusRegionStart></div>

Defensive patterns

Strategy: validation

Validate before calling

// template lint check
if (document.querySelector('[cdk-focus-start], [cdk-focus-end]')) {
  console.warn('Deprecated cdk-focus-* attributes found; use cdkFocusRegionStart/End');
}

Prevention

Grep templates for 'cdk-focus-' before CDK upgrades
Use camelCase cdkFocusRegion* attributes in all new templates
Track the 8.0.0 breaking-change removal in your upgrade checklist

When it happens

Trigger: During focus trap initialization (redirectToElement → _getRegionBoundary), an element inside the trapped region has the attribute cdk-focus-start or cdk-focus-end while ngDevMode is enabled.

Common situations: Apps upgraded from very old CDK versions still using the pre-rename attribute names in templates; copy-pasted old focus-trap examples.

Related errors

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