Merge pull request #373 from gabalafou/fix-menubar-tab-trap

Fix tab trap in menubar, resolves #374
jupyterlab · Aug 24, 2022 · 0e652ad · 0e652ad
2 parents 4d1333c + c2ea586
commit 0e652ad
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 5 deletions.
diff --git a/README.md b/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=latest)](https://lumino.readthedocs.io/en/latest/)
 [![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)

diff --git a/packages/widgets/src/menubar.ts b/packages/widgets/src/menubar.ts
@@ -409,15 +409,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();

diff --git a/packages/widgets/tests/src/menubar.spec.ts b/packages/widgets/tests/src/menubar.spec.ts
@@ -469,6 +469,12 @@ describe('@lumino/widgets', () => {
  });
 
  context('keydown', () => {
+ it('should bail on Tab', () => {
+ let event = new KeyboardEvent('keydown', { keyCode: 9 });
+ bar.node.dispatchEvent(event);
+ expect(event.defaultPrevented).to.equal(false);
+ });
+
  it('should open the active menu on Enter', () => {
  let menu = bar.activeMenu!;
  bar.node.dispatchEvent(