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

Author: amcdnl

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>

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();

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

@@ -68,10 +68,10 @@ <h2>Drawer with focus attributes</h2>
   <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>