@lumino/widgets - npm Package Compare versions

Comparing version 1.18.0 to 1.19.0

package.json

 {
   "name": "@lumino/widgets",
-  "version": "1.18.0",
+  "version": "1.19.0",
   "description": "Lumino Widgets",
@@ -101,3 +101,3 @@ "homepage": "https://github.com/jupyterlab/lumino",
   "jsdelivr": "dist/index.min.js",
-  "gitHead": "4f2432290e874b040310d428593abe4afc336066"
+  "gitHead": "e29f3c7172d2a256046e7fc509d8bacbb9093aa5"
 }

src/docklayout.ts

@@ -642,2 +642,4 @@ // Copyright (c) Jupyter Development Team.
 
+    Private.removeAria(widget);
+
     // If there are multiple tabs, just remove the widget's tab.
@@ -774,2 +776,3 @@ if (tabNode.tabBar.titles.length > 1) {
       this._root = tabNode;
+      Private.addAria(widget, tabNode.tabBar);
       return;
@@ -800,2 +803,3 @@ }
     refNode.tabBar.insertTab(index + (after ? 1 : 0), widget.title);
+    Private.addAria(widget, refNode.tabBar);
   }
@@ -821,2 +825,3 @@
     tabNode.tabBar.addTab(widget.title);
+    Private.addAria(widget, tabNode.tabBar);
 
@@ -1995,2 +2000,18 @@ // Set the root if it does not exist.
 
+  export
+  function addAria(widget: Widget, tabBar: TabBar<Widget>) {
+    widget.node.setAttribute('role', 'tabpanel');
+    let renderer = tabBar.renderer;
+    if (renderer instanceof TabBar.Renderer) {
+      let tabId = renderer.createTabKey({ title: widget.title, current: false, zIndex: 0 });
+      widget.node.setAttribute('aria-labelledby', tabId);  
+    }
+  }
+
+  export
+  function removeAria(widget: Widget) {
+    widget.node.removeAttribute('role');
+    widget.node.removeAttribute('aria-labelledby');
+  }
+
   /**
@@ -2085,2 +2106,3 @@ * Normalize a tab area config and collect the visited widgets.
       tabBar.addTab(widget.title);
+      Private.addAria(widget, tabBar);
     });
@@ -2087,0 +2109,0 @@

src/tabbar.ts

@@ -35,3 +35,3 @@ // Copyright (c) Jupyter Development Team.
 import {
-  ElementDataset, ElementInlineStyle, VirtualDOM, VirtualElement, h
+  ElementARIAAttrs, ElementDataset, ElementInlineStyle, VirtualDOM, VirtualElement, h
 } from '@lumino/virtualdom';
@@ -69,2 +69,3 @@
     /* </DEPRECATED> */
+    this.contentNode.setAttribute('role', 'tablist');
     this.setFlag(Widget.Flag.DisallowLayout);
@@ -75,6 +76,6 @@ this.tabsMovable = options.tabsMovable || false;
     this.insertBehavior = options.insertBehavior || 'select-tab-if-needed';
+    this.name = options.name || '';
+    this.orientation = options.orientation || 'horizontal';
     this.removeBehavior = options.removeBehavior || 'select-tab-after';
     this.renderer = options.renderer || TabBar.defaultRenderer;
-    this._orientation = options.orientation || 'horizontal';
-    this.dataset['orientation'] = this._orientation;
   }
