Fix wait not blocking focus nav

src/app/public/modules/wait/fixtures/wait.component.fixture.html

@@ -1,9 +1,36 @@
-<div class="sky-wait-test-component">
-  <sky-wait
-    [ariaLabel]="ariaLabel"
-    [isFullPage]="isFullPage"
-    [isNonBlocking]="isNonBlocking"
-    [isWaiting]="isWaiting"
-  >
-  </sky-wait>
+<button *ngIf="showAnchor0"
+  class="sky-btn sky-btn-secondary"
+  id="anchor-0"
+  href="/"
+>
+  Anchor tag 0
+</button>
+<button
+  class="sky-btn sky-btn-secondary"
+  id="anchor-1"
+  href="/"
+>
+  Anchor tag 1
+</button>
+  <div class="sky-wait-test-component">
+    <button
+      class='sky-btn sky-btn-primary'
+      id="inside-button"
+    >
+      I am button
+    </button>
+    <sky-wait
+      [ariaLabel]="ariaLabel"
+      [isFullPage]="isFullPage"
+      [isNonBlocking]="isNonBlocking"
+      [isWaiting]="isWaiting"
+    >
+    </sky-wait>
 </div>
+<button *ngIf="showAnchor2"
+  class="sky-btn sky-btn-secondary"
+  id="anchor-2"
+  href="/"
+>
+  Anchor tag 2
+</button>

src/app/public/modules/wait/fixtures/wait.component.fixture.ts

@@ -1,8 +1,13 @@
 import {
   Component,
-  Input
+  Input,
+  ViewChild
 } from '@angular/core';
 
