From 9f877be3a023b0e7b15f82f92666d396cb59f0c5 Mon Sep 17 00:00:00 2001
From: Rebecca Ballantyne <rebeba@microsoft.com>
Date: Tue, 1 May 2018 13:44:06 -0700
Subject: [PATCH 01/16] Best behavior for keyboarding

---
 .../src/components/ContextualMenu/ContextualMenu.tsx        | 6 ++----
 1 file changed, 2 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 8a2f460343a583..3fb5929ed10c66 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
@@ -278,13 +278,10 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
         >
           <div
             role='menu'
-            aria-label={ ariaLabel }
-            aria-labelledby={ labelElementId }
             style={ contextMenuStyle }
             ref={ (host: HTMLDivElement) => this._host = host }
             id={ id }
             className={ this._classNames.container }
-            tabIndex={ 0 }
             onKeyDown={ this._onMenuKeyDown }
           >
             { title && <div className={ this._classNames.title } role='heading' aria-level={ 1 }> { title } </div> }
@@ -296,9 +293,10 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
                 handleTabKey={ FocusZoneTabbableElements.all }
               >
                 <ul
-                  role='presentation'
                   className={ this._classNames.list }
                   onKeyDown={ this._onKeyDown }
+                  aria-label={ ariaLabel }
+                  aria-labelledby={ labelElementId }
                 >
                   { items.map((item, index) => {
                     const menuItem = this._renderMenuItem(item, index, indexCorrection, totalItemCount, hasCheckmarks, hasIcons);

From 2947a4dc17d798e7c99d944de919b02a33a8216c Mon Sep 17 00:00:00 2001
From: Rebecca Ballantyne <rebeba@microsoft.com>
Date: Tue, 1 May 2018 14:06:29 -0700
Subject: [PATCH 02/16] Adds in new parameter, and basics of different aria
 roles

---
 .../src/components/ContextualMenu/ContextualMenu.tsx      | 8 +++++---
 .../src/components/ContextualMenu/ContextualMenu.types.ts | 6 ++++++
 .../examples/ContextualMenu.Basic.Example.tsx             | 2 ++
 3 files changed, 13 insertions(+), 3 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 3fb5929ed10c66..b781afc9e91de1 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
@@ -194,6 +194,7 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
       useTargetAsMinWidth,
       directionalHintFixed,
       shouldFocusOnMount,
+      shouldFocusOnContainer,
       title,
       theme,
       calloutProps,
@@ -277,11 +278,14 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
           hidden={ this.props.hidden }
         >
           <div
-            role='menu'
+            role={ shouldFocusOnContainer ? 'menu' : 'group' }
+            aria-label={ ariaLabel }
+            aria-labelledby={ labelElementId }
             style={ contextMenuStyle }
             ref={ (host: HTMLDivElement) => this._host = host }
             id={ id }
             className={ this._classNames.container }
+            tabIndex={ shouldFocusOnContainer ? 0 : undefined }
             onKeyDown={ this._onMenuKeyDown }
           >
             { title && <div className={ this._classNames.title } role='heading' aria-level={ 1 }> { title } </div> }
@@ -295,8 +299,6 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
                 <ul
                   className={ this._classNames.list }
                   onKeyDown={ this._onKeyDown }
-                  aria-label={ ariaLabel }
-                  aria-labelledby={ labelElementId }
                 >
                   { items.map((item, index) => {
                     const menuItem = this._renderMenuItem(item, index, indexCorrection, totalItemCount, hasCheckmarks, hasIcons);
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 962cf17290b675..ab279463d21256 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
@@ -127,6 +127,12 @@ export interface IContextualMenuProps extends React.Props<ContextualMenu>, IWith
    */
   shouldFocusOnMount?: boolean;
 
+  /**
+   * Whether to focus on the contextual menu container (as opposed to the first menu item).
+   * @default false
+   */
+  shouldFocusOnContainer?: boolean;
+
   /**
    * Callback when the ContextualMenu tries to close. If dismissAll is true then all
    * submenus will be dismissed.
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Basic.Example.tsx
index b3f9ac39554ac3..849b8a3909de19 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Basic.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Basic.Example.tsx
@@ -20,6 +20,8 @@ export class ContextualMenuBasicExample extends React.Component {
           text='Click for ContextualMenu'
           menuProps={ {
             shouldFocusOnMount: true,
+            ariaLabel: 'Hi there Rebecca Ballantyne',
+            shouldFocusOnContainer: true,
             items: [
               {
                 key: 'newItem',

From 3e99a2502dc791f570791f9dc00ef5ee55f982b3 Mon Sep 17 00:00:00 2001
From: Rebecca Ballantyne <rebeba@microsoft.com>
Date: Tue, 1 May 2018 14:11:50 -0700
Subject: [PATCH 03/16] Removing unnecessary group role for when focus moves to
 first menu item

---
 .../src/components/ContextualMenu/ContextualMenu.tsx            | 2 +-
 .../ContextualMenu/examples/ContextualMenu.Basic.Example.tsx    | 2 +-
 2 files changed, 2 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 b781afc9e91de1..27bc6f69c8e249 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
@@ -278,7 +278,7 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
           hidden={ this.props.hidden }
         >
           <div
-            role={ shouldFocusOnContainer ? 'menu' : 'group' }
+            role={ shouldFocusOnContainer ? 'menu' : undefined }
             aria-label={ ariaLabel }
             aria-labelledby={ labelElementId }
             style={ contextMenuStyle }
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Basic.Example.tsx
index 849b8a3909de19..fa841c9ac0ac5d 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Basic.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Basic.Example.tsx
@@ -21,7 +21,7 @@ export class ContextualMenuBasicExample extends React.Component {
           menuProps={ {
             shouldFocusOnMount: true,
             ariaLabel: 'Hi there Rebecca Ballantyne',
-            shouldFocusOnContainer: true,
+            shouldFocusOnContainer: false,
             items: [
               {
                 key: 'newItem',

From 8432116a7a316d558bb52f2a7ad0adb247212785 Mon Sep 17 00:00:00 2001
From: Rebecca Ballantyne <rebeba@microsoft.com>
Date: Tue, 1 May 2018 15:37:14 -0700
Subject: [PATCH 04/16] Adding in differences between keyboard and mouse/click
 action in BaseButton.tsx

---
 .../src/components/Button/BaseButton.tsx      | 20 ++++++++++++++++---
 .../ContextualMenu/ContextualMenu.types.ts    |  2 +-
 .../examples/ContextualMenu.Basic.Example.tsx |  1 -
 3 files changed, 18 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 5c350017e24df3..c8221aedb77260 100644
--- a/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
@@ -568,13 +568,18 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
       this.props.onKeyDown(ev);
     }
 
-    if (!ev.defaultPrevented &&
-      this._isValidMenuOpenKey(ev)) {
+    if (!ev.defaultPrevented && this._isValidMenuOpenKey(ev)) {
       const { onMenuClick } = this.props;
       if (onMenuClick) {
         onMenuClick(ev, this);
       }
 
+      const menuProps = this.props.menuProps;
+      if (menuProps) {
+        menuProps.shouldFocusOnContainer = false;
+      }
+      this.setState({ menuProps: menuProps });
+
       this._onToggleMenu();
       ev.preventDefault();
       ev.stopPropagation();
@@ -590,7 +595,11 @@ 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 || ev.metaKey);
+      if (this._isSplitButton) {
+        return ev.which === KeyCodes.down && (ev.altKey || ev.metaKey);
+      } else {
+        return ev.which === KeyCodes.enter;
+      }
     }
   }
 
@@ -601,6 +610,11 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
     }
 
     if (!ev.defaultPrevented) {
+      const menuProps = this.props.menuProps;
+      if (menuProps) {
+        menuProps.shouldFocusOnContainer = true;
+      }
+      this.setState({ menuProps: menuProps });
       this._onToggleMenu();
       ev.preventDefault();
       ev.stopPropagation();
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 ab279463d21256..31524628c2e318 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
@@ -129,7 +129,7 @@ export interface IContextualMenuProps extends React.Props<ContextualMenu>, IWith
 
   /**
    * Whether to focus on the contextual menu container (as opposed to the first menu item).
-   * @default false
+   * @default null
    */
   shouldFocusOnContainer?: boolean;
 
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Basic.Example.tsx
index fa841c9ac0ac5d..601a7ac08b75f2 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Basic.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Basic.Example.tsx
@@ -21,7 +21,6 @@ export class ContextualMenuBasicExample extends React.Component {
           menuProps={ {
             shouldFocusOnMount: true,
             ariaLabel: 'Hi there Rebecca Ballantyne',
-            shouldFocusOnContainer: false,
             items: [
               {
                 key: 'newItem',

From f29bfd4cb5edd7da9359b97f90415b56e9d48715 Mon Sep 17 00:00:00 2001
From: Rebecca Ballantyne <rebeba@microsoft.com>
Date: Wed, 2 May 2018 13:55:40 -0700
Subject: [PATCH 05/16] Fixes issue with Edge + Narrator combination

---
 .../src/components/Button/BaseButton.tsx       |  5 ++++-
 .../ContextualMenu/ContextualMenu.tsx          | 18 +++++++++++++++++-
 2 files changed, 21 insertions(+), 2 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 c8221aedb77260..9d8fcb59b08c56 100644
--- a/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
@@ -612,7 +612,10 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
     if (!ev.defaultPrevented) {
       const menuProps = this.props.menuProps;
       if (menuProps) {
-        menuProps.shouldFocusOnContainer = true;
+        // When Edge + Narrator are used together, pressing "Enter" on a button fires this method and not
+        // _onMenuKeyDown. Checking ev.nativeEvent.detail differentiates between a real click event and a
+        // keypress event.
+        menuProps.shouldFocusOnContainer = (ev.nativeEvent.detail !== 0);
       }
       this.setState({ menuProps: menuProps });
       this._onToggleMenu();
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 27bc6f69c8e249..cd3b34b8d76750 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
@@ -35,6 +35,7 @@ import { ContextualMenuSplitButton } from './ContextualMenuSplitButton';
 
 export interface IContextualMenuState {
   expandedMenuItemKey?: string;
+  expandedByMouseClick?: boolean;
   dismissedMenuItemKey?: string;
   contextualMenuItems?: IContextualMenuItem[];
   contextualMenuTarget?: Element;
@@ -786,6 +787,9 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
       ev.stopPropagation();
       this._enterTimerId = this._async.setTimeout(() => {
         targetElement.focus();
+        this.setState({
+          expandedByMouseClick: true
+        });
         this._onItemSubMenuExpand(item, targetElement);
         this._enterTimerId = undefined;
       }, this._navigationIdleDelay);
@@ -823,6 +827,9 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
       if (item.key === this.state.expandedMenuItemKey) { // This has an expanded sub menu. collapse it.
         this._onSubMenuDismiss(ev);
       } else { // This has a collapsed sub menu. Expand it.
+        this.setState({
+          expandedByMouseClick: true
+        });
         this._onItemSubMenuExpand(item, target);
       }
     }
@@ -852,9 +859,17 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
   }
 
   private _onItemKeyDown = (item: any, ev: React.KeyboardEvent<HTMLElement>): void => {
-    const openKey = getRTL() ? KeyCodes.left : KeyCodes.right;
+    let openKey;
+    if (item.split) {
+      openKey = getRTL() ? KeyCodes.left : KeyCodes.right;
+    } else {
+      openKey = KeyCodes.enter;
+    }
 
     if (ev.which === openKey && !item.disabled) {
+      this.setState({
+        expandedByMouseClick: false
+      });
       this._onItemSubMenuExpand(item, ev.currentTarget as HTMLElement);
       ev.preventDefault();
     }
@@ -889,6 +904,7 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
         isSubMenu: true,
         id: this.state.subMenuId,
         shouldFocusOnMount: true,
+        shouldFocusOnContainer: this.state.expandedByMouseClick,
         directionalHint: getRTL() ? DirectionalHint.leftTopEdge : DirectionalHint.rightTopEdge,
         className: this.props.className,
         gapSpace: 0,

From fde588513859178f06341b5f58eee21f78b6e963 Mon Sep 17 00:00:00 2001
From: Rebecca Ballantyne <rebeba@microsoft.com>
Date: Wed, 2 May 2018 13:57:54 -0700
Subject: [PATCH 06/16] Fixing up comment

---
 .../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 9d8fcb59b08c56..63529637e22b5c 100644
--- a/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
@@ -612,9 +612,9 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
     if (!ev.defaultPrevented) {
       const menuProps = this.props.menuProps;
       if (menuProps) {
-        // When Edge + Narrator are used together, pressing "Enter" on a button fires this method and not
-        // _onMenuKeyDown. Checking ev.nativeEvent.detail differentiates between a real click event and a
-        // keypress event.
+        // When Edge + Narrator are used together (regardless of if the button is in a form or not), pressing
+        // "Enter" fires this method and not _onMenuKeyDown. Checking ev.nativeEvent.detail differentiates
+        // between a real click event and a keypress event.
         menuProps.shouldFocusOnContainer = (ev.nativeEvent.detail !== 0);
       }
       this.setState({ menuProps: menuProps });

From 19e4d27279ff47c2cb646ea3b4ae91557c6ce4e9 Mon Sep 17 00:00:00 2001
From: Rebecca Ballantyne <rebeba@microsoft.com>
Date: Wed, 2 May 2018 14:16:56 -0700
Subject: [PATCH 07/16] Moving fix for Edge + Narrator to ContextualMenu.tsx

---
 .../src/components/ContextualMenu/ContextualMenu.tsx            | 2 +-
 1 file changed, 1 insertion(+), 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 cd3b34b8d76750..541d737b6fa0d6 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
@@ -828,7 +828,7 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
         this._onSubMenuDismiss(ev);
       } else { // This has a collapsed sub menu. Expand it.
         this.setState({
-          expandedByMouseClick: true
+          expandedByMouseClick: (ev.nativeEvent.detail !== 0)
         });
         this._onItemSubMenuExpand(item, target);
       }

From fd759fbce33ddbcab52c2dac46b77a85cd37f991 Mon Sep 17 00:00:00 2001
From: Rebecca Ballantyne <rebeba@microsoft.com>
Date: Wed, 2 May 2018 14:23:14 -0700
Subject: [PATCH 08/16] Removing mistaken commit for testing

---
 .../ContextualMenu/examples/ContextualMenu.Basic.Example.tsx     | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Basic.Example.tsx
index 601a7ac08b75f2..b3f9ac39554ac3 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Basic.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Basic.Example.tsx
@@ -20,7 +20,6 @@ export class ContextualMenuBasicExample extends React.Component {
           text='Click for ContextualMenu'
           menuProps={ {
             shouldFocusOnMount: true,
-            ariaLabel: 'Hi there Rebecca Ballantyne',
             items: [
               {
                 key: 'newItem',

From 2205afcca5f23efeca0c1566c8837c92df20f654 Mon Sep 17 00:00:00 2001
From: Rebecca Ballantyne <rebeba@microsoft.com>
Date: Wed, 2 May 2018 14:23:53 -0700
Subject: [PATCH 09/16] Rush change file

---
 ...rebeba-contextual-menu-focus_2018-05-02-21-23.json | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 common/changes/office-ui-fabric-react/rebeba-contextual-menu-focus_2018-05-02-21-23.json

diff --git a/common/changes/office-ui-fabric-react/rebeba-contextual-menu-focus_2018-05-02-21-23.json b/common/changes/office-ui-fabric-react/rebeba-contextual-menu-focus_2018-05-02-21-23.json
new file mode 100644
index 00000000000000..945f84608003aa
--- /dev/null
+++ b/common/changes/office-ui-fabric-react/rebeba-contextual-menu-focus_2018-05-02-21-23.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Fixes issue where focus isn't displayed correctly on the contextual menu",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "rebeba@microsoft.com"
+}
\ No newline at end of file

From a6a7095ce826ed79798d509b0cb9c0455aa65e38 Mon Sep 17 00:00:00 2001
From: Rebecca Ballantyne <rebeba@microsoft.com>
Date: Wed, 2 May 2018 18:24:58 -0700
Subject: [PATCH 10/16] Avoid modifying state directly

---
 .../src/components/Button/BaseButton.tsx      | 34 +++++++------------
 1 file changed, 12 insertions(+), 22 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 63529637e22b5c..9e74019982e505 100644
--- a/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
@@ -243,7 +243,7 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
           { onRenderAriaDescription(props, this._onRenderAriaDescription) }
           { onRenderChildren(props, this._onRenderChildren) }
           { !this._isSplitButton && (menuProps || menuIconProps || this.props.onRenderMenuIcon) && onRenderMenuIcon(this.props, this._onRenderMenuIcon) }
-          { this.state.menuProps && !this.state.menuProps.doNotLayer && onRenderMenu(menuProps, this._onRenderMenu) }
+          { this.state.menuProps && !this.state.menuProps.doNotLayer && onRenderMenu(this.state.menuProps, this._onRenderMenu) }
         </div>
       </Tag>
     );
@@ -416,9 +416,9 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
     this.setState({ menuProps: menuProps });
   }
 
-  private _openMenu = (): void => {
+  private _openMenu = (shouldFocusOnContainer?: boolean): void => {
     if (this.props.menuProps) {
-      const menuProps = this.props.menuProps;
+      const menuProps = {...this.props.menuProps, shouldFocusOnContainer: shouldFocusOnContainer };
       if (this.props.persistMenu) {
         menuProps.hidden = false;
       }
@@ -426,16 +426,16 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
     }
   }
 
-  private _onToggleMenu = (): void => {
+  private _onToggleMenu = (shouldFocusOnContainer: boolean): void => {
     if (this._splitButtonContainer.current) {
       this._splitButtonContainer.current.focus();
     }
 
     const currentMenuProps = this.state.menuProps;
     if (this.props.persistMenu) {
-      currentMenuProps && currentMenuProps.hidden ? this._openMenu() : this._dismissMenu();
+      currentMenuProps && currentMenuProps.hidden ? this._openMenu(shouldFocusOnContainer) : this._dismissMenu();
     } else {
-      currentMenuProps ? this._dismissMenu() : this._openMenu();
+      currentMenuProps ? this._dismissMenu() : this._openMenu(shouldFocusOnContainer);
     }
   }
 
@@ -574,13 +574,7 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
         onMenuClick(ev, this);
       }
 
-      const menuProps = this.props.menuProps;
-      if (menuProps) {
-        menuProps.shouldFocusOnContainer = false;
-      }
-      this.setState({ menuProps: menuProps });
-
-      this._onToggleMenu();
+      this._onToggleMenu(false);
       ev.preventDefault();
       ev.stopPropagation();
     }
@@ -610,15 +604,11 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
     }
 
     if (!ev.defaultPrevented) {
-      const menuProps = this.props.menuProps;
-      if (menuProps) {
-        // When Edge + Narrator are used together (regardless of if the button is in a form or not), pressing
-        // "Enter" fires this method and not _onMenuKeyDown. Checking ev.nativeEvent.detail differentiates
-        // between a real click event and a keypress event.
-        menuProps.shouldFocusOnContainer = (ev.nativeEvent.detail !== 0);
-      }
-      this.setState({ menuProps: menuProps });
-      this._onToggleMenu();
+      // When Edge + Narrator are used together (regardless of if the button is in a form or not), pressing
+      // "Enter" fires this method and not _onMenuKeyDown. Checking ev.nativeEvent.detail differentiates
+      // between a real click event and a keypress event.
+      const shouldFocusOnContainer = ev.nativeEvent.detail !== 0;
+      this._onToggleMenu(shouldFocusOnContainer);
       ev.preventDefault();
       ev.stopPropagation();
     }

From c92976850ca42a18c35e1a43a9861f4565990173 Mon Sep 17 00:00:00 2001
From: Rebecca Ballantyne <rebeba@microsoft.com>
Date: Wed, 2 May 2018 18:32:04 -0700
Subject: [PATCH 11/16] moving prop to proper place

---
 .../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 9e74019982e505..53e3ae1ef92d60 100644
--- a/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
@@ -243,7 +243,7 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
           { onRenderAriaDescription(props, this._onRenderAriaDescription) }
           { onRenderChildren(props, this._onRenderChildren) }
           { !this._isSplitButton && (menuProps || menuIconProps || this.props.onRenderMenuIcon) && onRenderMenuIcon(this.props, this._onRenderMenuIcon) }
-          { this.state.menuProps && !this.state.menuProps.doNotLayer && onRenderMenu(this.state.menuProps, this._onRenderMenu) }
+          { this.state.menuProps && !this.state.menuProps.doNotLayer && onRenderMenu(menuProps, this._onRenderMenu) }
         </div>
       </Tag>
     );
@@ -399,6 +399,7 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
         id={ this._labelId + '-menu' }
         directionalHint={ DirectionalHint.bottomLeftEdge }
         { ...menuProps }
+        shouldFocusOnContainer={ this.state.menuProps ? this.state.menuProps.shouldFocusOnContainer : undefined }
         className={ 'ms-BaseButton-menuhost ' + menuProps.className }
         target={ this._isSplitButton ? this._splitButtonContainer.current : this._buttonElement.current }
         labelElementId={ this._labelId }

From 34c3bb29483106869b17df6a9d7ae6f671bca1cf Mon Sep 17 00:00:00 2001
From: Rebecca Ballantyne <rebeba@microsoft.com>
Date: Thu, 3 May 2018 11:45:38 -0700
Subject: [PATCH 12/16] Adding in comment in ContextualMenu.tsx

---
 .../src/components/ContextualMenu/ContextualMenu.tsx           | 3 +++
 1 file changed, 3 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 541d737b6fa0d6..94578b62e1e992 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
@@ -828,6 +828,9 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
         this._onSubMenuDismiss(ev);
       } else { // This has a collapsed sub menu. Expand it.
         this.setState({
+          // When Edge + Narrator are used together (regardless of if the button is in a form or not), pressing
+          // "Enter" fires this method and not _onMenuKeyDown. Checking ev.nativeEvent.detail differentiates
+          // between a real click event and a keypress event.
           expandedByMouseClick: (ev.nativeEvent.detail !== 0)
         });
         this._onItemSubMenuExpand(item, target);

From 3ef3590b232ac2219bbee6fdde4ad407934ba265 Mon Sep 17 00:00:00 2001
From: Rebecca Ballantyne <rebeba@microsoft.com>
Date: Thu, 3 May 2018 14:29:15 -0700
Subject: [PATCH 13/16] Updating package.json bundle size

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

diff --git a/scripts/package.json b/scripts/package.json
index a7bd473e66e63f..36c1811fac23c2 100644
--- a/scripts/package.json
+++ b/scripts/package.json
@@ -50,7 +50,7 @@
   "bundlesize": [
     {
       "path": "../apps/test-bundle-button/dist/test-bundle-button.min.js",
-      "maxSize": "47.6 kB"
+      "maxSize": "49.7 kB"
     }
   ]
 }
\ No newline at end of file

From 0fe31a7e3be8ce36bdbdac435e225a16264ae686 Mon Sep 17 00:00:00 2001
From: Rebecca Ballantyne <rebeba@microsoft.com>
Date: Mon, 7 May 2018 14:11:13 -0700
Subject: [PATCH 14/16] Fixing accidental removal of path

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

diff --git a/scripts/package.json b/scripts/package.json
index 358c06d352e5f8..9b4a76c8ab9273 100644
--- a/scripts/package.json
+++ b/scripts/package.json
@@ -49,6 +49,7 @@
   },
   "bundlesize": [
     {
+      "path": "../apps/test-bundle-button/dist/test-bundle-button.min.js",
       "maxSize": "51.0 kB"
     }
   ]

From 222a46bf19e27d17ca35d78da3d52e51404e3334 Mon Sep 17 00:00:00 2001
From: Rebecca Ballantyne <rebeba@microsoft.com>
Date: Mon, 7 May 2018 14:14:40 -0700
Subject: [PATCH 15/16] Deleting old rush change file, should be minor, not
 patch

---
 ...rebeba-contextual-menu-focus_2018-05-02-21-23.json | 11 -----------
 1 file changed, 11 deletions(-)
 delete mode 100644 common/changes/office-ui-fabric-react/rebeba-contextual-menu-focus_2018-05-02-21-23.json

diff --git a/common/changes/office-ui-fabric-react/rebeba-contextual-menu-focus_2018-05-02-21-23.json b/common/changes/office-ui-fabric-react/rebeba-contextual-menu-focus_2018-05-02-21-23.json
deleted file mode 100644
index 945f84608003aa..00000000000000
--- a/common/changes/office-ui-fabric-react/rebeba-contextual-menu-focus_2018-05-02-21-23.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "changes": [
-    {
-      "packageName": "office-ui-fabric-react",
-      "comment": "Fixes issue where focus isn't displayed correctly on the contextual menu",
-      "type": "patch"
-    }
-  ],
-  "packageName": "office-ui-fabric-react",
-  "email": "rebeba@microsoft.com"
-}
\ No newline at end of file

From 0a8c8194fa63beea8121a8dd29d9c7c38738e7bc Mon Sep 17 00:00:00 2001
From: Rebecca Ballantyne <rebeba@microsoft.com>
Date: Mon, 7 May 2018 14:17:57 -0700
Subject: [PATCH 16/16] New rush change file for minor change

---
 ...rebeba-contextual-menu-focus_2018-05-07-21-16.json | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 common/changes/office-ui-fabric-react/rebeba-contextual-menu-focus_2018-05-07-21-16.json

diff --git a/common/changes/office-ui-fabric-react/rebeba-contextual-menu-focus_2018-05-07-21-16.json b/common/changes/office-ui-fabric-react/rebeba-contextual-menu-focus_2018-05-07-21-16.json
new file mode 100644
index 00000000000000..8165a281a87228
--- /dev/null
+++ b/common/changes/office-ui-fabric-react/rebeba-contextual-menu-focus_2018-05-07-21-16.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Fixes issue where focus isn't displayed correctly on the contextual mneu",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "rebeba@microsoft.com"
+}
\ No newline at end of file