Focus modal instead of parent dialog (#1392)

blackbaud · Jan 30, 2018 · 76c5998 · 76c5998
1 parent f695308
commit 76c5998
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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;
-}
+}
diff --git 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);
   }));