From c663fadaf236685d1c3e12840dee48a1a3d3e984 Mon Sep 17 00:00:00 2001
From: Austin <amcdaniel2@gmail.com>
Date: Fri, 27 Oct 2017 11:58:26 -0500
Subject: [PATCH] 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
---
 src/cdk/a11y/focus-trap.spec.ts      |  6 +++---
 src/cdk/a11y/focus-trap.ts           | 15 +++++++++++++--
 src/demo-app/drawer/drawer-demo.html |  6 +++---
 3 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/cdk/a11y/focus-trap.spec.ts b/src/cdk/a11y/focus-trap.spec.ts
index debc77a138f..bb3657308f1 100644
--- a/src/cdk/a11y/focus-trap.spec.ts
+++ b/src/cdk/a11y/focus-trap.spec.ts
@@ -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>
diff --git a/src/cdk/a11y/focus-trap.ts b/src/cdk/a11y/focus-trap.ts
index e32cf568d10..bc4fe8a9102 100644
--- a/src/cdk/a11y/focus-trap.ts
+++ b/src/cdk/a11y/focus-trap.ts
@@ -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();
diff --git a/src/demo-app/drawer/drawer-demo.html b/src/demo-app/drawer/drawer-demo.html
index a7f54541bc1..58bbe94eb95 100644
--- a/src/demo-app/drawer/drawer-demo.html
+++ b/src/demo-app/drawer/drawer-demo.html
@@ -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>