@lumino/widgets
Advanced tools
Comparing version 1.18.0 to 1.19.0
{ | ||
"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" | ||
} |
@@ -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 @@ |
@@ -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> */ |
@@ -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 @@ } |
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 @@ * |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
4425315
54765