open-consul/ui/packages/consul-ui/app/modifiers/aria-menu.js

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */

import Modifier from 'ember-modifier';
import { inject as service } from '@ember/service';
import { action } from '@ember/object';

const TAB = 9;
const ESC = 27;
const END = 35;
const HOME = 36;
const ARROW_UP = 38;
const ARROW_DOWN = 40;

const keys = {
  vertical: {
    [ARROW_DOWN]: ($items, i = -1) => {
      return (i + 1) % $items.length;
    },
    [ARROW_UP]: ($items, i = 0) => {
      if (i === 0) {
        return $items.length - 1;
      } else {
        return i - 1;
      }
    },
    [HOME]: ($items, i) => {
      return 0;
    },
    [END]: ($items, i) => {
      return $items.length - 1;
    },
  },
  horizontal: {},
};

const MENU_ITEMS = '[role^="menuitem"]';

export default class AriaMenuModifier extends Modifier {
  @service('-document') doc;
  orientation = 'vertical';

  @action
  async keydown(e) {
    if (e.keyCode === ESC) {
      this.options.onclose(e);
      this.$trigger.focus();
      return;
    }
    const $items = [...this.element.querySelectorAll(MENU_ITEMS)];
    const pos = $items.findIndex(($item) => $item === this.doc.activeElement);
    if (e.keyCode === TAB) {
      if (e.shiftKey) {
        if (pos === 0) {
          this.options.onclose(e);
          this.$trigger.focus();
        }
      } else {
        if (pos === $items.length - 1) {
          await new Promise((resolve) => setTimeout(resolve, 0));
          this.options.onclose(e);
        }
      }
      return;
    }
    if (typeof keys[this.orientation][e.keyCode] === 'undefined') {
      return;
    }
    $items[keys[this.orientation][e.keyCode]($items, pos)].focus();
    e.stopPropagation();
    e.preventDefault();
  }

  @action
  async focus(e) {
    if (e.pointerType === '') {
      await Promise.resolve();
      this.keydown({
        keyCode: HOME,
        stopPropagation: () => {},
        preventDefault: () => {},
      });
    }
  }

  connect(params, named) {
    this.$trigger = this.doc.getElementById(this.element.getAttribute('aria-labelledby'));
    if (typeof named.openEvent !== 'undefined') {
      this.focus(named.openEvent);
    }
    this.doc.addEventListener('keydown', this.keydown);
  }

  disconnect() {
    this.doc.removeEventListener('keydown', this.keydown);
  }

  didReceiveArguments() {
    this.params = this.args.positional;
    this.options = this.args.named;
  }

  didInstall() {
    this.connect(this.args.positional, this.args.named);
  }

  willRemove() {
    this.disconnect();
  }
}