From da9c1ea257355e032fbf128ba236206529286dee Mon Sep 17 00:00:00 2001 From: Austin Date: Sat, 9 Sep 2017 11:00:44 -0500 Subject: [PATCH 1/5] fix(focus-trap): update focus trap attrs to camel case #6799 --- src/cdk/a11y/focus-trap.spec.ts | 6 ++--- src/cdk/a11y/focus-trap.ts | 32 ++++++++++++++++++-------- src/demo-app/sidenav/sidenav-demo.html | 6 ++--- 3 files changed, 28 insertions(+), 16 deletions(-) diff --git a/src/cdk/a11y/focus-trap.spec.ts b/src/cdk/a11y/focus-trap.spec.ts index 28d07e46842c..4bee8abeb2b1 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 cb09557accba..7f83b59a34b8 100644 --- a/src/cdk/a11y/focus-trap.ts +++ b/src/cdk/a11y/focus-trap.ts @@ -144,19 +144,24 @@ export class FocusTrap { * @param bound The boundary to get (start or end of trapped region). * @returns The boundary element. */ - private _getRegionBoundary(bound: 'start' | 'end'): HTMLElement | null { + private _getRegionBoundary(bound: 'Start' | 'End'): HTMLElement | null { + const old = bound.toLowerCase(); // Contains the deprecated version of selector, for temporary backwards comparability. - let markers = this._element.querySelectorAll(`[cdk-focus-region-${bound}], ` + - `[cdk-focus-${bound}]`) as NodeListOf; + let markers = this._element.querySelectorAll(`[cdk-focus-region-${old}], ` + + `[cdkFocusRegion${bound}], ` + + `[cdk-focus-${old}]`) 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]); + if (markers[i].hasAttribute(`cdk-focus-${old}`)) { + console.warn(`Found use of deprecated attribute 'cdk-focus-${old}',` + + ` use 'cdkFocusRegion${bound}' instead.`, markers[i]); + } else if (markers[i].hasAttribute(`cdk-focus-region-${old}`)) { + console.warn(`Found use of deprecated attribute 'cdk-focus-region-${old}',` + + ` use 'cdkFocusRegion${bound}' instead.`, markers[i]); } } - if (bound == 'start') { + if (bound == 'Start') { return markers.length ? markers[0] : this._getFirstTabbableElement(this._element); } return markers.length ? @@ -168,7 +173,14 @@ export class FocusTrap { * @returns Returns whether focus was moved successfuly. */ focusInitialElement(): boolean { - 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(); @@ -183,7 +195,7 @@ export class FocusTrap { * @returns Returns whether focus was moved successfuly. */ focusFirstTabbableElement(): boolean { - const redirectToElement = this._getRegionBoundary('start'); + const redirectToElement = this._getRegionBoundary('Start'); if (redirectToElement) { redirectToElement.focus(); @@ -197,7 +209,7 @@ export class FocusTrap { * @returns Returns whether focus was moved successfuly. */ focusLastTabbableElement(): boolean { - const redirectToElement = this._getRegionBoundary('end'); + const redirectToElement = this._getRegionBoundary('End'); if (redirectToElement) { redirectToElement.focus(); diff --git a/src/demo-app/sidenav/sidenav-demo.html b/src/demo-app/sidenav/sidenav-demo.html index bdddd69c381a..dd747eaa235a 100644 --- a/src/demo-app/sidenav/sidenav-demo.html +++ b/src/demo-app/sidenav/sidenav-demo.html @@ -68,10 +68,10 @@

Sidenav with focus attributes

