ARIA MenuBar keyboard interaction improvements

examples/example-menubar/src/index.ts

@@ -100,6 +100,42 @@ function main(): void {
   addMenuItem(commands, fileMenu, 'new', 'New', 'File > New');
   addMenuItem(commands, fileMenu, 'open', 'Open', 'File > Open');
   addMenuItem(commands, fileMenu, 'save', 'Save', 'File > Save');
+
+  const recentMenu = new Menu({ commands: commands });
+  recentMenu.title.label = 'Open Recent';
+  addMenuItem(
+    commands,
+    recentMenu,
+    'file1',
+    'File1.txt',
+    'File > Open Recent > File1.txt'
+  );
+  addMenuItem(
+    commands,
+    recentMenu,
+    'file2',
+    'File2.md',
+    'File > Open Recent > File2.md'
+  );
+  addMenuItem(
+    commands,
+    recentMenu,
+    'file3',
+    'File3.xml',
+    'File > Open Recent > File3.xml'
+  );
+  addMenuItem(
+    commands,
+    recentMenu,
+    'file4',
+    'File4.txt',
+    'File > Open Recent > File4.txt'
+  );
+  fileMenu.addItem({
+    type: 'submenu',
+    submenu: recentMenu
+  });
+
   menubar.addMenu(fileMenu);
 
   const editMenu = new Menu({ commands: commands });

packages/widgets/src/menu.ts

@@ -29,6 +29,7 @@ import {
   VirtualDOM,
   VirtualElement
 } from '@lumino/virtualdom';
+import { MenuBar } from './menubar';
 
 import { Widget } from './widget';
 
@@ -234,6 +235,30 @@ export class Menu extends Widget {
     return this._items;
   }
 
+  /**
+   * Activate the first selectable item in the menu.
+   */
+  activateFirstItem(): void {
+    this.activeIndex = ArrayExt.findFirstIndex(
+      this._items,
+      Private.canActivate,
+      0,
+      this._items.length
+    );
+  }
+
+  /**
+   * Activate the first selectable item in the menu.
+   */
+  activateLastItem(): void {
+    this.activeIndex = ArrayExt.findFirstIndex(
+      this._items,
+      Private.canActivate,
+      this._items.length,
+      0
+    );
+  }
+
   /**
    * Activate the next selectable item in the menu.
    *
@@ -319,6 +344,23 @@ export class Menu extends Widget {
     }
   }
 
+  /**
+   * Close the menu completely.
+   */
+  closeMenu(): void {
+    // Bail if the menu is not attached.
+    if (!this.isAttached) {
+      return;
+    }
+
+    // Cancel the pending timers.
+    this._cancelOpenTimer();
+    this._cancelCloseTimer();
+
+    // Close the root menu before executing the command.
+    this.rootMenu.close();
+  }
+
   /**
    * Add a menu item to the end of the menu.
    *
@@ -502,6 +544,13 @@ export class Menu extends Widget {
     }
   }
 
+  /**
+   * Set the parent MenuBar, if the Menu is contained within one.
+   */
+  set parentMenuBar(value: MenuBar) {
+    this._parentMenuBar = value;
+  }
+
   /**
    * A message handler invoked on a `'before-attach'` message.
    */
@@ -607,25 +656,44 @@ export class Menu extends Widget {
    * This listener is attached to the menu node.
    */
   private _evtKeyDown(event: KeyboardEvent): void {
-    // A menu handles all keydown events.
-    event.preventDefault();
-    event.stopPropagation();
-
     // Fetch the key code for the event.
     let kc = event.keyCode;
 
-    // Enter
-    if (kc === 13) {
+    // A menu handles all keydown events, except for tab, which we let propagate.
+    if (kc === 9) {
+      this.closeMenu();
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    // Enter or Space
+    if (kc === 13 || kc === 32) {
       this.triggerActiveItem();
       return;
     }
 
     // Escape
     if (kc === 27) {
       this.close();
+      // If this menu is in a menubar, refocus the menubar.
+      if (this._parentMenuBar) {
+        this._parentMenuBar.activate();
+      }
       return;
     }
 
+    // Home
+    if (kc === 36) {
+      this.activateFirstItem();
+    }
+
+    // End
+    if (kc === 35) {
+      this.activateLastItem();
+    }
+
     // Left Arrow
     if (kc === 37) {
       if (this._parentMenu) {
@@ -938,6 +1006,7 @@ export class Menu extends Widget {
   private _items: Menu.IItem[] = [];
   private _childMenu: Menu | null = null;
   private _parentMenu: Menu | null = null;
+  private _parentMenuBar: MenuBar | null = null;
   private _aboutToClose = new Signal<this, void>(this);
   private _menuRequested = new Signal<this, 'next' | 'previous'>(this);
 }
@@ -1175,7 +1244,7 @@ export namespace Menu {
         {
           className,
           dataset,
-          tabindex: '0',
+          tabindex: '-1',
           onfocus: data.onfocus,
           ...aria
         },

packages/widgets/src/menubar.ts

@@ -383,7 +383,7 @@ export class MenuBar extends Widget {
    */
   protected onActivateRequest(msg: Message): void {
     if (this.isAttached) {
-      this.activeIndex = 0;
+      this.activeIndex = this._tabFocusIndex;
     }
   }
 
@@ -446,8 +446,18 @@ export class MenuBar extends Widget {
     // Escape
     if (kc === 27) {
       this._closeChildMenu();
-      this.activeIndex = -1;
-      this.node.blur();
+      return;
+    }
+
+    // Home
+    if (kc === 36) {
+      this.activeIndex = 0;
+      return;
+    }
+
+    // End
+    if (kc === 35) {
+      this.activeIndex = this._menus.length - 1;
       return;
     }
 
@@ -625,6 +635,9 @@ export class MenuBar extends Widget {
     // Swap the internal menu reference.
     this._childMenu = newMenu;
 
+    // Set the reference to this MenuBar that contains the menu.
+    this._childMenu.parentMenuBar = this;
+
     // Close the current menu, or setup for the new menu.
     if (oldMenu) {
       oldMenu.close();