From 2ffef621a925d63798e954b6086c0180dc4a7148 Mon Sep 17 00:00:00 2001
From: "REDMOND\\chiechan" <chiechan@microsoft.com>
Date: Thu, 8 Mar 2018 14:17:23 -0800
Subject: [PATCH 01/28] made spin button and base button menu option
 un-focusable

---
 .../src/components/Button/BaseButton.tsx      | 26 +++++++++++++++----
 .../src/components/SpinButton/SpinButton.tsx  |  2 ++
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx b/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
index 7ff26e87999adf..1133d11a6a398a 100644
--- a/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
@@ -164,7 +164,7 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
         'aria-label': ariaLabel,
         'aria-labelledby': ariaLabelledBy,
         'aria-describedby': ariaDescribedBy,
-        'data-is-focusable': ((this.props as any)['data-is-focusable'] === false || disabled) ? false : true,
+        'data-is-focusable': ((this.props as any)['data-is-focusable'] === false || disabled || this._isSplitButton) ? false : true,
         'aria-pressed': checked
       }
     );
@@ -201,7 +201,9 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
   }
 
   public focus(): void {
-    if (this._buttonElement.value) {
+    if (this._isSplitButton && this._splitButtonContainer.value) {
+      this._splitButtonContainer.value.focus();
+    } else if (this._buttonElement.value) {
       this._buttonElement.value.focus();
     }
   }
@@ -436,6 +438,13 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
 
     buttonProps = { ...buttonProps, onClick: undefined };
 
+    assign(
+      buttonProps,
+      {
+        tabIndex: -1
+      }
+    );
+
     return (
       <div
         role={ 'button' }
@@ -450,6 +459,7 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
         ref={ this._splitButtonContainer }
         data-is-focusable={ true }
         onClick={ !disabled && !primaryDisabled ? onClick : undefined }
+        tabIndex={ 0 }
       >
         <span
           style={ { 'display': 'flex' } }
@@ -462,6 +472,12 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
     );
   }
 
+  private _focusSplitButton() {
+    if (this._splitButtonContainer.value) {
+      this._splitButtonContainer.value.focus();
+    }
+  }
+
   private _onRenderSplitButtonDivider(classNames: ISplitButtonClassNames | undefined): JSX.Element | null {
     if (classNames && classNames.divider) {
       return <span className={ classNames.divider } />;
@@ -493,11 +509,11 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
       'iconProps': menuIconProps,
       'ariaLabel': splitButtonAriaLabel,
       'aria-haspopup': true,
-      'aria-expanded': this._isExpanded
+      'aria-expanded': this._isExpanded,
+      'data-is-focusable': false
     };
 
-    return <BaseButton { ...splitButtonProps } onMouseDown={ this._onMouseDown } />;
-
+    return <BaseButton {...splitButtonProps} onMouseDown={ this._onMouseDown } tabIndex={ -1 } />;
   }
 
   @autobind
diff --git a/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.tsx b/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.tsx
index 8057bb0474ef05..997aea84d065d2 100644
--- a/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.tsx
+++ b/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.tsx
@@ -227,6 +227,7 @@ export class SpinButton extends BaseComponent<ISpinButtonProps, ISpinButtonState
               onMouseUp={ this._stop }
               tabIndex={ -1 }
               ariaLabel={ incrementButtonAriaLabel }
+              data-is-focusable={ false }
             />
             <IconButton
               styles={ getArrowButtonStyles(theme!, false, customDownArrowButtonStyles) }
@@ -239,6 +240,7 @@ export class SpinButton extends BaseComponent<ISpinButtonProps, ISpinButtonState
               onMouseUp={ this._stop }
               tabIndex={ -1 }
               ariaLabel={ decrementButtonAriaLabel }
+              data-is-focusable={ false }
             />
           </span>
         </div>

From 979da51aeb349aabe4426018d64fa186fa90d878 Mon Sep 17 00:00:00 2001
From: "REDMOND\\chiechan" <chiechan@microsoft.com>
Date: Fri, 9 Mar 2018 09:38:49 -0800
Subject: [PATCH 02/28] added spin button test

---
 .../SpinButton/__snapshots__/SpinButton.test.tsx.snap         | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

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 00e7e210848b5e..f09f786866746c 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
@@ -209,7 +209,7 @@ exports[`SpinButton renders SpinButton correctly 1`] = `
               background-color: Highlight;
               color: HighlightText;
             }
-        data-is-focusable={true}
+        data-is-focusable={false}
         disabled={undefined}
         onMouseDown={[Function]}
         onMouseLeave={[Function]}
@@ -314,7 +314,7 @@ exports[`SpinButton renders SpinButton correctly 1`] = `
               background-color: Highlight;
               color: HighlightText;
             }
-        data-is-focusable={true}
+        data-is-focusable={false}
         disabled={undefined}
         onMouseDown={[Function]}
         onMouseLeave={[Function]}

From e4ab4b4370700bece475eaf06c487cf01a09931e Mon Sep 17 00:00:00 2001
From: "REDMOND\\chiechan" <chiechan@microsoft.com>
Date: Fri, 9 Mar 2018 09:39:00 -0800
Subject: [PATCH 03/28] added split button contextual menu change

---
 .../ContextualMenu.classNames.ts              |  9 ++++-
 .../ContextualMenu/ContextualMenu.styles.ts   | 15 +++----
 .../ContextualMenu/ContextualMenu.tsx         | 39 +++++++++++++------
 3 files changed, 44 insertions(+), 19 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.classNames.ts b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.classNames.ts