Link - Focus region start + Focus region start Link - Initially focused - Focus region end + Initially focused + Focus region end Link From d24830d0f68fd23805d3c8dec5327bc6f76db501 Mon Sep 17 00:00:00 2001 From: Austin Date: Mon, 11 Sep 2017 16:56:08 -0500 Subject: [PATCH 2/5] chore(nit): update to use lower case names --- src/cdk/a11y/focus-trap.ts | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/src/cdk/a11y/focus-trap.ts b/src/cdk/a11y/focus-trap.ts index 7f83b59a34b8..c145e01682b2 100644 --- a/src/cdk/a11y/focus-trap.ts +++ b/src/cdk/a11y/focus-trap.ts @@ -144,24 +144,24 @@ export class FocusTrap { * @param bound The boundary to get (start or end of trapped region). * @returns The boundary element. */ - private _getRegionBoundary(bound: 'Start' | 'End'): HTMLElement | null { - const old = bound.toLowerCase(); + private _getRegionBoundary(bound: 'start' | 'end'): HTMLElement | null { + const name = bound.charAt(0).toUpperCase() + bound.slice(1).toLowerCase(); // Contains the deprecated version of selector, for temporary backwards comparability. - let markers = this._element.querySelectorAll(`[cdk-focus-region-${old}], ` + + let markers = this._element.querySelectorAll(`[cdk-focus-region-${bound}], ` + `[cdkFocusRegion${bound}], ` + - `[cdk-focus-${old}]`) as NodeListOf; + `[cdk-focus-${name}]`) as NodeListOf; for (let i = 0; i < markers.length; i++) { - if (markers[i].hasAttribute(`cdk-focus-${old}`)) { - console.warn(`Found use of deprecated attribute 'cdk-focus-${old}',` + - ` use 'cdkFocusRegion${bound}' instead.`, markers[i]); - } else if (markers[i].hasAttribute(`cdk-focus-region-${old}`)) { - console.warn(`Found use of deprecated attribute 'cdk-focus-region-${old}',` + - ` use 'cdkFocusRegion${bound}' instead.`, markers[i]); + if (markers[i].hasAttribute(`cdk-focus-${bound}`)) { + console.warn(`Found use of deprecated attribute 'cdk-focus-${bound}',` + + ` use 'cdkFocusRegion${name}' 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${name}' instead.`, markers[i]); } } - if (bound == 'Start') { + if (bound == 'start') { return markers.length ? markers[0] : this._getFirstTabbableElement(this._element); } return markers.length ? @@ -195,7 +195,7 @@ export class FocusTrap { * @returns Returns whether focus was moved successfuly. */ focusFirstTabbableElement(): boolean { - const redirectToElement = this._getRegionBoundary('Start'); + const redirectToElement = this._getRegionBoundary('start'); if (redirectToElement) { redirectToElement.focus(); @@ -209,7 +209,7 @@ export class FocusTrap { * @returns Returns whether focus was moved successfuly. */ focusLastTabbableElement(): boolean { - const redirectToElement = this._getRegionBoundary('End'); + const redirectToElement = this._getRegionBoundary('end'); if (redirectToElement) { redirectToElement.focus(); From d47e6c5ea6ec1c438a1b0522ab7b5f5862dd29a5 Mon Sep 17 00:00:00 2001 From: Austin Date: Tue, 12 Sep 2017 16:39:36 -0500 Subject: [PATCH 3/5] chore(nit): fix typo --- src/demo-app/sidenav/sidenav-demo.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/demo-app/sidenav/sidenav-demo.html b/src/demo-app/sidenav/sidenav-demo.html index dd747eaa235a..cbe3d140f1e8 100644 --- a/src/demo-app/sidenav/sidenav-demo.html +++ b/src/demo-app/sidenav/sidenav-demo.html @@ -68,10 +68,10 @@

Sidenav with focus attributes

Link - Focus region start + Focus region start Link Initially focused - Focus region end + Focus region end Link From df5fb46c2161cb3dc3d48be4a03d1e4a1d022723 Mon Sep 17 00:00:00 2001 From: Austin Date: Fri, 20 Oct 2017 08:56:43 -0500 Subject: [PATCH 4/5] chore(demo): update demos --- src/demo-app/drawer/drawer-demo.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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 From 34e21bafbdb44a60697eef8259535bdea9e5032e Mon Sep 17 00:00:00 2001 From: Austin Date: Tue, 24 Oct 2017 12:22:11 -0500 Subject: [PATCH 5/5] chore(nit): fix pr feedback --- src/cdk/a11y/focus-trap.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/cdk/a11y/focus-trap.ts b/src/cdk/a11y/focus-trap.ts index d1545cc4b3cc..2530eb549341 100644 --- a/src/cdk/a11y/focus-trap.ts +++ b/src/cdk/a11y/focus-trap.ts @@ -148,19 +148,19 @@ export class FocusTrap { if (!this._platform.isBrowser) { return null; } - + // Contains the deprecated version of selector, for temporary backwards comparability. let markers = this._element.querySelectorAll(`[cdk-focus-region-${bound}], ` + `[cdkFocusRegion${bound}], ` + - `[cdk-focus-${name}]`) as NodeListOf; + `[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 'cdkFocusRegion${name}' 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${name}' instead.`, markers[i]); + ` use 'cdkFocusRegion${bound}' instead.`, markers[i]); } } @@ -179,7 +179,7 @@ export class FocusTrap { if (!this._platform.isBrowser) { return false; } - + // Contains the deprecated version of selector, for temporary backwards comparability. const redirectToElement = this._element.querySelector(`[cdk-focus-initial], ` + `[cdkFocusInitial]`) as HTMLElement;