fixup! change focus trp to find focusable child element if cdkFocusInitial element isn't focusable

Author: annieyw

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

@@ -5,7 +5,7 @@ import {PortalModule, CdkPortalOutlet, TemplatePortal} from '@angular/cdk/portal
 import {A11yModule, FocusTrap, CdkTrapFocus} from '../index';
 
 
-describe('FocusTrap', () => {
+fdescribe('FocusTrap', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({

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

@@ -130,7 +130,7 @@ export class FocusTrap {
    * Waits for the zone to stabilize, then either focuses the first element that the
    * user specified, or the first tabbable element.
    * @returns Returns a promise that resolves with a boolean, depending
-   * on whether focus was moved successfuly.
+   * on whether focus was moved successfully.
    */
   focusInitialElementWhenReady(): Promise<boolean> {
     return new Promise<boolean>(resolve => {
@@ -142,7 +142,7 @@ export class FocusTrap {
    * Waits for the zone to stabilize, then focuses
    * the first tabbable element within the focus trap region.
    * @returns Returns a promise that resolves with a boolean, depending
-   * on whether focus was moved successfuly.
+   * on whether focus was moved successfully.
    */
   focusFirstTabbableElementWhenReady(): Promise<boolean> {
     return new Promise<boolean>(resolve => {
@@ -154,7 +154,7 @@ export class FocusTrap {
    * Waits for the zone to stabilize, then focuses
    * the last tabbable element within the focus trap region.
    * @returns Returns a promise that resolves with a boolean, depending
-   * on whether focus was moved successfuly.
+   * on whether focus was moved successfully.
    */
   focusLastTabbableElementWhenReady(): Promise<boolean> {
     return new Promise<boolean>(resolve => {
@@ -195,11 +195,11 @@ export class FocusTrap {
 
   /**
    * Focuses the element that should be focused when the focus trap is initialized.
-   * @returns Whether focus was moved successfuly.
+   * @returns Whether focus was moved successfully.
    */
   focusInitialElement(): boolean {
     // Contains the deprecated version of selector, for temporary backwards comparability.
-    const redirectToElement = this._element.querySelector(`[cdk-focus-initial], ` +
+    let redirectToElement = this._element.querySelector(`[cdk-focus-initial], ` +
                                                           `[cdkFocusInitial]`) as HTMLElement;
 
     if (redirectToElement) {
@@ -217,6 +217,16 @@ export class FocusTrap {
         console.warn(`Element matching '[cdkFocusInitial]' is not focusable.`, redirectToElement);
       }
 
+      if (!this._checker.isFocusable(redirectToElement)) {
+        redirectToElement = this._getFirstTabbableElement(redirectToElement) as HTMLElement;
+        if (redirectToElement) {
+          redirectToElement.focus();
+          return true;
+        } else {
+          return false;
+        }
+      }
+
       redirectToElement.focus();
       return true;
     }
@@ -226,7 +236,7 @@ export class FocusTrap {
 
   /**
    * Focuses the first tabbable element within the focus trap region.
-   * @returns Whether focus was moved successfuly.
+   * @returns Whether focus was moved successfully.
    */
   focusFirstTabbableElement(): boolean {
     const redirectToElement = this._getRegionBoundary('start');
@@ -240,7 +250,7 @@ export class FocusTrap {
 
   /**
    * Focuses the last tabbable element within the focus trap region.
-   * @returns Whether focus was moved successfuly.
+   * @returns Whether focus was moved successfully.
    */
   focusLastTabbableElement(): boolean {
     const redirectToElement = this._getRegionBoundary('end');
@@ -253,7 +263,7 @@ export class FocusTrap {
   }
 
   /**
-   * Checks whether the focus trap has successfuly been attached.
+   * Checks whether the focus trap has successfully been attached.
    */
   hasAttached(): boolean {
     return this._hasAttached;
@@ -396,7 +406,7 @@ export class CdkTrapFocus implements OnDestroy, AfterContentInit, OnChanges, DoC
   set enabled(value: boolean) { this.focusTrap.enabled = coerceBooleanProperty(value); }
 
   /**
-   * Whether the directive should automatially move focus into the trapped region upon
+   * Whether the directive should automatically move focus into the trapped region upon
    * initialization and return focus to the previous activeElement upon destruction.
    */
   @Input('cdkTrapFocusAutoCapture')