index d568a25ea8df2c..0bd0d9a741f381 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.classNames.ts
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.classNames.ts
@@ -198,6 +198,13 @@ export const getItemClassNames = memoizeFunction((
       'ms-ContextualMenu-itemText',
       styles.label
     ],
-    splitContainer: styles.splitButtonFlexContainer,
+    splitContainer: [
+      styles.splitButtonFlexContainer,
+      !disabled && !checked && [{
+        selectors: {
+          '.ms-Fabric.is-focusVisible &:focus, .ms-Fabric.is-focusVisible &:focus:hover': styles.rootFocused,
+        }
+      }]
+    ],
   });
 });
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.styles.ts b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.styles.ts
index 07c886c7a82928..4fe117b7997fc0 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.styles.ts
@@ -154,13 +154,14 @@ export const getMenuItemStyles = memoizeFunction((
       flexShrink: '0',
       fontSize: FontSizes.mini
     },
-    splitButtonFlexContainer: {
-      display: 'flex',
-      height: ContextualMenuItemHeight,
-      flexWrap: 'nowrap',
-      justifyContent: 'center',
-      alignItems: 'center'
-    },
+    splitButtonFlexContainer: [
+      getFocusStyle(theme), {
+        display: 'flex',
+        height: ContextualMenuItemHeight,
+        flexWrap: 'nowrap',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }],
     splitButtonSeparator: {}
   };
 
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
index 486c476b21bad4..892b3b692c48cc 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
@@ -578,22 +578,22 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
 
     return (
       <div
+        role={ 'button' }
         aria-labelledby={ item.ariaLabel }
+        className={ classNames.splitContainer }
         aria-disabled={ this._isItemDisabled(item) }
         aria-haspopup={ true }
         aria-describedby={ item.ariaDescription }
         aria-checked={ item.isChecked || item.checked }
         aria-posinset={ focusableElementIndex + 1 }
         aria-setsize={ totalItemCount }
+        onKeyDown={ this._onSplitContainerItemKeyDown.bind(this, item) }
+        tabIndex={ 0 }
+        aria-hidden={ true }
       >
-        <span
-          aria-hidden={ true }
-          className={ classNames.splitContainer }
-        >
-          { this._renderSplitPrimaryButton(item, classNames, index, hasCheckmarks!, hasIcons!) }
-          { this._renderSplitDivider(item) }
-          { this._renderSplitIconButton(item, classNames, index) }
-        </span>
+        { this._renderSplitPrimaryButton(item, classNames, index, hasCheckmarks!, hasIcons!) }
+        { this._renderSplitDivider(item) }
+        { this._renderSplitIconButton(item, classNames, index) }
       </div>
     );
   }
@@ -616,7 +616,8 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
       isChecked: item.isChecked,
       checked: item.checked,
       icon: item.icon,
-      iconProps: item.iconProps
+      iconProps: item.iconProps,
+      'data-is-focusable': false
     } as IContextualMenuItem;
     return React.createElement('button',
       getNativeProps(itemProps, buttonProperties),
@@ -624,6 +625,21 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
     );
   }
 
+  private _onSplitContainerItemKeyDown(item: any, ev: KeyboardEvent) {
+    if (ev.which === KeyCodes.enter) {
+      if (item.disabled || item.isDisabled) {
+        return;
+      }
+      if (item.onClick) {
+        item.onClick(ev, item);
+      }
+
+      !ev.defaultPrevented && this.dismiss(ev, true);
+    } else {
+      this._onItemKeyDown(item, ev);
+    }
+  }
+
   private _renderSplitIconButton(item: IContextualMenuItem, classNames: IMenuItemClassNames, index: number) {
     const { contextualMenuItemAs: ChildrenRenderer = ContextualMenuItem } = this.props;
     const itemProps = {
@@ -637,11 +653,12 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
 
     return React.createElement('button',
       assign({}, getNativeProps(itemProps, buttonProperties), {
-        onKeyDown: this._onItemKeyDown.bind(this, item),
         onMouseEnter: this._onItemMouseEnter.bind(this, item),
         onMouseLeave: this._onMouseItemLeave.bind(this, item),
         onMouseDown: (ev: any) => this._onItemMouseDown(item, ev),
-        onMouseMove: this._onItemMouseMove.bind(this, item)
+        onMouseMove: this._onItemMouseMove.bind(this, item),
+        tabIndex: -1,
+        'data-is-focusable': false
       }),
       <ChildrenRenderer item={ itemProps } classNames={ classNames } index={ index } hasIcons={ false } />
     );

From 3d95acaddf69aa3896bb340cad08e703b8faa3bc Mon Sep 17 00:00:00 2001
From: "REDMOND\\chiechan" <chiechan@microsoft.com>
Date: Fri, 9 Mar 2018 09:44:39 -0800
Subject: [PATCH 04/28] got rid of un-needed code

---
 .../src/components/Button/BaseButton.tsx                    | 6 ------
 .../src/components/ContextualMenu/ContextualMenu.tsx        | 1 -
 2 files changed, 7 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx b/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
index 1133d11a6a398a..0c062624b567c3 100644
--- a/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
@@ -472,12 +472,6 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
     );
   }
 
-  private _focusSplitButton() {
-    if (this._splitButtonContainer.value) {
-      this._splitButtonContainer.value.focus();
-    }
-  }
-
   private _onRenderSplitButtonDivider(classNames: ISplitButtonClassNames | undefined): JSX.Element | null {
     if (classNames && classNames.divider) {
       return <span className={ classNames.divider } />;
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
index 892b3b692c48cc..92ed57e7af120c 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
@@ -657,7 +657,6 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
         onMouseLeave: this._onMouseItemLeave.bind(this, item),
         onMouseDown: (ev: any) => this._onItemMouseDown(item, ev),
         onMouseMove: this._onItemMouseMove.bind(this, item),
-        tabIndex: -1,
         'data-is-focusable': false
       }),
       <ChildrenRenderer item={ itemProps } classNames={ classNames } index={ index } hasIcons={ false } />

From 64bc57b3bf14069b7df67ffd135f9d6dc3e5abd0 Mon Sep 17 00:00:00 2001
From: "REDMOND\\chiechan" <chiechan@microsoft.com>
Date: Fri, 9 Mar 2018 09:45:56 -0800
Subject: [PATCH 05/28] added change files

---
 .../focus2_2018-03-09-17-45.json                      | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 common/changes/office-ui-fabric-react/focus2_2018-03-09-17-45.json

diff --git a/common/changes/office-ui-fabric-react/focus2_2018-03-09-17-45.json b/common/changes/office-ui-fabric-react/focus2_2018-03-09-17-45.json
new file mode 100644
index 00000000000000..6a9d7581ea5811
--- /dev/null
+++ b/common/changes/office-ui-fabric-react/focus2_2018-03-09-17-45.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Removed focusability on buttons for split buttons and spin buttons",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "chiechan@microsoft.com"
+}
\ No newline at end of file

From e08bf24883d1cca73be84f9f36c128b1f38a48b2 Mon Sep 17 00:00:00 2001
From: "REDMOND\\chiechan" <chiechan@microsoft.com>
Date: Fri, 9 Mar 2018 09:54:34 -0800
Subject: [PATCH 06/28] added abillitiy to not focus on primary button for
 split button, but only on the container

---
 .../src/components/Button/BaseButton.tsx                       | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx b/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
index 0c062624b567c3..b8a0da180b33dc 100644
--- a/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
@@ -441,7 +441,8 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
     assign(
       buttonProps,
       {
-        tabIndex: -1
+        tabIndex: -1,
+        'data-is-focusable': false
       }
     );
 

From c16992b419dfed0d8dec2506f0d73f6768b8b1e6 Mon Sep 17 00:00:00 2001
From: "REDMOND\\chiechan" <chiechan@microsoft.com>
Date: Fri, 9 Mar 2018 14:34:01 -0800
Subject: [PATCH 07/28] enter on focus on split button trigger primary action

