notifications - better keyboard support

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

src/vs/base/browser/ui/button/button.ts

@@ -43,6 +43,8 @@ export class Button {
 	private _onDidClick = new Emitter<any>();
 	readonly onDidClick: Event<any> = 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();

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;
 }

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;
 }

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);

src/vs/workbench/browser/parts/notifications/notificationsViewer.ts

@@ -225,15 +225,17 @@ export class NotificationRenderer implements IRenderer<INotificationViewItem, IN
 
 		container.appendChild(data.container);
 
+		// the details row appears first in order for better keyboard access to notification buttons
+		data.container.appendChild(data.detailsRow);
+		data.detailsRow.appendChild(data.source);
+		data.detailsRow.appendChild(data.actionsContainer);
+
+		// main row
 		data.container.appendChild(data.mainRow);
 		data.mainRow.appendChild(data.icon);
 		data.mainRow.appendChild(data.message);
 		data.mainRow.appendChild(toolbarContainer);
 
-		data.container.appendChild(data.detailsRow);
-		data.detailsRow.appendChild(data.source);
-		data.detailsRow.appendChild(data.actionsContainer);
-
 		return data;
 	}
 
@@ -263,6 +265,11 @@ export class NotificationRenderer implements IRenderer<INotificationViewItem, IN
 		clearNode(data.message);
 		data.message.appendChild(NotificationMessageMarkdownRenderer.render(notification.message, (content: string) => 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[] = [];