From 76c5998ae8132a44ec6aa03c5a47cbcbb34bc304 Mon Sep 17 00:00:00 2001
From: saransh kataria <saranshisthebest@gmail.com>
Date: Tue, 30 Jan 2018 22:27:29 +0530
Subject: [PATCH] Focus modal instead of parent dialog (#1392)

---
 src/modules/modal/modal-component-adapter.service.ts | 2 +-
 src/modules/modal/modal.component.html               | 2 +-
 src/modules/modal/modal.component.scss               | 6 +++++-
 src/modules/modal/modal.component.spec.ts            | 2 +-
 4 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/modules/modal/modal-component-adapter.service.ts b/src/modules/modal/modal-component-adapter.service.ts
index 49dd4db74..b85966e30 100644
--- a/src/modules/modal/modal-component-adapter.service.ts
+++ b/src/modules/modal/modal-component-adapter.service.ts
@@ -96,7 +96,7 @@ export class SkyModalComponentAdapterService {
       if (inputWithAutofocus) {
         inputWithAutofocus.focus();
       } else {
-        let focusEl: HTMLElement = modalEl.nativeElement.querySelector('.sky-modal-dialog');
+        let focusEl: HTMLElement = modalEl.nativeElement.querySelector('.sky-modal');
         focusEl.focus();
 
       }
diff --git a/src/modules/modal/modal.component.html b/src/modules/modal/modal.component.html
index 183f6e4f6..d3ba72220 100644
--- a/src/modules/modal/modal.component.html
+++ b/src/modules/modal/modal.component.html
@@ -7,12 +7,12 @@
 <div
   class="sky-modal-dialog"
   role="dialog"
-  tabindex="-1"
   [attr.aria-describedby]="ariaDescribedBy"
   [attr.aria-labelledby]="ariaLabelledBy"
   (window:resize)="windowResize()"
 >
   <div class="sky-modal"
+    tabindex="-1"
     [ngClass]="{
       'sky-modal-full-page': modalFullPage,
       'sky-modal-small' : isSmallSize,
diff --git a/src/modules/modal/modal.component.scss b/src/modules/modal/modal.component.scss
index f194a4c92..78f008cf8 100644
--- a/src/modules/modal/modal.component.scss
+++ b/src/modules/modal/modal.component.scss
@@ -13,6 +13,10 @@
   flex-direction: column;
 }
 
+.sky-modal:focus {
+  outline: none;
+}
+
 @media (min-width: $sky-screen-sm-min) {
   .sky-modal:not(.sky-modal-large) {
     margin: 0 auto;
@@ -125,4 +129,4 @@
 :host /deep/ .sky-sectioned-form {
   height: 460px;
   margin: -$sky-margin-plus-half;
-}
\ No newline at end of file
+}
diff --git a/src/modules/modal/modal.component.spec.ts b/src/modules/modal/modal.component.spec.ts
index e492e4d94..a943e4390 100644
--- a/src/modules/modal/modal.component.spec.ts
+++ b/src/modules/modal/modal.component.spec.ts
@@ -86,7 +86,7 @@ describe('Modal component', () => {
 
   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'));
+    expect(document.activeElement).toEqual(document.querySelector('.sky-modal'));
     closeModal(modalInstance1);
   }));