+import {
+  SkyWaitComponent
+} from '..';
+
 @Component({
   selector: 'sky-test-cmp',
   templateUrl: './wait.component.fixture.html'
@@ -19,4 +24,10 @@ export class SkyWaitTestComponent {
 
   @Input()
   public ariaLabel: string;
+
+  public showAnchor0 = true;
+  public showAnchor2 = true;
+
+  @ViewChild(SkyWaitComponent)
+  public waitComponent: SkyWaitComponent;
 }

src/app/public/modules/wait/wait-adapter.service.ts

@@ -1,13 +1,28 @@
 import {
   ElementRef,
   Injectable,
-  Renderer
+  Renderer,
+  OnDestroy
 } from '@angular/core';
 
+import {
+  SkyWaitComponent
+} from './wait.component';
+
 @Injectable()
-export class SkyWaitAdapterService {
+export class SkyWaitAdapterService implements OnDestroy {
+  private parentListeners: {[key: string]: Function} = {};
 
-  constructor(private renderer: Renderer) { }
+  constructor(
+    private renderer: Renderer
+  ) { }
+
+  public ngOnDestroy() {
+    for (let key of Object.keys(this.parentListeners)) {
+      this.parentListeners[key]();
+      delete this.parentListeners[key];
+    }
+  }
 
   public setWaitBounds(waitEl: ElementRef) {
     this.renderer.setElementStyle(waitEl.nativeElement.parentElement, 'position', 'relative');
@@ -21,13 +36,95 @@ export class SkyWaitAdapterService {
     waitEl: ElementRef,
     isFullPage: boolean,
     isWaiting: boolean,
-    isNonBlocking = false
-  ): void {
+    id: string,
+    waitCmp: SkyWaitComponent
+  ) {
     let busyEl = isFullPage ? document.body : waitEl.nativeElement.parentElement;
     let state = isWaiting ? 'true' : undefined;
 
-    if (!isNonBlocking) {
+    if (!(waitCmp && waitCmp.isNonBlocking)) {
       this.renderer.setElementAttribute(busyEl, 'aria-busy', state);
+
+      // Remove focus from page when full page blocking wait
+      if (isFullPage || busyEl.contains(document.activeElement)) {
+        this.clearDocumentFocus();
+      }
+
+      if (isWaiting) {
+        // Prevent tab navigation within the waited page
+        let endListenerFunc = this.renderer.listen(document.body, 'keydown', (event: KeyboardEvent) => {
+          if (event.key.toLowerCase() === 'tab') {
+            event.preventDefault();
+            event.stopPropagation();
+            event.stopImmediatePropagation();
+            if (!waitCmp.isFullPage) {
+              // Propagate tab navigation if attempted into waited element
+              this.focusNextElement(busyEl, event.shiftKey);
+            } else {
+              this.clearDocumentFocus();
+            }
+          }
+        });
+        this.parentListeners[id] = endListenerFunc;
+      } else if (id in this.parentListeners) {
+        // Clean up existing listener
+        this.parentListeners[id]();
+        delete this.parentListeners[id];
+      }
+    }
+  }
+
+  private focusNextElement(parentElement: any, shiftKey: boolean): void {
+    // Select all possible focussable elements
+    let focussableElements =
+      '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]';
+     let focussable = Array.prototype.filter.call(document.body.querySelectorAll(focussableElements),
+      (element: any) => {
+        return element.offsetWidth > 0 || element.offsetHeight > 0 || element === document.activeElement;
+      });
+     // If shift tab, go in the other direction
+    let modifier = shiftKey ? -1 : 1;
+
+    // Find the next navigable element that isn't waiting
+    let startingIndex = focussable.indexOf(document.activeElement);
+    let curIndex = startingIndex + modifier;
+    while (focussable[curIndex] && parentElement.contains(focussable[curIndex])) {
+      curIndex += modifier;
+    }
+
+    if (focussable[curIndex]) {
+      focussable[curIndex].focus();
+    } else {
+      // Try wrapping the navigation
+      curIndex = modifier > 0 ? 0 : focussable.length - 1;
+      while (
+        curIndex < startingIndex &&
+        focussable[curIndex] &&
+        parentElement.contains(focussable[curIndex])
+      ) {
+        curIndex += modifier;
+      }
+      if (focussable[curIndex] && curIndex !== startingIndex) {
+        focussable[curIndex].focus();
+      } else {
+        // No valid target, wipe focus
+        this.clearDocumentFocus();
+      }
+    }
+  }
+
+  private clearDocumentFocus() {
+    if (document.activeElement && (document.activeElement as any).blur) {
+      (document.activeElement as any).blur();
     }
+    document.body.focus();
   }
 }

src/app/public/modules/wait/wait.component.spec.ts

@@ -1,18 +1,20 @@
 import {
   async,
-  TestBed
+  TestBed,
+  ComponentFixture,
+  tick,
+  fakeAsync
 } from '@angular/core/testing';
 
 import {
   SkyLibResourcesService
 } from '@skyux/i18n';
-
 import {
   SkyLibResourcesTestService
 } from '@skyux/i18n/testing';
-
 import {
-  expect
+  expect,
+  SkyAppTestUtility
 } from '@skyux-sdk/testing';
 
 import {
@@ -75,7 +77,6 @@ describe('Wait component', () => {
     fixture.componentInstance.isWaiting = false;
     fixture.detectChanges();
     expect(el.querySelector('.sky-wait-test-component').style.position).toBe('');
-
   });
 
   it('should set the appropriate class when wait component fullPage is set to true', () => {
@@ -120,6 +121,80 @@ describe('Wait component', () => {
     expect(el.querySelector('.sky-wait-mask-loading-blocking')).toBeNull();
   });
 
+  it('should propagate tab navigation forward and backward avoiding waited element', fakeAsync(() => {
+    let fixture = TestBed.createComponent(SkyWaitTestComponent);
+    fixture.detectChanges();
+
+    fixture.componentInstance.isFullPage = false;
+    fixture.componentInstance.isWaiting = true;
+    fixture.detectChanges();
+
+    let anchor0: any = document.body.querySelector('#anchor-0');
+    let anchor1: any = document.body.querySelector('#anchor-1');
+    let anchor2: any = document.body.querySelector('#anchor-2');
+    anchor1.focus();
+
+    SkyAppTestUtility.fireDomEvent(document.body, 'keydown', {
+      keyboardEventInit: { key: 'Tab' }
+    });
+    fixture.detectChanges();
+    tick();
+    fixture.detectChanges();
+    expect(document.activeElement).toBe(anchor2);
+
+    anchor2.focus();
+    SkyAppTestUtility.fireDomEvent(document.body, 'keydown', {
+      keyboardEventInit: { key: 'Tab', shiftKey: true }
+    });
+    fixture.detectChanges();
+    tick();
+    fixture.detectChanges();
+    expect(document.activeElement).toBe(anchor1);
+
+    fixture.componentInstance.showAnchor2 = false;
+    anchor1.focus();
+    fixture.detectChanges();
+    tick();
+    fixture.detectChanges();
+    SkyAppTestUtility.fireDomEvent(document.body, 'keydown', {
+      keyboardEventInit: { key: 'Tab', shiftKey: false }
+    });
+
+    fixture.detectChanges();
+    tick();
+    fixture.detectChanges();
+    expect(document.activeElement).toBe(anchor0);
+
+    fixture.componentInstance.showAnchor0 = false;
+    fixture.componentInstance.showAnchor2 = false;
+    anchor1.focus();
+    fixture.detectChanges();
+    tick();
+    fixture.detectChanges();
+    SkyAppTestUtility.fireDomEvent(document.body, 'keydown', {
+      keyboardEventInit: { key: 'Tab', shiftKey: false }
+    });
+
+    fixture.detectChanges();
+    tick();
+    fixture.detectChanges();
+    expect(document.activeElement).toBe(document.body);
+
+    fixture.componentInstance.isWaiting = false;
+    fixture.detectChanges();
+    tick();
+    fixture.detectChanges();
+
+    anchor1.focus();
+    SkyAppTestUtility.fireDomEvent(document.body, 'keydown', {
+      keyboardEventInit: { key: 'Tab' }
+    });
+    fixture.detectChanges();
+    tick();
+    fixture.detectChanges();
+    expect(document.activeElement).toBe(anchor1);
+  }));
+
   it('should set aria-busy on document body when fullPage is true', async(() => {
     const fixture = TestBed.createComponent(SkyWaitTestComponent);
 
@@ -154,6 +229,37 @@ describe('Wait component', () => {
     expect(el.querySelector('.sky-wait-test-component').getAttribute('aria-busy')).toBeNull();
   });
 
+  let testlistenerCreated = (fixture: ComponentFixture<SkyWaitTestComponent>) => {
+    fixture.detectChanges();
+
+    let waitComponent: any = fixture.componentInstance.waitComponent;
+    let adapter: any = waitComponent.adapterService;
+    expect(waitComponent.id in adapter.parentListeners).toBeTruthy();
+    expect(Object.keys(adapter.parentListeners).length).toBe(1);
+
+    fixture.componentInstance.isWaiting = false;
+    fixture.detectChanges();
+    expect(waitComponent.id in adapter.parentListeners).toBeFalsy();
+    expect(Object.keys(adapter.parentListeners).length).toBe(0);
+  };
+
+  it('should create listener on document body when fullPage is true', () => {
+    let fixture = TestBed.createComponent(SkyWaitTestComponent);
+    fixture.detectChanges();
+
+    fixture.componentInstance.isFullPage = true;
+    fixture.componentInstance.isWaiting = true;
+    testlistenerCreated(fixture);
+  });
+
+  it('should create listener on containing div when fullPage is set to false', () => {
+    let fixture = TestBed.createComponent(SkyWaitTestComponent);
+    fixture.detectChanges();
+
+    fixture.componentInstance.isWaiting = true;
+    testlistenerCreated(fixture);
+  });
+
   function getAriaLabel(): string {
     return document.body.querySelector('.sky-wait-mask').getAttribute('aria-label');
   }

src/app/public/modules/wait/wait.component.ts

@@ -18,6 +18,8 @@ import {
   SkyWaitAdapterService
 } from './wait-adapter.service';
 
+let nextId = 0;
+
 @Component({
   selector: 'sky-wait',
   templateUrl: './wait.component.html',
@@ -28,6 +30,8 @@ export class SkyWaitComponent implements OnInit {
   @Input()
   public ariaLabel: string;
 
+  private id: string = `sky-wait-${++nextId}`;
+
   @Input()
   public set isWaiting(value: boolean) {
     if (value && !this._isFullPage) {
@@ -40,7 +44,8 @@ export class SkyWaitComponent implements OnInit {
       this.elRef,
       this._isFullPage,
       value,
-      this.isNonBlocking
+      this.id,
+      this
     );
 
     this._isWaiting = value;