Merge pull request #57909 from Microsoft/misolori/keybinding-a11y

Adjust outline focus for the keyboard shortcuts view
This commit is contained in:
Miguel Solorio 2018-09-06 21:19:09 -07:00 committed by GitHub
commit f68fe75047
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 11 additions and 4 deletions

View file

@ -153,7 +153,7 @@ export const foreground = registerColor('foreground', { dark: '#CCCCCC', light:
export const errorForeground = registerColor('errorForeground', { dark: '#F48771', light: '#A1260D', hc: '#F48771' }, nls.localize('errorForeground', "Overall foreground color for error messages. This color is only used if not overridden by a component."));
export const descriptionForeground = registerColor('descriptionForeground', { light: '#717171', dark: transparent(foreground, 0.7), hc: transparent(foreground, 0.7) }, nls.localize('descriptionForeground', "Foreground color for description text providing additional information, for example for a label."));
export const focusBorder = registerColor('focusBorder', { dark: Color.fromHex('#0E639C').transparent(0.6), light: Color.fromHex('#007ACC').transparent(0.4), hc: '#F38518' }, nls.localize('focusBorder', "Overall border color for focused elements. This color is only used if not overridden by a component."));
export const focusBorder = registerColor('focusBorder', { dark: Color.fromHex('#0E639C').transparent(0.8), light: Color.fromHex('#007ACC').transparent(0.4), hc: '#F38518' }, nls.localize('focusBorder', "Overall border color for focused elements. This color is only used if not overridden by a component."));
export const contrastBorder = registerColor('contrastBorder', { light: null, dark: null, hc: '#6FC3DF' }, nls.localize('contrastBorder', "An extra border around elements to separate them from others for greater contrast."));
export const activeContrastBorder = registerColor('contrastActiveBorder', { light: null, dark: null, hc: focusBorder }, nls.localize('activeContrastBorder', "An extra border around active elements to separate them from others for greater contrast."));

View file

@ -45,16 +45,23 @@
.keybindings-editor > .keybindings-header .open-keybindings-container {
margin-top: 10px;
opacity: 0.7;
display: flex;
}
.keybindings-editor > .keybindings-header .open-keybindings-container > div {
opacity: 0.7;
}
.keybindings-editor > .keybindings-header .open-keybindings-container > .file-name {
text-decoration: underline;
cursor: pointer;
margin-left: 4px;
}
.keybindings-editor > .keybindings-header .open-keybindings-container > .file-name:focus {
opacity: 1;
}
/** List based styling **/
.keybindings-editor > .keybindings-body .keybindings-list-container {

View file

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><style>.st0{opacity:0}.st0,.st1{fill:#f6f6f6}.st2{fill:#424242}.st3{fill:#f0eff1}</style><g id="outline"><path class="st0" d="M0 0h16v16H0z"/><path class="st1" d="M5 1v5H0v9h11v-2.586l1 1 4-4V1H5zm5 3v2L8 4.586V4h2zm-2 8H3V9h5v3z"/></g><g id="icon_x5F_bg"><path class="st2" d="M3 9h2v2H3zM6 10h2v2H6zM14 3v3h.586L15 5.586V2H6v4h1V3z"/><path class="st2" d="M9 10.414V13H2V8h6V7H1v7h9V11.414zM9.414 6H10V4H8v.586z"/><path class="st2" d="M13 5h-2v4L9 7v2l3 3 3-3V7l-2 2z"/></g><g id="icon_x5F_fg"><path class="st3" d="M8 9.414V8H2v5h7v-2.586l-1-1zM5 11H3V9h2v2zm3 1H6v-2h2v2zM8 4.586V4h6V3H7v3h1z"/></g></svg>
<svg fill="none" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="m5 1v5h-5v9h11v-2.586l1 1 4-4v-8.414zm5 3v2l-2-1.414v-.586zm-2 8h-5v-3h5z" fill="#f6f6f6"/><g fill="#424242"><path d="m3 9h2v2h-2zm3 1h2v2h-2zm8-7v3h.586l.414-.414v-3.586h-9v4h1v-3z"/><path d="m9 10.414v2.586h-7v-5h6v-1h-7v7h9v-2.586zm.414-4.414h.586v-2h-2v.586z"/><path d="m13 5h-2v4l-2-2v2l3 3 3-3v-2l-2 2z"/></g><path d="m8 9.414v-1.414h-6v5h7v-2.586zm-3 1.586h-2v-2h2zm3 1h-2v-2h2zm0-7.414v-.586h6v-1h-7v3h1z" fill="#f0eff1"/></svg>

Before

Width:  |  Height:  |  Size: 666 B

After

Width:  |  Height:  |  Size: 540 B

View file

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><style>.st0{opacity:0}.st0,.st1{fill:#2d2d30}.st2{fill:#c5c5c5}.st3{fill:#2b282e}</style><g id="outline"><path class="st0" d="M0 0h16v16H0z"/><path class="st1" d="M5 1v5H0v9h11v-2.586l1 1 4-4V1H5zm5 3v2L8 4.586V4h2zm-2 8H3V9h5v3z"/></g><g id="icon_x5F_bg"><path class="st2" d="M3 9h2v2H3zM6 10h2v2H6zM14 3v3h.586L15 5.586V2H6v4h1V3z"/><path class="st2" d="M9 10.414V13H2V8h6V7H1v7h9V11.414zM9.414 6H10V4H8v.586z"/><path class="st2" d="M13 5h-2v4L9 7v2l3 3 3-3V7l-2 2z"/></g><g id="icon_x5F_fg"><path class="st3" d="M8 9.414V8H2v5h7v-2.586l-1-1zM5 11H3V9h2v2zm3 1H6v-2h2v2zM8 4.586V4h6V3H7v3h1z"/></g></svg>
<svg fill="none" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="m5 1v5h-5v9h11v-2.586l1 1 4-4v-8.414zm5 3v2l-2-1.414v-.586zm-2 8h-5v-3h5z" fill="#2d2d30"/><g fill="#c5c5c5"><path d="m3 9h2v2h-2zm3 1h2v2h-2zm8-7v3h.586l.414-.414v-3.586h-9v4h1v-3z"/><path d="m9 10.414v2.586h-7v-5h6v-1h-7v7h9v-2.586zm.414-4.414h.586v-2h-2v.586z"/><path d="m13 5h-2v4l-2-2v2l3 3 3-3v-2l-2 2z"/></g><path d="m8 9.414v-1.414h-6v5h7v-2.586zm-3 1.586h-2v-2h2zm3 1h-2v-2h2zm0-7.414v-.586h6v-1h-7v3h1z" fill="#2b282e"/></svg>

Before

Width:  |  Height:  |  Size: 666 B

After

Width:  |  Height:  |  Size: 540 B