css - do not hide outline in elements with focus

src/vs/base/browser/ui/actionbar/actionbar.css

@@ -48,14 +48,6 @@
 	margin-right: 0.3em;
 }
 
-.monaco-action-bar:focus {
-	outline: 0;
-}
-
-.monaco-action-bar .action-label:focus {
-	outline: 0;
-}
-
 .monaco-action-bar .action-item.disabled .action-label,
 .monaco-action-bar .action-item.disabled .action-label:hover {
 	opacity: 0.4;
@@ -183,7 +175,6 @@
 .monaco-workbench .action-bar-select {
 	height: 20px;
 	margin: 5px 4px;
-	outline: none;
 }
 
 .vs-dark.monaco-workbench .action-bar-select {

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

@@ -224,7 +224,7 @@ export class ActionItem extends BaseActionItem {
 	public render(container: HTMLElement): void {
 		super.render(container);
 
-		this.$e = $('a.action-label').attr('tabIndex', '-1').appendTo(this.builder);
+		this.$e = $('a.action-label').attr('tabIndex', '0').appendTo(this.builder);
 		this.$e.attr({ role: 'menuitem' });
 
 		if (this.options.label && this.options.keybinding) {
@@ -370,7 +370,6 @@ export interface IActionItemProvider {
 export interface IActionBarOptions {
 	orientation?: ActionsOrientation;
 	context?: any;
-	disableTabIndex?: boolean;
 	actionItemProvider?: IActionItemProvider;
 	actionRunner?: actions.IActionRunner;
 }
@@ -548,10 +547,6 @@ export class ActionBar extends EventEmitter implements actions.IActionRunner {
 				this.actionsList.insertBefore(actionItemElement, this.actionsList.children[index++]);
 			}
 
-			if (!this.options.disableTabIndex && !this.domNode.hasAttribute('tabIndex')) {
-				this.domNode.tabIndex = 0; // make sure an action bar with actions participates in tab navigation
-			}
-
 			this.items.push(item);
 		});
 	}
@@ -562,10 +557,6 @@ export class ActionBar extends EventEmitter implements actions.IActionRunner {
 			item.dispose();
 		}
 		$(this.actionsList).empty();
-
-		if (!this.options.disableTabIndex) {
-			this.domNode.removeAttribute('tabIndex'); // empty action bar does not participate in tab navigation
-		}
 	}
 
 	public length(): number {

src/vs/base/browser/ui/dropdown/dropdown.css

@@ -22,10 +22,6 @@
 	vertical-align: top;
 }
 
-.dropdown > .dropdown-action > .action-label {
-	outline: none;
-}
-
 .dropdown > .dropdown-action > .action-label:hover {
 	color: inherit;
 	text-decoration: none;

src/vs/base/browser/ui/toolbar/toolbar.css

@@ -33,24 +33,6 @@
 	background-image: url('ellipsis-inverse.svg');
 }
 
-/*.monaco-toolbar .monaco-action-bar:focus:after {
-	content: "";
-	position: relative;
-	top: -5px;
-	height: 0;
-	width: 100%;
-	border-top: 2px solid #39F;
-	display: block;
-}
-
-.vs .monaco-toolbar .monaco-action-bar .action-label:focus {
-	background-color: #DCEBFC;
-}
-
-.vs-dark .monaco-toolbar .monaco-action-bar .action-label:focus {
-	background-color: #073655;
-}*/
-
 /* High Contrast Theming */
 .hc-black .monaco-toolbar .action-label.toolbar-toggle-more {
 	background: none;
@@ -61,14 +43,6 @@
 	position: absolute;
 	top: 12px;
 	left: 8px;
-	height: 16px; 
+	height: 16px;
 	width: 16px;
-}
-
-/*.hc-black .monaco-toolbar .monaco-action-bar:focus:after {
-	border-color: #DF740C;
-}
-
-.hc-black .monaco-toolbar .monaco-action-bar .action-label:focus {
-	border: 1px solid #DF740C;
-}*/
\ No newline at end of file
+}
\ No newline at end of file

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

@@ -172,7 +172,7 @@ export class DropdownMenuActionItem extends BaseActionItem {
 
 		var labelRenderer: ILabelRenderer = (el: HTMLElement): IDisposable => {
 			var e = $('a.action-label').attr({
-				tabIndex: '-1',
+				tabIndex: '0',
 				role: 'menuitem',
 				title: this._action.label || '',
 				class: this.clazz

src/vs/base/parts/tree/browser/tree.css

@@ -15,10 +15,6 @@
 	position: relative;
 }
 
-.monaco-tree:focus {
-	outline: 0;
-}
-
 .monaco-tree > .monaco-scrollable-element {
 	height: 100%;
 }

src/vs/editor/contrib/find/browser/findWidget.css

@@ -28,10 +28,6 @@
 	background-color: black;
 }
 
-.monaco-checkbox .checkbox:focus + .label {
-	outline: auto 5px rgb(229, 151, 0);
-}
-
 /* Find widget */
 .monaco-editor .find-widget {
 	position: absolute;

src/vs/editor/contrib/iPadShowKeyboard/browser/iPadShowKeyboard.css

@@ -11,7 +11,6 @@
 	margin: 0;
 	padding: 0;
 	position: absolute;
-	outline: none;
 	resize: none;
 	overflow: hidden;
 	background: url('keyboard.svg') center center no-repeat;

src/vs/editor/contrib/referenceSearch/browser/referenceSearchWidget.css

@@ -61,10 +61,6 @@
 	font-size: 13px;
 }
 
-.monaco-editor .reference-zone-widget .tree .monaco-tree {
-	outline: none;
-}
-
 .monaco-editor .reference-zone-widget .tree .monaco-tree.focused .monaco-tree-rows > .monaco-tree-row.selected:not(.highlighted) {
 	background-color: rgba(51, 153, 255, .2);
 	color: #6C6C6C !important;

src/vs/workbench/browser/parts/activitybar/activitybarPart.ts

@@ -118,7 +118,6 @@ export class ActivitybarPart extends Part implements IActivityService {
 		// Viewlet switcher is on top
 		this.viewletSwitcherBar = new ActionBar(div, {
 			actionItemProvider: (action: Action) => this.activityActionItems[action.id],
-			disableTabIndex: true // we handle this
 		});
 		this.viewletSwitcherBar.getContainer().addClass('position-top');
 
@@ -159,7 +158,6 @@ export class ActivitybarPart extends Part implements IActivityService {
 			actionItemProvider: (action: Action) => this.activityActionItems[action.id],
 			orientation: ActionsOrientation.VERTICAL
 		});
-		this.globalToolBar.getContainer().removeAttribute('tabindex');
 		this.globalToolBar.getContainer().addClass('global');
 
 		this.globalToolBar.actionRunner.addListener(events.EventType.RUN, (e: any) => {

src/vs/workbench/browser/parts/activitybar/media/activityaction.css

@@ -82,8 +82,7 @@
 }
 
 .monaco-workbench > .activitybar > .content .monaco-action-bar .action-item .action-label.active,
-.monaco-workbench > .activitybar > .content .monaco-action-bar .action-item:hover .action-label,
-.monaco-workbench > .activitybar > .content .monaco-action-bar .action-item .action-label:focus {
+.monaco-workbench > .activitybar > .content .monaco-action-bar .action-item:hover .action-label {
 	opacity: 1;
 }
 

src/vs/workbench/browser/parts/editor/media/binarydiffeditor.css

@@ -33,14 +33,14 @@
 
 /* CSS checkerbox pattern (learnt from http://lea.verou.me/2011/02/checkerboard-pattern-with-css3/*/
 .monaco-workbench.vs .binary-container img {
-	background-image: 
-		linear-gradient(45deg, rgb(220, 220, 220) 25%, transparent 25%, transparent 75%, rgb(220, 220, 220) 75%, rgb(220, 220, 220)), 
+	background-image:
+		linear-gradient(45deg, rgb(220, 220, 220) 25%, transparent 25%, transparent 75%, rgb(220, 220, 220) 75%, rgb(220, 220, 220)),
 		linear-gradient(45deg, rgb(220, 220, 220) 25%, transparent 25%, transparent 75%, rgb(220, 220, 220) 75%, rgb(220, 220, 220));
 }
 
 .monaco-workbench.vs-dark .binary-container img {
-	background-image: 
-		linear-gradient(45deg, rgb(80, 80, 80) 25%, transparent 25%, transparent 75%, rgb(80, 80, 80) 75%, rgb(80, 80, 80)), 
+	background-image:
+		linear-gradient(45deg, rgb(80, 80, 80) 25%, transparent 25%, transparent 75%, rgb(80, 80, 80) 75%, rgb(80, 80, 80)),
 		linear-gradient(45deg, rgb(80, 80, 80) 25%, transparent 25%, transparent 75%, rgb(80, 80, 80) 75%, rgb(80, 80, 80));
 }
 
@@ -58,8 +58,4 @@
 
 .monaco-workbench.vs-dark .binary-container a:hover {
 	color: #4080D0;
-}
-
-.monaco-workbench .binary-container:focus {
-	outline: 0;
 }
\ No newline at end of file

src/vs/workbench/browser/parts/editor/media/binaryeditor.css

@@ -21,14 +21,14 @@
 
 /* CSS checkerbox pattern (learnt from http://lea.verou.me/2011/02/checkerboard-pattern-with-css3/*/
 .monaco-workbench.vs .binary-container img {
-	background-image: 
-		linear-gradient(45deg, rgb(220, 220, 220) 25%, transparent 25%, transparent 75%, rgb(220, 220, 220) 75%, rgb(220, 220, 220)), 
+	background-image:
+		linear-gradient(45deg, rgb(220, 220, 220) 25%, transparent 25%, transparent 75%, rgb(220, 220, 220) 75%, rgb(220, 220, 220)),
 		linear-gradient(45deg, rgb(220, 220, 220) 25%, transparent 25%, transparent 75%, rgb(220, 220, 220) 75%, rgb(220, 220, 220));
 }
 
 .monaco-workbench.vs-dark .binary-container img {
-	background-image: 
-		linear-gradient(45deg, rgb(80, 80, 80) 25%, transparent 25%, transparent 75%, rgb(80, 80, 80) 75%, rgb(80, 80, 80)), 
+	background-image:
+		linear-gradient(45deg, rgb(80, 80, 80) 25%, transparent 25%, transparent 75%, rgb(80, 80, 80) 75%, rgb(80, 80, 80)),
 		linear-gradient(45deg, rgb(80, 80, 80) 25%, transparent 25%, transparent 75%, rgb(80, 80, 80) 75%, rgb(80, 80, 80));
 }
 
@@ -38,8 +38,4 @@
 
 .monaco-workbench.vs-dark .binary-container {
 	background-color: #1E1E1E;
-}
-
-.monaco-workbench .binary-container:focus {
-	outline: 0;
 }
\ No newline at end of file

src/vs/workbench/browser/parts/editor/media/iframeeditor.css

@@ -14,8 +14,4 @@
 .monaco-workbench .iframe-container.ipad-touch-enabled {
 	-webkit-overflow-scrolling: touch;
 	overflow: auto;
-}
-
-.monaco-workbench .iframe-container:focus {
-	outline: 0;
 }
\ No newline at end of file

src/vs/workbench/electron-browser/media/shell.css

@@ -47,6 +47,21 @@
 	text-decoration: none;
 }
 
+.monaco-shell a[tabindex="0"]:focus,
+.monaco-shell div[tabindex="0"]:focus,
+.monaco-shell select:focus,
+.monaco-shell iframe[tabindex="0"]:focus {
+	outline: 2px auto -webkit-focus-ring-color;
+	outline-offset: -2px;
+}
+
+.monaco-shell a[tabindex="0"]:active, a[tabindex="0"]:hover,
+.monaco-shell div[tabindex="0"]:active, div[tabindex="0"]:hover,
+.monaco-shell select:active, select:hover,
+.monaco-shell iframe[tabindex="0"]:active, iframe[tabindex="0"]:hover {
+	outline: 0;
+}
+
 .monaco-shell a.prominent {
 	text-decoration: underline;
 }