Backport PR #373 on branch 1.x (Fix tab trap in menubar) (#439)

* Backport PR #373: Fix tab trap in menubar

* Use key instead of keyCode

* Point to stable doc on 1.x branch

Co-authored-by: Afshin Taylor Darian <git@darian.email>
Co-authored-by: Frédéric Collonval <fcollonval@users.noreply.github.com>

README.md

@@ -1,7 +1,7 @@
 # Lumino
 
 [![Build Status](https://github.com/jupyterlab/lumino/workflows/Tests/badge.svg?branch=main)](https://github.com/jupyterlab/lumino/actions?query=branch%3Amain+workflow%3A%22Tests%22)
-[![Documentation Status](https://readthedocs.org/projects/jupyterlab/badge/?version=stable)](http://lumino.readthedocs.io/en/stable/)
+[![Documentation Status](https://readthedocs.org/projects/jupyterlab/badge/?version=stable)](https://lumino.readthedocs.io/en/stable/)
 [![GitHub](https://img.shields.io/badge/issue_tracking-github-blue.svg)](https://github.com/jupyterlab/lumino/issues)
 [![Discourse](https://img.shields.io/badge/help_forum-discourse-blue.svg)](https://discourse.jupyter.org/c/jupyterlab)
 [![Binder](https://mybinder.org/badge_logo.svg)](https://mybinder.org/v2/gh/jupyterlab/lumino/main?urlpath=lab/tree/examples)

packages/widgets/src/menubar.ts

@@ -421,15 +421,23 @@ export class MenuBar extends Widget {
 
  /**
  * Handle the `'keydown'` event for the menu bar.
+ *
+ * #### Notes
+ * All keys are trapped except the tab key that is ignored.
  */
  private _evtKeyDown(event: KeyboardEvent): void {
- // A menu bar handles all keydown events.
- event.preventDefault();
- event.stopPropagation();
-
  // Fetch the key code for the event.
  let kc = event.keyCode;
 
+ // Do not trap the tab key.
+ if (kc === 9) {
+ return;
+ }
+
+ // A menu bar handles all other keydown events.
+ event.preventDefault();
+ event.stopPropagation();
+
  // Enter, Up Arrow, Down Arrow
  if (kc === 13 || kc === 38 || kc === 40) {
  this.openActiveMenu();

packages/widgets/tests/src/menubar.spec.ts

@@ -453,6 +453,12 @@ describe('@lumino/widgets', () => {
  });
 
  context('keydown', () => {
+ it('should bail on Tab', () => {
+ let event = new KeyboardEvent('keydown', { key: 'Tab' });
+ bar.node.dispatchEvent(event);
+ expect(event.defaultPrevented).to.equal(false);
+ });
+
  it('should open the active menu on Enter', () => {
  let menu = bar.activeMenu!;
  simulate(bar.node, 'keydown', { keyCode: 13 });