@lumino/widgets - npm Package Compare versions

Comparing version 2.3.0 to 2.3.1-alpha.0

package.json

 {
   "name": "@lumino/widgets",
-  "version": "2.3.0",
+  "version": "2.3.1-alpha.0",
   "description": "Lumino Widgets",
@@ -5,0 +5,0 @@ "homepage": "https://github.com/jupyterlab/lumino",

src/menubar.ts

@@ -148,2 +148,7 @@ // Copyright (c) Jupyter Development Team.
 
+    // An empty menu cannot be active
+    if (value > -1 && this._menus[value].items.length === 0) {
+      value = -1;
+    }
+
     // Bail early if the index will not change.
@@ -157,15 +162,2 @@ if (this._activeIndex === value) {
 
-    // Update the focus index.
-    if (value !== -1) {
-      this._tabFocusIndex = value;
-    }
-
-    // Update focus to new active index
-    if (
-      this._activeIndex >= 0 &&
-      this.contentNode.childNodes[this._activeIndex]
-    ) {
-      (this.contentNode.childNodes[this._activeIndex] as HTMLElement).focus();
-    }
-
     // Schedule an update of the items.
@@ -375,4 +367,4 @@ this.update();
         break;
-      case 'mouseleave':
-        this._evtMouseLeave(event as MouseEvent);
+      case 'focusout':
+        this._evtFocusOut(event as FocusEvent);
         break;
@@ -393,3 +385,3 @@ case 'contextmenu':
     this.node.addEventListener('mousemove', this);
-    this.node.addEventListener('mouseleave', this);
+    this.node.addEventListener('focusout', this);
     this.node.addEventListener('contextmenu', this);
@@ -405,3 +397,3 @@ }
     this.node.removeEventListener('mousemove', this);
-    this.node.removeEventListener('mouseleave', this);
+    this.node.removeEventListener('focusout', this);
     this.node.removeEventListener('contextmenu', this);
@@ -416,3 +408,3 @@ this._closeChildMenu();
     if (this.isAttached) {
-      this.activeIndex = 0;
+      this._focusItemAt(0);
     }
@@ -452,5 +444,7 @@ }
         title: menus[i].title,
-        active: i === activeIndex && menus[i].items.length !== 0,
+        active: i === activeIndex,
         tabbable: i === tabFocusIndex,
+        disabled: menus[i].items.length === 0,
         onfocus: () => {
+          this._tabFocusIndex = i;
           this.activeIndex = i;
@@ -492,3 +486,5 @@ }
           tabbable: length === tabFocusIndex,
+          disabled: menus[length].items.length === 0,
           onfocus: () => {
+            this._tabFocusIndex = length;
             this.activeIndex = length;
@@ -513,3 +509,5 @@ }
               tabbable: length === tabFocusIndex,
+              disabled: menus[length].items.length === 0,
               onfocus: () => {
+                this._tabFocusIndex = length;
                 this.activeIndex = length;
@@ -594,2 +592,11 @@ }
     if (kc === 13 || kc === 32 || kc === 38 || kc === 40) {
+      // The active index may have changed (for example, user hovers over an
+      // item with the mouse), so be sure to use the focus index.
+      this.activeIndex = this._tabFocusIndex;
+      if (this.activeIndex !== this._tabFocusIndex) {
+        // Bail if the setter refused to set activeIndex to tabFocusIndex
+        // because it means that the item at tabFocusIndex cannot be opened (for
+        // example, it has an empty menu)
+        return;
+      }
       this.openActiveMenu();
@@ -602,23 +609,21 @@ return;
       this._closeChildMenu();
-      this.activeIndex = -1;
-      this.node.blur();
+      this._focusItemAt(this.activeIndex);
       return;
     }
 
-    // Left Arrow
-    if (kc === 37) {
-      let i = this._activeIndex;
+    // Left or Right Arrow
+    if (kc === 37 || kc === 39) {
+      let direction = kc === 37 ? -1 : 1;
+      let start = this._tabFocusIndex + direction;
       let n = this._menus.length;
-      this.activeIndex = i === 0 ? n - 1 : i - 1;
+      for (let i = 0; i < n; i++) {
+        let index = (n + start + direction * i) % n;
+        if (this._menus[index].items.length) {
+          this._focusItemAt(index);
+          return;
+        }
+      }
       return;
     }
 
-    // Right Arrow
-    if (kc === 39) {
-      let i = this._activeIndex;
-      let n = this._menus.length;
-      this.activeIndex = i === n - 1 ? 0 : i + 1;
-      return;
-    }
-
     // Get the pressed key character.
@@ -645,4 +650,6 @@ let key = getKeyboardLayout().keyForKeydownEvent(event);
       this.activeIndex = result.index;
+      this._focusItemAt(this.activeIndex);
     } else if (result.auto !== -1) {
       this.activeIndex = result.auto;
+      this._focusItemAt(this.activeIndex);
     }
