From 9b1a541b24a3d5de35c628aa2bfce17a2da61ec2 Mon Sep 17 00:00:00 2001 From: Benjamin Pasero Date: Thu, 15 Feb 2018 17:14:49 +0100 Subject: [PATCH] notifications - better keyboard support --- src/vs/base/browser/ui/button/button.css | 7 ------ src/vs/base/browser/ui/button/button.ts | 22 +++++++++++++++---- .../parts/editor/media/editorstatus.css | 2 -- .../media/notificationsCenter.css | 2 ++ .../notifications/notificationsCenter.ts | 4 ++-- .../notifications/notificationsViewer.ts | 15 +++++++++---- 6 files changed, 33 insertions(+), 19 deletions(-) diff --git a/src/vs/base/browser/ui/button/button.css b/src/vs/base/browser/ui/button/button.css index 44a56a4e88f..3936ed596c1 100644 --- a/src/vs/base/browser/ui/button/button.css +++ b/src/vs/base/browser/ui/button/button.css @@ -20,11 +20,4 @@ .monaco-button.disabled { opacity: 0.4; cursor: default; -} - -/* Theming support */ - -.vs .monaco-text-button:focus, -.vs-dark .monaco-text-button:focus { - outline-color: rgba(255, 255, 255, .5); /* buttons have a blue color, so focus indication needs to be different */ } \ No newline at end of file diff --git a/src/vs/base/browser/ui/button/button.ts b/src/vs/base/browser/ui/button/button.ts index afe338fd065..ec8e05d6265 100644 --- a/src/vs/base/browser/ui/button/button.ts +++ b/src/vs/base/browser/ui/button/button.ts @@ -43,6 +43,8 @@ export class Button { private _onDidClick = new Emitter(); readonly onDidClick: Event = this._onDidClick.event; + private focusTracker: DOM.IFocusTracker; + constructor(container: Builder, options?: IButtonOptions); constructor(container: HTMLElement, options?: IButtonOptions); constructor(container: any, options?: IButtonOptions) { @@ -86,10 +88,7 @@ export class Button { this.$el.on(DOM.EventType.MOUSE_OVER, (e) => { if (!this.$el.hasClass('disabled')) { - const hoverBackground = this.buttonHoverBackground ? this.buttonHoverBackground.toString() : null; - if (hoverBackground) { - this.$el.style('background-color', hoverBackground); - } + this.setHoverBackground(); } }); @@ -97,9 +96,21 @@ export class Button { this.applyStyles(); // restore standard styles }); + // Also set hover background when button is focused for feedback + const tracker = DOM.trackFocus(this.$el.getHTMLElement()); + tracker.onDidFocus(() => this.setHoverBackground()); + tracker.onDidBlur(() => this.applyStyles()); // restore standard styles + this.applyStyles(); } + private setHoverBackground(): void { + const hoverBackground = this.buttonHoverBackground ? this.buttonHoverBackground.toString() : null; + if (hoverBackground) { + this.$el.style('background-color', hoverBackground); + } + } + style(styles: IButtonStyles): void { this.buttonForeground = styles.buttonForeground; this.buttonBackground = styles.buttonBackground; @@ -165,6 +176,9 @@ export class Button { if (this.$el) { this.$el.dispose(); this.$el = null; + + this.focusTracker.dispose(); + this.focusTracker = null; } this._onDidClick.dispose(); diff --git a/src/vs/workbench/browser/parts/editor/media/editorstatus.css b/src/vs/workbench/browser/parts/editor/media/editorstatus.css index 9029f71eac7..69e68b4017a 100644 --- a/src/vs/workbench/browser/parts/editor/media/editorstatus.css +++ b/src/vs/workbench/browser/parts/editor/media/editorstatus.css @@ -35,7 +35,6 @@ position: absolute; top: 0; right: 0; - margin: .5em 0 0; padding: .5em; width: 22px; height: 22px; @@ -67,7 +66,6 @@ padding-left: 12px; padding-right: 12px; border: 4px solid #007ACC; - border-radius: 4px; float: left; margin-right: 5px; } diff --git a/src/vs/workbench/browser/parts/notifications/media/notificationsCenter.css b/src/vs/workbench/browser/parts/notifications/media/notificationsCenter.css index 5eef1213719..034ad4693c8 100644 --- a/src/vs/workbench/browser/parts/notifications/media/notificationsCenter.css +++ b/src/vs/workbench/browser/parts/notifications/media/notificationsCenter.css @@ -27,6 +27,7 @@ .monaco-workbench > .notifications-list-container .notification-list-item { display: flex; flex-direction: column; + flex-direction: column-reverse; /* the details row appears first in order for better keyboard access to notification buttons */ padding: 10px 5px; height: 100%; box-sizing: border-box; @@ -82,6 +83,7 @@ } .monaco-workbench > .notifications-list-container .notification-list-item:hover .notification-list-item-toolbar-container, +.monaco-workbench > .notifications-list-container .monaco-list-row.focused .notification-list-item .notification-list-item-toolbar-container, .monaco-workbench > .notifications-list-container .notification-list-item.expanded .notification-list-item-toolbar-container { display: block; } diff --git a/src/vs/workbench/browser/parts/notifications/notificationsCenter.ts b/src/vs/workbench/browser/parts/notifications/notificationsCenter.ts index 4cbdbeca29b..82290d806f6 100644 --- a/src/vs/workbench/browser/parts/notifications/notificationsCenter.ts +++ b/src/vs/workbench/browser/parts/notifications/notificationsCenter.ts @@ -198,8 +198,8 @@ export class NotificationsCenter extends Themable { this.hide(); } - // Otherwise restore focus - else { + // Otherwise restore focus if we had + else if (typeof focusedIndex === 'number') { let indexToFocus = 0; if (focusedItem) { let indexToFocusCandidate = this.viewModel.indexOf(focusedItem); diff --git a/src/vs/workbench/browser/parts/notifications/notificationsViewer.ts b/src/vs/workbench/browser/parts/notifications/notificationsViewer.ts index 4476e6ab015..1924ba3fabb 100644 --- a/src/vs/workbench/browser/parts/notifications/notificationsViewer.ts +++ b/src/vs/workbench/browser/parts/notifications/notificationsViewer.ts @@ -225,15 +225,17 @@ export class NotificationRenderer implements IRenderer this.openerService.open(URI.parse(content)).then(void 0, onUnexpectedError))); + const links = data.message.querySelectorAll('a'); + for (let i = 0; i < links.length; i++) { + links.item(i).tabIndex = -1; // prevent keyboard navigation to links to allow for better keyboard support within a message + } + // Actions const actions: IAction[] = []; -- GitLab