Merge branch 'master' into gh-10684

Author: tortmayr

CHANGELOG.md

@@ -10,14 +10,13 @@
 
 - [core] Move code for untitled resources into `core` from `plugin-ext` and allow users to open untitled editors with `New File` command. [#10868](https://github.com/eclipse-theia/theia/pull/10868)
 - [plugin] added support for `SnippetString.appendChoice` [#10969](https://github.com/eclipse-theia/theia/pull/10969) - Contributed on behalf of STMicroelectronics
+- [plugin] added support for `AccessibilityInformation` [#10961](https://github.com/eclipse-theia/theia/pull/10961) - Contributed on behalf of STMicroelectronics
 - [core] Heavily refactored the core messaging API. Replaced `vscode-ws-jsonrpc` with a custom RPC protocol that is better suited for handling binary data and enables message tunneling.
   This impacts all main concepts of the messaging API. The API no longer exposes a `Connection` object and uses a generic `Channel` implementation instead.
   * `MessagingService`: No longer offers the `listen` and `forward` method. Use `wsChannel`instead. [#11011](https://github.com/eclipse-theia/theia/pull/11011) - Contributed on behalf of STMicroelectronics.
 
-
 <a name="breaking_changes_1.25.0">[Breaking Changes:](#breaking_changes_1.25.0)</a>
 
-
 ## v1.24.0 - 3/31/2022
 
 [1.24.0 Milestone](https://github.com/eclipse-theia/theia/milestone/32)

packages/core/src/browser/common-frontend-contribution.ts

@@ -1474,10 +1474,6 @@ export class CommonFrontendContribution implements FrontendApplicationContributi
             },
             {
                 id: 'tab.activeBorderTop',
-                defaults: {
-                    dark: 'focusBorder',
-                    light: 'focusBorder'
-                },
                 description: 'Border to the top of an active tab. Tabs are the containers for editors in the editor area. Multiple tabs can be opened in one editor group. There can be multiple editor groups.'
             },
             {
@@ -1488,6 +1484,10 @@ export class CommonFrontendContribution implements FrontendApplicationContributi
             },
             {
                 id: 'tab.hoverBackground',
+                defaults: {
+                    dark: 'tab.inactiveBackground',
+                    light: 'tab.inactiveBackground'
+                },
                 description: 'Tab background color when hovering. Tabs are the containers for editors in the editor area. Multiple tabs can be opened in one editor group. There can be multiple editor groups.'
             },
             {

packages/core/src/browser/shell/application-shell.ts

@@ -690,6 +690,7 @@ export class ApplicationShell extends Widget {
                 this.collapseBottomPanel();
             }
             const widgets = toArray(this.bottomPanel.widgets());
+            this.bottomPanel.markActiveTabBar(widgets[0]?.title);
             if (bottomPanel.pinned && bottomPanel.pinned.length === widgets.length) {
                 widgets.forEach((a, i) => {
                     if (bottomPanel.pinned![i]) {
@@ -706,6 +707,9 @@ export class ApplicationShell extends Widget {
             this.mainPanel.restoreLayout(mainPanel);
             this.registerWithFocusTracker(mainPanel.main);
             const widgets = toArray(this.mainPanel.widgets());
+            // We don't store information about the last active tabbar
+            // So we simply mark the first as being active
+            this.mainPanel.markActiveTabBar(widgets[0]?.title);
             if (mainPanelPinned && mainPanelPinned.length === widgets.length) {
                 widgets.forEach((a, i) => {
                     if (mainPanelPinned[i]) {
@@ -1418,6 +1422,10 @@ export class ApplicationShell extends Widget {
                 alignment: StatusBarAlignment.RIGHT,
                 tooltip: 'Toggle Bottom Panel',
                 command: 'core.toggle.bottom.panel',
+                accessibilityInformation: {
+                    label: 'Toggle Bottom Panel',
+                    role: 'button'
+                },
                 priority: -1000
             };
             this.statusBar.setElement(BOTTOM_PANEL_TOGGLE_ID, element);

packages/core/src/browser/shell/theia-dock-panel.ts

@@ -24,6 +24,7 @@ import { inject } from 'inversify';
 import { Emitter, environment } from '../../common';
 
 export const MAXIMIZED_CLASS = 'theia-maximized';
+export const ACTIVE_TABBAR_CLASS = 'theia-tabBar-active';
 const VISIBLE_MENU_MAXIMIZED_CLASS = 'theia-visible-menu-maximized';
 
 export const MAIN_AREA_ID = 'theia-main-content-panel';
@@ -106,6 +107,7 @@ export class TheiaDockPanel extends DockPanel {
     markAsCurrent(title: Title<Widget> | undefined): void {
         this.toDisposeOnMarkAsCurrent.dispose();
         this._currentTitle = title;
+        this.markActiveTabBar(title);
         if (title) {
             const resetCurrent = () => this.markAsCurrent(undefined);
             title.owner.disposed.connect(resetCurrent);
@@ -115,17 +117,31 @@ export class TheiaDockPanel extends DockPanel {
         }
     }
 
+    markActiveTabBar(title?: Title<Widget>): void {
+        const tabBars = toArray(this.tabBars());
+        tabBars.forEach(tabBar => tabBar.removeClass(ACTIVE_TABBAR_CLASS));
+        const activeTabBar = title && this.findTabBar(title);
+        if (activeTabBar) {
+            activeTabBar.addClass(ACTIVE_TABBAR_CLASS);
+        } else if (tabBars.length > 0) {
+            // At least one tabbar needs to be active
+            tabBars[0].addClass(ACTIVE_TABBAR_CLASS);
+        }
+    }
+
     override addWidget(widget: Widget, options?: DockPanel.IAddOptions): void {
         if (this.mode === 'single-document' && widget.parent === this) {
             return;
         }
         super.addWidget(widget, options);
         this.widgetAdded.emit(widget);
+        this.markActiveTabBar(widget.title);
     }
 
     override activateWidget(widget: Widget): void {
         super.activateWidget(widget);
         this.widgetActivated.emit(widget);
+        this.markActiveTabBar(widget.title);
     }
 
     protected override onChildRemoved(msg: Widget.ChildMessage): void {

packages/core/src/browser/status-bar/status-bar.tsx

@@ -22,6 +22,7 @@ import { ReactWidget } from '../widgets/react-widget';
 import { FrontendApplicationStateService } from '../frontend-application-state';
 import { LabelParser, LabelIcon } from '../label-parser';
 import { PreferenceService } from '../preferences';
+import { AccessibilityInformation } from '../../common/accessibility';
 
 export interface StatusBarEntry {
     /**
@@ -44,20 +45,14 @@ export interface StatusBarEntry {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     arguments?: any[];
     priority?: number;
+    accessibilityInformation?: AccessibilityInformation;
     onclick?: (e: MouseEvent) => void;
 }
 
 export enum StatusBarAlignment {
     LEFT, RIGHT
 }
 
-export interface StatusBarEntryAttributes {
-    className?: string;
-    title?: string;
-    style?: object;
-    onClick?: (e: MouseEvent) => void;
-}
-
 export const STATUSBAR_WIDGET_FACTORY_ID = 'statusBar';
 
 export const StatusBar = Symbol('StatusBar');
@@ -169,15 +164,15 @@ export class StatusBarImpl extends ReactWidget implements StatusBar {
         };
     }
 
-    protected createAttributes(entry: StatusBarEntry): StatusBarEntryAttributes {
-        const attrs: StatusBarEntryAttributes = {};
+    protected createAttributes(entry: StatusBarEntry): React.Attributes & React.HTMLAttributes<HTMLElement> {
+        const attrs: React.Attributes & React.HTMLAttributes<HTMLElement> = {};
 
         if (entry.command) {
             attrs.onClick = this.onclick(entry);
             attrs.className = 'element hasCommand';
         } else if (entry.onclick) {
             attrs.onClick = e => {
-                if (entry.onclick) {
+                if (entry.onclick && e instanceof MouseEvent) {
                     entry.onclick(e);
                 }
             };
@@ -189,15 +184,20 @@ export class StatusBarImpl extends ReactWidget implements StatusBar {
         if (entry.tooltip) {
             attrs.title = entry.tooltip;
         }
+        if (entry.className) {
+            attrs.className += ' ' + entry.className;
+        }
+        if (entry.accessibilityInformation) {
+            attrs['aria-label'] = entry.accessibilityInformation.label;
+            attrs.role = entry.accessibilityInformation.role;
+        } else {
+            attrs['aria-label'] = [entry.text, entry.tooltip].join(', ');
+        }
 
         attrs.style = {
             color: entry.color || this.color
         };
 
-        if (entry.className) {
-            attrs.className += ' ' + entry.className;
-        }
-
         return attrs;
     }
 

packages/core/src/browser/style/sidepanel.css

@@ -90,19 +90,11 @@
   border-top-color: transparent;
 }
 
-.p-TabBar.theia-app-left .p-TabBar-tab.p-mod-current.theia-mod-active {
-    border-left: var(--theia-panel-border-width) solid var(--theia-focusBorder);
-}
-
 .p-TabBar.theia-app-right .p-TabBar-tab.p-mod-current {
     border-right: var(--theia-panel-border-width) solid var(--theia-activityBar-activeBorder);
     border-top-color: transparent;
 }
 
-.p-TabBar.theia-app-right .p-TabBar-tab.p-mod-current.theia-mod-active {
-    border-right: var(--theia-panel-border-width) solid var(--theia-focusBorder);
-}
-
 .p-TabBar.theia-app-sides .p-TabBar-tabLabel,
 .p-TabBar.theia-app-sides .p-TabBar-tabCloseIcon {
   display: none;
@@ -285,16 +277,19 @@
 
 #theia-bottom-content-panel .p-TabBar-tab:not(.p-mod-current) {
     color: var(--theia-panelTitle-inactiveForeground);
-    border-top: var(--theia-border-width) solid  var(--theia-panel-background);
 }
 
 #theia-bottom-content-panel .p-TabBar-tab.p-mod-current {
     color: var(--theia-panelTitle-activeForeground);
-    border-top: var(--theia-border-width) solid var(--theia-panelTitle-activeBorder);
+    box-shadow: 0 var(--theia-border-width) 0 var(--theia-panelTitle-activeBorder) inset;
+}
+
+#theia-bottom-content-panel .p-TabBar:not(.theia-tabBar-active) .p-TabBar-tab .theia-tab-icon-label {
+    color: var(--theia-tab-unfocusedInactiveForeground);
 }
 
-#theia-bottom-content-panel .p-TabBar-tab.p-mod-current.theia-mod-active {
-    border-top-color: var(--theia-focusBorder);
+#theia-bottom-content-panel .p-TabBar:not(.theia-tabBar-active) .p-TabBar-tab.p-mod-current .theia-tab-icon-label {
+    color: var(--theia-tab-unfocusedActiveForeground);
 }
 
 /*-----------------------------------------------------------------------------

packages/core/src/browser/style/tabs.css

@@ -80,65 +80,34 @@
 
 #theia-main-content-panel .p-TabBar .p-TabBar-tab {
     border-right: 1px solid var(--theia-tab-border);
+    background: var(--theia-tab-inactiveBackground);
+    color: var(--theia-tab-inactiveForeground);
 }
 
-#theia-main-content-panel .p-TabBar .p-TabBar-tab:hover.theia-mod-active {
-    background: var(--theia-tab-hoverBackground) !important;
-    box-shadow: var(--theia-tab-hoverBorder) 0 -1px inset !important;
-}
-
-#theia-main-content-panel .p-TabBar .p-TabBar-tab:hover:not(.theia-mod-active) {
-    background: var(--theia-tab-unfocusedHoverBackground) !important;
-    box-shadow: var(--theia-tab-unfocusedHoverBorder) 0 -1px inset !important;
+#theia-main-content-panel .p-TabBar .p-TabBar-tab:hover {
+    background: var(--theia-tab-hoverBackground);
+    box-shadow: 0 1px 0 var(--theia-tab-hoverBorder) inset;
 }
 
-/* active tab in an active group */
-body.theia-editor-highlightModifiedTabs
-#theia-main-content-panel .p-TabBar .p-TabBar-tab.p-mod-current.theia-mod-active.theia-mod-dirty {
-    border-top: 1px solid var(--theia-tab-activeModifiedBorder);
+#theia-main-content-panel .p-TabBar:not(.theia-tabBar-active) .p-TabBar-tab:hover {
+    background: var(--theia-tab-unfocusedHoverBackground);
+    box-shadow: 0 1px 0 var(--theia-tab-unfocusedHoverBorder) inset;
 }
 
-#theia-main-content-panel .p-TabBar .p-TabBar-tab.p-mod-current.theia-mod-active {
+#theia-main-content-panel .p-TabBar .p-TabBar-tab.p-mod-current {
     background: var(--theia-tab-activeBackground);
     color: var(--theia-tab-activeForeground);
-    border-top: 1px solid var(--theia-tab-activeBorderTop);
-    border-bottom: 1px solid var(--theia-tab-activeBorder);
-}
-
-/* inactive tab in an active group */
-body.theia-editor-highlightModifiedTabs
-#theia-main-content-panel .p-TabBar .p-TabBar-tab:not(.p-mod-current).theia-mod-active.theia-mod-dirty {
-    border-top: 1px solid var(--theia-tab-inactiveModifiedBorder);
-}
-
-#theia-main-content-panel .p-TabBar .p-TabBar-tab:not(.p-mod-current).theia-mod-active {
-    background: var(--theia-tab-inactiveBackground);
-    color: var(--theia-tab-inactiveForeground);
+    box-shadow: 0 1px 0 var(--theia-tab-activeBorderTop) inset, 0 -1px 0 var(--theia-tab-activeBorder) inset;
 }
 
-/* active tab in an unfocused group */
-body.theia-editor-highlightModifiedTabs
-#theia-main-content-panel .p-TabBar .p-TabBar-tab.p-mod-current:not(.theia-mod-active).theia-mod-dirty {
-    border-top: 1px solid var(--theia-tab-unfocusedActiveModifiedBorder);
+#theia-main-content-panel .p-TabBar:not(.theia-tabBar-active) .p-TabBar-tab {
+    color: var(--theia-tab-unfocusedInactiveForeground);
 }
 
-#theia-main-content-panel .p-TabBar .p-TabBar-tab.p-mod-current:not(.theia-mod-active) {
+#theia-main-content-panel .p-TabBar:not(.theia-tabBar-active) .p-TabBar-tab.p-mod-current {
     background: var(--theia-tab-unfocusedActiveBackground);
     color: var(--theia-tab-unfocusedActiveForeground);
-    border-top: 1px solid var(--theia-tab-unfocusedActiveBorderTop);
-    border-bottom: 1px solid var(--theia-tab-unfocusedActiveBorder);
-}
-
-/* inactive tab in an unfocused group */
-body.theia-editor-highlightModifiedTabs
-#theia-main-content-panel .p-TabBar .p-TabBar-tab:not(.p-mod-current):not(.theia-mod-active).theia-mod-dirty {
-    border-top: 1px solid var(--theia-tab-unfocusedInactiveModifiedBorder);
-}
-
-#theia-main-content-panel .p-TabBar .p-TabBar-tab:not(.p-mod-current):not(.theia-mod-active) {
-    background: var(--theia-tab-inactiveBackground);
-    color: var(--theia-tab-inactiveForeground);
-    border-top: 1px solid var(--theia-tab-inactiveBackground);
+    box-shadow: 0 1px 0 var(--theia-tab-unfocusedActiveBorderTop) inset, 0 -1px 0 var(--theia-tab-unfocusedActiveBorder) inset;
 }
 
 .p-TabBar.theia-app-centers {

packages/core/src/common/accessibility.ts

@@ -0,0 +1,33 @@
+// *****************************************************************************
+// Copyright (C) 2022 STMicroelectronics and others.
+//
+// This program and the accompanying materials are made available under the
+// terms of the Eclipse Public License v. 2.0 which is available at
+// http://www.eclipse.org/legal/epl-2.0.
+//
+// This Source Code may also be made available under the following Secondary
+// Licenses when the conditions for such availability set forth in the Eclipse
+// Public License v. 2.0 are satisfied: GNU General Public License, version 2
+// with the GNU Classpath Exception which is available at
+// https://www.gnu.org/software/classpath/license.html.
+//
+// SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+// *****************************************************************************
+
+/**
+ * Accessibility information which controls screen reader behavior.
+ */
+export interface AccessibilityInformation {
+    /**
+     * Label to be read out by a screen reader once the item has focus.
+     */
+    readonly label: string;
+
+    /**
+     * Role of the widget which defines how a screen reader interacts with it.
+     * The role should be set in special cases when for example a tree-like element behaves like a checkbox.
+     * If role is not specified the editor will pick the appropriate role automatically.
+     * More about aria roles can be found here https://w3c.github.io/aria/#widget_roles
+     */
+    readonly role?: string;
+}

packages/core/src/common/quick-pick-service.ts

@@ -201,6 +201,7 @@ export interface QuickPick<T extends QuickPickItemOrSeparator> extends QuickInpu
     canSelectMany: boolean;
     matchOnDescription: boolean;
     matchOnDetail: boolean;
+    keepScrollPosition: boolean;
     readonly onDidAccept: Event<{ inBackground: boolean } | undefined>;
     readonly onDidChangeValue: Event<string>;
     readonly onDidTriggerButton: Event<QuickInputButton>;
@@ -261,6 +262,7 @@ export interface QuickPickOptions<T extends QuickPickItemOrSeparator> {
     matchOnDetail?: boolean;
     matchOnLabel?: boolean;
     sortByLabel?: boolean;
+    keepScrollPosition?: boolean;
     autoFocusOnList?: boolean;
     ignoreFocusOut?: boolean;
     valueSelection?: Readonly<[number, number]>;

packages/git/package.json

@@ -17,7 +17,7 @@
     "dugite-extra": "0.1.15",
     "find-git-exec": "^0.0.4",
     "find-git-repositories": "^0.1.1",
-    "moment": "2.24.0",
+    "moment": "2.29.2",
     "octicons": "^7.1.0",
     "p-queue": "^2.4.2",
     "ts-md5": "^1.2.2"