From d83d14796ca29a6089fd8d91e9344273516a3b5e Mon Sep 17 00:00:00 2001
From: Blackbaud-PatrickOFriel <patrick.ofriel@blackbaud.com>
Date: Tue, 18 Jul 2017 12:12:34 -0400
Subject: [PATCH 1/9] Handle tabbing and escape press in modals

---
 .../modal/modal-component-adapter.service.ts  | 61 +++++++++++++++++++
 src/modules/modal/modal-host.service.ts       |  4 ++
 src/modules/modal/modal.component.html        |  3 +
 src/modules/modal/modal.component.ts          | 46 +++++++++++++-
 4 files changed, 112 insertions(+), 2 deletions(-)

diff --git a/src/modules/modal/modal-component-adapter.service.ts b/src/modules/modal/modal-component-adapter.service.ts
index fc39fa6f5..8f7eb4440 100644
--- a/src/modules/modal/modal-component-adapter.service.ts
+++ b/src/modules/modal/modal-component-adapter.service.ts
@@ -2,6 +2,11 @@ import {
   Injectable,
   ElementRef
 } from '@angular/core';
+/* tslint:disable */
+let tabbableSelector = 'a[href], area[href], input:not([disabled]):not([tabindex=\'-1\']), ' +
+        'button:not([disabled]):not([tabindex=\'-1\']),select:not([disabled]):not([tabindex=\'-1\']), textarea:not([disabled]):not([tabindex=\'-1\']), ' +
+        'iframe, object, embed, *[tabindex]:not([tabindex=\'-1\']), *[contenteditable=true]';
+/* tslint:enable */
 
 @Injectable()
 export class SkyModalComponentAdapterService {
@@ -31,4 +36,60 @@ export class SkyModalComponentAdapterService {
 
     }
   }
+
+  public loadFocusElementList(modalEl: ElementRef): Array<HTMLElement> {
+    let elements: Array<HTMLElement>
+      = Array.prototype.slice.call(modalEl.nativeElement.querySelectorAll(tabbableSelector));
+
+    return elements ? elements.filter((element) => {
+      return this.isVisible(element);
+    }): elements;
+  }
+
+  public isFocusInFirstItem(event: KeyboardEvent, list: Array<HTMLElement>): boolean {
+    return list.length > 0 && (event.target || event.srcElement) === list[0];
+  }
+
+  public isFocusInLastItem(event: KeyboardEvent, list: Array<HTMLElement>): boolean {
+    return list.length > 0 && (event.target || event.srcElement) === list[list.length -1];
+  }
+
+  public focusLastElement(list: Array<HTMLElement>): boolean {
+    if (list.length > 0) {
+      list[list.length - 1].focus();
+      return true;
+    }
+    return false;
+  }
+
+  public focusFirstElement(list: Array<HTMLElement>): boolean {
+    if (list.length > 0) {
+      list[0].focus();
+      return true;
+    }
+    return false;
+  }
+
+  public modalOpened(modalEl: ElementRef): void {
+    // debugger;
+    if (!(document.activeElement && modalEl.nativeElement.contains(document.activeElement))) {
+      let inputWithAutofocus = modalEl.nativeElement.querySelector('[autofocus]');
+
+      if (inputWithAutofocus) {
+        inputWithAutofocus.focus();
+      } else {
+        // setTimeout(() => {
+          let focusEl: HTMLElement = modalEl.nativeElement.querySelector('.sky-modal-dialog');
+          focusEl.focus();
+        // }, 1000);
+
+      }
+    }
+  }
+
+  private isVisible(element: HTMLElement) {
+    return !!(element.offsetWidth ||
+      element.offsetHeight ||
+      element.getClientRects().length);
+  }
 }
diff --git a/src/modules/modal/modal-host.service.ts b/src/modules/modal/modal-host.service.ts
index 715ec0a94..0f4544feb 100644
--- a/src/modules/modal/modal-host.service.ts
+++ b/src/modules/modal/modal-host.service.ts
@@ -19,6 +19,10 @@ export class SkyModalHostService {
     return SkyModalHostService.BASE_Z_INDEX + SkyModalHostService.modalHosts.length * 10;
   }
 
+  public static get topModal(): SkyModalHostService {
+    return SkyModalHostService.modalHosts[SkyModalHostService.modalHosts.length - 1];
+  }
+
   private static modalHosts: SkyModalHostService[] = [];
 
   public close = new EventEmitter<SkyModalComponent>();
diff --git a/src/modules/modal/modal.component.html b/src/modules/modal/modal.component.html
index bf86f716a..08e3bc8f0 100644
--- a/src/modules/modal/modal.component.html
+++ b/src/modules/modal/modal.component.html
@@ -5,6 +5,9 @@
 <!--<div @modalState="modalState">-->
 
 <div
+  class="sky-modal-dialog"
+  role="dialog"
+  tabindex="-1"
   (window:resize)="windowResize()"
 >
   <div class="sky-modal"
