FocusZone now takes in rootProps

src/components/Checkbox/Checkbox.Props.ts

@@ -49,9 +49,10 @@ export interface ICheckboxProps extends React.Props<Checkbox> {
   onChange?: (ev?: React.FormEvent, isChecked?: boolean) => void;
 
   /**
-   * Input props that will be mixed into the input element, *before* other props are applied. This allows you to extend
-   * the input element with additional attributes, such as data-automation-id needed for automation. Note that if you
-   * provide, for example, "disabled" as well as "inputProps.disabled", the former will take precedence of the later.
+   * Optional input props that will be mixed into the input element, *before* other props are applied. This allows
+   * you to extend the input element with additional attributes, such as data-automation-id needed for automation.
+   * Note that if you provide, for example, "disabled" as well as "inputProps.disabled", the former will take
+   * precedence over the later.
    */
   inputProps?: React.Props<HTMLInputElement>;
 }

src/components/CommandBar/CommandBar.tsx

@@ -100,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 direction={ FocusZoneDirection.horizontal } rootProps={ { role: 'menubar' } }>
           <div className='ms-CommandBar-primaryCommands' ref='commandSurface'>
             { renderedItems.map((item, index) => (
               this._renderItemInCommandBar(item, index, expandedMenuItemKey)

src/components/ContextualMenu/ContextualMenu.tsx

@@ -187,13 +187,11 @@ export class ContextualMenu extends React.Component<IContextualMenuProps, IConte
         <div ref={ (host: HTMLDivElement) => this._host = host} id={ id } className={ css('ms-ContextualMenu-container', className) }>
           { (items && items.length) ? (
             <FocusZone
+              className={ 'ms-ContextualMenu is-open' }
               direction={ FocusZoneDirection.vertical }
               ariaLabelledBy={ labelElementId }
               ref={ (focusZone) => this._focusZone = focusZone }
-              rootProps={ {
-                className: 'ms-ContextualMenu is-open',
-                role: 'menu'
-              } }
+              rootProps={ { role: 'menu' } }
               >
               <ul className='ms-ContextualMenu-list is-open' onKeyDown={ this._onKeyDown }>
                 { items.map((item, index) => (

src/components/FocusZone/FocusZone.Props.ts

@@ -1,7 +1,23 @@
 import * as React from 'react';
 import { FocusZone } from './FocusZone';
 
+/**
+ * FocusZone component class interface.
+ */
+export interface IFocusZone {
+  /** Sets focus to the checkbox. */
+  focus(): void;
+}
+
+/**
+ * FocusZone component props.
+ */
 export interface IFocusZoneProps extends React.Props<FocusZone> {
+  /**
+   * Additional class name to provide on the root element, in addition to the ms-FocusZone class.
+   */
+  className?: string;
+
   /**
    * Defines which arrows to react to.
    * @default FocusZoneDirection.bidriectional
@@ -39,14 +55,10 @@ export interface IFocusZoneProps extends React.Props<FocusZone> {
   onActiveElementChanged?: (element?: HTMLElement, ev?: React.FocusEvent) => void;
 
   /**
-   * If provided, additional class name to provide on the root element.
-   */
-  className?: string;
-
-  /**
-   * If provided, HTMLProps which will be mixed in onto the root element emitted by the FocusZone, before
-   * other props are applied. This allows you to extend the root element with additional attributes, such as
-   * data-automation-id needed for automation.
+   * Optional DIV props that will be mixed into the root element, *before* other props are applied. This allows you
+   * to extend the root element with additional attributes, such as data-automation-id needed for automation. Note
+   * that if you provide, for example, "ariaLabelledBy" as well as "rootProps.ariaLabelledBy", the former will take
+   * precedence over the later.
    */
   rootProps?: React.HTMLProps<HTMLDivElement>;
 }

src/components/FocusZone/FocusZone.tsx

@@ -1,5 +1,9 @@
 import * as React from 'react';
-import { IFocusZoneProps, FocusZoneDirection } from './FocusZone.Props';
+import {
+  FocusZoneDirection,
+  IFocusZone,
+  IFocusZoneProps
+} from './FocusZone.Props';
 import { EventGroup } from '../../utilities/eventGroup/EventGroup';
 import { KeyCodes } from '../../utilities/KeyCodes';
 import { getRTL } from '../../utilities/rtl';
@@ -26,7 +30,7 @@ interface IPoint {
   top: number;
 }
 
-export class FocusZone extends React.Component<IFocusZoneProps, {}> {
+export class FocusZone extends React.Component<IFocusZoneProps, {}> implements IFocusZone {
 
   public static defaultProps: IFocusZoneProps = {
     isCircularNavigation: false,
@@ -90,7 +94,7 @@ export class FocusZone extends React.Component<IFocusZoneProps, {}> {
     return (
       <div
         { ...rootProps }
-        className={ css('ms-FocusZone', className ) }
+        className={ css('ms-FocusZone', className) }
         ref='root'
         data-focuszone-id={ this._id }
         aria-labelledby={ ariaLabelledBy }