Added initial focus to callout

src/components/Callout/Callout.Props.ts

@@ -59,6 +59,15 @@ export interface ICalloutProps extends React.Props<Callout>, IPositionProps {
    * If true do not render on a new layer. If false render on a new layer.
    */
   doNotLayer?: boolean;
+
+  /**
+   * If true then the callout will attempt to focus the first focusable element that it contains.
+   * If it doesn't find an element, no focus will be set and the method will return false.
+   * This means that it's the contents responsibility to either set focus or have
+   * focusable items.
+   * @returns True if focus was set, false if it was not.
+   */
+  setInitialFocus?: boolean;
 }
 
 export interface ILink {

src/components/Callout/Callout.tsx

@@ -5,6 +5,8 @@ import { Layer } from '../../Layer';
 import { css } from '../../utilities/css';
 import { EventGroup } from '../../utilities/eventGroup/EventGroup';
 import { getRelativePositions, IPositionInfo } from '../../utilities/positioning';
+import { focusFirstChild } from '../../utilities/focus';
+import { Popup } from '../Popup/index';
 import './Callout.scss';
 
 const BEAK_ORIGIN_POSITION = { top: 0, left: 0 };
@@ -69,9 +71,12 @@ export class Callout extends React.Component<ICalloutProps, ICalloutState> {
           ref={ (callout: HTMLDivElement) => this._calloutElement = callout }
           >
           { isBeakVisible && targetElement ? (<div className={ beakStyle }  style={ ((positions) ? positions.beak : BEAK_ORIGIN_POSITION) } />) : (null) }
-          <div className='ms-Callout-main'>
+          <Popup
+            className='ms-Callout-main'
+            onDismiss={ (ev:any) => this.dismiss() }
+            shouldRestoreFocus={ true }>
             { children }
-          </div>
+          </Popup>
         </div>
       </div>
     );
@@ -110,6 +115,10 @@ export class Callout extends React.Component<ICalloutProps, ICalloutState> {
     this._events.on(window, 'focus', this._dismissOnLostFocus, true);
     this._events.on(window, 'click', this._dismissOnLostFocus, true);
 
+    if (this.props.setInitialFocus) {
+      focusFirstChild(this._calloutElement);
+    }
+
     if (this.props.onLayerMounted) {
       this.props.onLayerMounted();
     }

src/components/Popup/Popup.tsx

@@ -45,12 +45,13 @@ export class Popup extends BaseComponent<IPopupProps, {}> {
 
     return (
       <div
-        { ...this.props as any }
         ref='root'
         className={ className }
         role={ role }
         aria-labelledby={ ariaLabelledBy }
-        aria-desribedby={ ariaDescribedBy } />
+        aria-desribedby={ ariaDescribedBy }>
+        { this.props.children }
+      </div>
     );
   }
 

src/demo/pages/CalloutPage/examples/Callout.Basic.Example.tsx

@@ -38,6 +38,7 @@ export class CalloutBasicExample extends React.Component<any, ICalloutBaiscExamp
             gapSpace={ 20 }
             targetElement={ this._menuButtonElement }
             onDismiss={ this._onCalloutDismiss }
+            setInitialFocus={ true }
             >
             <div className='ms-Callout-header'>
               <p className='ms-Callout-title'>

src/demo/pages/CalloutPage/examples/Callout.Nested.Example.tsx

@@ -38,7 +38,8 @@ export class CalloutNestedExample extends React.Component<any, ICalloutBaiscExam
               className='ms-CalloutExample-callout'
               gapSpace={ 20 }
               targetElement={ this._menuButtonElement }
-              onDismiss= { (ev: any) => { this._onDismiss(ev); } }
+              onDismiss={ (ev: any) => { this._onDismiss(ev); } }
+              setInitialFocus={ true }
               >
               <div className='ms-Callout-header'>
                 <p className='ms-Callout-title'>

src/utilities/focus.ts

@@ -20,6 +20,22 @@ export function getLastFocusable(
   return getPreviousElement(rootElement, currentElement, true, false, true, includeElementsInFocusZones);
 }
 
+/**
+ * Attempts to focus the first focusable element that is a child or child's child of the rootElement.
+ * @return True if focus was set, false if it was not.
+ * @param {HTMLElement} rootElement - element to start the search for a focusable child.
+ */
+export function focusFirstChild(
+  rootElement: HTMLElement): boolean {
+  let element: HTMLElement = getNextElement(rootElement, rootElement, true, false, false, true);
+
+  if (element) {
+    element.focus();
+    return true;
+  }
+  return false;
+}
+
 /** Traverse to find the previous element. */
 export function getPreviousElement(
   rootElement: HTMLElement,