Modal tab trap

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">

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">

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) => {

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()
               }
             ]

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>

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 {
+
+}

src/modules/modal/fixtures/modal-fixtures.module.ts

@@ -4,19 +4,28 @@ 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';
+import { ModalNoHeaderTestComponent } from './modal-no-header.component.fixture';
 
 @NgModule({
   declarations: [
     ModalTestComponent,
-    ModalWithValuesTestComponent
+    ModalWithValuesTestComponent,
+    ModalAutofocusTestComponent,
+    ModalFooterTestComponent,
+    ModalNoHeaderTestComponent
   ],
   imports: [
     CommonModule,
     SkyModalModule
   ],
   entryComponents: [
     ModalTestComponent,
-    ModalWithValuesTestComponent
+    ModalWithValuesTestComponent,
+    ModalAutofocusTestComponent,
+    ModalFooterTestComponent,
+    ModalNoHeaderTestComponent
   ]
 })
 export class SkyModalFixturesModule { }

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>

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 {
+
+}

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>

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 {
+
+}

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;
+  }
 }

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,73 @@ export class SkyModalComponentAdapterService {
 
     }
   }
+
+  public loadFocusElementList(modalEl: ElementRef): Array<HTMLElement> {
+    let elements: Array<HTMLElement>
+      = Array.prototype.slice.call(modalEl.nativeElement.querySelectorAll(tabbableSelector));
+
+    return elements.filter((element) => {
+      return this.isVisible(element);
+    });
+  }
+
+  public isFocusInFirstItem(event: KeyboardEvent, list: Array<HTMLElement>): boolean {
+    /* 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 {
+    /* 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 &&
+    eventTarget === modalEl.nativeElement.querySelector('.sky-modal-dialog');
+  }
+
+  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 {
+    /* 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 {
+        let focusEl: HTMLElement = modalEl.nativeElement.querySelector('.sky-modal-dialog');
+        focusEl.focus();
+
+      }
+    }
+  }
+
+  private isVisible(element: HTMLElement) {
+    return !!(element.offsetWidth ||
+      element.offsetHeight ||
+      element.getClientRects().length);
+  }
 }

src/modules/modal/modal-configuration.ts

@@ -3,8 +3,10 @@ import { Injectable } from '@angular/core';
 @Injectable()
 export class SkyModalConfiguration {
 
-  public fullPage: boolean;
-  public size: string;
+  public fullPage?: boolean;
+  public size?: string;
+  public ariaDescribedBy?: string;
+  public ariaLabelledBy?: string;
 
   constructor() {
     this.fullPage = this.fullPage;

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,11 @@ export class SkyModalHostComponent {
     function closeModal() {
       hostService.destroy();
       adapter.setPageScroll(SkyModalHostService.openModalCount > 0);
+      /* istanbul ignore else */
+      /* sanity check */
+      if (modalOpener && modalOpener.focus) {
+        modalOpener.focus();
+      }
       modalComponentRef.destroy();
     }
 

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

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

src/modules/modal/modal.component.html

@@ -5,6 +5,11 @@
 <!--<div @modalState="modalState">-->
 
 <div
+  class="sky-modal-dialog"
+  role="dialog"
+  tabindex="-1"
+  [attr.aria-describedby]="ariaDescribedBy"
+  [attr.aria-labelledby]="ariaLabelledBy"
   (window:resize)="windowResize()"
 >
   <div class="sky-modal"
@@ -19,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">
@@ -31,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">