---
 .../src/components/Button/BaseButton.tsx      | 24 ++++++++++++++++---
 .../ContextualMenu/ContextualMenu.tsx         |  6 ++---
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx b/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
index b8a0da180b33dc..a93121d846e15c 100644
--- a/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
@@ -436,11 +436,10 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
         !!this.state.menuProps,
         !!checked);
 
-    buttonProps = { ...buttonProps, onClick: undefined };
-
     assign(
       buttonProps,
       {
+        onClick: undefined,
         tabIndex: -1,
         'data-is-focusable': false
       }
@@ -456,7 +455,7 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
         aria-pressed={ this.props.checked }
         aria-describedby={ buttonProps.ariaDescription }
         className={ classNames && classNames.splitButtonContainer }
-        onKeyDown={ this._onMenuKeyDown }
+        onKeyDown={ this._onSplitButtonContainerKeyDown }
         ref={ this._splitButtonContainer }
         data-is-focusable={ true }
         onClick={ !disabled && !primaryDisabled ? onClick : undefined }
@@ -520,12 +519,31 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
     ev.preventDefault();
   }
 
+  @autobind
+  private _onSplitButtonContainerKeyDown(ev: React.KeyboardEvent<HTMLDivElement>) {
+    if (ev.which === KeyCodes.enter) {
+      if (this._buttonElement.value) {
+        this._buttonElement.value.click();
+        ev.preventDefault();
+        ev.stopPropagation();
+      }
+    } else {
+      this._onMenuKeyDown(ev);
+    }
+  }
+
   @autobind
   private _onMenuKeyDown(ev: React.KeyboardEvent<HTMLDivElement | HTMLAnchorElement | HTMLButtonElement>) {
     if (this.props.onKeyDown) {
       this.props.onKeyDown(ev);
     }
 
+    if (ev.which == KeyCodes.enter) {
+      if (this._buttonElement.value) {
+        this._buttonElement.value.click();
+      }
+    }
+
     const { onMenuClick } = this.props;
     if (onMenuClick) {
       onMenuClick(ev, this);
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
index 92ed57e7af120c..f19536c811f7a0 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
@@ -588,6 +588,7 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
         aria-posinset={ focusableElementIndex + 1 }
         aria-setsize={ totalItemCount }
         onKeyDown={ this._onSplitContainerItemKeyDown.bind(this, item) }
+        onClick={ this._executeItemClick.bind(this, item) }
         tabIndex={ 0 }
         aria-hidden={ true }
       >
@@ -607,7 +608,6 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
 
     const itemProps = {
       key: item.key,
-      onClick: this._executeItemClick.bind(this, item),
       disabled: this._isItemDisabled(item) || item.primaryDisabled,
       name: item.name,
       className: classNames.splitPrimary,
@@ -625,7 +625,7 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
     );
   }
 
-  private _onSplitContainerItemKeyDown(item: any, ev: KeyboardEvent) {
+  private _onSplitContainerItemKeyDown(item: any, ev: React.KeyboardEvent<HTMLElement>) {
     if (ev.which === KeyCodes.enter) {
       if (item.disabled || item.isDisabled) {
         return;
@@ -871,7 +871,7 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
     !ev.defaultPrevented && this.dismiss(ev, true);
   }
 
-  private _onItemKeyDown(item: any, ev: KeyboardEvent) {
+  private _onItemKeyDown(item: any, ev: React.KeyboardEvent<HTMLElement>) {
     const openKey = getRTL() ? KeyCodes.left : KeyCodes.right;
 
     if (ev.which === openKey) {

From 7bea2c01fad7777f74fc89bc611b3b50101318fc Mon Sep 17 00:00:00 2001
From: "REDMOND\\chiechan" <chiechan@microsoft.com>
Date: Fri, 9 Mar 2018 15:07:32 -0800
Subject: [PATCH 08/28] added split button style for disabled

---
 .../Button/SplitButton/SplitButton.styles.ts  |  5 ++++
 .../Button/examples/Button.Split.Example.tsx  | 26 +++++++++++++++++++
 2 files changed, 31 insertions(+)

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..8b5af82ffd807e 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
@@ -64,6 +64,11 @@ export const getStyles = memoizeFunction((
       justifyContent: 'center',
       alignItems: 'center'
     },
+
+    splitButtonContainerDisabled: {
+      outline: 'none',
+      border: 'none'
+    }
   };
 
   return concatStyleSets(splitButtonStyles, customStyles)!;
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Split.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Split.Example.tsx
index 36049fc90a03c7..75634f36cc833f 100644
--- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Split.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Split.Example.tsx
@@ -104,6 +104,32 @@ export class ButtonSplitExample extends React.Component<IButtonProps> {
               ]
             } }
           />
+        </div>        <div>
+          <Label>Button Disabled</Label>
+          <DefaultButton
+            primary
+            data-automation-id='test'
+            disabled={ true }
+            checked={ checked }
+            text='Create account'
+            onClick={ alertClicked }
+            split={ true }
+            style={ { height: '35px' } }
+            menuProps={ {
+              items: [
+                {
+                  key: 'emailMessage',
+                  name: 'Email message',
+                  icon: 'Mail'
+                },
+                {
+                  key: 'calendarEvent',
+                  name: 'Calendar event',
+                  icon: 'Calendar'
+                }
+              ]
+            } }
+          />
         </div>
       </div>
     );

From 62cb45860975ed77ccfdead1bab0c9be89e06291 Mon Sep 17 00:00:00 2001
From: "REDMOND\\chiechan" <chiechan@microsoft.com>
Date: Fri, 9 Mar 2018 15:24:28 -0800
Subject: [PATCH 09/28] prevent opening submenu if item is disabled

---
 .../ContextualMenu/ContextualMenu.tsx         |  2 +-
 .../ContextualMenu.Checkmarks.Example.tsx     | 32 ++++++++++++++++++-
 2 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
index f19536c811f7a0..ac77db8516f8e3 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
@@ -874,7 +874,7 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
   private _onItemKeyDown(item: any, ev: React.KeyboardEvent<HTMLElement>) {
     const openKey = getRTL() ? KeyCodes.left : KeyCodes.right;
 
-    if (ev.which === openKey) {
+    if (ev.which === openKey && !item.disabled) {
       this._onItemSubMenuExpand(item, ev.currentTarget as HTMLElement);
       ev.preventDefault();
     }
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Checkmarks.Example.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Checkmarks.Example.tsx
index 3e9d34033dc2a9..cda93290150428 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Checkmarks.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Checkmarks.Example.tsx
@@ -7,7 +7,7 @@ export interface IContextualMenuMultiselectExampleState {
   selection?: { [key: string]: boolean };
 }
 
-const keys: string[] = ['newItem', 'share', 'mobile', 'enablePrint', 'enableMusic', 'newSub', 'emailMessage', 'calendarEvent'];
+const keys: string[] = ['newItem', 'share', 'mobile', 'enablePrint', 'enableMusic', 'newSub', 'emailMessage', 'calendarEvent', 'disabledNewSub', 'disabledEmailMessage', 'disabledCalendarEvent'];
 
 export class ContextualMenuCheckmarksExample extends React.Component<{}, IContextualMenuMultiselectExampleState> {
 
@@ -102,6 +102,36 @@ export class ContextualMenuCheckmarksExample extends React.Component<{}, IContex
                   split: true,
                   onClick: this._onToggleSelect,
                 },
+                {
+                  key: keys[8],
+                  iconProps: {
+                    iconName: 'MusicInCollectionFill'
+                  },
+                  subMenuProps: {
+                    items: [
+                      {
+                        key: keys[6],
+                        name: 'Email message',
+                        canCheck: true,
+                        isChecked: selection![keys[9]],
+                        onClick: this._onToggleSelect
+                      },
+                      {
+                        key: keys[7],
+                        name: 'Calendar event',
+                        canCheck: true,
+                        isChecked: selection![keys[10]],
+                        onClick: this._onToggleSelect
+                      }
+                    ],
+                  },
+                  name: 'Split Button',
+                  canCheck: true,
+                  isChecked: selection![keys[8]],
+                  split: true,
+                  onClick: this._onToggleSelect,
+                  disabled: true
+                },
               ]
           }
         }

From efb7439dd014b67b69bd5ff0bce32219bc900a3a Mon Sep 17 00:00:00 2001
From: "REDMOND\\chiechan" <chiechan@microsoft.com>
Date: Fri, 9 Mar 2018 15:52:18 -0800
Subject: [PATCH 10/28] tighten restrictions on opening split buttons to open
 with alt + down

---
 .../src/components/Button/BaseButton.tsx      | 20 ++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx b/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
index a93121d846e15c..92773060b79198 100644
--- a/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
@@ -534,14 +534,12 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
 
   @autobind
   private _onMenuKeyDown(ev: React.KeyboardEvent<HTMLDivElement | HTMLAnchorElement | HTMLButtonElement>) {
-    if (this.props.onKeyDown) {
-      this.props.onKeyDown(ev);
+    if (this.props.disabled) {
+      return;
     }
 
-    if (ev.which == KeyCodes.enter) {
-      if (this._buttonElement.value) {
-        this._buttonElement.value.click();
-      }
+    if (this.props.onKeyDown) {
+      this.props.onKeyDown(ev);
     }
 
     const { onMenuClick } = this.props;
@@ -551,13 +549,21 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
 
     if (!ev.defaultPrevented &&
       this.props.menuTriggerKeyCode !== null &&
-      ev.which === (this.props.menuTriggerKeyCode === undefined ? KeyCodes.down : this.props.menuTriggerKeyCode)) {
+      this._validMenuKey(ev)) {
       this._onToggleMenu();
       ev.preventDefault();
       ev.stopPropagation();
     }
   }
 
+  private _validMenuKey(ev: React.KeyboardEvent<HTMLDivElement | HTMLAnchorElement | HTMLButtonElement>): boolean {
+    if (this.props.menuTriggerKeyCode) {
+      return ev.which === this.props.menuTriggerKeyCode
+    } else {
+      return ev.which === KeyCodes.down && ev.altKey
+    }
+  }
+
   @autobind
   private _onMenuClick(ev: React.MouseEvent<HTMLAnchorElement>) {
     const { onMenuClick } = this.props;

From f803332f6bc4d2b752420f25a7c6d16af277cef4 Mon Sep 17 00:00:00 2001
From: "REDMOND\\chiechan" <chiechan@microsoft.com>
Date: Fri, 9 Mar 2018 16:12:30 -0800
Subject: [PATCH 11/28] refactored button name and fixed test

---
 .../src/components/Button/BaseButton.tsx            | 13 +++++++++----
 .../src/components/Button/Button.test.tsx           |  5 +++--
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx b/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
index 92773060b79198..5f513ca100144b 100644
--- a/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
@@ -549,18 +549,23 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
 
     if (!ev.defaultPrevented &&
       this.props.menuTriggerKeyCode !== null &&
-      this._validMenuKey(ev)) {
+      this._isValidMenuOpenKey(ev)) {
       this._onToggleMenu();
       ev.preventDefault();
       ev.stopPropagation();
     }
   }
 
-  private _validMenuKey(ev: React.KeyboardEvent<HTMLDivElement | HTMLAnchorElement | HTMLButtonElement>): boolean {
+  /**
+   * Returns if the user hits a valid keyboard key to open the menu
+   * @param ev - the keyboard event
+   * @returns True if user clicks on custom trigger key if enabled or alt + down arrow if not. False otherwise.
+   */
+  private _isValidMenuOpenKey(ev: React.KeyboardEvent<HTMLDivElement | HTMLAnchorElement | HTMLButtonElement>): boolean {
     if (this.props.menuTriggerKeyCode) {
-      return ev.which === this.props.menuTriggerKeyCode
+      return ev.which === this.props.menuTriggerKeyCode;
     } else {
-      return ev.which === KeyCodes.down && ev.altKey
+      return ev.which === KeyCodes.down && ev.altKey;
     }
   }
 
diff --git a/packages/office-ui-fabric-react/src/components/Button/Button.test.tsx b/packages/office-ui-fabric-react/src/components/Button/Button.test.tsx
index df1c3edab4bbbf..9908bc87ff259f 100644
--- a/packages/office-ui-fabric-react/src/components/Button/Button.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/Button.test.tsx
@@ -491,7 +491,7 @@ describe('Button', () => {
         expect(didClick).toEqual(true);
       });
 
-      it('Pressing down on SplitButton triggers menu', () => {
+      it('Pressing alt + down on SplitButton triggers menu', () => {
         const renderedDOM: HTMLElement = renderIntoDocument(
           <DefaultButton
             data-automation-id='test'
@@ -519,7 +519,8 @@ describe('Button', () => {
 
         ReactTestUtils.Simulate.keyDown(menuButtonElement,
           {
-            which: KeyCodes.down
+            which: KeyCodes.down,
+            altKey: true
           });
         expect(renderedDOM.getAttribute('aria-expanded')).toEqual('true');
       });

From b2a44758091e72961266f623df4abcde89314c83 Mon Sep 17 00:00:00 2001
From: "REDMOND\\chiechan" <chiechan@microsoft.com>
Date: Tue, 13 Mar 2018 10:36:11 -0700
Subject: [PATCH 12/28] updated bundle size

---
 scripts/package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/scripts/package.json b/scripts/package.json
index ff4b4d6ca700ce..fbff9f6d83598e 100644
--- a/scripts/package.json
+++ b/scripts/package.json
@@ -49,7 +49,7 @@
   "bundlesize": [
     {
       "path": "../apps/test-bundle-button/dist/main.min.js",
-      "maxSize": "44.6 kB"
+      "maxSize": "44.9 kB"
     }
   ]
-}
+}
\ No newline at end of file

From 976c67fc0e90752bdae50b6c9a0ef1b3ceefef89 Mon Sep 17 00:00:00 2001
From: "REDMOND\\chiechan" <chiechan@microsoft.com>
Date: Tue, 13 Mar 2018 11:51:42 -0700
Subject: [PATCH 13/28] changed on menu item click to bw able to take in a
 keyboard event

---
 .../src/components/ContextualMenu/ContextualMenu.tsx  | 11 ++---------
 .../components/ContextualMenu/ContextualMenu.types.ts |  4 ++--
 2 files changed, 4 insertions(+), 11 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
index ac77db8516f8e3..df3c120637cbf8 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
@@ -627,14 +627,7 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
 
   private _onSplitContainerItemKeyDown(item: any, ev: React.KeyboardEvent<HTMLElement>) {
     if (ev.which === KeyCodes.enter) {
-      if (item.disabled || item.isDisabled) {
-        return;
-      }
-      if (item.onClick) {
-        item.onClick(ev, item);
-      }
-
-      !ev.defaultPrevented && this.dismiss(ev, true);
+      this._executeItemClick(item, ev);
     } else {
       this._onItemKeyDown(item, ev);
     }
@@ -858,7 +851,7 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
     ev.stopPropagation();
   }
 
-  private _executeItemClick(item: IContextualMenuItem, ev: React.MouseEvent<HTMLElement>) {
+  private _executeItemClick(item: IContextualMenuItem, ev: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) {
     if (item.disabled || item.isDisabled) {
       return;
     }
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.types.ts b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.types.ts
index e68d91bf281f25..741755696c005a 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.types.ts
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.types.ts
@@ -137,7 +137,7 @@ export interface IContextualMenuProps extends React.Props<ContextualMenu>, IWith
    * Click handler which is invoked if onClick is not passed for individual contextual
    * menu item
    */
-  onItemClick?: (ev?: React.MouseEvent<HTMLElement>, item?: IContextualMenuItem) => void;
+  onItemClick?: (ev?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, item?: IContextualMenuItem) => void;
 
   /**
    * CSS class to apply to the context menu.
@@ -322,7 +322,7 @@ export interface IContextualMenuItem {
   /**
    * Callback issued when the menu item is invoked. If ev.preventDefault() is called in onClick, click will not close menu
    */
-  onClick?: (ev?: React.MouseEvent<HTMLElement>, item?: IContextualMenuItem) => void;
+  onClick?: (ev?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, item?: IContextualMenuItem) => void;
 
   /**
    * An optional URL to navigate to upon selection

From 0aaefaa53a24ee1f455d2fa11e7c3a8bd2752a8d Mon Sep 17 00:00:00 2001
From: "REDMOND\\chiechan" <chiechan@microsoft.com>
Date: Tue, 13 Mar 2018 11:54:16 -0700
Subject: [PATCH 14/28] updated package json

---
 scripts/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/package.json b/scripts/package.json
index fbff9f6d83598e..183523cfde9df5 100644
--- a/scripts/package.json
+++ b/scripts/package.json
@@ -49,7 +49,7 @@
   "bundlesize": [
     {
       "path": "../apps/test-bundle-button/dist/main.min.js",
-      "maxSize": "44.9 kB"
+      "maxSize": "45.0 kB"
     }
   ]
 }
\ No newline at end of file

From bbc370f9fa4da6c4d6a1d739b52d9bea4c2a41bb Mon Sep 17 00:00:00 2001
From: "REDMOND\\chiechan" <chiechan@microsoft.com>
Date: Tue, 13 Mar 2018 12:35:37 -0700
Subject: [PATCH 15/28] fixed weird tabbing

---
 .../src/components/Button/examples/Button.Split.Example.tsx    | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Split.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Split.Example.tsx
index 75634f36cc833f..3ab322885eda6c 100644
--- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Split.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Split.Example.tsx
@@ -104,7 +104,8 @@ export class ButtonSplitExample extends React.Component<IButtonProps> {
               ]
             } }
           />
-        </div>        <div>
+        </div>
+        <div>
           <Label>Button Disabled</Label>
           <DefaultButton
             primary

From 0fc2cc679fb32a8ae1c22dca6cb4b43135b32a0d Mon Sep 17 00:00:00 2001
From: "REDMOND\\chiechan" <chiechan@microsoft.com>
Date: Tue, 13 Mar 2018 14:48:39 -0700
Subject: [PATCH 16/28] changed way we structured the focus

---
 .../src/components/ContextualMenu/ContextualMenu.tsx   | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
index 0371f4a10d4b75..27b8f933405ae7 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
@@ -597,11 +597,13 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
         onKeyDown={ this._onSplitContainerItemKeyDown.bind(this, item) }
         onClick={ this._executeItemClick.bind(this, item) }
         tabIndex={ 0 }
-        aria-hidden={ true }
+        data-is-focusable={ true }
       >
-        { this._renderSplitPrimaryButton(item, classNames, index, hasCheckmarks!, hasIcons!) }
-        { this._renderSplitDivider(item) }
-        { this._renderSplitIconButton(item, classNames, index) }
+        <span aria-hidden={ true }>
+          { this._renderSplitPrimaryButton(item, classNames, index, hasCheckmarks!, hasIcons!) }
+          { this._renderSplitDivider(item) }
+          { this._renderSplitIconButton(item, classNames, index) }
+        </span>
       </div>
     );
   }

From 965a8e922bda4620c0a3eb1c8129621130369eae Mon Sep 17 00:00:00 2001
From: "REDMOND\\chiechan" <chiechan@microsoft.com>
Date: Tue, 13 Mar 2018 21:54:51 -0700
Subject: [PATCH 17/28] added stop propagation

---
 .../src/components/ContextualMenu/ContextualMenu.tsx            | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
index 27b8f933405ae7..1895647c2102cc 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
@@ -637,6 +637,8 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
   private _onSplitContainerItemKeyDown(item: any, ev: React.KeyboardEvent<HTMLElement>) {
     if (ev.which === KeyCodes.enter) {
       this._executeItemClick(item, ev);
+      ev.preventDefault();
+      ev.stopPropagation();
     } else {
       this._onItemKeyDown(item, ev);
     }

From ad6e5dfd48a0f6616d8fb622695d91e4bba812fd Mon Sep 17 00:00:00 2001
From: "REDMOND\\chiechan" <chiechan@microsoft.com>
Date: Fri, 16 Mar 2018 16:05:27 -0700
Subject: [PATCH 18/28] changed split button container key down to work with
 other buttons now

---
 .../office-ui-fabric-react/src/components/Button/BaseButton.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx b/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
index 6da08b2522c676..db2ebd5002d055 100644
--- a/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
@@ -507,7 +507,7 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
     ev.preventDefault();
   }
 
-  private _onSplitButtonContainerKeyDown(ev: React.KeyboardEvent<HTMLDivElement>) {
+  private _onSplitButtonContainerKeyDown = (ev: React.KeyboardEvent<HTMLDivElement>) => {
     if (ev.which === KeyCodes.enter) {
       if (this._buttonElement.value) {
         this._buttonElement.value.click();

From e01436afba705b1f7f195ae08a4f9686a8404db5 Mon Sep 17 00:00:00 2001
From: "REDMOND\\chiechan" <chiechan@microsoft.com>
Date: Fri, 16 Mar 2018 16:43:09 -0700
Subject: [PATCH 19/28] update bundle size

---
 scripts/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/package.json b/scripts/package.json
index 183523cfde9df5..67b06c5b07ec17 100644
--- a/scripts/package.json
+++ b/scripts/package.json
@@ -49,7 +49,7 @@
   "bundlesize": [
     {
       "path": "../apps/test-bundle-button/dist/main.min.js",
-      "maxSize": "45.0 kB"
+      "maxSize": "45.21 kB"
     }
   ]
 }
\ No newline at end of file

From a33679e3d9592a771538599d3f1e5a2119646e24 Mon Sep 17 00:00:00 2001
From: "REDMOND\\chiechan" <chiechan@microsoft.com>
Date: Tue, 20 Mar 2018 18:54:47 -0700
Subject: [PATCH 20/28] added correct split button container styles

---
 .../src/components/Button/BaseButton.tsx      | 12 +++++----
 .../Button/SplitButton/SplitButton.styles.ts  | 13 +++++----
 .../examples/FocusZone.Tabbable.Example.tsx   | 27 ++++++++++++++++++-
 3 files changed, 41 insertions(+), 11 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx b/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
index db2ebd5002d055..a43c1842c4ccfc 100644
--- a/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
@@ -446,9 +446,9 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
         className={ classNames && classNames.splitButtonContainer }
         onKeyDown={ this._onSplitButtonContainerKeyDown }
         ref={ this._splitButtonContainer }
-        data-is-focusable={ true }
+        data-is-focusable={ !disabled && !primaryDisabled }
         onClick={ !disabled && !primaryDisabled ? onClick : undefined }
-        tabIndex={ 0 }
+        tabIndex={ !disabled && !primaryDisabled ? 0 : undefined }
       >
         <span
           style={ { 'display': 'flex' } }
@@ -474,7 +474,9 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
     } = this.props;
 
     const {
-      splitButtonAriaLabel
+      splitButtonAriaLabel,
+      disabled,
+      primaryDisabled
     } = this.props;
 
     if (menuIconProps === undefined) {
@@ -495,8 +497,8 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
       'aria-expanded': this._isExpanded,
       'data-is-focusable': false
     };
-
-    return <BaseButton {...splitButtonProps} onMouseDown={ this._onMouseDown } tabIndex={ -1 } />;
+    const isPrimaryButtonDisabled = (!disabled && primaryDisabled);
+    return <BaseButton {...splitButtonProps} onMouseDown={ this._onMouseDown } tabIndex={ isPrimaryButtonDisabled ? -1 : undefined } />;
   }
 
   private _onMouseDown = (ev: React.MouseEvent<BaseButton>) => {
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 c90be27f9a456a..605c9ef5de02f3 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
@@ -19,11 +19,14 @@ export const getStyles = memoizeFunction((
   };
 
   const splitButtonStyles: IButtonStyles = {
-    splitButtonContainer: {
-      position: 'relative',
-      display: 'inline-block',
-      border: '1px solid transparent'
-    },
+    splitButtonContainer: [
+      getFocusStyle(theme, -1, 'relative', buttonHighContrastFocus),
+      {
+        position: 'relative',
+        display: 'inline-block',
+        border: '1px solid transparent'
+      }
+    ],
     splitButtonContainerFocused: {
       outline: 'none!important',
       border: '1px solid'
diff --git a/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Tabbable.Example.tsx b/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Tabbable.Example.tsx
index 14d6d2308c0ce8..9764d195bcc4fb 100644
--- a/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Tabbable.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Tabbable.Example.tsx
@@ -2,11 +2,15 @@
 import * as React from 'react';
 /* tslint:enable:no-unused-variable */
 
-import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
+import { DefaultButton, BaseButton } from 'office-ui-fabric-react/lib/Button';
 import { FocusZone, FocusZoneDirection, FocusZoneTabbableElements } from 'office-ui-fabric-react/lib/FocusZone';
 import { TextField } from 'office-ui-fabric-react/lib/TextField';
 import './FocusZone.Tabbable.Example.scss';
 
+const alertClicked = (): void => {
+  alert('Clicked');
+};
+
 export const FocusZoneTabbableExample = () => (
   <div className='ms-FocusZoneTabbableExample'>
     <div className='ms-Row'>
@@ -16,6 +20,27 @@ export const FocusZoneTabbableExample = () => (
         <DefaultButton>Button 2</DefaultButton>
         <TextField value='FocusZone TextField' className='ms-FocusZoneTabbableExample-textField' />
         <DefaultButton>Button 3</DefaultButton>
+        <DefaultButton
+          data-automation-id='test'
+          text='Create account'
+          split={ true }
+          onClick={ alertClicked }
+          splitButtonAriaLabel={ 'See 2 sample options' }
+          menuProps={ {
+            items: [
+              {
+                key: 'emailMessage',
+                name: 'Email message',
+                icon: 'Mail'
+              },
+              {
+                key: 'calendarEvent',
+                name: 'Calendar event',
+                icon: 'Calendar'
+              }
+            ]
+          } }
+        />
       </FocusZone>
     </div>
     <div className='ms-Row'>

From 93ba4ae2985ae4b768bb54c476a46b5242f3f033 Mon Sep 17 00:00:00 2001
From: "REDMOND\\chiechan" <chiechan@microsoft.com>
Date: Tue, 20 Mar 2018 19:07:05 -0700
Subject: [PATCH 21/28] removed unnecessary attribute

---
 .../components/FocusZone/examples/FocusZone.Tabbable.Example.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Tabbable.Example.tsx b/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Tabbable.Example.tsx
index 9764d195bcc4fb..2fb2a8a02e843f 100644
--- a/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Tabbable.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Tabbable.Example.tsx
@@ -21,7 +21,6 @@ export const FocusZoneTabbableExample = () => (
         <TextField value='FocusZone TextField' className='ms-FocusZoneTabbableExample-textField' />
         <DefaultButton>Button 3</DefaultButton>
         <DefaultButton
-          data-automation-id='test'
           text='Create account'
           split={ true }
           onClick={ alertClicked }

From d19e1a652828109531b70d74fcfba84b7ecd022c Mon Sep 17 00:00:00 2001
From: "REDMOND\\chiechan" <chiechan@microsoft.com>
Date: Tue, 20 Mar 2018 19:12:11 -0700
Subject: [PATCH 22/28] fixed focusing on menu button when primary button is
 disabled

---
 .../src/components/Button/BaseButton.tsx                    | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx b/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
index a43c1842c4ccfc..2a08c5d0af5c3a 100644
--- a/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
@@ -485,6 +485,7 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
       };
     }
 
+    const isPrimaryButtonDisabled = (!disabled && primaryDisabled);
     const splitButtonProps = {
       'styles': classNames,
       'checked': this.props.checked,
@@ -495,10 +496,9 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
       'ariaLabel': splitButtonAriaLabel,
       'aria-haspopup': true,
       'aria-expanded': this._isExpanded,
-      'data-is-focusable': false
+      'data-is-focusable': !isPrimaryButtonDisabled
     };
-    const isPrimaryButtonDisabled = (!disabled && primaryDisabled);
-    return <BaseButton {...splitButtonProps} onMouseDown={ this._onMouseDown } tabIndex={ isPrimaryButtonDisabled ? -1 : undefined } />;
+    return <BaseButton {...splitButtonProps} onMouseDown={ this._onMouseDown } tabIndex={ !isPrimaryButtonDisabled ? -1 : undefined } />;
   }
 
   private _onMouseDown = (ev: React.MouseEvent<BaseButton>) => {

From 24ae278d92a003ee6f2c04d8a6d781549e5c3b58 Mon Sep 17 00:00:00 2001
From: "REDMOND\\chiechan" <chiechan@microsoft.com>
Date: Wed, 21 Mar 2018 13:47:20 -0700
Subject: [PATCH 23/28] added change to focus

---
 .../src/components/Button/BaseButton.tsx         | 16 ++++++++--------
 .../components/ContextualMenu/ContextualMenu.tsx |  7 ++++---
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx b/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
index 2a08c5d0af5c3a..36fb1af4e111bb 100644
--- a/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
@@ -401,6 +401,9 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
   }
 
   private _onToggleMenu = (): void => {
+    if (this._splitButtonContainer.value) {
+      this._splitButtonContainer.value.focus();
+    }
     const { menuProps } = this.props;
     const currentMenuProps = this.state.menuProps;
     this.setState({ menuProps: currentMenuProps ? null : menuProps });
@@ -446,9 +449,9 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
         className={ classNames && classNames.splitButtonContainer }
         onKeyDown={ this._onSplitButtonContainerKeyDown }
         ref={ this._splitButtonContainer }
-        data-is-focusable={ !disabled && !primaryDisabled }
+        data-is-focusable={ true }
         onClick={ !disabled && !primaryDisabled ? onClick : undefined }
-        tabIndex={ !disabled && !primaryDisabled ? 0 : undefined }
+        tabIndex={ !disabled ? 0 : undefined }
       >
         <span
           style={ { 'display': 'flex' } }
@@ -474,9 +477,7 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
     } = this.props;
 
     const {
-      splitButtonAriaLabel,
-      disabled,
-      primaryDisabled
+      splitButtonAriaLabel
     } = this.props;
 
     if (menuIconProps === undefined) {
@@ -485,7 +486,6 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
       };
     }
 
-    const isPrimaryButtonDisabled = (!disabled && primaryDisabled);
     const splitButtonProps = {
       'styles': classNames,
       'checked': this.props.checked,
@@ -496,9 +496,9 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
       'ariaLabel': splitButtonAriaLabel,
       'aria-haspopup': true,
       'aria-expanded': this._isExpanded,
-      'data-is-focusable': !isPrimaryButtonDisabled
+      'data-is-focusable': false
     };
-    return <BaseButton {...splitButtonProps} onMouseDown={ this._onMouseDown } tabIndex={ !isPrimaryButtonDisabled ? -1 : undefined } />;
+    return <BaseButton {...splitButtonProps} onMouseDown={ this._onMouseDown } tabIndex={ -1 } />;
   }
 
   private _onMouseDown = (ev: React.MouseEvent<BaseButton>) => {
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
index 0e9c61cdabacfe..95d007559a2a38 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
@@ -605,12 +605,13 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
         tabIndex={ 0 }
         data-is-focusable={ true }
       >
-        <span aria-hidden={ true }>
+        <span
+          style={ { display: 'flex', height: '100%' } }>
           { this._renderSplitPrimaryButton(item, classNames, index, hasCheckmarks!, hasIcons!) }
           { this._renderSplitDivider(item) }
           { this._renderSplitIconButton(item, classNames, index) }
         </span>
-      </div>
+      </div >
     );
   }
 
@@ -885,7 +886,7 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
 
   private _onItemKeyDown(item: any, ev: React.KeyboardEvent<HTMLElement>) {
     const openKey = getRTL() ? KeyCodes.left : KeyCodes.right;
-
+    // TODO need to focus the container so that when the menu closes the previous focused item would be the container
     if (ev.which === openKey && !item.disabled) {
       this._onItemSubMenuExpand(item, ev.currentTarget as HTMLElement);
       ev.preventDefault();

From 619711d7ba60ab0ae2db2f63ba9d6d74e91f1cf9 Mon Sep 17 00:00:00 2001
From: "REDMOND\\chiechan" <chiechan@microsoft.com>
Date: Wed, 21 Mar 2018 13:53:09 -0700
Subject: [PATCH 24/28] added aria hidden

---
 .../src/components/ContextualMenu/ContextualMenu.tsx             | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
index fa04b81e560a81..e9dcb0b5a7fa81 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
@@ -604,6 +604,7 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
         data-is-focusable={ true }
       >
         <span
+          aria-hidden={ true }
           style={ { display: 'flex', height: '100%' } }>
           { this._renderSplitPrimaryButton(item, classNames, index, hasCheckmarks!, hasIcons!) }
           { this._renderSplitDivider(item) }

From 276fe960b4c620715bfd31f26bec1f07c7c5b00e Mon Sep 17 00:00:00 2001
From: "REDMOND\\chiechan" <chiechan@microsoft.com>
Date: Wed, 21 Mar 2018 14:35:27 -0700
Subject: [PATCH 25/28] fixed span location and moved TODO

---
 .../src/components/ContextualMenu/ContextualMenu.tsx        | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
index e9dcb0b5a7fa81..420f38f48248ee 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
@@ -605,7 +605,8 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
       >
         <span
           aria-hidden={ true }
-          style={ { display: 'flex', height: '100%' } }>
+          style={ { display: 'flex', height: '100%' } }
+        >
           { this._renderSplitPrimaryButton(item, classNames, index, hasCheckmarks!, hasIcons!) }
           { this._renderSplitDivider(item) }
           { this._renderSplitIconButton(item, classNames, index) }
@@ -880,7 +881,7 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
 
   private _onItemKeyDown(item: any, ev: React.KeyboardEvent<HTMLElement>) {
     const openKey = getRTL() ? KeyCodes.left : KeyCodes.right;
-    // TODO need to focus the container so that when the menu closes the previous focused item would be the container
+
     if (ev.which === openKey && !item.disabled) {
       this._onItemSubMenuExpand(item, ev.currentTarget as HTMLElement);
       ev.preventDefault();
@@ -890,6 +891,7 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
   private _onItemSubMenuExpand(item: IContextualMenuItem, target: HTMLElement) {
     if (this.state.expandedMenuItemKey !== item.key) {
 
+      // TODO need to focus the container so that when the menu closes the previous focused item would be the container
       if (this.state.expandedMenuItemKey) {
         this._onSubMenuDismiss();
       }

From d4436d4e11d65245e2ff0b4ecdd08bfba75841b7 Mon Sep 17 00:00:00 2001
From: "REDMOND\\chiechan" <chiechan@microsoft.com>
Date: Wed, 21 Mar 2018 20:41:04 -0700
Subject: [PATCH 26/28] added support to focus on whole container in split
 button for contextual menus

---
 .../src/components/ContextualMenu/ContextualMenu.tsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
index 420f38f48248ee..777311398f36ca 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
@@ -94,6 +94,8 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
   private readonly _navigationIdleDelay: number = 250 /* ms */;
   private _scrollIdleTimeoutId: number | undefined;
 
+  private _splitButtonContainers: Map<string, HTMLDivElement>;
+
   private _adjustedFocusZoneProps: IFocusZoneProps;
 
   constructor(props: IContextualMenuProps) {
@@ -139,6 +141,7 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
   // Invoked once, only on the client (not on the server), immediately after the initial rendering occurs.
   public componentDidMount() {
     this._events.on(this._targetWindow, 'resize', this.dismiss);
+    this._splitButtonContainers = new Map();
     if (this.props.onMenuOpened) {
       this.props.onMenuOpened(this.props);
     }
@@ -589,6 +592,9 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
 
     return (
       <div
+        ref={ (el: HTMLDivElement) =>
+          this._splitButtonContainers.set(item.key, el)
+        }
         role={ 'button' }
         aria-labelledby={ item.ariaLabel }
         className={ classNames.splitContainer }
@@ -891,10 +897,14 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
   private _onItemSubMenuExpand(item: IContextualMenuItem, target: HTMLElement) {
     if (this.state.expandedMenuItemKey !== item.key) {
 
-      // TODO need to focus the container so that when the menu closes the previous focused item would be the container
       if (this.state.expandedMenuItemKey) {
         this._onSubMenuDismiss();
       }
+
+      const el = this._splitButtonContainers.get(item.key);
+      if (el) {
+        el.focus();
+      }
       this.setState({
         expandedMenuItemKey: item.key,
         submenuTarget: target

From 843d75883bbab40f75cfa88acefef55937668338 Mon Sep 17 00:00:00 2001
From: "REDMOND\\chiechan" <chiechan@microsoft.com>
Date: Wed, 21 Mar 2018 21:08:58 -0700
Subject: [PATCH 27/28] added comment

---
 .../src/components/ContextualMenu/ContextualMenu.tsx             | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
index 777311398f36ca..4f531f196a895e 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
@@ -901,6 +901,7 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
         this._onSubMenuDismiss();
       }
 
+      // focus the container so when we close the menu, we focus on the split button container.
       const el = this._splitButtonContainers.get(item.key);
       if (el) {
         el.focus();

From 9186034508c618bd1c686ce1d9a5466d37277ea3 Mon Sep 17 00:00:00 2001
From: "REDMOND\\chiechan" <chiechan@microsoft.com>
Date: Thu, 22 Mar 2018 17:35:30 -0700
Subject: [PATCH 28/28] fixed styling issues with buttons

---
 .../src/components/Button/BaseButton.tsx          |  2 +-
 .../Button/SplitButton/SplitButton.styles.ts      | 15 +++++----------
 2 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx b/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
index 8d8c68afd9e6ea..0237c56493ecc5 100644
--- a/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
@@ -563,7 +563,7 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
     if (this.props.menuTriggerKeyCode) {
       return ev.which === this.props.menuTriggerKeyCode;
     } else {
-      return ev.which === KeyCodes.down && ev.altKey;
+      return ev.which === KeyCodes.down && (ev.altKey || ev.metaKey);
     }
   }
 
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 605c9ef5de02f3..c596d1ee0fde60 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
@@ -20,24 +20,20 @@ export const getStyles = memoizeFunction((
 
   const splitButtonStyles: IButtonStyles = {
     splitButtonContainer: [
-      getFocusStyle(theme, -1, 'relative', buttonHighContrastFocus),
+      getFocusStyle(theme, 0, 'relative', buttonHighContrastFocus),
       {
-        position: 'relative',
-        display: 'inline-block',
-        border: '1px solid transparent'
+        display: 'inline-block'
       }
     ],
     splitButtonContainerFocused: {
       outline: 'none!important',
-      border: '1px solid'
     },
-    splitButtonMenuButton: [
-      getFocusStyle(theme, -1, 'relative', buttonHighContrastFocus),
+    splitButtonMenuButton:
       {
         padding: 6,
         height: 'auto',
         boxSizing: 'border-box',
-        border: '1px solid transparent',
+        border: 0,
         borderRadius: 0,
         outline: 'transparent',
         userSelect: 'none',
@@ -48,8 +44,7 @@ export const getStyles = memoizeFunction((
         verticalAlign: 'top',
         width: 32,
         marginLeft: -1
-      }
-    ],
+      },
 
     splitButtonDivider: {
       position: 'absolute',