Skip to content

Commit c663fad

Browse files
amcdnlmmalerba
authored andcommitted
fix(focus-trap): update focus trap attrs to camel case #6799 (#6960)
* fix(focus-trap): update focus trap attrs to camel case #6799 * chore(nit): update to use lower case names * chore(nit): fix typo * chore(demo): update demos * chore(nit): fix pr feedback
1 parent 0f2c272 commit c663fad

File tree

3 files changed

+19
-8
lines changed

3 files changed

+19
-8
lines changed

src/cdk/a11y/focus-trap.spec.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -190,9 +190,9 @@ class FocusTrapWithBindings {
190190
<div cdkTrapFocus>
191191
<input>
192192
<button>before</button>
193-
<button id="first" cdk-focus-region-start></button>
194-
<button id="middle" cdk-focus-initial></button>
195-
<button id="last" cdk-focus-region-end></button>
193+
<button id="first" cdkFocusRegionStart></button>
194+
<button id="middle" cdkFocusInitial></button>
195+
<button id="last" cdkFocusRegionEnd></button>
196196
<button>after</button>
197197
<input>
198198
</div>

src/cdk/a11y/focus-trap.ts

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -150,12 +150,16 @@ export class FocusTrap {
150150

151151
// Contains the deprecated version of selector, for temporary backwards comparability.
152152
let markers = this._element.querySelectorAll(`[cdk-focus-region-${bound}], ` +
153+
`[cdkFocusRegion${bound}], ` +
153154
`[cdk-focus-${bound}]`) as NodeListOf<HTMLElement>;
154155

155156
for (let i = 0; i < markers.length; i++) {
156157
if (markers[i].hasAttribute(`cdk-focus-${bound}`)) {
157158
console.warn(`Found use of deprecated attribute 'cdk-focus-${bound}',` +
158-
` use 'cdk-focus-region-${bound}' instead.`, markers[i]);
159+
` use 'cdkFocusRegion${bound}' instead.`, markers[i]);
160+
} else if (markers[i].hasAttribute(`cdk-focus-region-${bound}`)) {
161+
console.warn(`Found use of deprecated attribute 'cdk-focus-region-${bound}',` +
162+
` use 'cdkFocusRegion${bound}' instead.`, markers[i]);
159163
}
160164
}
161165

@@ -175,7 +179,14 @@ export class FocusTrap {
175179
return false;
176180
}
177181

178-
const redirectToElement = this._element.querySelector('[cdk-focus-initial]') as HTMLElement;
182+
// Contains the deprecated version of selector, for temporary backwards comparability.
183+
const redirectToElement = this._element.querySelector(`[cdk-focus-initial], ` +
184+
`[cdkFocusInitial]`) as HTMLElement;
185+
186+
if (this._element.hasAttribute(`cdk-focus-initial`)) {
187+
console.warn(`Found use of deprecated attribute 'cdk-focus-initial',` +
188+
` use 'cdkFocusInitial' instead.`, this._element);
189+
}
179190

180191
if (redirectToElement) {
181192
redirectToElement.focus();

src/demo-app/drawer/drawer-demo.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -68,10 +68,10 @@ <h2>Drawer with focus attributes</h2>
6868
<mat-drawer #focusDrawer>
6969
<mat-nav-list>
7070
<a mat-list-item routerLink>Link</a>
71-
<a mat-list-item routerLink cdk-focus-region-start>Focus region start</a>
71+
<a mat-list-item routerLink cdkFocusRegionStart>Focus region start</a>
7272
<a mat-list-item routerLink>Link</a>
73-
<a mat-list-item routerLink cdk-focus-initial>Initially focused</a>
74-
<a mat-list-item routerLink cdk-focus-region-end>Focus region end</a>
73+
<a mat-list-item routerLink cdkFocusInitial>Initially focused</a>
74+
<a mat-list-item routerLink cdkFocusRegionEnd>Focus region end</a>
7575
<a mat-list-item routerLink>Link</a>
7676
</mat-nav-list>
7777
</mat-drawer>

0 commit comments

Comments
 (0)