diff --git a/src/cdk/a11y/focus-trap.spec.ts b/src/cdk/a11y/focus-trap.spec.ts index debc77a138f4..bb3657308f17 100644 --- a/src/cdk/a11y/focus-trap.spec.ts +++ b/src/cdk/a11y/focus-trap.spec.ts @@ -190,9 +190,9 @@ class FocusTrapWithBindings {
- - - + + +
diff --git a/src/cdk/a11y/focus-trap.ts b/src/cdk/a11y/focus-trap.ts index c01eff86098a..2530eb549341 100644 --- a/src/cdk/a11y/focus-trap.ts +++ b/src/cdk/a11y/focus-trap.ts @@ -151,12 +151,16 @@ export class FocusTrap { // Contains the deprecated version of selector, for temporary backwards comparability. let markers = this._element.querySelectorAll(`[cdk-focus-region-${bound}], ` + + `[cdkFocusRegion${bound}], ` + `[cdk-focus-${bound}]`) as NodeListOf; for (let i = 0; i < markers.length; i++) { if (markers[i].hasAttribute(`cdk-focus-${bound}`)) { console.warn(`Found use of deprecated attribute 'cdk-focus-${bound}',` + - ` use 'cdk-focus-region-${bound}' instead.`, markers[i]); + ` use 'cdkFocusRegion${bound}' instead.`, 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.`, markers[i]); } } @@ -176,7 +180,14 @@ export class FocusTrap { return false; } - const redirectToElement = this._element.querySelector('[cdk-focus-initial]') as HTMLElement; + // Contains the deprecated version of selector, for temporary backwards comparability. + const redirectToElement = this._element.querySelector(`[cdk-focus-initial], ` + + `[cdkFocusInitial]`) as HTMLElement; + + if (this._element.hasAttribute(`cdk-focus-initial`)) { + console.warn(`Found use of deprecated attribute 'cdk-focus-initial',` + + ` use 'cdkFocusInitial' instead.`, this._element); + } if (redirectToElement) { redirectToElement.focus(); diff --git a/src/demo-app/drawer/drawer-demo.html b/src/demo-app/drawer/drawer-demo.html index a7f54541bc12..58bbe94eb95b 100644 --- a/src/demo-app/drawer/drawer-demo.html +++ b/src/demo-app/drawer/drawer-demo.html @@ -68,10 +68,10 @@

Drawer with focus attributes

Link - Focus region start + Focus region start Link - Initially focused - Focus region end + Initially focused + Focus region end Link