skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(focus-trap): update focus trap attrs to camel case #6799 (#6960)

Browse Source 
* 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
This commit is contained in:
Austin
2017-10-27 11:58:26 -05:00
committed by mmalerba
parent 0f2c2721e5
commit c663fadaf2
3 changed files with 19 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/cdk/a11y/focus-trap.spec.ts
+3 -3
View File
@@ -190,9 +190,9 @@ class FocusTrapWithBindings {
<div cdkTrapFocus>
<input>
<button>before</button>
<button id="first" cdk-focus-region-start></button>
<button id="middle" cdk-focus-initial></button>
<button id="last" cdk-focus-region-end></button>
<button id="first" cdkFocusRegionStart></button>
<button id="middle" cdkFocusInitial></button>
<button id="last" cdkFocusRegionEnd></button>
<button>after</button>
<input>
</div>
src/cdk/a11y/focus-trap.ts
+13 -2
View File
@@ -150,12 +150,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<HTMLElement>;
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]);
}
}
@@ -175,7 +179,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();
src/demo-app/drawer/drawer-demo.html
+3 -3
View File
@@ -68,10 +68,10 @@
<mat-drawer #focusDrawer>
<mat-nav-list>
<a mat-list-item routerLink>Link</a>
<a mat-list-item routerLink cdk-focus-region-start>Focus region start</a>
<a mat-list-item routerLink cdkFocusRegionStart>Focus region start</a>
<a mat-list-item routerLink>Link</a>
<a mat-list-item routerLink cdk-focus-initial>Initially focused</a>
<a mat-list-item routerLink cdk-focus-region-end>Focus region end</a>
<a mat-list-item routerLink cdkFocusInitial>Initially focused</a>
<a mat-list-item routerLink cdkFocusRegionEnd>Focus region end</a>
<a mat-list-item routerLink>Link</a>
</mat-nav-list>
</mat-drawer>