Close launcher button styling and close launcher with delete key

packages/widgets/src/tabbar.ts

@@ -777,15 +777,28 @@ export class TabBar<T> extends Widget {
       return;
     }
 
+    // Get focus element that is in focus by the tab key
+    const focusedElement = document.activeElement;
+    // Check if Delete key has been pressed and Delete that tab
+    if (event.key === 'Delete') {
+      const index = ArrayExt.findFirstIndex(this.contentNode.children, tab =>
+        tab.contains(focusedElement)
+      );
+      if (index >= 0) {
+        this.currentIndex = index;
+        let title = this._titles[index];
+        event.preventDefault();
+        event.stopPropagation();
+        this._tabCloseRequested.emit({ index, title });
+        return;
+      }
+    }
     // Check if Enter or Spacebar key has been pressed and open that tab
     if (
       event.key === 'Enter' ||
       event.key === 'Spacebar' ||
       event.key === ' '
     ) {
-      // Get focus element that is in focus by the tab key
-      const focusedElement = document.activeElement;
-
       // Test first if the focus is on the add button node
       if (
         this.addButtonEnabled &&
@@ -808,6 +821,7 @@ export class TabBar<T> extends Widget {
     } else if (ARROW_KEYS.includes(event.key)) {
       // Create a list of all focusable elements in the tab bar.
       const focusable: Element[] = [...this.contentNode.children];
+
       if (this.addButtonEnabled) {
         focusable.push(this.addButtonNode);
       }
@@ -1730,7 +1744,11 @@ export namespace TabBar {
       let className = this.createIconClass(data);
 
       // If title.icon is undefined, it will be ignored.
-      return h.div({ className }, title.icon!, title.iconLabel);
+      return h.div(
+        { className, 'aria-hidden': 'true' },
+        title.icon!,
+        title.iconLabel
+      );
     }
 
     /**
@@ -1741,7 +1759,14 @@ export namespace TabBar {
      * @returns A virtual element representing the tab label.
      */
     renderLabel(data: IRenderData<any>): VirtualElement {
-      return h.div({ className: 'lm-TabBar-tabLabel' }, data.title.label);
+      return h.div(
+        {
+          className: 'lm-TabBar-tabLabel',
+          tabindex: '-1',
+          'aria-hidden': 'true'
+        },
+        data.title.label
+      );
     }
 
     /**
@@ -1752,7 +1777,9 @@ export namespace TabBar {
      * @returns A virtual element representing the tab close icon.
      */
     renderCloseIcon(data: IRenderData<any>): VirtualElement {
-      return h.div({ className: 'lm-TabBar-tabCloseIcon' });
+      return h.div({
+        className: 'lm-TabBar-tabCloseIcon'
+      });
     }
 
     /**
@@ -1829,6 +1856,7 @@ export namespace TabBar {
     createTabARIA(data: IRenderData<any>): ElementARIAAttrs | ElementBaseAttrs {
       return {
         role: 'tab',
+        'aria-label': 'Launcher',
         'aria-selected': data.current.toString(),
         tabindex: `${data.tabIndex ?? '-1'}`
       };

packages/widgets/src/title.ts

@@ -301,7 +301,7 @@ export class Title<T> implements IDisposable {
   }
 
   private _label = '';
-  private _caption = '';
+  private _caption = 'Launcher';
   private _mnemonic = -1;
   private _icon: VirtualElement.IRenderer | undefined = undefined;
   private _iconClass = '';

packages/widgets/style/tabbar.css

@@ -57,6 +57,8 @@
 .lm-TabBar-tabIcon,
 .lm-TabBar-tabCloseIcon {
   flex: 0 0 auto;
+  border: none;
+  background: none;
 }
 
 .lm-TabBar-tabLabel {