@@ -663,3 +670,2 @@ }
     // also stopped so that an open menu does not handle the event.
-    event.preventDefault();
     event.stopPropagation();
@@ -689,2 +695,5 @@ event.stopImmediatePropagation();
     } else {
+      // If we don't call preventDefault() here, then the item in the menu
+      // bar will take focus over the menu that is being opened.
+      event.preventDefault();
       const position = this._positionForMenu(index);
@@ -754,7 +763,7 @@ Menu.saveWindowData();
   /**
-   * Handle the `'mouseleave'` event for the menu bar.
+   * Handle the `'focusout'` event for the menu bar.
    */
-  private _evtMouseLeave(event: MouseEvent): void {
-    // Reset the active index if there is no open menu.
-    if (!this._childMenu) {
+  private _evtFocusOut(event: FocusEvent): void {
+    // Reset the active index if there is no open menu and the menubar is losing focus.
+    if (!this._childMenu && !this.node.contains(event.relatedTarget as Node)) {
       this.activeIndex = -1;
@@ -765,2 +774,15 @@ }
   /**
+   * Focus an item in the menu bar.
+   *
+   * #### Notes
+   * Does not open the associated menu.
+   */
+  private _focusItemAt(index: number): void {
+    const itemNode = this.contentNode.childNodes[index] as HTMLElement | void;
+    if (itemNode) {
+      itemNode.focus();
+    }
+  }
+
+  /**
    * Open the child menu at the active index immediately.
@@ -795,3 +817,4 @@ *
 
-    // Ensure the menu bar is updated and look up the item node.
+    // Update the tab focus index and ensure the menu bar is updated.
+    this._tabFocusIndex = this.activeIndex;
     MessageLoop.sendMessage(this, Widget.Msg.UpdateRequest);
@@ -900,5 +923,8 @@
 
-  // Track the index of the item that is currently focused. -1 means nothing focused.
+  // Track the index of the item that is currently focused or hovered. -1 means nothing focused or hovered.
   private _activeIndex = -1;
-  // Track which item can be focused using the TAB key. Unlike _activeIndex will always point to a menuitem.
+  // Track which item can be focused using the TAB key. Unlike _activeIndex will
+  // always point to a menuitem. Whenever you update this value, it's important
+  // to follow it with an "update-request" message so that the `tabindex`
+  // attribute on each menubar item gets properly updated.
   private _tabFocusIndex = 0;
@@ -968,2 +994,11 @@ private _forceItemsPosition: Menu.IOpenOptions;
 
+    /**
+     * Whether the item is disabled.
+     *
+     * #### Notes
+     * A disabled item cannot be active.
+     * A disabled item cannot be focussed.
+     */
+    readonly disabled?: boolean;
+
     readonly onfocus?: (event: FocusEvent) => void;
@@ -1008,3 +1043,3 @@ }
           dataset,
-          tabindex: data.tabbable ? '0' : '-1',
+          ...(data.disabled ? {} : { tabindex: data.tabbable ? '0' : '-1' }),
           onfocus: data.onfocus,
@@ -1056,3 +1091,3 @@ ...aria
       }
-      if (data.active) {
+      if (data.active && !data.disabled) {
         name += ' lm-mod-active';
@@ -1082,3 +1117,7 @@ }
     createItemARIA(data: IRenderData): ElementARIAAttrs {
-      return { role: 'menuitem', 'aria-haspopup': 'true' };
+      return {
+        role: 'menuitem',
+        'aria-haspopup': 'true',
+        'aria-disabled': data.disabled ? 'true' : 'false'
+      };
     }
@@ -1085,0 +1124,0 @@

src/tabbar.ts

@@ -2010,2 +2010,3 @@ // Copyright (c) Jupyter Development Team.
     add.setAttribute('tabindex', '-1');
+    add.setAttribute('role', 'button');
     node.appendChild(add);
@@ -2012,0 +2013,0 @@ return node;

types/menubar.d.ts

@@ -187,6 +187,13 @@ import { Message } from '@lumino/messaging';
     /**
-     * Handle the `'mouseleave'` event for the menu bar.
+     * Handle the `'focusout'` event for the menu bar.
      */
-    private _evtMouseLeave;
+    private _evtFocusOut;
     /**
+     * Focus an item in the menu bar.
+     *
+     * #### Notes
+     * Does not open the associated menu.
+     */
+    private _focusItemAt;
+    /**
      * Open the child menu at the active index immediately.
@@ -276,2 +283,10 @@ *
         readonly tabbable: boolean;
+        /**
+         * Whether the item is disabled.
+         *
+         * #### Notes
+         * A disabled item cannot be active.
+         * A disabled item cannot be focussed.
+         */
+        readonly disabled?: boolean;
         readonly onfocus?: (event: FocusEvent) => void;
@@ -278,0 +293,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

4675724

increased by0.3%

Lines of code

58149

increased by0.22%

Worsened metrics

Number of low quality alerts

2

increased by100%

No dependency changes