firefox/browser/extensions/newtab/content-src/components/ContextMenu/ContextMenu.jsx

/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this file,
 * You can obtain one at http://mozilla.org/MPL/2.0/. */

import React from "react";
import { connect } from "react-redux";

export class ContextMenu extends React.PureComponent {
  constructor(props) {
    super(props);
    this.hideContext = this.hideContext.bind(this);
    this.onShow = this.onShow.bind(this);
    this.onClick = this.onClick.bind(this);
  }

  hideContext() {
    this.props.onUpdate(false);
  }

  onShow() {
    if (this.props.onShow) {
      this.props.onShow();
    }
  }

  componentDidMount() {
    this.onShow();
    setTimeout(() => {
      globalThis.addEventListener("click", this.hideContext);
    }, 0);
  }

  componentWillUnmount() {
    globalThis.removeEventListener("click", this.hideContext);
  }

  onClick(event) {
    // Eat all clicks on the context menu so they don't bubble up to window.
    // This prevents the context menu from closing when clicking disabled items
    // or the separators.
    event.stopPropagation();
  }

  render() {
    // Disabling focus on the menu span allows the first tab to focus on the first menu item instead of the wrapper.
    return (
      // eslint-disable-next-line jsx-a11y/interactive-supports-focus
      <span className="context-menu">
        <ul
          role="menu"
          onClick={this.onClick}
          onKeyDown={this.onClick}
          className="context-menu-list"
        >
          {this.props.options.map((option, i) =>
            option.type === "separator" ? (
              <li key={i} className="separator" role="separator" />
            ) : (
              option.type !== "empty" && (
                <ContextMenuItem
                  key={i}
                  option={option}
                  hideContext={this.hideContext}
                  keyboardAccess={this.props.keyboardAccess}
                />
              )
            )
          )}
        </ul>
      </span>
    );
  }
}

export class _ContextMenuItem extends React.PureComponent {
  constructor(props) {
    super(props);
    this.onClick = this.onClick.bind(this);
    this.onKeyDown = this.onKeyDown.bind(this);
    this.onKeyUp = this.onKeyUp.bind(this);
    this.focusFirst = this.focusFirst.bind(this);
  }

  onClick(event) {
    this.props.hideContext();
    this.props.option.onClick(event);
  }

  // Focus the first menu item if the menu was accessed via the keyboard.
  focusFirst(button) {
    if (this.props.keyboardAccess && button) {
      button.focus();
    }
  }

  // This selects the correct node based on the key pressed
  focusSibling(target, key) {
    const { parentNode } = target;
    const closestSiblingSelector =
      key === "ArrowUp" ? "previousSibling" : "nextSibling";
    if (!parentNode[closestSiblingSelector]) {
      return;
    }
    if (parentNode[closestSiblingSelector].firstElementChild) {
      parentNode[closestSiblingSelector].firstElementChild.focus();
    } else {
      parentNode[closestSiblingSelector][
        closestSiblingSelector
      ].firstElementChild.focus();
    }
  }

  onKeyDown(event) {
    const { option } = this.props;
    switch (event.key) {
      case "Tab":
        // tab goes down in context menu, shift + tab goes up in context menu
        // if we're on the last item, one more tab will close the context menu
        // similarly, if we're on the first item, one more shift + tab will close it
        if (
          (event.shiftKey && option.first) ||
          (!event.shiftKey && option.last)
        ) {
          this.props.hideContext();
        }
        break;
      case "ArrowUp":
      case "ArrowDown":
        event.preventDefault();
        this.focusSibling(event.target, event.key);
        break;
      case "Enter":
      case " ":
        event.preventDefault();
        this.props.hideContext();
        option.onClick();
        break;
      case "Escape":
        this.props.hideContext();
        break;
    }
  }

  // Prevents the default behavior of spacebar
  // scrolling the page & auto-triggering buttons.
  onKeyUp(event) {
    if (event.key === " ") {
      event.preventDefault();
    }
  }

  render() {
    const { option } = this.props;
    const className = [option.disabled ? "disabled" : ""].join(" ");
    return (
      <li role="presentation" className="context-menu-item">
        <button
          role="menuitem"
          className={className}
          onClick={this.onClick}
          onKeyDown={this.onKeyDown}
          onKeyUp={this.onKeyUp}
          ref={option.first ? this.focusFirst : null}
          aria-haspopup={
            option.id === "newtab-menu-edit-topsites" ? "dialog" : null
          }
        >
          <span data-l10n-id={option.string_id || option.id} />
        </button>
      </li>
    );
  }
}

export const ContextMenuItem = connect(state => ({
  Prefs: state.Prefs,
}))(_ContextMenuItem);