diff --git a/common/changes/@uifabric/styling/button-focus-hc_2018-03-08-19-39.json b/common/changes/@uifabric/styling/button-focus-hc_2018-03-08-19-39.json new file mode 100644 index 00000000000000..2fad2370e107a9 --- /dev/null +++ b/common/changes/@uifabric/styling/button-focus-hc_2018-03-08-19-39.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "@uifabric/styling", + "comment": "High contrast mode for focus styling.", + "type": "patch" + } + ], + "packageName": "@uifabric/styling", + "email": "lynam.emily@gmail.com" +} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/button-focus-hc_2018-03-08-19-39.json b/common/changes/office-ui-fabric-react/button-focus-hc_2018-03-08-19-39.json new file mode 100644 index 00000000000000..a902df6b876d6d --- /dev/null +++ b/common/changes/office-ui-fabric-react/button-focus-hc_2018-03-08-19-39.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Button: High contrast mode focus bug fixes.", + "type": "patch" + } + ], + "packageName": "office-ui-fabric-react", + "email": "lynam.emily@gmail.com" +} \ No newline at end of file diff --git a/packages/experiments/src/components/CommandBar/__snapshots__/CommandBar.test.tsx.snap b/packages/experiments/src/components/CommandBar/__snapshots__/CommandBar.test.tsx.snap index 31a3fe9326de11..7c7eab154bbbcb 100644 --- a/packages/experiments/src/components/CommandBar/__snapshots__/CommandBar.test.tsx.snap +++ b/packages/experiments/src/components/CommandBar/__snapshots__/CommandBar.test.tsx.snap @@ -100,6 +100,17 @@ exports[`CommandBar renders commands correctly 1`] = ` top: 0px; z-index: 1; } + @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after { + border: none; + bottom: 4px; + left: 4px; + outline-color: ButtonText; + right: 4px; + top: 4px; + } + @media screen and (-ms-high-contrast: active){& { + border: none; + } &:hover { background-color: #eaeaea; color: #212121; @@ -201,6 +212,17 @@ exports[`CommandBar renders commands correctly 1`] = ` top: 0px; z-index: 1; } + @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after { + border: none; + bottom: 4px; + left: 4px; + outline-color: ButtonText; + right: 4px; + top: 4px; + } + @media screen and (-ms-high-contrast: active){& { + border: none; + } &:hover { background-color: #eaeaea; color: #212121; diff --git a/packages/office-ui-fabric-react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap index bb6e270d861e7f..3fa5170fcb9d3e 100644 --- a/packages/office-ui-fabric-react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap @@ -243,6 +243,14 @@ exports[`Breadcrumb renders breadcumb correctly 2`] = ` top: 0px; z-index: 1; } + @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after { + border: none; + bottom: -2px; + left: -2px; + outline-color: ButtonText; + right: -2px; + top: -2px; + } &:hover { color: #004578; } diff --git a/packages/office-ui-fabric-react/src/components/Button/BaseButton.styles.ts b/packages/office-ui-fabric-react/src/components/Button/BaseButton.styles.ts index 0d8c57082c3a3e..734dc7b6e51f20 100644 --- a/packages/office-ui-fabric-react/src/components/Button/BaseButton.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Button/BaseButton.styles.ts @@ -35,10 +35,18 @@ export const getStyles = memoizeFunction(( const border = semanticColors.buttonBorder; const disabledBackground = semanticColors.disabledBackground; const disabledText = semanticColors.disabledText; + const buttonHighContrastFocus = { + left: -2, + top: -2, + bottom: -2, + right: -2, + border: 'none', + outlineColor: 'ButtonText' + }; return { root: [ - getFocusStyle(theme, -1), + getFocusStyle(theme, -1, 'relative', buttonHighContrastFocus), theme.fonts.medium, { boxSizing: 'border-box', diff --git a/packages/office-ui-fabric-react/src/components/Button/ButtonThemes.ts b/packages/office-ui-fabric-react/src/components/Button/ButtonThemes.ts index aa0fa868ef6a44..f1a79c4b0a2af0 100644 --- a/packages/office-ui-fabric-react/src/components/Button/ButtonThemes.ts +++ b/packages/office-ui-fabric-react/src/components/Button/ButtonThemes.ts @@ -45,7 +45,13 @@ export function standardStyles(theme: ITheme): IButtonStyles { }, // Split button styles - splitButtonContainer: {}, + splitButtonContainer: { + selectors: { + [HighContrastSelector]: { + border: 'none' + } + } + }, splitButtonMenuButton: { color: theme.palette.white, @@ -152,7 +158,13 @@ export function primaryStyles(theme: ITheme): IButtonStyles { }, // Split button styles - splitButtonContainer: {}, + splitButtonContainer: { + selectors: { + [HighContrastSelector]: { + border: 'none' + } + } + }, splitButtonDivider: { backgroundColor: theme.palette.themeLighter diff --git a/packages/office-ui-fabric-react/src/components/Button/CommandBarButton/CommandBarButton.styles.ts b/packages/office-ui-fabric-react/src/components/Button/CommandBarButton/CommandBarButton.styles.ts index d76227886d6374..425a61d4636a2e 100644 --- a/packages/office-ui-fabric-react/src/components/Button/CommandBarButton/CommandBarButton.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Button/CommandBarButton/CommandBarButton.styles.ts @@ -1,7 +1,10 @@ import { IButtonStyles } from '../Button.types'; import { ITheme, - concatStyleSets + concatStyleSets, + getFocusStyle, + HighContrastSelector, + IRawStyle } from '../../../Styling'; import { memoizeFunction } from '../../../Utilities'; import { @@ -19,13 +22,29 @@ export const getStyles = memoizeFunction(( ): IButtonStyles => { const baseButtonStyles: IButtonStyles = getBaseButtonStyles(theme); const baseSplitButtonStyles: IButtonStyles = getSplitButtonStyles(theme); + const commandButtonHighContrastFocus = { + left: 4, + top: 4, + bottom: 4, + right: 4, + border: 'none' + }; + const commandButtonStyles: IButtonStyles = { - root: { - minWidth: '40px', - backgroundColor: theme.palette.neutralLighter, - color: theme.palette.neutralPrimary, - padding: '0 4px' - }, + root: [ + getFocusStyle(theme, -1, 'relative', commandButtonHighContrastFocus), + { + minWidth: '40px', + backgroundColor: theme.palette.neutralLighter, + color: theme.palette.neutralPrimary, + padding: '0 4px', + selectors: { + [HighContrastSelector]: { + border: 'none' + } + } + } + ], rootHovered: { backgroundColor: theme.palette.neutralLight, diff --git a/packages/office-ui-fabric-react/src/components/Button/SplitButton/SplitButton.styles.ts b/packages/office-ui-fabric-react/src/components/Button/SplitButton/SplitButton.styles.ts index 7c37163660a579..5ad66a78c19cf8 100644 --- a/packages/office-ui-fabric-react/src/components/Button/SplitButton/SplitButton.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Button/SplitButton/SplitButton.styles.ts @@ -10,6 +10,14 @@ export const getStyles = memoizeFunction(( theme: ITheme, customStyles?: IButtonStyles ): IButtonStyles => { + const buttonHighContrastFocus = { + left: -2, + top: -2, + bottom: -2, + right: -2, + border: 'none' + }; + const splitButtonStyles: IButtonStyles = { splitButtonContainer: { position: 'relative', @@ -21,7 +29,7 @@ export const getStyles = memoizeFunction(( border: '1px solid' }, splitButtonMenuButton: [ - getFocusStyle(theme, -1), + getFocusStyle(theme, -1, 'relative', buttonHighContrastFocus), { padding: 6, height: 'auto', diff --git a/packages/office-ui-fabric-react/src/components/Button/__snapshots__/Button.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Button/__snapshots__/Button.test.tsx.snap index 442ee99480d236..8a0af870bee1d2 100644 --- a/packages/office-ui-fabric-react/src/components/Button/__snapshots__/Button.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/Button/__snapshots__/Button.test.tsx.snap @@ -49,6 +49,14 @@ exports[`Button renders ActionButton correctly 1`] = ` top: 0px; z-index: 1; } + @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after { + border: none; + bottom: -2px; + left: -2px; + outline-color: ButtonText; + right: -2px; + top: -2px; + } &:hover { color: #0078d7; } @@ -153,6 +161,17 @@ exports[`Button renders CommandBarButton correctly 1`] = ` top: 0px; z-index: 1; } + @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after { + border: none; + bottom: 4px; + left: 4px; + outline-color: ButtonText; + right: 4px; + top: 4px; + } + @media screen and (-ms-high-contrast: active){& { + border: none; + } &:hover { background-color: #eaeaea; color: #212121; @@ -301,6 +320,14 @@ exports[`Button renders CompoundButton correctly 1`] = ` top: 0px; z-index: 1; } + @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after { + border: none; + bottom: -2px; + left: -2px; + outline-color: ButtonText; + right: -2px; + top: -2px; + } &:hover { background-color: #eaeaea; color: #000000; @@ -429,6 +456,14 @@ exports[`Button renders DefaultButton correctly 1`] = ` top: 0px; z-index: 1; } + @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after { + border: none; + bottom: -2px; + left: -2px; + outline-color: ButtonText; + right: -2px; + top: -2px; + } &:hover { background-color: #eaeaea; color: #000000; @@ -527,6 +562,14 @@ exports[`Button renders IconButton correctly 1`] = ` top: 0px; z-index: 1; } + @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after { + border: none; + bottom: -2px; + left: -2px; + outline-color: ButtonText; + right: -2px; + top: -2px; + } &:hover { color: #004578; } diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Split.Example.styles.ts b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Split.Example.styles.ts index 569bcc1691d057..fc896c31d99b73 100644 --- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Split.Example.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Split.Example.styles.ts @@ -1,10 +1,18 @@ import { memoizeFunction } from 'office-ui-fabric-react/lib/Utilities'; import { IButtonStyles } from 'office-ui-fabric-react/lib/Button'; +import { HighContrastSelector } from '../../../Styling'; export const getCustomSplitButtonStyles = memoizeFunction((): IButtonStyles => { return { splitButtonMenuButton: { backgroundColor: 'white', width: '10px' }, splitButtonMenuIcon: { fontSize: '7px' }, - splitButtonDivider: { borderLeft: '1px solid #c8c8c8', right: 12 } + splitButtonDivider: { borderLeft: '1px solid #c8c8c8', right: 12 }, + splitButtonContainer: { + selectors: { + [HighContrastSelector]: { + border: 'none' + } + } + } }; }); \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap b/packages/office-ui-fabric-react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap index 4410b1e5c53881..41acff49c0654d 100644 --- a/packages/office-ui-fabric-react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap @@ -205,6 +205,14 @@ exports[`ComboBox Renders ComboBox correctly 1`] = ` top: 0px; z-index: 1; } + @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after { + border: none; + bottom: -2px; + left: -2px; + outline-color: ButtonText; + right: -2px; + top: -2px; + } @media screen and (-ms-high-contrast: active){& { -ms-high-contrast-adjust: none; background-color: ButtonFace; diff --git a/packages/office-ui-fabric-react/src/components/Facepile/__snapshots__/Facepile.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Facepile/__snapshots__/Facepile.test.tsx.snap index fcbd96a681aec1..29b5a31e94631b 100644 --- a/packages/office-ui-fabric-react/src/components/Facepile/__snapshots__/Facepile.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/Facepile/__snapshots__/Facepile.test.tsx.snap @@ -178,6 +178,14 @@ exports[`Facepile renders Facepile correctly 1`] = ` top: 0px; z-index: 1; } + @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after { + border: none; + bottom: -2px; + left: -2px; + outline-color: ButtonText; + right: -2px; + top: -2px; + } data="75%" data-is-focusable={true} disabled={undefined} diff --git a/packages/office-ui-fabric-react/src/components/Nav/__snapshots__/Nav.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Nav/__snapshots__/Nav.test.tsx.snap index 3da206e72ab4fc..81b6cf68d23828 100644 --- a/packages/office-ui-fabric-react/src/components/Nav/__snapshots__/Nav.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/Nav/__snapshots__/Nav.test.tsx.snap @@ -128,6 +128,14 @@ exports[`Nav renders Nav correctly 1`] = ` top: 1px; z-index: 1; } + @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after { + border: none; + bottom: -2px; + left: -2px; + outline-color: ButtonText; + right: -2px; + top: -2px; + } .ms-Nav-compositeLink:hover & { background-color: #f8f8f8; color: #333333; diff --git a/packages/office-ui-fabric-react/src/components/Pivot/__snapshots__/Pivot.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Pivot/__snapshots__/Pivot.test.tsx.snap index 264a0b97496768..2efa30e7a0b547 100644 --- a/packages/office-ui-fabric-react/src/components/Pivot/__snapshots__/Pivot.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/Pivot/__snapshots__/Pivot.test.tsx.snap @@ -68,6 +68,14 @@ exports[`Pivot renders Pivot correctly 1`] = ` top: 0px; z-index: 1; } + @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after { + border: none; + bottom: -2px; + left: -2px; + outline-color: ButtonText; + right: -2px; + top: -2px; + } &:hover { color: #0078d7; } @@ -162,6 +170,14 @@ exports[`Pivot renders Pivot correctly 1`] = ` top: 0px; z-index: 1; } + @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after { + border: none; + bottom: -2px; + left: -2px; + outline-color: ButtonText; + right: -2px; + top: -2px; + } &:hover { color: #0078d7; } diff --git a/packages/office-ui-fabric-react/src/components/SpinButton/__snapshots__/SpinButton.test.tsx.snap b/packages/office-ui-fabric-react/src/components/SpinButton/__snapshots__/SpinButton.test.tsx.snap index 3b37ceae167cac..1b6d2f9f6eae55 100644 --- a/packages/office-ui-fabric-react/src/components/SpinButton/__snapshots__/SpinButton.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/SpinButton/__snapshots__/SpinButton.test.tsx.snap @@ -193,6 +193,14 @@ exports[`SpinButton renders SpinButton correctly 1`] = ` top: 0px; z-index: 1; } + @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after { + border: none; + bottom: -2px; + left: -2px; + outline-color: ButtonText; + right: -2px; + top: -2px; + } &:hover { background-color: #eaeaea; color: #000000; @@ -298,6 +306,14 @@ exports[`SpinButton renders SpinButton correctly 1`] = ` top: 0px; z-index: 1; } + @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after { + border: none; + bottom: -2px; + left: -2px; + outline-color: ButtonText; + right: -2px; + top: -2px; + } &:hover { background-color: #eaeaea; color: #000000; diff --git a/packages/office-ui-fabric-react/src/components/SwatchColorPicker/__snapshots__/SwatchColorPicker.test.tsx.snap b/packages/office-ui-fabric-react/src/components/SwatchColorPicker/__snapshots__/SwatchColorPicker.test.tsx.snap index 836f6122dc63b7..3a77aa7460b203 100644 --- a/packages/office-ui-fabric-react/src/components/SwatchColorPicker/__snapshots__/SwatchColorPicker.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/SwatchColorPicker/__snapshots__/SwatchColorPicker.test.tsx.snap @@ -101,6 +101,14 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = ` top: 0px; z-index: 1; } + @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after { + border: none; + bottom: -2px; + left: -2px; + outline-color: ButtonText; + right: -2px; + top: -2px; + } @media screen and (-ms-high-contrast: active){& { border: none; } @@ -286,6 +294,14 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = ` top: 0px; z-index: 1; } + @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after { + border: none; + bottom: -2px; + left: -2px; + outline-color: ButtonText; + right: -2px; + top: -2px; + } @media screen and (-ms-high-contrast: active){& { border: none; } @@ -471,6 +487,14 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = ` top: 0px; z-index: 1; } + @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after { + border: none; + bottom: -2px; + left: -2px; + outline-color: ButtonText; + right: -2px; + top: -2px; + } @media screen and (-ms-high-contrast: active){& { border: none; } @@ -656,6 +680,14 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = ` top: 0px; z-index: 1; } + @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after { + border: none; + bottom: -2px; + left: -2px; + outline-color: ButtonText; + right: -2px; + top: -2px; + } @media screen and (-ms-high-contrast: active){& { border: none; } @@ -845,6 +877,14 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = ` top: 0px; z-index: 1; } + @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after { + border: none; + bottom: -2px; + left: -2px; + outline-color: ButtonText; + right: -2px; + top: -2px; + } @media screen and (-ms-high-contrast: active){& { border: none; } @@ -1030,6 +1070,14 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = ` top: 0px; z-index: 1; } + @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after { + border: none; + bottom: -2px; + left: -2px; + outline-color: ButtonText; + right: -2px; + top: -2px; + } @media screen and (-ms-high-contrast: active){& { border: none; } @@ -1215,6 +1263,14 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = ` top: 0px; z-index: 1; } + @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after { + border: none; + bottom: -2px; + left: -2px; + outline-color: ButtonText; + right: -2px; + top: -2px; + } @media screen and (-ms-high-contrast: active){& { border: none; } @@ -1400,6 +1456,14 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = ` top: 0px; z-index: 1; } + @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after { + border: none; + bottom: -2px; + left: -2px; + outline-color: ButtonText; + right: -2px; + top: -2px; + } @media screen and (-ms-high-contrast: active){& { border: none; } @@ -1589,6 +1653,14 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = ` top: 0px; z-index: 1; } + @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after { + border: none; + bottom: -2px; + left: -2px; + outline-color: ButtonText; + right: -2px; + top: -2px; + } @media screen and (-ms-high-contrast: active){& { border: none; } @@ -1774,6 +1846,14 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = ` top: 0px; z-index: 1; } + @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after { + border: none; + bottom: -2px; + left: -2px; + outline-color: ButtonText; + right: -2px; + top: -2px; + } @media screen and (-ms-high-contrast: active){& { border: none; } @@ -1959,6 +2039,14 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = ` top: 0px; z-index: 1; } + @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after { + border: none; + bottom: -2px; + left: -2px; + outline-color: ButtonText; + right: -2px; + top: -2px; + } @media screen and (-ms-high-contrast: active){& { border: none; } @@ -2144,6 +2232,14 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = ` top: 0px; z-index: 1; } + @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after { + border: none; + bottom: -2px; + left: -2px; + outline-color: ButtonText; + right: -2px; + top: -2px; + } @media screen and (-ms-high-contrast: active){& { border: none; } diff --git a/packages/styling/src/styles/getFocusStyle.ts b/packages/styling/src/styles/getFocusStyle.ts index 5d69bce7e2b13a..372f2f08d2c90c 100644 --- a/packages/styling/src/styles/getFocusStyle.ts +++ b/packages/styling/src/styles/getFocusStyle.ts @@ -1,5 +1,6 @@ import { IRawStyle } from '@uifabric/merge-styles/lib/index'; import { ITheme } from '../interfaces/index'; +import { HighContrastSelector } from './CommonStyles'; /** * Generates a focus style which can be used to define an :after focus border. @@ -9,12 +10,14 @@ import { ITheme } from '../interfaces/index'; * @param color - The color for the border. * @param position - The positioning applied to the container. Must * be 'relative' or 'absolute' so that the focus border can live around it. + * @param highContrastStyle - Style for high contrast mode. * @returns The style object. */ export function getFocusStyle( theme: ITheme, inset: number = 0, - position: 'relative' | 'absolute' = 'relative' + position: 'relative' | 'absolute' = 'relative', + highContrastStyle: IRawStyle | undefined = undefined ): IRawStyle { return { outline: 'transparent', @@ -35,7 +38,10 @@ export function getFocusStyle( right: inset + 1, border: '1px solid ' + theme.palette.white, outline: '1px solid ' + theme.palette.neutralSecondary, - zIndex: 1 + zIndex: 1, + selectors: { + [HighContrastSelector]: highContrastStyle + } } }