From b7a9bfa7f9e8d34414b1319ff214eb8a2f55c524 Mon Sep 17 00:00:00 2001 From: isidor Date: Fri, 10 Apr 2020 17:31:50 +0200 Subject: [PATCH] add ariaLabel to IStatusbarEntry fixes #94677 --- .../api/browser/mainThreadStatusBar.ts | 2 +- .../browser/parts/editor/editorStatus.ts | 22 ++++++++++++++----- .../notifications/notificationsStatus.ts | 3 ++- .../browser/parts/statusbar/statusbarPart.ts | 5 ++++- .../contrib/debug/browser/debugStatus.ts | 5 +++-- .../extensionProfileService.ts | 1 + .../feedback/browser/feedbackStatusbarItem.ts | 1 + .../markers/browser/markers.contribution.ts | 4 +++- .../browser/keyboardLayoutPicker.ts | 13 ++++++++--- .../contrib/remote/browser/remoteIndicator.ts | 7 +++++- .../workbench/contrib/scm/browser/activity.ts | 5 ++++- .../tasks/browser/task.contribution.ts | 1 + .../progress/browser/progressService.ts | 1 + .../services/statusbar/common/statusbar.ts | 5 +++++ 14 files changed, 59 insertions(+), 16 deletions(-) diff --git a/src/vs/workbench/api/browser/mainThreadStatusBar.ts b/src/vs/workbench/api/browser/mainThreadStatusBar.ts index fb733a38228..a3f2cf9279e 100644 --- a/src/vs/workbench/api/browser/mainThreadStatusBar.ts +++ b/src/vs/workbench/api/browser/mainThreadStatusBar.ts @@ -26,7 +26,7 @@ export class MainThreadStatusBar implements MainThreadStatusBarShape { } $setEntry(id: number, statusId: string, statusName: string, text: string, tooltip: string | undefined, command: Command | undefined, color: string | ThemeColor | undefined, alignment: MainThreadStatusBarAlignment, priority: number | undefined): void { - const entry: IStatusbarEntry = { text, tooltip, command, color }; + const entry: IStatusbarEntry = { text, tooltip, command, color, ariaLabel: text }; if (typeof priority === 'undefined') { priority = 0; diff --git a/src/vs/workbench/browser/parts/editor/editorStatus.ts b/src/vs/workbench/browser/parts/editor/editorStatus.ts index 92e75be5d6a..42771f4ae67 100644 --- a/src/vs/workbench/browser/parts/editor/editorStatus.ts +++ b/src/vs/workbench/browser/parts/editor/editorStatus.ts @@ -401,8 +401,10 @@ export class EditorStatus extends Disposable implements IWorkbenchContribution { private updateTabFocusModeElement(visible: boolean): void { if (visible) { if (!this.tabFocusModeElement.value) { + const text = nls.localize('tabFocusModeEnabled', "Tab Moves Focus"); this.tabFocusModeElement.value = this.statusbarService.addEntry({ - text: nls.localize('tabFocusModeEnabled', "Tab Moves Focus"), + text, + ariaLabel: text, tooltip: nls.localize('disableTabMode', "Disable Accessibility Mode"), command: 'editor.action.toggleTabFocusMode', backgroundColor: themeColorFromId(STATUS_BAR_PROMINENT_ITEM_BACKGROUND), @@ -417,8 +419,10 @@ export class EditorStatus extends Disposable implements IWorkbenchContribution { private updateColumnSelectionModeElement(visible: boolean): void { if (visible) { if (!this.columnSelectionModeElement.value) { + const text = nls.localize('columnSelectionModeEnabled', "Column Selection"); this.columnSelectionModeElement.value = this.statusbarService.addEntry({ - text: nls.localize('columnSelectionModeEnabled', "Column Selection"), + text, + ariaLabel: text, tooltip: nls.localize('disableColumnSelectionMode', "Disable Column Selection Mode"), command: 'editor.action.toggleColumnSelection', backgroundColor: themeColorFromId(STATUS_BAR_PROMINENT_ITEM_BACKGROUND), @@ -433,8 +437,10 @@ export class EditorStatus extends Disposable implements IWorkbenchContribution { private updateScreenReaderModeElement(visible: boolean): void { if (visible) { if (!this.screenRedearModeElement.value) { + const text = nls.localize('screenReaderDetected', "Screen Reader Optimized"); this.screenRedearModeElement.value = this.statusbarService.addEntry({ - text: nls.localize('screenReaderDetected', "Screen Reader Optimized"), + text, + ariaLabel: text, tooltip: nls.localize('screenReaderDetectedExtra', "If you are not using a Screen Reader, please change the setting `editor.accessibilitySupport` to \"off\"."), command: 'showEditorScreenReaderNotification', backgroundColor: themeColorFromId(STATUS_BAR_PROMINENT_ITEM_BACKGROUND), @@ -454,6 +460,7 @@ export class EditorStatus extends Disposable implements IWorkbenchContribution { const props: IStatusbarEntry = { text, + ariaLabel: text, tooltip: nls.localize('gotoLine', "Go to Line/Column"), command: 'workbench.action.gotoLine' }; @@ -469,6 +476,7 @@ export class EditorStatus extends Disposable implements IWorkbenchContribution { const props: IStatusbarEntry = { text, + ariaLabel: text, tooltip: nls.localize('selectIndentation', "Select Indentation"), command: 'changeEditorIndentation' }; @@ -488,6 +496,7 @@ export class EditorStatus extends Disposable implements IWorkbenchContribution { const props: IStatusbarEntry = { text, + ariaLabel: text, tooltip: nls.localize('selectEncoding', "Select Encoding"), command: 'workbench.action.editor.changeEncoding' }; @@ -503,6 +512,7 @@ export class EditorStatus extends Disposable implements IWorkbenchContribution { const props: IStatusbarEntry = { text, + ariaLabel: text, tooltip: nls.localize('selectEOL', "Select End of Line Sequence"), command: 'workbench.action.editor.changeEOL' }; @@ -518,6 +528,7 @@ export class EditorStatus extends Disposable implements IWorkbenchContribution { const props: IStatusbarEntry = { text, + ariaLabel: text, tooltip: nls.localize('selectLanguageMode', "Select Language Mode"), command: 'workbench.action.editor.changeLanguageMode' }; @@ -533,6 +544,7 @@ export class EditorStatus extends Disposable implements IWorkbenchContribution { const props: IStatusbarEntry = { text, + ariaLabel: text, tooltip: nls.localize('fileInfo', "File Information") }; @@ -915,9 +927,9 @@ class ShowCurrentMarkerInStatusbarContribution extends Disposable { const line = this.currentMarker.message.split(/\r\n|\r|\n/g)[0]; const text = `${this.getType(this.currentMarker)} ${line}`; if (!this.statusBarEntryAccessor.value) { - this.statusBarEntryAccessor.value = this.statusbarService.addEntry({ text: '' }, 'statusbar.currentProblem', nls.localize('currentProblem', "Current Problem"), StatusbarAlignment.LEFT); + this.statusBarEntryAccessor.value = this.statusbarService.addEntry({ text: '', ariaLabel: '' }, 'statusbar.currentProblem', nls.localize('currentProblem', "Current Problem"), StatusbarAlignment.LEFT); } - this.statusBarEntryAccessor.value.update({ text }); + this.statusBarEntryAccessor.value.update({ text, ariaLabel: text }); } else { this.statusBarEntryAccessor.clear(); } diff --git a/src/vs/workbench/browser/parts/notifications/notificationsStatus.ts b/src/vs/workbench/browser/parts/notifications/notificationsStatus.ts index cf45117e80c..3c048a86e08 100644 --- a/src/vs/workbench/browser/parts/notifications/notificationsStatus.ts +++ b/src/vs/workbench/browser/parts/notifications/notificationsStatus.ts @@ -72,6 +72,7 @@ export class NotificationsStatus extends Disposable { // Show the bell with a dot if there are unread or in-progress notifications const statusProperties: IStatusbarEntry = { text: `${notificationsInProgress > 0 || this.newNotificationsCount > 0 ? '$(bell-dot)' : '$(bell)'}`, + ariaLabel: localize('status.notifications', "Notifications"), command: this.isNotificationsCenterVisible ? HIDE_NOTIFICATIONS_CENTER : SHOW_NOTIFICATIONS_CENTER, tooltip: this.getTooltip(notificationsInProgress), showBeak: this.isNotificationsCenterVisible @@ -179,7 +180,7 @@ export class NotificationsStatus extends Disposable { let statusMessageEntry: IStatusbarEntryAccessor; let showHandle: any = setTimeout(() => { statusMessageEntry = this.statusbarService.addEntry( - { text: message }, + { text: message, ariaLabel: message }, 'status.message', localize('status.message', "Status Message"), StatusbarAlignment.LEFT, diff --git a/src/vs/workbench/browser/parts/statusbar/statusbarPart.ts b/src/vs/workbench/browser/parts/statusbar/statusbarPart.ts index 6baa583669b..3ea3367046a 100644 --- a/src/vs/workbench/browser/parts/statusbar/statusbarPart.ts +++ b/src/vs/workbench/browser/parts/statusbar/statusbarPart.ts @@ -681,7 +681,6 @@ class StatusbarEntryItem extends Disposable { // Update: Text if (!this.entry || entry.text !== this.entry.text) { this.label.text = entry.text; - this.container.setAttribute('aria-label', entry.text); if (entry.text) { show(this.labelContainer); @@ -690,6 +689,10 @@ class StatusbarEntryItem extends Disposable { } } + if (!this.entry || entry.ariaLabel !== this.entry.ariaLabel) { + this.container.setAttribute('aria-label', entry.ariaLabel); + } + // Update: Tooltip (on the container, because label can be disabled) if (!this.entry || entry.tooltip !== this.entry.tooltip) { if (entry.tooltip) { diff --git a/src/vs/workbench/contrib/debug/browser/debugStatus.ts b/src/vs/workbench/contrib/debug/browser/debugStatus.ts index 8cfbf1702b8..e1736d44af7 100644 --- a/src/vs/workbench/contrib/debug/browser/debugStatus.ts +++ b/src/vs/workbench/contrib/debug/browser/debugStatus.ts @@ -61,11 +61,12 @@ export class DebugStatusContribution implements IWorkbenchContribution { const name = manager.selectedConfiguration.name || ''; const nameAndLaunchPresent = name && manager.selectedConfiguration.launch; if (nameAndLaunchPresent) { - text = '$(play) ' + (manager.getLaunches().length > 1 ? `${name} (${manager.selectedConfiguration.launch!.name})` : name); + text = (manager.getLaunches().length > 1 ? `${name} (${manager.selectedConfiguration.launch!.name})` : name); } return { - text: text, + text: '$(play) ' + text, + ariaLabel: nls.localize('debugTarget', "Debug: {0}", text), tooltip: nls.localize('selectAndStartDebug', "Select and start debug configuration"), command: 'workbench.action.debug.selectandstart' }; diff --git a/src/vs/workbench/contrib/extensions/electron-browser/extensionProfileService.ts b/src/vs/workbench/contrib/extensions/electron-browser/extensionProfileService.ts index 6e081b5d157..7f988b5c93c 100644 --- a/src/vs/workbench/contrib/extensions/electron-browser/extensionProfileService.ts +++ b/src/vs/workbench/contrib/extensions/electron-browser/extensionProfileService.ts @@ -82,6 +82,7 @@ export class ExtensionHostProfileService extends Disposable implements IExtensio if (visible) { const indicator: IStatusbarEntry = { text: '$(sync~spin) ' + nls.localize('profilingExtensionHost', "Profiling Extension Host"), + ariaLabel: nls.localize('profilingExtensionHost', "Profiling Extension Host"), tooltip: nls.localize('selectAndStartDebug', "Click to stop profiling."), command: 'workbench.action.extensionHostProfilder.stop' }; diff --git a/src/vs/workbench/contrib/feedback/browser/feedbackStatusbarItem.ts b/src/vs/workbench/contrib/feedback/browser/feedbackStatusbarItem.ts index cf4574859d9..fdbdda8d7f8 100644 --- a/src/vs/workbench/contrib/feedback/browser/feedbackStatusbarItem.ts +++ b/src/vs/workbench/contrib/feedback/browser/feedbackStatusbarItem.ts @@ -103,6 +103,7 @@ export class FeedbackStatusbarConribution extends Disposable implements IWorkben private getStatusEntry(showBeak?: boolean): IStatusbarEntry { return { text: '$(feedback)', + ariaLabel: localize('status.feedback', "Tweet Feedback"), tooltip: localize('status.feedback', "Tweet Feedback"), command: 'help.tweetFeedback', showBeak diff --git a/src/vs/workbench/contrib/markers/browser/markers.contribution.ts b/src/vs/workbench/contrib/markers/browser/markers.contribution.ts index ed8b865da5c..0e907368747 100644 --- a/src/vs/workbench/contrib/markers/browser/markers.contribution.ts +++ b/src/vs/workbench/contrib/markers/browser/markers.contribution.ts @@ -361,9 +361,11 @@ class MarkersStatusBarContributions extends Disposable implements IWorkbenchCont private getMarkersItem(): IStatusbarEntry { const markersStatistics = this.markerService.getStatistics(); + const tooltip = this.getMarkersTooltip(markersStatistics); return { text: this.getMarkersText(markersStatistics), - tooltip: this.getMarkersTooltip(markersStatistics), + ariaLabel: tooltip, + tooltip, command: 'workbench.actions.view.toggleProblems' }; } diff --git a/src/vs/workbench/contrib/preferences/browser/keyboardLayoutPicker.ts b/src/vs/workbench/contrib/preferences/browser/keyboardLayoutPicker.ts index 484f0201131..fd81d365a21 100644 --- a/src/vs/workbench/contrib/preferences/browser/keyboardLayoutPicker.ts +++ b/src/vs/workbench/contrib/preferences/browser/keyboardLayoutPicker.ts @@ -35,9 +35,12 @@ export class KeyboardLayoutPickerContribution extends Disposable implements IWor let layout = this.keymapService.getCurrentKeyboardLayout(); if (layout) { let layoutInfo = parseKeyboardLayoutDescription(layout); + const text = nls.localize('keyboardLayout', "Layout: {0}", layoutInfo.label); + this.pickerElement.value = this.statusbarService.addEntry( { - text: nls.localize('keyboardLayout', "Layout: {0}", layoutInfo.label), + text, + ariaLabel: text, command: KEYBOARD_LAYOUT_OPEN_PICKER }, 'status.workbench.keyboardLayout', @@ -51,14 +54,18 @@ export class KeyboardLayoutPickerContribution extends Disposable implements IWor let layoutInfo = parseKeyboardLayoutDescription(layout); if (this.pickerElement.value) { + const text = nls.localize('keyboardLayout', "Layout: {0}", layoutInfo.label); this.pickerElement.value.update({ - text: nls.localize('keyboardLayout', "Layout: {0}", layoutInfo.label), + text, + ariaLabel: text, command: KEYBOARD_LAYOUT_OPEN_PICKER }); } else { + const text = nls.localize('keyboardLayout', "Layout: {0}", layoutInfo.label); this.pickerElement.value = this.statusbarService.addEntry( { - text: nls.localize('keyboardLayout', "Layout: {0}", layoutInfo.label), + text, + ariaLabel: text, command: KEYBOARD_LAYOUT_OPEN_PICKER }, 'status.workbench.keyboardLayout', diff --git a/src/vs/workbench/contrib/remote/browser/remoteIndicator.ts b/src/vs/workbench/contrib/remote/browser/remoteIndicator.ts index 011947d3dc2..9194ba3e37f 100644 --- a/src/vs/workbench/contrib/remote/browser/remoteIndicator.ts +++ b/src/vs/workbench/contrib/remote/browser/remoteIndicator.ts @@ -169,7 +169,12 @@ export class RemoteWindowActiveIndicator extends Disposable implements IWorkbenc private renderWindowIndicator(text: string, tooltip?: string, command?: string): void { const properties: IStatusbarEntry = { - backgroundColor: themeColorFromId(STATUS_BAR_HOST_NAME_BACKGROUND), color: themeColorFromId(STATUS_BAR_HOST_NAME_FOREGROUND), text, tooltip, command + backgroundColor: themeColorFromId(STATUS_BAR_HOST_NAME_BACKGROUND), + color: themeColorFromId(STATUS_BAR_HOST_NAME_FOREGROUND), + ariaLabel: nls.localize('remote', "Remote"), + text, + tooltip, + command }; if (this.windowIndicatorEntry) { this.windowIndicatorEntry.update(properties); diff --git a/src/vs/workbench/contrib/scm/browser/activity.ts b/src/vs/workbench/contrib/scm/browser/activity.ts index 13ed604bd7f..3f83d4f2674 100644 --- a/src/vs/workbench/contrib/scm/browser/activity.ts +++ b/src/vs/workbench/contrib/scm/browser/activity.ts @@ -156,9 +156,12 @@ export class SCMStatusController implements IWorkbenchContribution { const disposables = new DisposableStore(); for (const c of commands) { + const tooltip = `${label} - ${c.tooltip}`; + disposables.add(this.statusbarService.addEntry({ text: c.title, - tooltip: `${label} - ${c.tooltip}`, + ariaLabel: tooltip, + tooltip, command: c }, 'status.scm', localize('status.scm', "Source Control"), MainThreadStatusBarAlignment.LEFT, 10000)); } diff --git a/src/vs/workbench/contrib/tasks/browser/task.contribution.ts b/src/vs/workbench/contrib/tasks/browser/task.contribution.ts index 6b30ba65f61..179a849e726 100644 --- a/src/vs/workbench/contrib/tasks/browser/task.contribution.ts +++ b/src/vs/workbench/contrib/tasks/browser/task.contribution.ts @@ -122,6 +122,7 @@ export class TaskStatusBarContributions extends Disposable implements IWorkbench } else { const itemProps: IStatusbarEntry = { text: `$(tools) ${tasks.length}`, + ariaLabel: nls.localize('numberOfRunningTasks', "{0} running tasks", tasks.length), tooltip: nls.localize('runningTasks', "Show Running Tasks"), command: 'workbench.action.tasks.showTasks', }; diff --git a/src/vs/workbench/services/progress/browser/progressService.ts b/src/vs/workbench/services/progress/browser/progressService.ts index f278eb996f2..4ebc2fdeca6 100644 --- a/src/vs/workbench/services/progress/browser/progressService.ts +++ b/src/vs/workbench/services/progress/browser/progressService.ts @@ -152,6 +152,7 @@ export class ProgressService extends Disposable implements IProgressService { const statusEntryProperties: IStatusbarEntry = { text: `$(sync~spin) ${text}`, + ariaLabel: text, tooltip: title, command: progressCommand }; diff --git a/src/vs/workbench/services/statusbar/common/statusbar.ts b/src/vs/workbench/services/statusbar/common/statusbar.ts index 130101a530b..358a810e047 100644 --- a/src/vs/workbench/services/statusbar/common/statusbar.ts +++ b/src/vs/workbench/services/statusbar/common/statusbar.ts @@ -28,6 +28,11 @@ export interface IStatusbarEntry { */ readonly text: string; + /** + * Text to be read out by the screen reader. + */ + readonly ariaLabel: string; + /** * An optional tooltip text to show when you hover over the entry */