From ec07ae54deb6463a0b3ff81c3375ba643c7eec2d Mon Sep 17 00:00:00 2001
From: David Zearing <dzearing@microsoft.com>
Date: Fri, 19 Aug 2016 10:08:00 -0700
Subject: [PATCH] Adding focus to command bar contract.

---
 src/components/CommandBar/CommandBar.Props.ts |  7 +++++++
 src/components/CommandBar/CommandBar.tsx      | 11 ++++++++---
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/CommandBar/CommandBar.Props.ts b/src/components/CommandBar/CommandBar.Props.ts
index 5cf81c28757e7..33b04d32f82bf 100644
--- a/src/components/CommandBar/CommandBar.Props.ts
+++ b/src/components/CommandBar/CommandBar.Props.ts
@@ -1,6 +1,13 @@
 import * as React from 'react';
 import { IContextualMenuItem } from '../ContextualMenu/index';
 
+export interface ICommandBar {
+  /**
+   * Sets focus to the active command in the list.
+   */
+  focus(): void;
+}
+
 export interface ICommandBarProps extends React.HTMLProps<HTMLDivElement> {
   /**
    * Whether or not the search box is visible
diff --git a/src/components/CommandBar/CommandBar.tsx b/src/components/CommandBar/CommandBar.tsx
index f22985e1460a2..2cb556f9ce265 100644
--- a/src/components/CommandBar/CommandBar.tsx
+++ b/src/components/CommandBar/CommandBar.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ICommandBarProps } from './CommandBar.Props';
+import { ICommandBar, ICommandBarProps } from './CommandBar.Props';
 import { FocusZone, FocusZoneDirection } from '../../FocusZone';
 import { ContextualMenu, IContextualMenuItem } from '../../ContextualMenu';
 import { EventGroup } from '../../utilities/eventGroup/EventGroup';
@@ -21,7 +21,7 @@ export interface ICommandBarState {
   renderedFarItems?: IContextualMenuItem[];
 }
 
-export class CommandBar extends React.Component<ICommandBarProps, ICommandBarState> {
+export class CommandBar extends React.Component<ICommandBarProps, ICommandBarState> implements ICommandBar {
   public static defaultProps = {
     items: [],
     overflowItems: [],
@@ -34,6 +34,7 @@ export class CommandBar extends React.Component<ICommandBarProps, ICommandBarSta
     farCommandSurface: HTMLElement;
     commandBarRegion: HTMLElement;
     searchSurface: HTMLElement;
+    focusZone: FocusZone;
   };
 
   private _id: string;
@@ -99,7 +100,7 @@ export class CommandBar extends React.Component<ICommandBarProps, ICommandBarSta
     return (
       <div className={ css('ms-CommandBar', className) } ref='commandBarRegion'>
         { searchBox }
-        <FocusZone direction={ FocusZoneDirection.horizontal } rootProps={ { role: 'menubar' } }>
+        <FocusZone ref='focusZone' direction={ FocusZoneDirection.horizontal } rootProps={ { role: 'menubar' } }>
           <div className='ms-CommandBar-primaryCommands' ref='commandSurface'>
             { renderedItems.map((item, index) => (
               this._renderItemInCommandBar(item, index, expandedMenuItemKey)
@@ -139,6 +140,10 @@ export class CommandBar extends React.Component<ICommandBarProps, ICommandBarSta
     );
   }
 
+  public focus() {
+    this.refs.focusZone.focus();
+  }
+
   private _renderItemInCommandBar(item, index, expandedMenuItemKey, isFarItem?: boolean) {
     const itemKey = item.key || index;
     const className = item.onClick ? 'ms-CommandBarItem-link' : 'ms-CommandBarItem-text';