{"record":{"id":"72932527b5435a49","repo":"angular/components","slug":"element-matching-cdkfocusinitial-is-not-focusa","errorCode":null,"errorMessage":"Element matching '[cdkFocusInitial]' is not focusable.","messagePattern":"Element matching '\\[cdkFocusInitial\\]' is not focusable\\.","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"src/cdk/a11y/focus-trap/focus-trap.ts","lineNumber":244,"sourceCode":"      if (\n        (typeof ngDevMode === 'undefined' || ngDevMode) &&\n        redirectToElement.hasAttribute(`cdk-focus-initial`)\n      ) {\n        console.warn(\n          `Found use of deprecated attribute 'cdk-focus-initial', ` +\n            `use 'cdkFocusInitial' instead. The deprecated attribute ` +\n            `will be removed in 8.0.0`,\n          redirectToElement,\n        );\n      }\n\n      // Warn the consumer if the element they've pointed to\n      // isn't focusable, when not in production mode.\n      if (\n        (typeof ngDevMode === 'undefined' || ngDevMode) &&\n        !this._checker.isFocusable(redirectToElement)\n      ) {\n        console.warn(`Element matching '[cdkFocusInitial]' is not focusable.`, redirectToElement);\n      }\n\n      if (!this._checker.isFocusable(redirectToElement)) {\n        const focusableChild = this._getFirstTabbableElement(redirectToElement) as HTMLElement;\n        focusableChild?.focus(options);\n        return !!focusableChild;\n      }\n\n      redirectToElement.focus(options);\n      return true;\n    }\n\n    return this.focusFirstTabbableElement(options);\n  }\n\n  /**\n   * Focuses the first tabbable element within the focus trap region.\n   * @returns Whether focus was moved successfully.","sourceCodeStart":226,"sourceCodeEnd":262,"githubUrl":"https://github.com/angular/components/blob/0411926e7d8ae06b32236ec1048a888cfad5abf2/src/cdk/a11y/focus-trap/focus-trap.ts#L226-L262","documentation":"When a focus trap initializes, the element matching [cdkFocusInitial] must be focusable. If the FocusTrapChecker determines it is not (disabled, hidden, non-interactive, display:none), the trap warns in dev mode and instead falls back to focusing the first tabbable child of that element (or fails if none).","triggerScenarios":"focusInitialElement resolves redirectToElement via the cdkFocusInitial attribute query, then this._checker.isFocusable(redirectToElement) returns false in dev mode, triggering the console.warn.","commonSituations":"Pointing cdkFocusInitial at a disabled button, an element hidden with CSS (display:none/visibility:hidden) at trap open time, or a plain non-interactive div; conditionally rendering the initial element after the trap opens.","solutions":["Make the cdkFocusInitial element focusable: remove disabled/hidden states or use tabindex=\"0\" / tabindex=\"-1\" as appropriate","Point cdkFocusInitial at an actually focusable element (button, input, link) that is visible when the trap opens","Ensure the element exists and is rendered before the trap is initialized","If intentional, target a container and rely on the fallback: the first tabbable child will receive focus"],"exampleFix":"// before\n<div cdkFocusInitial>Summary</div>\n// after\n<div tabindex=\"-1\" cdkFocusInitial>Summary</div>","handlingStrategy":"validation","validationCode":"const initial = trapElement.querySelector('[cdkFocusInitial]');\nif (initial && (initial.matches(':disabled, [hidden]') || !initial.offsetParent)) {\n  console.warn('[cdkFocusInitial] target is not focusable/visible');\n}","typeGuard":"function isFocusable(el: HTMLElement): boolean {\n  return !el.hasAttribute('disabled') && el.tabIndex >= -1 &&\n    !!(el.offsetWidth || el.offsetHeight || el.getClientRects().length);\n}","tryCatchPattern":null,"preventionTips":["Point cdkFocusInitial at visible, enabled interactive elements","Verify the target exists at trap-open time (no later *ngIf rendering)","Use tabindex=\"-1\" for non-interactive initial containers","Test focus traps in dev mode where this warning is active"],"tags":["focus-trap","a11y","focusability","angular-cdk"],"backgroundTag":"element-not-focusable","analyzedSha":"0411926e7d8ae06b32236ec1048a888cfad5abf2","analyzedAt":"2026-08-31T11:58:23.400Z","schemaVersion":2},"datasetVersion":"2026-08-31T14:17:45.589Z"}