diff --git a/src/vs/workbench/browser/parts/activitybar/media/activityaction.css b/src/vs/workbench/browser/parts/activitybar/media/activityaction.css index 6a9dec13b8c4b4fdbdd3333a77186dc89e8220fe..5c91ac95da421104b84060e26c3baea4c14550e2 100644 --- a/src/vs/workbench/browser/parts/activitybar/media/activityaction.css +++ b/src/vs/workbench/browser/parts/activitybar/media/activityaction.css @@ -35,7 +35,19 @@ top: 4px; height: 32px; width: 0; - border-left: 2px solid #1E8AE5; + border-left: 2px solid; +} + +.monaco-workbench.vs > .activitybar > .content .monaco-action-bar .action-item .action-label:focus:before { + border-left-color: #1E8AE5; +} + +.monaco-workbench.vs-dark > .activitybar > .content .monaco-action-bar .action-item .action-label:focus:before { + border-left-color: #1E8AE5; +} + +.monaco-workbench.hc-black > .activitybar > .content .monaco-action-bar .action-item .action-label:focus:before { + border-left-color: #DF740C; } .monaco-workbench > .activitybar.left > .content .monaco-action-bar .action-item .action-label:focus:before { @@ -176,7 +188,6 @@ /* High Contrast Theming */ .monaco-workbench.hc-black > .activitybar > .content .monaco-action-bar .action-label, .monaco-workbench.hc-black > .activitybar > .content .monaco-action-bar .action-label.active { - background: none; opacity: 1; } diff --git a/src/vs/workbench/browser/parts/editor/iframeEditor.ts b/src/vs/workbench/browser/parts/editor/iframeEditor.ts index 7465da4a011d4448052e468b9d4ad184ccdc7ad7..607601ae9d03272852199480cd555b0e780c0b7e 100644 --- a/src/vs/workbench/browser/parts/editor/iframeEditor.ts +++ b/src/vs/workbench/browser/parts/editor/iframeEditor.ts @@ -51,7 +51,6 @@ export class IFrameEditor extends BaseEditor { let iframeContainerElement = document.createElement('div'); iframeContainerElement.className = 'iframe-container monaco-editor-background'; // Inherit the background color from selected theme this.iframeContainer = $(iframeContainerElement); - this.iframeContainer.tabindex(0); // enable focus support // IFrame this.iframeBuilder = $(this.iframeContainer).element('iframe').addClass('iframe'); diff --git a/src/vs/workbench/electron-browser/media/shell.css b/src/vs/workbench/electron-browser/media/shell.css index 261386fba1dcce12977af06f125914c3257bd326..9742d8ceb6360854f3edc929a6cb835a2a471b51 100644 --- a/src/vs/workbench/electron-browser/media/shell.css +++ b/src/vs/workbench/electron-browser/media/shell.css @@ -49,32 +49,63 @@ /* START Keyboard Focus Indication Styles */ -.monaco-shell [tabindex="0"]:focus, -.monaco-shell select:focus, -.monaco-shell input[type="button"]:focus, -.monaco-shell input[type="submit"]:focus, -.monaco-shell input[type="checkbox"]:focus { - outline: 2px auto -webkit-focus-ring-color; - outline-offset: -2px; +.monaco-shell.vs [tabindex="0"]:focus, +.monaco-shell.vs select:focus, +.monaco-shell.vs input[type="button"]:focus, +.monaco-shell.vs input[type="submit"]:focus, +.monaco-shell.vs input[type="checkbox"]:focus { + outline: 1px auto #1E8AE5; + outline-offset: -3px; opacity: 1 !important; /* prevent components from dimming focus feedback */ } -.monaco-shell input[type="text"], .monaco-shell textarea { - outline: 0; /* do not show outline in input fields and textarea */ +.monaco-shell.vs-dark [tabindex="0"]:focus, +.monaco-shell.vs-dark select:focus, +.monaco-shell.vs-dark input[type="button"]:focus, +.monaco-shell.vs-dark input[type="submit"]:focus, +.monaco-shell.vs-dark input[type="checkbox"]:focus { + outline: 1px auto #1E8AE5; + outline-offset: -3px; + opacity: 1 !important; /* prevent components from dimming focus feedback */ } -.monaco-shell .monaco-tree:focus { - outline: 0; /* tree indicates focus not via outline but through the focussed item */ +.monaco-shell.hc-black [tabindex="0"]:focus, +.monaco-shell.hc-black select:focus, +.monaco-shell.hc-black input[type="button"]:focus, +.monaco-shell.hc-black input[type="submit"]:focus, +.monaco-shell.hc-black input[type="checkbox"]:focus { + outline: 2px auto #DF740C; + outline-offset: -2px; +} + +.monaco-shell.vs .monaco-tree.focused .monaco-tree-rows:empty, +.monaco-shell.vs .monaco-tree.focused.no-item-focus .monaco-tree-rows { + outline: 1px auto #1E8AE5; /* we still need to handle the empty tree or no focus item case */ + outline-offset: -3px; } -.monaco-shell .monaco-tree.focused .monaco-tree-rows:empty, -.monaco-shell .monaco-tree.focused.no-item-focus .monaco-tree-rows { - outline: 2px auto -webkit-focus-ring-color; /* we still need to handle the empty tree or no focus item case */ +.monaco-shell.vs-dark .monaco-tree.focused .monaco-tree-rows:empty, +.monaco-shell.vs-dark .monaco-tree.focused.no-item-focus .monaco-tree-rows { + outline: 1px auto #1E8AE5; /* we still need to handle the empty tree or no focus item case */ + outline-offset: -3px; +} + +.monaco-shell.hc-black .monaco-tree.focused .monaco-tree-rows:empty, +.monaco-shell.hc-black .monaco-tree.focused.no-item-focus .monaco-tree-rows { + outline: 2px auto #DF740C; /* we still need to handle the empty tree or no focus item case */ outline-offset: -2px; } +.monaco-shell input[type="text"], .monaco-shell textarea { + outline: 0; /* do not show outline in input fields and textarea */ +} + +.monaco-shell .monaco-tree:focus { + outline: 0 !important; /* tree indicates focus not via outline but through the focussed item */ +} + .monaco-shell .activitybar [tabindex="0"]:focus { - outline: 0; /* activity bar indicates focus customly */ + outline: 0 !important; /* activity bar indicates focus customly */ } /* END Keyboard Focus Indication Styles */ diff --git a/src/vs/workbench/parts/html/browser/htmlPreviewPart.ts b/src/vs/workbench/parts/html/browser/htmlPreviewPart.ts index 560cdab602a9cb7511a425d1e9b52a5b0e0dde94..2fc8c16eff27e2b1141a778ea7307983c93dc762 100644 --- a/src/vs/workbench/parts/html/browser/htmlPreviewPart.ts +++ b/src/vs/workbench/parts/html/browser/htmlPreviewPart.ts @@ -71,7 +71,6 @@ export class HtmlPreviewPart extends BaseEditor { // Container for IFrame const iFrameContainerElement = document.createElement('div'); iFrameContainerElement.className = 'iframe-container monaco-editor-background'; // Inherit the background color from selected theme - iFrameContainerElement.tabIndex = 0; iFrameContainerElement.appendChild(this._iFrameElement); parent.getHTMLElement().appendChild(iFrameContainerElement);