How to keep focus within modal dialog?

Question

I\'m developing an app with Angular and Semantic-UI. The app should be accessible, this means it should be compliant with WCAG 2.0. To reach this p

Answer 1

I used one of the methods suggested by Steven Lambert, namely, listening to keydown events and intercepting "tab" and "shift+tab" keys. Here's my sample code (Angular 5):

import { Directive, ElementRef, Attribute, HostListener, OnInit } from '@angular/core';

/**
 * This directive allows to override default tab order for page controls.
 * Particularly useful for working around the modal dialog TAB issue
 * (when tab key allows to move focus outside of dialog).
 *
 * Usage: add "custom-taborder" and "tab-next='next_control'"/"tab-prev='prev_control'" attributes
 * to the first and last controls of the dialog.
 *
 * For example, the first control is 
 * and the last one is 
 *
 * You should modify the above declarations as follows:
 * 
 * 
 */

@Directive({
  selector: '[custom-taborder]'
})
export class CustomTabOrderDirective {

  private elem: HTMLInputElement;
  private nextElemName: string;
  private prevElemName: string;
  private nextElem: HTMLElement;
  private prevElem: HTMLElement;

  constructor(
    private elemRef: ElementRef
    , @Attribute('tab-next') public tabNext: string
    , @Attribute('tab-prev') public tabPrev: string
  ) {
    this.elem = this.elemRef.nativeElement;
    this.nextElemName = tabNext;
    this.prevElemName = tabPrev;
  }

  ngOnInit() {
    if (this.nextElemName) {
      var elems = document.getElementsByName(this.nextElemName);
      if (elems && elems.length && elems.length > 0)
        this.nextElem = elems[0];
    }

    if (this.prevElemName) {
      var elems = document.getElementsByName(this.prevElemName);
      if (elems && elems.length && elems.length > 0)
        this.prevElem = elems[0];
    }
  }

  @HostListener('keydown', ['$event'])
  onKeyDown(event: KeyboardEvent) {

    if (event.key !== "Tab")
      return;

    if (!event.shiftKey && this.nextElem) {
      this.nextElem.focus();
      event.preventDefault();
    }

    if (event.shiftKey && this.prevElem) {
      this.prevElem.focus();
      event.preventDefault();
    }

  }

}

To use this directive, just import it to your module and add to Declarations section.