Button: Focus in high contrast mode fix

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"
+}

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"
+}

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;

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;
                   }

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',

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

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,

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',

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;
       }

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'
+        }
+      }
+    }
   };
 });

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;

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}

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;

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;
             }