@@ -275,2 +276,21 @@
   /**
+   * Get the name of the tab bar.
+   */
+  get name(): string {
+    return this._name;
+  }
+
+  /**
+   * Set the name of the tab bar.
+   */
+  set name(value: string) {
+    this._name = value;
+    if (value) {
+      this.contentNode.setAttribute('aria-label', value);
+    } else {
+      this.contentNode.removeAttribute('aria-label');
+    }
+  }
+
+  /**
    * Get the orientation of the tab bar.
@@ -303,2 +323,3 @@ *
     this.dataset['orientation'] = value;
+    this.contentNode.setAttribute('aria-orientation', value);
   }
@@ -1005,2 +1026,5 @@
 
+
+    // TODO: do we need to do an update to update the aria-selected attribute?
+
     // Handle the behavior where the new tab is always selected,
@@ -1059,2 +1083,4 @@ // or the behavior where the new tab is selected if needed.
 
+    // TODO: do we need to do an update to adjust the aria-selected value?
+
     // No tab gets selected if the tab bar is empty.
@@ -1120,2 +1146,3 @@ if (this._titles.length === 0) {
 
+  private _name: string;
   private _currentIndex = -1;
@@ -1213,2 +1240,9 @@ private _titles: Title<T>[] = [];
     /**
+     * Name of the tab bar.
+     *
+     * This is used for accessibility reasons. The default is the empty string.
+     */
+    name?: string;
+
+    /**
      * The layout orientation of the tab bar.
@@ -1442,7 +1476,9 @@ *
       let key = this.createTabKey(data);
+      let id = key;
       let style = this.createTabStyle(data);
       let className = this.createTabClass(data);
       let dataset = this.createTabDataset(data);
+      let aria = this.createTabARIA(data);
       return (
-        h.li({ key, className, title, style, dataset },
+        h.li({ id, key, className, title, style, dataset, ...aria },
           this.renderIcon(data),
@@ -1582,2 +1618,13 @@ this.renderLabel(data),
     /**
+     * Create the ARIA attributes for a tab.
+     *
+     * @param data - The data to use for the tab.
+     *
+     * @returns The ARIA attributes for the tab.
+     */
+    createTabARIA(data: IRenderData<any>): ElementARIAAttrs {
+      return {role: 'tab', 'aria-selected': data.current.toString()};
+    }
+
+    /**
      * Create the class name for the tab icon.
@@ -1744,2 +1791,3 @@ *
     let content = document.createElement('ul');
+    content.setAttribute('role', 'tablist');
     content.className = 'lm-TabBar-content';
@@ -1746,0 +1794,0 @@ /* <DEPRECATED> */

src/tabpanel.ts

@@ -275,2 +275,10 @@ // Copyright (c) Jupyter Development Team.
     this.tabBar.insertTab(index, widget.title);
+
+    widget.node.setAttribute('role', 'tabpanel');
+
+    let renderer = this.tabBar.renderer
+    if (renderer instanceof TabBar.Renderer) {
+      let tabId = renderer.createTabKey({title: widget.title, current: false, zIndex: 0});
+      widget.node.setAttribute('aria-labelledby', tabId);
+    }
   }
@@ -335,2 +343,4 @@
   private _onWidgetRemoved(sender: StackedPanel, widget: Widget): void {
+    widget.node.removeAttribute('role');
+    widget.node.removeAttribute('aria-labelledby');
     this.tabBar.removeTab(widget.title);
@@ -337,0 +347,0 @@ }

types/tabbar.d.ts

 import { Message } from '@lumino/messaging';
 import { ISignal } from '@lumino/signaling';
-import { ElementDataset, ElementInlineStyle, VirtualElement } from '@lumino/virtualdom';
+import { ElementARIAAttrs, ElementDataset, ElementInlineStyle, VirtualElement } from '@lumino/virtualdom';
 import { Title } from './title';
@@ -138,2 +138,9 @@ import { Widget } from './widget';
     /**
+     * Get the name of the tab bar.
+     */
+    /**
+    * Set the name of the tab bar.
+    */
+    name: string;
+    /**
      * Get the orientation of the tab bar.
@@ -295,2 +302,3 @@ *
     private _onTitleChanged;
+    private _name;
     private _currentIndex;
@@ -369,2 +377,8 @@ private _titles;
         /**
+         * Name of the tab bar.
+         *
+         * This is used for accessibility reasons. The default is the empty string.
+         */
+        name?: string;
+        /**
          * The layout orientation of the tab bar.
@@ -620,2 +634,10 @@ *
         /**
+         * Create the ARIA attributes for a tab.
+         *
+         * @param data - The data to use for the tab.
+         *
+         * @returns The ARIA attributes for the tab.
+         */
+        createTabARIA(data: IRenderData<any>): ElementARIAAttrs;
+        /**
          * Create the class name for the tab icon.
@@ -622,0 +644,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

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

4425315

increased by0.51%

Lines of code

54765

increased by0.42%

No dependency changes