diff --git a/src/vs/base/browser/ui/actionbar/actionbar.css b/src/vs/base/browser/ui/actionbar/actionbar.css index 632a5bc80831e33d7947959dcfed091a46858e7b..d70fbcc27e4e7e699c65f05346df9b60fb0e39d5 100644 --- a/src/vs/base/browser/ui/actionbar/actionbar.css +++ b/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 { diff --git a/src/vs/base/browser/ui/actionbar/actionbar.ts b/src/vs/base/browser/ui/actionbar/actionbar.ts index e423b844539347e9723b006eb6dfdae8a93bf421..0e6ba16743193e489baaaf32b90d2111ab5bd5fc 100644 --- a/src/vs/base/browser/ui/actionbar/actionbar.ts +++ b/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 { diff --git a/src/vs/base/browser/ui/dropdown/dropdown.css b/src/vs/base/browser/ui/dropdown/dropdown.css index f1b58940d3e7e41e0de283f4b72505c3cb4b2106..dde80747c97180a08cf48985e3a08527cb911de2 100644 --- a/src/vs/base/browser/ui/dropdown/dropdown.css +++ b/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; diff --git a/src/vs/base/browser/ui/toolbar/toolbar.css b/src/vs/base/browser/ui/toolbar/toolbar.css index ccad5186e58197615875f91c53482059a8cac7dc..425eb455375635a9799b85a9c450832e1bb63557 100644 --- a/src/vs/base/browser/ui/toolbar/toolbar.css +++ b/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 diff --git a/src/vs/base/browser/ui/toolbar/toolbar.ts b/src/vs/base/browser/ui/toolbar/toolbar.ts index 088b49d017a322bcd73b2d5d571c9e70d90e9aac..f5af6f933e75b3f251604594557096c10418d7d4 100644 --- a/src/vs/base/browser/ui/toolbar/toolbar.ts +++ b/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 diff --git a/src/vs/base/parts/tree/browser/tree.css b/src/vs/base/parts/tree/browser/tree.css index 968e77f2989360940e1bf6edbe8eaa7cac869988..4af8c9a8153e180e5f41e8fabe873495a7e2ebbc 100644 --- a/src/vs/base/parts/tree/browser/tree.css +++ b/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%; } diff --git a/src/vs/editor/contrib/find/browser/findWidget.css b/src/vs/editor/contrib/find/browser/findWidget.css index edb88f4ef077e1e3a943e22a8b80c28306602533..78caf79b494dcba9e98103d54778a6560d9732a0 100644 --- a/src/vs/editor/contrib/find/browser/findWidget.css +++ b/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; diff --git a/src/vs/editor/contrib/iPadShowKeyboard/browser/iPadShowKeyboard.css b/src/vs/editor/contrib/iPadShowKeyboard/browser/iPadShowKeyboard.css index 66c8c91fb680a6a46cd1aca087d27af5ff5e116a..34cb14546d390a690d560db818e57706067fd7cd 100644 --- a/src/vs/editor/contrib/iPadShowKeyboard/browser/iPadShowKeyboard.css +++ b/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; diff --git a/src/vs/editor/contrib/referenceSearch/browser/referenceSearchWidget.css b/src/vs/editor/contrib/referenceSearch/browser/referenceSearchWidget.css index 9b79d1302d8260809bc12c5418d36afc8aa8a77c..c7a6882bc886c5511383b7d92a5cad79b106fef5 100644 --- a/src/vs/editor/contrib/referenceSearch/browser/referenceSearchWidget.css +++ b/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; diff --git a/src/vs/workbench/browser/parts/activitybar/activitybarPart.ts b/src/vs/workbench/browser/parts/activitybar/activitybarPart.ts index 1e6135abc9ec9771b188852f8be7efa1646f367f..1dfc1c37824f4bfc133c6a4ad6f89489b9808a8f 100644 --- a/src/vs/workbench/browser/parts/activitybar/activitybarPart.ts +++ b/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) => { diff --git a/src/vs/workbench/browser/parts/activitybar/media/activityaction.css b/src/vs/workbench/browser/parts/activitybar/media/activityaction.css index 4916dda4ab351c02cb7f7ccc439d2ca44f239dd2..4c8ce3578b1c23dcd5c0ec09b2e7ea8cbb0bfb8e 100644 --- a/src/vs/workbench/browser/parts/activitybar/media/activityaction.css +++ b/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; } diff --git a/src/vs/workbench/browser/parts/editor/media/binarydiffeditor.css b/src/vs/workbench/browser/parts/editor/media/binarydiffeditor.css index 87e9044720ab00f3a6320897d410458ed4215498..7f3428f8ce0fccebda3dba68127cbef4d0bccd77 100644 --- a/src/vs/workbench/browser/parts/editor/media/binarydiffeditor.css +++ b/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 diff --git a/src/vs/workbench/browser/parts/editor/media/binaryeditor.css b/src/vs/workbench/browser/parts/editor/media/binaryeditor.css index f160eb218501be7a37e9b8ac9fa0b2081af96bd5..d65b739e9db3e20fa9e44e7bdfec15faaf277f6f 100644 --- a/src/vs/workbench/browser/parts/editor/media/binaryeditor.css +++ b/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 diff --git a/src/vs/workbench/browser/parts/editor/media/iframeeditor.css b/src/vs/workbench/browser/parts/editor/media/iframeeditor.css index 0c0d5ffdb9a26dfe18b040c14b4fd40a8bf5935f..dcd75f323d681afcce9c73024b042e5552570c48 100644 --- a/src/vs/workbench/browser/parts/editor/media/iframeeditor.css +++ b/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 diff --git a/src/vs/workbench/electron-browser/media/shell.css b/src/vs/workbench/electron-browser/media/shell.css index f7c9eba313d3f5bd27cb336cdcb524cd394efe13..2997423193ae79414a216b04d72dd080c61638e0 100644 --- a/src/vs/workbench/electron-browser/media/shell.css +++ b/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; }