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

Error message

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

What it means

Same deprecation family as the cdk-focus-* warning: this variant fires for the intermediate legacy attribute cdk-focus-region-start/cdk-focus-region-end, which should be renamed to the camelCase cdkFocusRegionStart/End before removal in 8.0.0.

Source

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

   */
  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);
    }
    return markers.length
      ? markers[markers.length - 1]
      : this._getLastTabbableElement(this._element);
  }

  /**

View on GitHub (pinned to 0411926e7d)

Solutions

Rename cdk-focus-region-start to cdkFocusRegionStart (and End equivalent) in templates
Grep for 'cdk-focus-region-' and fix all usages
Complete migration before v8 removal

Example fix

// before
<div cdk-focus-region-end></div>
// after
<div cdkFocusRegionEnd></div>

Defensive patterns

Strategy: validation

Validate before calling

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

Prevention

Standardize on cdkFocusRegionStart/End markers
Add a custom ESLint/template rule banning cdk-focus-region-*
Run dev-mode builds and heed deprecation warnings before major upgrades

When it happens

Trigger: During focus trap initialization (redirectToElement → _getRegionBoundary), a marker element inside the trap has attribute cdk-focus-region-start or cdk-focus-region-end in dev mode.

Common situations: Apps that migrated from cdk-focus-start to cdk-focus-region-start during an earlier upgrade but not yet to cdkFocusRegionStart; older documentation or templates.

Related errors

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