diff --git a/common/changes/office-ui-fabric-react/mbagra-fixfocusoutlinebasebuttonIE_2018-01-25-18-57.json b/common/changes/office-ui-fabric-react/mbagra-fixfocusoutlinebasebuttonIE_2018-01-25-18-57.json new file mode 100644 index 0000000000000..41d84e5d25cf1 --- /dev/null +++ b/common/changes/office-ui-fabric-react/mbagra-fixfocusoutlinebasebuttonIE_2018-01-25-18-57.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Fix an issue in IE11 where focus outline was not visible in BaseButton component", + "type": "patch" + } + ], + "packageName": "office-ui-fabric-react", + "email": "mbagra@microsoft.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 75d5b04109162..151c73ebe1d81 100644 --- a/packages/experiments/src/components/CommandBar/__snapshots__/CommandBar.test.tsx.snap +++ b/packages/experiments/src/components/CommandBar/__snapshots__/CommandBar.test.tsx.snap @@ -80,13 +80,13 @@ exports[`CommandBar renders commands correctly 1`] = ` } .ms-Fabric.is-focusVisible &:focus:after { border: 1px solid #ffffff; - bottom: 0px; + bottom: 1px; content: ""; - left: 0px; + left: 1px; outline: 1px solid #666666; position: absolute; - right: 0px; - top: 0px; + right: 1px; + top: 1px; z-index: 1; } &:hover { @@ -181,13 +181,13 @@ exports[`CommandBar renders commands correctly 1`] = ` } .ms-Fabric.is-focusVisible &:focus:after { border: 1px solid #ffffff; - bottom: 0px; + bottom: 1px; content: ""; - left: 0px; + left: 1px; outline: 1px solid #666666; position: absolute; - right: 0px; - top: 0px; + right: 1px; + top: 1px; z-index: 1; } &:hover { 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 30ff42150359c..fb09b3f497f3b 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 @@ -218,13 +218,13 @@ exports[`Breadcrumb renders breadcumb correctly 2`] = ` } .ms-Fabric.is-focusVisible &:focus:after { border: 1px solid #ffffff; - bottom: 0px; + bottom: 1px; content: ""; - left: 0px; + left: 1px; outline: 1px solid #666666; position: absolute; - right: 0px; - top: 0px; + right: 1px; + top: 1px; z-index: 1; } &:hover { 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 c2116f22bd57f..0e4bca70a37b2 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 @@ -38,7 +38,7 @@ export const getStyles = memoizeFunction(( return { root: [ - getFocusStyle(theme, -1), + getFocusStyle(theme, 0), theme.fonts.medium, { boxSizing: 'border-box', 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 0fbc1378c8cfc..0abfbf809d05b 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 @@ -40,13 +40,13 @@ exports[`Button renders ActionButton correctly 1`] = ` } .ms-Fabric.is-focusVisible &:focus:after { border: 1px solid #ffffff; - bottom: 0px; + bottom: 1px; content: ""; - left: 0px; + left: 1px; outline: 1px solid #666666; position: absolute; - right: 0px; - top: 0px; + right: 1px; + top: 1px; z-index: 1; } &:hover { @@ -144,13 +144,13 @@ exports[`Button renders CommandBarButton correctly 1`] = ` } .ms-Fabric.is-focusVisible &:focus:after { border: 1px solid #ffffff; - bottom: 0px; + bottom: 1px; content: ""; - left: 0px; + left: 1px; outline: 1px solid #666666; position: absolute; - right: 0px; - top: 0px; + right: 1px; + top: 1px; z-index: 1; } &:hover { @@ -294,13 +294,13 @@ exports[`Button renders CompoundButton correctly 1`] = ` } .ms-Fabric.is-focusVisible &:focus:after { border: 1px solid #ffffff; - bottom: 0px; + bottom: 1px; content: ""; - left: 0px; + left: 1px; outline: 1px solid #666666; position: absolute; - right: 0px; - top: 0px; + right: 1px; + top: 1px; z-index: 1; } &:hover { @@ -422,13 +422,13 @@ exports[`Button renders DefaultButton correctly 1`] = ` } .ms-Fabric.is-focusVisible &:focus:after { border: 1px solid #ffffff; - bottom: 0px; + bottom: 1px; content: ""; - left: 0px; + left: 1px; outline: 1px solid #666666; position: absolute; - right: 0px; - top: 0px; + right: 1px; + top: 1px; z-index: 1; } &:hover { @@ -520,13 +520,13 @@ exports[`Button renders IconButton correctly 1`] = ` } .ms-Fabric.is-focusVisible &:focus:after { border: 1px solid #ffffff; - bottom: 0px; + bottom: 1px; content: ""; - left: 0px; + left: 1px; outline: 1px solid #666666; position: absolute; - right: 0px; - top: 0px; + right: 1px; + top: 1px; z-index: 1; } &:hover { 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 a9e542b214e9a..1ff608d6538ca 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 @@ -160,13 +160,13 @@ exports[`ComboBox Renders ComboBox correctly 1`] = ` } .ms-Fabric.is-focusVisible &:focus:after { border: 1px solid #ffffff; - bottom: 0px; + bottom: 1px; content: ""; - left: 0px; + left: 1px; outline: 1px solid #666666; position: absolute; - right: 0px; - top: 0px; + right: 1px; + top: 1px; z-index: 1; } @media screen and (-ms-high-contrast: active){& { 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 8169b99dca04c..2f3a04b98c67f 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 @@ -129,13 +129,13 @@ exports[`Facepile renders Facepile correctly 1`] = ` } .ms-Fabric.is-focusVisible &:focus:after { border: 1px solid #ffffff; - bottom: 0px; + bottom: 1px; content: ""; - left: 0px; + left: 1px; outline: 1px solid #666666; position: absolute; - right: 0px; - top: 0px; + right: 1px; + top: 1px; z-index: 1; } data="75%" 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 25e12db86478e..20b01b7d049b6 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 @@ -81,13 +81,13 @@ exports[`Nav renders Nav correctly 1`] = ` } .ms-Fabric.is-focusVisible &:focus:after { border: 1px solid #ffffff; - bottom: 0px; + bottom: 1px; content: ""; - left: 0px; + left: 1px; outline: 1px solid #666666; position: absolute; - right: 0px; - top: 0px; + right: 1px; + top: 1px; z-index: 1; } &:hover { 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 8058f2c9d08bd..7d238a093b799 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 @@ -59,13 +59,13 @@ exports[`Pivot renders Pivot correctly 1`] = ` } .ms-Fabric.is-focusVisible &:focus:after { border: 1px solid #ffffff; - bottom: 0px; + bottom: 1px; content: ""; - left: 0px; + left: 1px; outline: 1px solid #666666; position: absolute; - right: 0px; - top: 0px; + right: 1px; + top: 1px; z-index: 1; } &:hover { @@ -152,13 +152,13 @@ exports[`Pivot renders Pivot correctly 1`] = ` } .ms-Fabric.is-focusVisible &:focus:after { border: 1px solid #ffffff; - bottom: 0px; + bottom: 1px; content: ""; - left: 0px; + left: 1px; outline: 1px solid #666666; position: absolute; - right: 0px; - top: 0px; + right: 1px; + top: 1px; z-index: 1; } &:hover { 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 928e00cac02cf..7347cffc2f2d7 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 @@ -185,13 +185,13 @@ exports[`SpinButton renders SpinButton correctly 1`] = ` } .ms-Fabric.is-focusVisible &:focus:after { border: 1px solid #ffffff; - bottom: 0px; + bottom: 1px; content: ""; - left: 0px; + left: 1px; outline: 1px solid #666666; position: absolute; - right: 0px; - top: 0px; + right: 1px; + top: 1px; z-index: 1; } &:hover { @@ -291,13 +291,13 @@ exports[`SpinButton renders SpinButton correctly 1`] = ` } .ms-Fabric.is-focusVisible &:focus:after { border: 1px solid #ffffff; - bottom: 0px; + bottom: 1px; content: ""; - left: 0px; + left: 1px; outline: 1px solid #666666; position: absolute; - right: 0px; - top: 0px; + right: 1px; + top: 1px; z-index: 1; } &:hover { 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 32120e45c26f3..55a6bcfa7c5ad 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 @@ -91,13 +91,13 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = ` } .ms-Fabric.is-focusVisible &:focus:after { border: 1px solid #ffffff; - bottom: 0px; + bottom: 1px; content: ""; - left: 0px; + left: 1px; outline: 1px solid #666666; position: absolute; - right: 0px; - top: 0px; + right: 1px; + top: 1px; z-index: 1; } @media screen and (-ms-high-contrast: active){& { @@ -275,13 +275,13 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = ` } .ms-Fabric.is-focusVisible &:focus:after { border: 1px solid #ffffff; - bottom: 0px; + bottom: 1px; content: ""; - left: 0px; + left: 1px; outline: 1px solid #666666; position: absolute; - right: 0px; - top: 0px; + right: 1px; + top: 1px; z-index: 1; } @media screen and (-ms-high-contrast: active){& { @@ -459,13 +459,13 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = ` } .ms-Fabric.is-focusVisible &:focus:after { border: 1px solid #ffffff; - bottom: 0px; + bottom: 1px; content: ""; - left: 0px; + left: 1px; outline: 1px solid #666666; position: absolute; - right: 0px; - top: 0px; + right: 1px; + top: 1px; z-index: 1; } @media screen and (-ms-high-contrast: active){& { @@ -643,13 +643,13 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = ` } .ms-Fabric.is-focusVisible &:focus:after { border: 1px solid #ffffff; - bottom: 0px; + bottom: 1px; content: ""; - left: 0px; + left: 1px; outline: 1px solid #666666; position: absolute; - right: 0px; - top: 0px; + right: 1px; + top: 1px; z-index: 1; } @media screen and (-ms-high-contrast: active){& { @@ -831,13 +831,13 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = ` } .ms-Fabric.is-focusVisible &:focus:after { border: 1px solid #ffffff; - bottom: 0px; + bottom: 1px; content: ""; - left: 0px; + left: 1px; outline: 1px solid #666666; position: absolute; - right: 0px; - top: 0px; + right: 1px; + top: 1px; z-index: 1; } @media screen and (-ms-high-contrast: active){& { @@ -1015,13 +1015,13 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = ` } .ms-Fabric.is-focusVisible &:focus:after { border: 1px solid #ffffff; - bottom: 0px; + bottom: 1px; content: ""; - left: 0px; + left: 1px; outline: 1px solid #666666; position: absolute; - right: 0px; - top: 0px; + right: 1px; + top: 1px; z-index: 1; } @media screen and (-ms-high-contrast: active){& { @@ -1199,13 +1199,13 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = ` } .ms-Fabric.is-focusVisible &:focus:after { border: 1px solid #ffffff; - bottom: 0px; + bottom: 1px; content: ""; - left: 0px; + left: 1px; outline: 1px solid #666666; position: absolute; - right: 0px; - top: 0px; + right: 1px; + top: 1px; z-index: 1; } @media screen and (-ms-high-contrast: active){& { @@ -1383,13 +1383,13 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = ` } .ms-Fabric.is-focusVisible &:focus:after { border: 1px solid #ffffff; - bottom: 0px; + bottom: 1px; content: ""; - left: 0px; + left: 1px; outline: 1px solid #666666; position: absolute; - right: 0px; - top: 0px; + right: 1px; + top: 1px; z-index: 1; } @media screen and (-ms-high-contrast: active){& { @@ -1571,13 +1571,13 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = ` } .ms-Fabric.is-focusVisible &:focus:after { border: 1px solid #ffffff; - bottom: 0px; + bottom: 1px; content: ""; - left: 0px; + left: 1px; outline: 1px solid #666666; position: absolute; - right: 0px; - top: 0px; + right: 1px; + top: 1px; z-index: 1; } @media screen and (-ms-high-contrast: active){& { @@ -1755,13 +1755,13 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = ` } .ms-Fabric.is-focusVisible &:focus:after { border: 1px solid #ffffff; - bottom: 0px; + bottom: 1px; content: ""; - left: 0px; + left: 1px; outline: 1px solid #666666; position: absolute; - right: 0px; - top: 0px; + right: 1px; + top: 1px; z-index: 1; } @media screen and (-ms-high-contrast: active){& { @@ -1939,13 +1939,13 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = ` } .ms-Fabric.is-focusVisible &:focus:after { border: 1px solid #ffffff; - bottom: 0px; + bottom: 1px; content: ""; - left: 0px; + left: 1px; outline: 1px solid #666666; position: absolute; - right: 0px; - top: 0px; + right: 1px; + top: 1px; z-index: 1; } @media screen and (-ms-high-contrast: active){& { @@ -2123,13 +2123,13 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = ` } .ms-Fabric.is-focusVisible &:focus:after { border: 1px solid #ffffff; - bottom: 0px; + bottom: 1px; content: ""; - left: 0px; + left: 1px; outline: 1px solid #666666; position: absolute; - right: 0px; - top: 0px; + right: 1px; + top: 1px; z-index: 1; } @media screen and (-ms-high-contrast: active){& {