Fix wait not blocking focus nav

e2e/wait.e2e-spec.ts

@@ -46,7 +46,6 @@ describe('Wait', () => {
     SkyHostBrowser.get('visual/wait');
     SkyHostBrowser.setWindowBreakpoint('lg');
     element(by.css('.sky-test-full-page')).click();
-    element(by.css('.sky-test-wait')).click();
     expect('.sky-wait-demo').toMatchBaselineScreenshot(done, {
       screenshotName: 'sky-wait-demo-full-page'
     });
@@ -55,9 +54,8 @@ describe('Wait', () => {
   it('should display non-blocking wait on full page', (done) => {
     SkyHostBrowser.get('visual/wait');
     SkyHostBrowser.setWindowBreakpoint('lg');
-    element(by.css('.sky-test-full-page')).click();
     element(by.css('.sky-test-non-blocking')).click();
-    element(by.css('.sky-test-wait')).click();
+    element(by.css('.sky-test-full-page')).click();
     expect('.sky-wait-demo').toMatchBaselineScreenshot(done, {
       screenshotName: 'sky-wait-demo-full-page-non-block'
     });

package.json

@@ -33,6 +33,7 @@
   "devDependencies": {
     "@blackbaud/skyux": "2.30.0",
     "@blackbaud/skyux-builder": "1.29.0",
-    "@skyux-sdk/builder-plugin-skyux": "1.0.0-rc.5"
+    "@skyux-sdk/builder-plugin-skyux": "1.0.0-rc.5",
+    "@skyux-sdk/testing": "^3.1.0"
   }
 }

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

@@ -1,9 +1,52 @@
-<div class="sky-wait-test-component">
+<button *ngIf="showAnchor0"
+  class="sky-btn sky-btn-secondary"
+  id="anchor-0"
+  href="/"
+  [ngStyle]="{
+    'display': anchor0Display,
+    'visibility': anchor0Visibility
+  }"
+>
+  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>
+<div>
+  <button *ngIf="showAnchor2"
+    class="sky-btn sky-btn-secondary"
+    id="anchor-2"
+    href="/"
+    [ngStyle]="{
+      'display': anchor2Display,
+      'visibility': anchor2Visibility
+    }"
+  >
+    Anchor tag 2
+  </button>
   <sky-wait
-    [ariaLabel]="ariaLabel"
-    [isFullPage]="isFullPage"
-    [isNonBlocking]="isNonBlocking"
-    [isWaiting]="isWaiting"
+    [isFullPage]="false"
+    [isNonBlocking]="false"
+    [isWaiting]="secondWaitIsWaiting"
   >
   </sky-wait>
 </div>

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

@@ -1,22 +1,34 @@
 import {
   Component,
-  Input
+  ViewChild
 } from '@angular/core';
 
+import {
+  SkyWaitComponent
+} from '..';
+
 @Component({
   selector: 'sky-test-cmp',
   templateUrl: './wait.component.fixture.html'
 })
 export class SkyWaitTestComponent {
-  @Input()
-  public isWaiting: boolean;
+  public ariaLabel: string;
 
-  @Input()
-  public isFullPage: boolean;
+  public isWaiting: boolean = false;
+  public isFullPage: boolean = false;
+  public isNonBlocking: boolean = false;
 
-  @Input()
-  public isNonBlocking: boolean;
+  public showAnchor0 = true;
+  public showAnchor2 = true;
 
-  @Input()
-  public ariaLabel: string;
+  public anchor0Visibility: string = '';
+  public anchor0Display: string = '';
+
+  public anchor2Visibility: string = '';
+  public anchor2Display: string = '';
+
+  public secondWaitIsWaiting: boolean = false;
+
+  @ViewChild(SkyWaitComponent)
+  public waitComponent: SkyWaitComponent;
 }

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

@@ -1,33 +1,219 @@
 import {
   ElementRef,
   Injectable,
-  Renderer
+  Renderer,
+  OnDestroy
 } from '@angular/core';
 
 @Injectable()
-export class SkyWaitAdapterService {
+export class SkyWaitAdapterService implements OnDestroy {
+  private static isPageWaitActive: boolean = false;
+  private static busyElements: {[key: string]: {busyEl: HTMLElement, listener: any}} = {};
 
-  constructor(private renderer: Renderer) { }
+  private focussableElements: HTMLElement[];
 
-  public setWaitBounds(waitEl: ElementRef) {
+  constructor(
+    private renderer: Renderer
+  ) { }
+
+  public ngOnDestroy(): void {
+    this.clearListeners();
+  }
+
+  public setWaitBounds(waitEl: ElementRef): void {
     this.renderer.setElementStyle(waitEl.nativeElement.parentElement, 'position', 'relative');
   }
 
-  public removeWaitBounds(waitEl: ElementRef) {
+  public removeWaitBounds(waitEl: ElementRef): void {
     this.renderer.setElementStyle(waitEl.nativeElement.parentElement, 'position', undefined);
   }
 
   public setBusyState(
     waitEl: ElementRef,
     isFullPage: boolean,
     isWaiting: boolean,
-    isNonBlocking = false
+    isNonBlocking = false,
+    waitComponentId?: string
   ): void {
     let busyEl = isFullPage ? document.body : waitEl.nativeElement.parentElement;
     let state = isWaiting ? 'true' : undefined;
 
     if (!isNonBlocking) {
       this.renderer.setElementAttribute(busyEl, 'aria-busy', state);
+
+      if (isWaiting) {
+        // Remove focus from page when full page blocking wait
+        if (isFullPage || busyEl.contains(document.activeElement)) {
+          this.clearDocumentFocus();
+        }
+
+        if (isFullPage) {
+          SkyWaitAdapterService.isPageWaitActive = true;
+          let endListenerFunc = this.renderer.listen(
+            document.body,
+            'keydown',
+            (event: KeyboardEvent) => {
+              if (event.key.toLowerCase() === 'tab') {
+                (event.target as any).blur();
+                event.preventDefault();
+                event.stopPropagation();
+                event.stopImmediatePropagation();
+                this.clearDocumentFocus();
+              }
+          });
+          SkyWaitAdapterService.busyElements[waitComponentId] = {
+            listener: endListenerFunc,
+            busyEl: undefined
+          };
+        } else {
+          let endListenerFunc = this.renderer.listen(
+            busyEl,
+            'focusin',
+            (event: KeyboardEvent) => {
+              if (!isNonBlocking) {
+                event.preventDefault();
+                event.stopPropagation();
+                event.stopImmediatePropagation();
+
+                if (SkyWaitAdapterService.isPageWaitActive) {
+                  this.clearDocumentFocus();
+                } else {
+                  // Propagate tab navigation if attempted into waited element
+                  let target: any = event.target;
+                  target.blur();
+                  this.focusNextElement(target, this.isShift(event), busyEl);
+                }
+              }
+          });
+          SkyWaitAdapterService.busyElements[waitComponentId] = {
+            listener: endListenerFunc,
+            busyEl: busyEl
+          };
+        }
+      } else {
+        if (isFullPage) {
+          SkyWaitAdapterService.isPageWaitActive = false;
+        }
+        if (waitComponentId in SkyWaitAdapterService.busyElements) {
+          SkyWaitAdapterService.busyElements[waitComponentId].listener();
+          delete SkyWaitAdapterService.busyElements[waitComponentId];
+        }
+      }
+    }
+  }
+
+  private focusNextElement(targetElement: HTMLElement, shiftKey: boolean, busyEl: Element): void {
+    let focussable = this.getFocussableElements();
+
+    // 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(targetElement);
+    let curIndex = startingIndex + modifier;
+    while (focussable[curIndex] && this.isElementBusyOrHidden(focussable[curIndex])) {
+      curIndex += modifier;
+    }
+
+    if (focussable[curIndex] && !this.isElementBusyOrHidden(focussable[curIndex])) {
+      focussable[curIndex].focus();
+    } else {
+      // Try wrapping the navigation
+      curIndex = modifier > 0 ? 0 : focussable.length - 1;
+      while (
+        curIndex !== startingIndex &&
+        focussable[curIndex] &&
+        this.isElementBusyOrHidden(focussable[curIndex])
+      ) {
+        /* istanbul ignore next */
+        /* sanity check */
+        curIndex += modifier;
+      }
+
+      /* istanbul ignore else */
+      /* sanity check */
+      if (focussable[curIndex] && !this.isElementBusyOrHidden(focussable[curIndex])) {
+        focussable[curIndex].focus();
+      } else {
+        // No valid target, wipe focus
+        this.clearDocumentFocus();
+      }
+    }
+
+    // clear focussableElements list
+    this.focussableElements = undefined;
+  }
+
+  private isShift(event: Event): boolean {
+    // Determine if shift+tab was used based on element order
+    let elements = this.getFocussableElements().filter(elem => !this.isElementHidden(elem));
+
+    let previousInd = elements.indexOf((event as any).relatedTarget);
+    let currentInd = elements.indexOf(event.target as HTMLElement);
+
+    return previousInd === currentInd + 1
+      || (previousInd === 0 && currentInd === elements.length - 1)
+      || (previousInd > currentInd)
+      || !(event as any).relatedTarget;
+  }
+
+  private isElementHidden(element: any): boolean {
+    const style = window.getComputedStyle(element);
+    return style.display === 'none' || style.visibility === 'hidden';
+  }
+
+  private isElementBusyOrHidden(element: any): boolean {
+    if (this.isElementHidden(element)) {
+      return true;
+    }
+
+    for (let key of Object.keys(SkyWaitAdapterService.busyElements)) {
+      const parentElement = SkyWaitAdapterService.busyElements[key].busyEl;
+      if (parentElement && parentElement.contains(element)) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  private clearDocumentFocus(): void {
+    if (document.activeElement && (document.activeElement as any).blur) {
+      (document.activeElement as any).blur();
+    }
+    document.body.focus();
+  }
+
+  private getFocussableElements(): HTMLElement[] {
+    // Keep this cached so we can reduce querys
+    if (this.focussableElements) {
+      return this.focussableElements;
+    }
+
+    // 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]';
+
+    this.focussableElements = Array.prototype.filter.call(
+      document.body.querySelectorAll(focussableElements),
+        (element: any) => {
+          return element.offsetWidth > 0 || element.offsetHeight > 0 || element === document.activeElement;
+    });
+    return this.focussableElements;
+  }
+
+  private clearListeners(): void {
+    SkyWaitAdapterService.isPageWaitActive = false;
+    for (let key of Object.keys(SkyWaitAdapterService.busyElements)) {
+      SkyWaitAdapterService.busyElements[key].listener();
+      delete SkyWaitAdapterService.busyElements[key];
     }
   }
 }