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

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: BUSL-1.1
 */

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

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"]';

function cleanup(instance) {
  if (instance) {
    instance?.doc?.removeEventListener('keydown', instance?.keydown);
  }
}

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: () => {},
      });
    }
  }

  modify(element, positional, named) {
    this.params = positional;
    this.options = named;

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

      this.doc.addEventListener('keydown', this.keydown);
    }
    registerDestructor(this, cleanup);
  }
}