A utility class for creating and interacting with a focus trap. (ex. keep focus in a modal)

focus-trap.ts

export function getFocusableEls(element: HTMLElement) {
  return element.querySelectorAll<HTMLElement>(
    'a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])'
  );
}

export class FocusTrap {
  private focusableEls!: NodeListOf<HTMLElement>;
  private firstFocusableEl?: HTMLElement;
  private lastFocusableEl?: HTMLElement;
  private listener = this.onKeyDown.bind(this);

  constructor(private element: HTMLElement) {
    this.update();
  }

  update() {
    this.focusableEls = getFocusableEls(this.element);
    this.firstFocusableEl = this.focusableEls[0];
    this.lastFocusableEl = this.focusableEls[this.focusableEls.length - 1];
  }

  start() {
    this.element.addEventListener('keydown', this.listener);
  }

  stop() {
    this.element.removeEventListener('keydown', this.listener);
  }

  private onKeyDown(e: KeyboardEvent) {
    if (e.key === 'Tab') {
      if (e.shiftKey) {
        // shift + tab
        if (document.activeElement === this.firstFocusableEl) {
          this.lastFocusableEl?.focus();

          e.preventDefault();
        }
      } else {
        // just tab
        if (document.activeElement === this.lastFocusableEl) {
          this.firstFocusableEl?.focus();

          e.preventDefault();
        }
      }
    }
  }
}