From 090ab920a524c2a18fb02f55f4e77450c80210b6 Mon Sep 17 00:00:00 2001
From: MeeseeksMachine <39504233+meeseeksmachine@users.noreply.github.com>
Date: Wed, 12 Oct 2022 09:51:47 +0200
Subject: [PATCH] Backport PR #373 on branch 1.x (Fix tab trap in menubar)
 (#439)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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                                  |  2 +-
 packages/widgets/src/menubar.ts            | 16 ++++++++++++----
 packages/widgets/tests/src/menubar.spec.ts |  6 ++++++
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 32a5c805f..207284a2d 100644
--- 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=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)
diff --git a/packages/widgets/src/menubar.ts b/packages/widgets/src/menubar.ts
index 922dfef9f..9dbecb0eb 100644
--- a/packages/widgets/src/menubar.ts
+++ b/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();
diff --git a/packages/widgets/tests/src/menubar.spec.ts b/packages/widgets/tests/src/menubar.spec.ts
index bd81506f3..55c6837d5 100644
--- a/packages/widgets/tests/src/menubar.spec.ts
+++ b/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 });