diff --git a/src/modules/modal/modal.component.ts b/src/modules/modal/modal.component.ts
index c24045555..e3be5e772 100644
--- a/src/modules/modal/modal.component.ts
+++ b/src/modules/modal/modal.component.ts
@@ -1,4 +1,4 @@
-import {
+ import {
   animate,
   Component,
   state,
@@ -6,7 +6,8 @@ import {
   transition,
   trigger,
   ElementRef,
-  AfterViewInit
+  AfterViewInit,
+  HostListener
 } from '@angular/core';
 
 import { SkyModalHostService } from './modal-host.service';
@@ -58,6 +59,45 @@ export class SkyModalComponent implements AfterViewInit {
     return !this.modalFullPage && this.isSizeEqual(this.config.size, 'large');
   }
 
+  @HostListener('document:keydown', ['$event'])
+  public onDocumentKeyDown(event: KeyboardEvent) {
+    if (event.defaultPrevented) {
+      return event;
+    }
+    if (SkyModalHostService.openModalCount > 0) {
+      let topModal = SkyModalHostService.topModal;
+      if (topModal && topModal === this.hostService) {
+        switch(event.which) {
+          case 27: { // Esc key pressed
+            event.preventDefault();
+            this.hostService.onClose(this);
+          }
+
+          case 9: {  // Tab pressed
+            let focusChanged = false;
+
+            let focusElementList = this.componentAdapter.loadFocusElementList(this.elRef);
+
+            if (
+              event.shiftKey &&
+              this.componentAdapter.isFocusInFirstItem(event, focusElementList)) {
+
+              focusChanged = this.componentAdapter.focusLastElement(focusElementList);
+            } else if (this.componentAdapter.isFocusInLastItem(event, focusElementList)) {
+              focusChanged = this.componentAdapter.focusFirstElement(focusElementList);
+            }
+
+            if (focusChanged) {
+              event.preventDefault();
+              event.stopPropagation();
+            }
+          }
+        }
+      }
+
+    }
+  }
+
   constructor(
     private hostService: SkyModalHostService,
     private config: SkyModalConfiguration,
@@ -66,6 +106,8 @@ export class SkyModalComponent implements AfterViewInit {
 
   public ngAfterViewInit() {
     this.componentAdapter.handleWindowChange(this.elRef);
+
+    this.componentAdapter.modalOpened(this.elRef);
   }
 
   public closeButtonClick() {

From 1d93551b19b4144ca6a99adb8a8f436af96571b5 Mon Sep 17 00:00:00 2001
From: Blackbaud-PatrickOFriel <patrick.ofriel@blackbaud.com>
Date: Tue, 18 Jul 2017 12:31:59 -0400
Subject: [PATCH 2/9] Set focus back to modal opener

---
 src/modules/modal/modal-adapter.service.ts | 4 ++++
 src/modules/modal/modal-host.component.ts  | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/src/modules/modal/modal-adapter.service.ts b/src/modules/modal/modal-adapter.service.ts
index ab405646e..8fd790ea3 100644
--- a/src/modules/modal/modal-adapter.service.ts
+++ b/src/modules/modal/modal-adapter.service.ts
@@ -27,4 +27,8 @@ export class SkyModalAdapterService {
       document.body.classList.remove(modalClass);
     }
   }
+
+  public getModalOpener(): HTMLElement {
+    return <HTMLElement>document.activeElement;
+  }
 }
diff --git a/src/modules/modal/modal-host.component.ts b/src/modules/modal/modal-host.component.ts
index 898b2d740..9732c05a7 100644
--- a/src/modules/modal/modal-host.component.ts
+++ b/src/modules/modal/modal-host.component.ts
@@ -47,6 +47,7 @@ export class SkyModalHostComponent {
     let factory = this.resolver.resolveComponentFactory(component);
     let hostService = new SkyModalHostService();
     let adapter = this.adapter;
+    let modalOpener: HTMLElement = adapter.getModalOpener();
 
     params.providers.push({
       provide: SkyModalHostService,
@@ -69,6 +70,9 @@ export class SkyModalHostComponent {
     function closeModal() {
       hostService.destroy();
       adapter.setPageScroll(SkyModalHostService.openModalCount > 0);
+      if (modalOpener && modalOpener.focus) {
+        modalOpener.focus();
+      }
       modalComponentRef.destroy();
     }
 

From f152e90489ea038b4f2bfe8d1387e8fb9a0b1733 Mon Sep 17 00:00:00 2001
From: Blackbaud-PatrickOFriel <patrick.ofriel@blackbaud.com>
Date: Tue, 18 Jul 2017 12:33:29 -0400
Subject: [PATCH 3/9] fix spelling error in modal docs

---
 src/app/learn/get-started/8.-unit-test-modals/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/learn/get-started/8.-unit-test-modals/index.html b/src/app/learn/get-started/8.-unit-test-modals/index.html
index b0f42c8e4..271df1e54 100644
--- a/src/app/learn/get-started/8.-unit-test-modals/index.html
+++ b/src/app/learn/get-started/8.-unit-test-modals/index.html
@@ -208,7 +208,7 @@
                 useValue: new MockModalHostService()
               },
               {
-                provide: SkyModalConfiguation,
+                provide: SkyModalConfiguration,
                 useValue: new MockModalConfiguration()
               }
             ]

From 474860be55cb463ed759ce12b1cdfe0159e6c1b6 Mon Sep 17 00:00:00 2001
From: Blackbaud-PatrickOFriel <patrick.ofriel@blackbaud.com>
Date: Tue, 18 Jul 2017 15:37:29 -0400
Subject: [PATCH 4/9] start of tests for modal accessibility

---
 .../modal-autofocus.component.fixture.html    |  4 +
 .../modal-autofocus.component.fixture.ts      |  9 ++
 .../modal/fixtures/modal-fixtures.module.ts   | 10 ++-
 .../modal-footer.component.fixture.html       | 13 +++
 .../modal-footer.component.fixture.ts         |  9 ++
 .../modal/modal-component-adapter.service.ts  | 14 +--
 src/modules/modal/modal.component.spec.ts     | 87 +++++++++++++++++++
 src/modules/modal/modal.component.ts          | 11 ++-
 8 files changed, 146 insertions(+), 11 deletions(-)
 create mode 100644 src/modules/modal/fixtures/modal-autofocus.component.fixture.html
 create mode 100644 src/modules/modal/fixtures/modal-autofocus.component.fixture.ts
 create mode 100644 src/modules/modal/fixtures/modal-footer.component.fixture.html
 create mode 100644 src/modules/modal/fixtures/modal-footer.component.fixture.ts

diff --git a/src/modules/modal/fixtures/modal-autofocus.component.fixture.html b/src/modules/modal/fixtures/modal-autofocus.component.fixture.html
new file mode 100644
index 000000000..158105dc0
--- /dev/null
+++ b/src/modules/modal/fixtures/modal-autofocus.component.fixture.html
@@ -0,0 +1,4 @@
+<sky-modal>
+  <sky-modal-header>Test</sky-modal-header>
+  <sky-modal-content>Content <input id="autofocus-el" autofocus/></sky-modal-content>
+</sky-modal>
diff --git a/src/modules/modal/fixtures/modal-autofocus.component.fixture.ts b/src/modules/modal/fixtures/modal-autofocus.component.fixture.ts
new file mode 100644
index 000000000..9c70d08df
--- /dev/null
+++ b/src/modules/modal/fixtures/modal-autofocus.component.fixture.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'sky-test-cmp',
+  templateUrl: './modal-autofocus.component.fixture.html'
+})
+export class ModalAutofocusTestComponent {
+
+}
diff --git a/src/modules/modal/fixtures/modal-fixtures.module.ts b/src/modules/modal/fixtures/modal-fixtures.module.ts
index 130997de1..579ba08ef 100644
--- a/src/modules/modal/fixtures/modal-fixtures.module.ts
+++ b/src/modules/modal/fixtures/modal-fixtures.module.ts
@@ -4,11 +4,15 @@ import { CommonModule } from '@angular/common';
 import { SkyModalModule } from '../modal.module';
 import { ModalTestComponent } from './modal.component.fixture';
 import { ModalWithValuesTestComponent } from './modal-with-values.component.fixture';
+import { ModalAutofocusTestComponent } from './modal-autofocus.component.fixture';
+import { ModalFooterTestComponent } from './modal-footer.component.fixture';
 
 @NgModule({
   declarations: [
     ModalTestComponent,
-    ModalWithValuesTestComponent
+    ModalWithValuesTestComponent,
+    ModalAutofocusTestComponent,
+    ModalFooterTestComponent
   ],
   imports: [
     CommonModule,
@@ -16,7 +20,9 @@ import { ModalWithValuesTestComponent } from './modal-with-values.component.fixt
   ],
   entryComponents: [
     ModalTestComponent,
-    ModalWithValuesTestComponent
+    ModalWithValuesTestComponent,
+    ModalAutofocusTestComponent,
+    ModalFooterTestComponent
   ]
 })
 export class SkyModalFixturesModule { }
diff --git a/src/modules/modal/fixtures/modal-footer.component.fixture.html b/src/modules/modal/fixtures/modal-footer.component.fixture.html
new file mode 100644
index 000000000..87c13cec8
--- /dev/null
+++ b/src/modules/modal/fixtures/modal-footer.component.fixture.html
@@ -0,0 +1,13 @@
+<sky-modal>
+  <sky-modal-header>Test</sky-modal-header>
+  <sky-modal-content>Content <input /></sky-modal-content>
+   <sky-modal-footer>
+    <button
+      type="button"
+      class="sky-btn sky-btn-primary"
+    >
+      Close
+    </button>
+  </sky-modal-footer>
+
+</sky-modal>
diff --git a/src/modules/modal/fixtures/modal-footer.component.fixture.ts b/src/modules/modal/fixtures/modal-footer.component.fixture.ts
new file mode 100644
index 000000000..272a2f090
--- /dev/null
+++ b/src/modules/modal/fixtures/modal-footer.component.fixture.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'sky-test-cmp',
+  templateUrl: './modal-footer.component.fixture.html'
+})
+export class ModalFooterTestComponent {
+
+}
diff --git a/src/modules/modal/modal-component-adapter.service.ts b/src/modules/modal/modal-component-adapter.service.ts
index 8f7eb4440..b1f3909ce 100644
--- a/src/modules/modal/modal-component-adapter.service.ts
+++ b/src/modules/modal/modal-component-adapter.service.ts
@@ -54,6 +54,11 @@ export class SkyModalComponentAdapterService {
     return list.length > 0 && (event.target || event.srcElement) === list[list.length -1];
   }
 
+  public isModalFocused(event: KeyboardEvent, modalEl: ElementRef): boolean {
+    return modalEl &&
+    (event.target || event.srcElement) === modalEl.nativeElement.querySelector('.sky-modal-dialog');
+  }
+
   public focusLastElement(list: Array<HTMLElement>): boolean {
     if (list.length > 0) {
       list[list.length - 1].focus();
@@ -71,17 +76,16 @@ export class SkyModalComponentAdapterService {
   }
 
   public modalOpened(modalEl: ElementRef): void {
-    // debugger;
+    /* istanbul ignore else */
+    /* handle the case where somehow there is a focused element already in the modal */
     if (!(document.activeElement && modalEl.nativeElement.contains(document.activeElement))) {
       let inputWithAutofocus = modalEl.nativeElement.querySelector('[autofocus]');
 
       if (inputWithAutofocus) {
         inputWithAutofocus.focus();
       } else {
-        // setTimeout(() => {
-          let focusEl: HTMLElement = modalEl.nativeElement.querySelector('.sky-modal-dialog');
-          focusEl.focus();
-        // }, 1000);
+        let focusEl: HTMLElement = modalEl.nativeElement.querySelector('.sky-modal-dialog');
+        focusEl.focus();
 
       }
     }
diff --git a/src/modules/modal/modal.component.spec.ts b/src/modules/modal/modal.component.spec.ts
index 4fcd3989c..3592cc343 100644
--- a/src/modules/modal/modal.component.spec.ts
+++ b/src/modules/modal/modal.component.spec.ts
@@ -15,6 +15,8 @@ import { SkyModalService } from './modal.service';
 
 import { SkyModalFixturesModule } from './fixtures/modal-fixtures.module';
 import { ModalTestComponent } from './fixtures/modal.component.fixture';
+import { ModalAutofocusTestComponent } from './fixtures/modal-autofocus.component.fixture';
+import { ModalFooterTestComponent } from './fixtures/modal-footer.component.fixture';
 
 import { TestUtility } from '../testing/testutility';
 
@@ -77,6 +79,91 @@ describe('Modal component', () => {
     closeModal(modalInstance1);
   }));
 
+  it('should focus the dialog when no autofocus is inside of content', fakeAsync(() => {
+    let modalInstance1 = openModal(ModalTestComponent);
+    expect(document.activeElement).toEqual(document.querySelector('.sky-modal-dialog'));
+    closeModal(modalInstance1);
+  }));
+
+  it('should focus the autofocus element when autofocus is inside of content', fakeAsync(() => {
+    let modalInstance1 = openModal(ModalAutofocusTestComponent);
+    expect(document.activeElement).toEqual(document.querySelector('#autofocus-el'));
+    closeModal(modalInstance1);
+  }));
+
+  it('should handle escape key press when modal is the top modal', fakeAsync(() => {
+    let modalInstance1 = openModal(ModalAutofocusTestComponent);
+    let escapeEvent: any = document.createEvent('CustomEvent');
+    escapeEvent.which = 27;
+    escapeEvent.keyCode = 27;
+    escapeEvent.initEvent('keydown', true, true);
+
+    document.dispatchEvent(escapeEvent);
+
+    tick();
+    applicationRef.tick();
+
+    expect(document.querySelector('.sky-modal')).not.toExist();
+
+  }));
+
+  it('should handle tab with shift when focus is on modal and in top modal', fakeAsync(() => {
+    let modalInstance1 = openModal(ModalFooterTestComponent);
+    let tabEvent: any = document.createEvent('CustomEvent');
+    tabEvent.which = 9;
+    tabEvent.keyCode = 9;
+    tabEvent.shiftKey = true;
+    tabEvent.initEvent('keydown', true, true);
+
+    document.dispatchEvent({
+      which: 9,
+      keyKode: 9,
+      shiftKey: true,
+      target: document.querySelector('.sky-modal-dialog')
+    });
+
+    tick();
+    applicationRef.tick();
+
+    expect(document.activeElement).toEqual(document.querySelector('.sky-btn-primary'));
+
+    closeModal(modalInstance1);
+  }));
+
+  it('should handle tab with shift when focus is in first item and in top modal', fakeAsync(() => {
+
+    let modalInstance1 = openModal(ModalFooterTestComponent);
+
+    let tabEvent: any = document.createEvent('CustomEvent');
+    tabEvent.which = 9;
+    tabEvent.keyCode = 9;
+    tabEvent.shiftKey = true;
+    tabEvent.srcElement = document.querySelector('.sky-modal-btn-close');
+    tabEvent.initEvent('keydown', true, true);
+
+    document.dispatchEvent(tabEvent);
+
+    tick();
+    applicationRef.tick();
+
+    expect(document.activeElement).toEqual(document.querySelector('.sky-btn-primary'));
+
+    closeModal(modalInstance1);
+
+  }));
+
+  it('should handle tab when focus is in last item and in top modal', () => {
+
+  });
+
+  it('should handle tab in content when in top modal', () => {
+
+  });
+
+  it('should handle tab when modals are stacked', () => {
+
+  });
+
   it('should close when the close button is clicked', fakeAsync(() => {
     openModal(ModalTestComponent);
 
diff --git a/src/modules/modal/modal.component.ts b/src/modules/modal/modal.component.ts
index e3be5e772..c1cc3d34a 100644
--- a/src/modules/modal/modal.component.ts
+++ b/src/modules/modal/modal.component.ts
@@ -61,9 +61,6 @@ export class SkyModalComponent implements AfterViewInit {
 
   @HostListener('document:keydown', ['$event'])
   public onDocumentKeyDown(event: KeyboardEvent) {
-    if (event.defaultPrevented) {
-      return event;
-    }
     if (SkyModalHostService.openModalCount > 0) {
       let topModal = SkyModalHostService.topModal;
       if (topModal && topModal === this.hostService) {
@@ -71,6 +68,7 @@ export class SkyModalComponent implements AfterViewInit {
           case 27: { // Esc key pressed
             event.preventDefault();
             this.hostService.onClose(this);
+            break;
           }
 
           case 9: {  // Tab pressed
@@ -80,7 +78,8 @@ export class SkyModalComponent implements AfterViewInit {
 
             if (
               event.shiftKey &&
-              this.componentAdapter.isFocusInFirstItem(event, focusElementList)) {
+              (this.componentAdapter.isFocusInFirstItem(event, focusElementList) ||
+              this.componentAdapter.isModalFocused(event, this.elRef))) {
 
               focusChanged = this.componentAdapter.focusLastElement(focusElementList);
             } else if (this.componentAdapter.isFocusInLastItem(event, focusElementList)) {
@@ -91,7 +90,11 @@ export class SkyModalComponent implements AfterViewInit {
               event.preventDefault();
               event.stopPropagation();
             }
+            break;
           }
+
+          default:
+            break;
         }
       }
 

From 4cd8464270133ab4b399516d50155904e935fce5 Mon Sep 17 00:00:00 2001
From: Blackbaud-PatrickOFriel <patrick.ofriel@blackbaud.com>
Date: Tue, 18 Jul 2017 18:30:58 -0400
Subject: [PATCH 5/9] more unit tests

---
 src/modules/modal/modal.component.spec.ts | 88 +++++++++++++++++++----
 src/modules/modal/modal.component.ts      |  1 +
 2 files changed, 75 insertions(+), 14 deletions(-)

diff --git a/src/modules/modal/modal.component.spec.ts b/src/modules/modal/modal.component.spec.ts
index 3592cc343..83edebdd5 100644
--- a/src/modules/modal/modal.component.spec.ts
+++ b/src/modules/modal/modal.component.spec.ts
@@ -115,12 +115,7 @@ describe('Modal component', () => {
     tabEvent.shiftKey = true;
     tabEvent.initEvent('keydown', true, true);
 
-    document.dispatchEvent({
-      which: 9,
-      keyKode: 9,
-      shiftKey: true,
-      target: document.querySelector('.sky-modal-dialog')
-    });
+    document.querySelector('.sky-modal-dialog').dispatchEvent(tabEvent);
 
     tick();
     applicationRef.tick();
@@ -138,10 +133,9 @@ describe('Modal component', () => {
     tabEvent.which = 9;
     tabEvent.keyCode = 9;
     tabEvent.shiftKey = true;
-    tabEvent.srcElement = document.querySelector('.sky-modal-btn-close');
     tabEvent.initEvent('keydown', true, true);
 
-    document.dispatchEvent(tabEvent);
+    document.querySelector('.sky-modal-btn-close').dispatchEvent(tabEvent);
 
     tick();
     applicationRef.tick();
@@ -152,17 +146,83 @@ describe('Modal component', () => {
 
   }));
 
-  it('should handle tab when focus is in last item and in top modal', () => {
+  it('should handle tab when focus is in last item and in top modal', fakeAsync(() => {
+    let modalInstance1 = openModal(ModalFooterTestComponent);
 
-  });
+    let tabEvent: any = document.createEvent('CustomEvent');
+    tabEvent.which = 9;
+    tabEvent.keyCode = 9;
+    tabEvent.shiftKey = false;
+    tabEvent.initEvent('keydown', true, true);
 
-  it('should handle tab in content when in top modal', () => {
+    document.querySelector('.sky-btn-primary').dispatchEvent(tabEvent);
 
-  });
+    tick();
+    applicationRef.tick();
 
-  it('should handle tab when modals are stacked', () => {
+    expect(document.activeElement).toEqual(document.querySelector('.sky-modal-btn-close'));
 
-  });
+    closeModal(modalInstance1);
+  }));
+
+  it('should handle tab in content when in top modal', fakeAsync(() => {
+    let modalInstance1 = openModal(ModalFooterTestComponent);
+
+    let tabEvent: any = document.createEvent('CustomEvent');
+    tabEvent.which = 9;
+    tabEvent.keyCode = 9;
+    tabEvent.shiftKey = false;
+    tabEvent.initEvent('keydown', true, true);
+
+    document.querySelector('input').dispatchEvent(tabEvent);
+
+    tick();
+    applicationRef.tick();
+
+    expect(document.activeElement).not.toEqual(document.querySelector('.sky-modal-btn-close'));
+
+    closeModal(modalInstance1);
+  }));
+
+  it('should handle tab when modals are stacked', fakeAsync(() => {
+    let modalInstance2 = openModal(ModalAutofocusTestComponent);
+    let modalInstance1 = openModal(ModalFooterTestComponent);
+
+    let tabEvent: any = document.createEvent('CustomEvent');
+    tabEvent.which = 9;
+    tabEvent.keyCode = 9;
+    tabEvent.shiftKey = false;
+    tabEvent.initEvent('keydown', true, true);
+
+    document.querySelector('.sky-btn-primary').dispatchEvent(tabEvent);
+
+    tick();
+    applicationRef.tick();
+
+    expect(document.activeElement).toEqual(document.querySelector('.sky-modal-btn-close'));
+
+    closeModal(modalInstance1);
+    closeModal(modalInstance2);
+  }));
+
+  it('should handle a different key code', fakeAsync(() => {
+    let modalInstance1 = openModal(ModalFooterTestComponent);
+
+    let tabEvent: any = document.createEvent('CustomEvent');
+    tabEvent.which = 3;
+    tabEvent.keyCode = 3;
+    tabEvent.shiftKey = false;
+    tabEvent.initEvent('keydown', true, true);
+
+    document.querySelector('.sky-btn-primary').dispatchEvent(tabEvent);
+
+    tick();
+    applicationRef.tick();
+
+    expect(document.activeElement).not.toEqual(document.querySelector('.sky-modal-btn-close'));
+
+    closeModal(modalInstance1);
+  }));
 
   it('should close when the close button is clicked', fakeAsync(() => {
     openModal(ModalTestComponent);
diff --git a/src/modules/modal/modal.component.ts b/src/modules/modal/modal.component.ts
index c1cc3d34a..86a920b7d 100644
--- a/src/modules/modal/modal.component.ts
+++ b/src/modules/modal/modal.component.ts
@@ -72,6 +72,7 @@ export class SkyModalComponent implements AfterViewInit {
           }
 
           case 9: {  // Tab pressed
+            console.log('event target', event.target);
             let focusChanged = false;
 
             let focusElementList = this.componentAdapter.loadFocusElementList(this.elRef);

From 7fd3b0c541a464d2857c7fead3f05a75ba4254dd Mon Sep 17 00:00:00 2001
From: Blackbaud-PatrickOFriel <patrick.ofriel@blackbaud.com>
Date: Tue, 18 Jul 2017 18:36:06 -0400
Subject: [PATCH 6/9] ignore sanity check branch

---
 src/modules/modal/modal.component.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/modules/modal/modal.component.ts b/src/modules/modal/modal.component.ts
index 86a920b7d..4f7bbb2f2 100644
--- a/src/modules/modal/modal.component.ts
+++ b/src/modules/modal/modal.component.ts
@@ -61,6 +61,8 @@ export class SkyModalComponent implements AfterViewInit {
 
   @HostListener('document:keydown', ['$event'])
   public onDocumentKeyDown(event: KeyboardEvent) {
+    /* istanbul ignore else */
+    /* sanity check */
     if (SkyModalHostService.openModalCount > 0) {
       let topModal = SkyModalHostService.topModal;
       if (topModal && topModal === this.hostService) {

From 9893c28bc07a8edf4047a38b0ec00b5adf498ae0 Mon Sep 17 00:00:00 2001
From: Blackbaud-PatrickOFriel <patrick.ofriel@blackbaud.com>
Date: Tue, 18 Jul 2017 18:41:18 -0400
Subject: [PATCH 7/9] Add sanity check for branch

---
 src/modules/modal/modal-host.component.ts | 2 ++
 src/modules/modal/modal.component.spec.ts | 8 ++++++++
 2 files changed, 10 insertions(+)

diff --git a/src/modules/modal/modal-host.component.ts b/src/modules/modal/modal-host.component.ts
index 9732c05a7..561dfa7fa 100644
--- a/src/modules/modal/modal-host.component.ts
+++ b/src/modules/modal/modal-host.component.ts
@@ -70,6 +70,8 @@ export class SkyModalHostComponent {
     function closeModal() {
       hostService.destroy();
       adapter.setPageScroll(SkyModalHostService.openModalCount > 0);
+      /* istanbul ignore else */
+      /* sanity check */
       if (modalOpener && modalOpener.focus) {
         modalOpener.focus();
       }
diff --git a/src/modules/modal/modal.component.spec.ts b/src/modules/modal/modal.component.spec.ts
index 83edebdd5..3557d94f5 100644
--- a/src/modules/modal/modal.component.spec.ts
+++ b/src/modules/modal/modal.component.spec.ts
@@ -224,6 +224,14 @@ describe('Modal component', () => {
     closeModal(modalInstance1);
   }));
 
+  it('handles no focusable elements', fakeAsync(() => {
+
+  }));
+
+  it('should handle empty list for focus first and last element functions', fakeAsync(() => {
+
+  }));
+
   it('should close when the close button is clicked', fakeAsync(() => {
     openModal(ModalTestComponent);
 

From 4364da5d47a3663afb0d9ce9db759f6fb2591fcd Mon Sep 17 00:00:00 2001
From: Blackbaud-PatrickOFriel <patrick.ofriel@blackbaud.com>
Date: Wed, 19 Jul 2017 10:49:59 -0400
Subject: [PATCH 8/9] Added aria-describedby and aria-labelledby support to
 modal dialog

TODO:
  - unit tests
---
 src/app/components/modal/index.html           | 13 ++++++++++
 .../modal/modal-demo-form.component.html      |  3 +++
 .../components/modal/modal-demo.component.ts  |  2 ++
 .../modal/fixtures/modal-fixtures.module.ts   |  7 ++++--
 .../modal-no-header.component.fixture.html    |  3 +++
 .../modal-no-header.component.fixture.ts      |  9 +++++++
 .../modal/modal-component-adapter.service.ts  | 19 +++++++++++----
 src/modules/modal/modal-configuration.ts      |  2 ++
 src/modules/modal/modal.component.html        |  6 +++--
 src/modules/modal/modal.component.spec.ts     | 24 +++++++++++++++++++
 src/modules/modal/modal.component.ts          | 15 +++++++++++-
 src/modules/modal/modal.interface.ts          |  2 ++
 12 files changed, 95 insertions(+), 10 deletions(-)
 create mode 100644 src/modules/modal/fixtures/modal-no-header.component.fixture.html
 create mode 100644 src/modules/modal/fixtures/modal-no-header.component.fixture.ts

diff --git a/src/app/components/modal/index.html b/src/app/components/modal/index.html
index 9fce4c105..e8ef64935 100644
--- a/src/app/components/modal/index.html
+++ b/src/app/components/modal/index.html
@@ -34,6 +34,19 @@
       Specifies a size for the modal. The valid options are <code>small</code>,
       <code>medium</code>, and <code>large</code>.
     </sky-demo-page-property>
+
+    <sky-demo-page-property
+        propertyName="ariaLabelledBy?"
+        isOptional="true"
+    >
+      Sets the <code>aria-labelledby</code> attribute for the modal dialog for accessibility support. The value should be an id (without the leading <code>#</code>) pointing to the element that labels your modal. Typically, this will be a header element. If not provided, this will default to the content of the <code>sky-modal-header</code> component.
+    </sky-demo-page-property>
+    <sky-demo-page-property
+      propertyName="ariaDescribedBy?"
+      isOptional="true"
+    >
+      Sets the <code>aria-describedby</code> attribute for the modal dialog for accessibility support.  The value should be an id (without the leading <code>#</code>) pointing to the element that describes your modal. Typically, this will be the text on your modal, but does not include something the user would interact with, like buttons or a form. If not provided, this will default to the content of the <code>sky-modal-content</code> component.
+    </sky-demo-page-property>
   </sky-demo-page-properties>
 
   <sky-demo-page-properties sectionHeading="Modal component properties">
diff --git a/src/app/components/modal/modal-demo-form.component.html b/src/app/components/modal/modal-demo-form.component.html
index c126871f3..8c398eb3f 100644
--- a/src/app/components/modal/modal-demo-form.component.html
+++ b/src/app/components/modal/modal-demo-form.component.html
@@ -3,6 +3,9 @@
     {{title}}
   </sky-modal-header>
   <sky-modal-content>
+    <div id="docs-modal-content">
+      This modal can have content!
+    </div>
     <label>
       Value A
       <input type="text" [(ngModel)]="context.valueA">
diff --git a/src/app/components/modal/modal-demo.component.ts b/src/app/components/modal/modal-demo.component.ts
index 7bac3bdde..f2e213fb1 100644
--- a/src/app/components/modal/modal-demo.component.ts
+++ b/src/app/components/modal/modal-demo.component.ts
@@ -28,6 +28,8 @@ export class SkyModalDemoComponent {
       options.size = 'large';
     }
 
+    options.ariaDescribedBy = 'docs-modal-content';
+
     let modalInstance = this.modal.open(SkyModalDemoFormComponent, options);
 
     modalInstance.closed.subscribe((result: SkyModalCloseArgs) => {
diff --git a/src/modules/modal/fixtures/modal-fixtures.module.ts b/src/modules/modal/fixtures/modal-fixtures.module.ts
index 579ba08ef..e5d08c5c2 100644
--- a/src/modules/modal/fixtures/modal-fixtures.module.ts
+++ b/src/modules/modal/fixtures/modal-fixtures.module.ts
@@ -6,13 +6,15 @@ import { ModalTestComponent } from './modal.component.fixture';
 import { ModalWithValuesTestComponent } from './modal-with-values.component.fixture';
 import { ModalAutofocusTestComponent } from './modal-autofocus.component.fixture';
 import { ModalFooterTestComponent } from './modal-footer.component.fixture';
+import { ModalNoHeaderTestComponent } from './modal-no-header.component.fixture';
 
 @NgModule({
   declarations: [
     ModalTestComponent,
     ModalWithValuesTestComponent,
     ModalAutofocusTestComponent,
-    ModalFooterTestComponent
+    ModalFooterTestComponent,
+    ModalNoHeaderTestComponent
   ],
   imports: [
     CommonModule,
@@ -22,7 +24,8 @@ import { ModalFooterTestComponent } from './modal-footer.component.fixture';
     ModalTestComponent,
     ModalWithValuesTestComponent,
     ModalAutofocusTestComponent,
-    ModalFooterTestComponent
+    ModalFooterTestComponent,
+    ModalNoHeaderTestComponent
   ]
 })
 export class SkyModalFixturesModule { }
diff --git a/src/modules/modal/fixtures/modal-no-header.component.fixture.html b/src/modules/modal/fixtures/modal-no-header.component.fixture.html
new file mode 100644
index 000000000..9e09538ef
--- /dev/null
+++ b/src/modules/modal/fixtures/modal-no-header.component.fixture.html
@@ -0,0 +1,3 @@
+<sky-modal>
+  <sky-modal-content>Content</sky-modal-content>
+</sky-modal>
diff --git a/src/modules/modal/fixtures/modal-no-header.component.fixture.ts b/src/modules/modal/fixtures/modal-no-header.component.fixture.ts
new file mode 100644
index 000000000..53c5e68ab
--- /dev/null
+++ b/src/modules/modal/fixtures/modal-no-header.component.fixture.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'sky-test-cmp',
+  templateUrl: './modal-no-header.component.fixture.html'
+})
+export class ModalNoHeaderTestComponent {
+
+}
diff --git a/src/modules/modal/modal-component-adapter.service.ts b/src/modules/modal/modal-component-adapter.service.ts
index b1f3909ce..fa62d8b49 100644
--- a/src/modules/modal/modal-component-adapter.service.ts
+++ b/src/modules/modal/modal-component-adapter.service.ts
@@ -41,22 +41,31 @@ export class SkyModalComponentAdapterService {
     let elements: Array<HTMLElement>
       = Array.prototype.slice.call(modalEl.nativeElement.querySelectorAll(tabbableSelector));
 
-    return elements ? elements.filter((element) => {
+    return elements.filter((element) => {
       return this.isVisible(element);
-    }): elements;
+    });
   }
 
   public isFocusInFirstItem(event: KeyboardEvent, list: Array<HTMLElement>): boolean {
-    return list.length > 0 && (event.target || event.srcElement) === list[0];
+    /* istanbul ignore next */
+    /* sanity check */
+    let eventTarget = event.target || event.srcElement;
+    return list.length > 0 && eventTarget === list[0];
   }
 
   public isFocusInLastItem(event: KeyboardEvent, list: Array<HTMLElement>): boolean {
-    return list.length > 0 && (event.target || event.srcElement) === list[list.length -1];
+    /* istanbul ignore next */
+    /* sanity check */
+    let eventTarget = event.target || event.srcElement;
+    return list.length > 0 && eventTarget === list[list.length -1];
   }
 
   public isModalFocused(event: KeyboardEvent, modalEl: ElementRef): boolean {
+    /* istanbul ignore next */
+    /* sanity check */
+    let eventTarget = event.target || event.srcElement;
     return modalEl &&
-    (event.target || event.srcElement) === modalEl.nativeElement.querySelector('.sky-modal-dialog');
+    eventTarget === modalEl.nativeElement.querySelector('.sky-modal-dialog');
   }
 
   public focusLastElement(list: Array<HTMLElement>): boolean {
diff --git a/src/modules/modal/modal-configuration.ts b/src/modules/modal/modal-configuration.ts
index 46b4590a3..2a012c579 100644
--- a/src/modules/modal/modal-configuration.ts
+++ b/src/modules/modal/modal-configuration.ts
@@ -5,6 +5,8 @@ export class SkyModalConfiguration {
 
   public fullPage: boolean;
   public size: string;
+  public ariaDescribedBy: string;
+  public ariaLabelledBy: string;
 
   constructor() {
     this.fullPage = this.fullPage;
diff --git a/src/modules/modal/modal.component.html b/src/modules/modal/modal.component.html
index 08e3bc8f0..a1ff029e7 100644
--- a/src/modules/modal/modal.component.html
+++ b/src/modules/modal/modal.component.html
@@ -8,6 +8,8 @@
   class="sky-modal-dialog"
   role="dialog"
   tabindex="-1"
+  [attr.aria-describedby]="ariaDescribedBy"
+  [attr.aria-labelledby]="ariaLabelledBy"
   (window:resize)="windowResize()"
 >
   <div class="sky-modal"
@@ -22,7 +24,7 @@
       }">
 
     <div class="sky-modal-header" [hidden]="!headerContent || !headerContent.children || headerContent.children.length < 1">
-      <div class="sky-modal-header-content"  #headerContent>
+      <div [attr.id]="modalHeaderId" class="sky-modal-header-content"  #headerContent>
         <ng-content select="sky-modal-header"></ng-content>
       </div>
       <div class="sky-modal-header-buttons">
@@ -34,7 +36,7 @@
       </div>
 
     </div>
-    <div class="sky-modal-content">
+    <div [attr.id]="modalContentId" class="sky-modal-content">
       <ng-content select="sky-modal-content"></ng-content>
     </div>
     <div class="sky-modal-footer">
diff --git a/src/modules/modal/modal.component.spec.ts b/src/modules/modal/modal.component.spec.ts
index 3557d94f5..843952667 100644
--- a/src/modules/modal/modal.component.spec.ts
+++ b/src/modules/modal/modal.component.spec.ts
@@ -18,8 +18,12 @@ import { ModalTestComponent } from './fixtures/modal.component.fixture';
 import { ModalAutofocusTestComponent } from './fixtures/modal-autofocus.component.fixture';
 import { ModalFooterTestComponent } from './fixtures/modal-footer.component.fixture';
 
+import { ModalNoHeaderTestComponent } from './fixtures/modal-no-header.component.fixture';
+
 import { TestUtility } from '../testing/testutility';
 
+import { SkyModalComponentAdapterService } from './modal-component-adapter.service';
+
 describe('Modal component', () => {
   let applicationRef: ApplicationRef;
   let modalService: SkyModalService;
@@ -225,11 +229,31 @@ describe('Modal component', () => {
   }));
 
   it('handles no focusable elements', fakeAsync(() => {
+    let modalInstance1 = openModal(ModalNoHeaderTestComponent);
+
+    let tabEvent: any = document.createEvent('CustomEvent');
+    tabEvent.which = 9;
+    tabEvent.keyCode = 9;
+    tabEvent.shiftKey = false;
+    tabEvent.initEvent('keydown', true, true);
 
+    document.dispatchEvent(tabEvent);
+
+    tick();
+    applicationRef.tick();
+
+    expect(document.activeElement).not.toEqual(document.querySelector('.sky-modal-btn-close'));
+
+    closeModal(modalInstance1);
   }));
 
   it('should handle empty list for focus first and last element functions', fakeAsync(() => {
+    let adapterService = new SkyModalComponentAdapterService();
+    let firstResult = adapterService.focusFirstElement([]);
+    expect(firstResult).toBe(false);
 
+    let lastResult = adapterService.focusLastElement([]);
+    expect(lastResult).toBe(false);
   }));
 
   it('should close when the close button is clicked', fakeAsync(() => {
diff --git a/src/modules/modal/modal.component.ts b/src/modules/modal/modal.component.ts
index 4f7bbb2f2..948580c12 100644
--- a/src/modules/modal/modal.component.ts
+++ b/src/modules/modal/modal.component.ts
@@ -15,6 +15,8 @@ import { SkyModalConfiguration } from './modal-configuration';
 
 import { SkyModalComponentAdapterService } from './modal-component-adapter.service';
 
+let skyModalUniqueIdentifier: number = 0;
+
 @Component({
   selector: 'sky-modal',
   templateUrl: './modal.component.html',
@@ -39,6 +41,9 @@ import { SkyModalComponentAdapterService } from './modal-component-adapter.servi
 export class SkyModalComponent implements AfterViewInit {
   public modalState = 'in';
 
+  public modalContentId: string = 'sky-modal-content-id-' + skyModalUniqueIdentifier.toString();
+  public modalHeaderId: string = 'sky-modal-header-id-' + skyModalUniqueIdentifier.toString();
+
   public get modalZIndex() {
     return this.hostService.getModalZIndex();
   }
@@ -59,6 +64,14 @@ export class SkyModalComponent implements AfterViewInit {
     return !this.modalFullPage && this.isSizeEqual(this.config.size, 'large');
   }
 
+  public get ariaDescribedBy() {
+    return this.config.ariaDescribedBy || this.modalContentId;
+  }
+
+  public get ariaLabelledBy() {
+    return this.config.ariaLabelledBy || this.modalHeaderId;
+  }
+
   @HostListener('document:keydown', ['$event'])
   public onDocumentKeyDown(event: KeyboardEvent) {
     /* istanbul ignore else */
@@ -74,7 +87,6 @@ export class SkyModalComponent implements AfterViewInit {
           }
 
           case 9: {  // Tab pressed
-            console.log('event target', event.target);
             let focusChanged = false;
 
             let focusElementList = this.componentAdapter.loadFocusElementList(this.elRef);
@@ -111,6 +123,7 @@ export class SkyModalComponent implements AfterViewInit {
     private componentAdapter: SkyModalComponentAdapterService) { }
 
   public ngAfterViewInit() {
+    skyModalUniqueIdentifier++;
     this.componentAdapter.handleWindowChange(this.elRef);
 
     this.componentAdapter.modalOpened(this.elRef);
diff --git a/src/modules/modal/modal.interface.ts b/src/modules/modal/modal.interface.ts
index a0519b248..d5e1c1407 100644
--- a/src/modules/modal/modal.interface.ts
+++ b/src/modules/modal/modal.interface.ts
@@ -2,4 +2,6 @@ export interface SkyModalConfiguationInterface {
   fullPage?: boolean;
   size?: string;
   providers?: any[];
+  ariaDescribedBy?: string;
+  ariaLabelledBy?: string;
 }

From 01e7d94088752743b58e5ea2f5198a800edc9f9c Mon Sep 17 00:00:00 2001
From: Blackbaud-PatrickOFriel <patrick.ofriel@blackbaud.com>
Date: Wed, 19 Jul 2017 14:31:25 -0400
Subject: [PATCH 9/9] Fix lint errors and unit tests for aria attributes

---
 .../modal/modal-component-adapter.service.ts  |  2 +-
 src/modules/modal/modal-configuration.ts      |  8 +++---
 src/modules/modal/modal-host.service.spec.ts  |  5 +++-
 src/modules/modal/modal.component.spec.ts     | 28 +++++++++++++++++++
 src/modules/modal/modal.component.ts          |  2 +-
 5 files changed, 38 insertions(+), 7 deletions(-)

diff --git a/src/modules/modal/modal-component-adapter.service.ts b/src/modules/modal/modal-component-adapter.service.ts
index fa62d8b49..b8bc5fb5c 100644
--- a/src/modules/modal/modal-component-adapter.service.ts
+++ b/src/modules/modal/modal-component-adapter.service.ts
@@ -57,7 +57,7 @@ export class SkyModalComponentAdapterService {
     /* istanbul ignore next */
     /* sanity check */
     let eventTarget = event.target || event.srcElement;
-    return list.length > 0 && eventTarget === list[list.length -1];
+    return list.length > 0 && eventTarget === list[list.length - 1];
   }
 
   public isModalFocused(event: KeyboardEvent, modalEl: ElementRef): boolean {
diff --git a/src/modules/modal/modal-configuration.ts b/src/modules/modal/modal-configuration.ts
index 2a012c579..b5aa22f82 100644
--- a/src/modules/modal/modal-configuration.ts
+++ b/src/modules/modal/modal-configuration.ts
@@ -3,10 +3,10 @@ import { Injectable } from '@angular/core';
 @Injectable()
 export class SkyModalConfiguration {
 
-  public fullPage: boolean;
-  public size: string;
-  public ariaDescribedBy: string;
-  public ariaLabelledBy: string;
+  public fullPage?: boolean;
+  public size?: string;
+  public ariaDescribedBy?: string;
+  public ariaLabelledBy?: string;
 
   constructor() {
     this.fullPage = this.fullPage;
diff --git a/src/modules/modal/modal-host.service.spec.ts b/src/modules/modal/modal-host.service.spec.ts
index f0844ad60..d8bdfcbe6 100644
--- a/src/modules/modal/modal-host.service.spec.ts
+++ b/src/modules/modal/modal-host.service.spec.ts
@@ -55,7 +55,10 @@ describe('Modal host service', () => {
     let componentService = new SkyModalComponentAdapterService();
     let component = new SkyModalComponent(
         service,
-        { fullPage: false, size: 'medium' },
+        {
+          fullPage: false,
+          size: 'medium'
+        },
         { nativeElement: {} },
         componentService
       );
diff --git a/src/modules/modal/modal.component.spec.ts b/src/modules/modal/modal.component.spec.ts
index 843952667..204ff9d1b 100644
--- a/src/modules/modal/modal.component.spec.ts
+++ b/src/modules/modal/modal.component.spec.ts
@@ -354,4 +354,32 @@ describe('Modal component', () => {
 
     closeModal(modalInstance);
   }));
+
+  it('should default the aria-labelledby and aria-describedby', fakeAsync(() => {
+    let modalInstance = openModal(ModalTestComponent);
+
+    expect(document.querySelector('.sky-modal-dialog').getAttribute('aria-labelledby')
+      .indexOf('sky-modal-header-id-'))
+      .not.toBe(-1);
+    expect(document.querySelector('.sky-modal-dialog').getAttribute('aria-describedby')
+      .indexOf('sky-modal-content-id-'))
+      .not.toBe(-1);
+    closeModal(modalInstance);
+  }));
+
+  it('should accept configuration options for aria-labelledBy and aria-describedby',
+  fakeAsync(() => {
+    let modalInstance = openModal(ModalTestComponent, {
+      'ariaLabelledBy': 'customlabelledby',
+      'ariaDescribedBy': 'customdescribedby'
+    });
+
+    expect(document.querySelector('.sky-modal-dialog').getAttribute('aria-labelledby'))
+      .toBe('customlabelledby');
+    expect(document.querySelector('.sky-modal-dialog').getAttribute('aria-describedby'))
+      .toBe('customdescribedby');
+
+    closeModal(modalInstance);
+
+  }));
 });
diff --git a/src/modules/modal/modal.component.ts b/src/modules/modal/modal.component.ts
index 948580c12..0d2192bb8 100644
--- a/src/modules/modal/modal.component.ts
+++ b/src/modules/modal/modal.component.ts
@@ -79,7 +79,7 @@ export class SkyModalComponent implements AfterViewInit {
     if (SkyModalHostService.openModalCount > 0) {
       let topModal = SkyModalHostService.topModal;
       if (topModal && topModal === this.hostService) {
-        switch(event.which) {
+        switch (event.which) {
           case 27: { // Esc key pressed
             event.preventDefault();
             this.hostService.onClose(this);