diff --git a/ghdocs/BESTPRACTICES.md b/ghdocs/BESTPRACTICES.md
index 130a90ef9c8365..c04dd9aeffdcdc 100644
--- a/ghdocs/BESTPRACTICES.md
+++ b/ghdocs/BESTPRACTICES.md
@@ -23,6 +23,138 @@ interface IButton {
 }
 ```
 
+## Use @autobind. Avoid ALL binds in templates
+
+The autobind decorator simplifies making event callbacks "bound" to the instance. It's easy to use:
+
+```typescript
+class Foo {
+
+  @autobind
+  public _onClick(ev: React.MouseEvent) {
+  }
+
+}
+```
+
+When we use bind in a template, it means that the function is recreated every time, which is an anti-pattern.
+
+## For gathering refs, avoid string refs, use resolve functions
+
+Facebook has deprecated the use of string refs. Plus, string refs don't play very well with some scenarios like in Layered content, where the content may be asynchronously rendered. The recommendation is to use functions to resolve refs. These functions must be pre-bound to
+
+Bad:
+```typescript
+public render() {
+  return <div ref='root' />
+}
+```
+
+Bad:
+```typescript
+public render() {
+  return <div ref={ (el) => this._root = el } />
+}
+```
+
+Good:
+```typescript
+private _root: HTMLElement;
+private _resolveRoot: (element: HTMLElement) => any;
+
+constructor() {
+  this._resolveRoot = (el: HTMLElement) => this._root = el;
+}
+
+public render() {
+  return <div ref={ this._resolveRoot } />
+}
+```
+
+Note that it's very critical you do NOT inline the functions in render! This causes weird side effects, because the function
+is recreated. If you do this, react will call your function with null to clear it, and then render, and then once complete, will
+call it again with the element. This creates timing issues where your ref may be null when you didn't expect.
+
+See example here that illustates refs being re-evaluated:
+
+http://codepen.io/dzearing/pen/WGZOaR
+
+## Use unique keys for items in a mapped array, avoid indexes for keys
+
+```typescript
+public render() {
+  return (
+    <div>
+      { this.props.items.map((item, index)=> (
+        <div key={ item.key }>
+          <input type="text" />
+        </div>
+      )) }
+    </div>
+  );
+}
+```
+
+When you need to map data, require that your data have unique ids available. When you map the data to content, use the id as
+the item's key. This helps React's dom diffing to understand which elements represent which items.
+
+When your code uses index as the key, this can cause unexpected side effects. For example, say that each component you map items to
+maintains some internal state, like the value in an uncontrolled input box. Removing an item in the array will not reset that state
+and react will think the first text box still represents key "0", which is actually now a different item, and thus will not re-render
+the component, leaving the old state intact.
+
+So lesson is, use actual unique ids for items that come from the data, rather than generated by the ux component, and thus require
+that your data has ids so that you can use that as a unique identifier for rendering.
+
+## Avoid nesting content in an array, wrap mapped content in component instead.
+
+When we do inline mapped entries, we want to inline the content in the map:
+
+Bad:
+```typescript
+class Foo extends React.Component {
+  public render() {
+    return (
+      <div>
+        { items.map(item => (
+          <div key={ item.key } onClick={ this._onItemClick.bind(this, item) }>{ item.name }</div>
+        ))}
+      </div>
+    );
+  }
+}
+```
+
+Better:
+```typescript
+class Foo extends React.Component {
+  public render() {
+    return (
+      <div>
+        { items.map(item => (
+        <ItemComponent key={ item.key } item={ item } />
+        )) }
+      </div>
+    );
+  }
+}
+
+class ItemComponent extends React.Component<...> {
+  let { item } = this.props;
+
+  render() {
+    return (
+      <div onClick={ this._onClick }>{ item.name }</div>
+    );
+  }
+
+  @autobind
+  _onClick(ev: MouseEvent) {
+
+  }
+}
+```
+
 ## Extend from BaseComponent instead of React.Component in most cases.
 
 In the common folder, there exists a BaseComponent class. For simple components, it may be unnecessary to use.
@@ -56,7 +188,208 @@ If specific component elements need special classnames injected, add more classN
 
 A component's SCSS file should ONLY include files applicable to the component, and should not define styles for any other component.
 
-# Class name guidelines
+# Data/state management best practices
+
+## Things to flat out avoid
+
+Singletons and globals. Do not share state of a component via a singleton instance object. This is a pure anti-pattern for the following reasons:
+
+* Singletons have no lifetime and therefore can't initialize/clean up when they aren't used.
+* Singletons often paint you into a corner when you want more than one of the same thing on the page.
+* They are often difficult to test without polluting states required for other tests.
+* The make non-browser scenario reuse really difficult. (Build tooling, server side code.)
+
+Data and state should always follow the lifetime of the component that owns it. When that component is no longer needed, the state should
+be garbage collected, event handlers should be removed, and xhr requires spawned in that context should be cancelled.
+
+There are cases where everything should share a common instance of a store; Persona presence is a great example. We have solutions that enable the code within a component scope to access shared stores. See store usage section below.
+
+## Use const values global to a file, rather than as static members
+
+Don't use public/private statics, use file scope.
+
+Bad:
+```typescript
+class Foo {
+  private static DEFAULT_DELAY = 300;
+}
+```
+
+Good:
+```typescript
+const DEFAULT_DELAY = 300;
+
+class Foo {
+}
+```
+
+Note: using file scopes minimizes the name down to 1 character, whereas this.REALLY_LONG_NAME doesn't minify the name. Caveat being
+that if you export it, minify won't touch exports.
+
+## Use private members only for managing state local to a component that should not affect rendering when mutating
+
+Bad:
+```typescript
+class Foo extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isMounted: false
+    };
+  }
+
+  componentDidMount() {
+    this.setState({
+      isMounted: true
+    });
+  }
+
+  render() {
+    return <div>Hello!</div>
+  }
+}
+```
+
+Good:
+```typescript
+class Foo extends React.Component {
+  private _isMounted: boolean;
+
+  constructor(props) {
+    super(props);
+    this._isMounted = false;
+  }
+
+  componentDidMount() {
+    this._isMounted = true;
+  }
+
+  render() {
+    return <div>Hello!</div>
+  }
+}
+```
+
+Basically privates should only be use for tracking this that in no way affect the frequency of render. In some cases, you many
+have an object which fires change events yet doesn't mutate, and you want to re-render on change events. In these cases, privates
+may be used to store the object reference.
+
+## Use component state only for managing local state that is private to a component that should trigger re-render on mutation
+
+Bad:
+```typescript
+class Foo extends React.Component {
+  private _fooRocks: boolean;
+
+  render() {
+    return <div onClick={ this._onClick }>{ `Foo ${ this._fooRocks ? 'rocks' : 'rolls' }</div>;
+  }
+
+  private _onClick() {
+    this._fooRocks = !this._fooRocks;
+    this.forceUpdate();
+  }
+```
+
+Good:
+```typescript
+class Foo extends React.Component {
+  constructor() {
+    super(props);
+
+    this.state = {
+      fooRocks: false
+    };
+  }
+
+  render() {
+    return <div onClick={ this._onClick }>{ `Foo ${ this.state.fooRocks ? 'rocks' : 'rolls' }</div>;
+  }
+
+  private _onClick() {
+    this.setState({
+      fooRocks: !this.state.fooRocks
+    });
+  }
+```
+
+## Experimental: Use a store for storing shared state within a component heirachy which must be shared across objects
+
+While React state management is very useful for simple, private state, it becomes unweildy when many things share that state
+and you start ending up with many owners of the same state value. In these cases it may drive you towards a flux solution, but
+before we jump there, lets call out a few things.
+
+* Global singletons are code smell, do not use globals or singletons except for very rare cases
+* Do not store complex shared state directly in the components, this is also code smell
+
+Instead, make a store and wire dumb components together the store.
+
+What is a store?
+
+Think of a store as a self aware observable; it maintains state, and provides read/write access to that state. When its state
+changes, it can emit change events causing components to re-evaluate.
+
+Here's an example store which tracks selection:
+
+```typescript
+class SimpleSelectionStore extends BaseStore {
+  private _selectedKey: string;
+
+  public isSelected(key: string) {
+    return key === this._selectedKey;
+  }
+
+  public setSelected(key: string) {
+    if (this._selectedKey !== key) {
+      this._selectedKey = key;
+      this.emitChange();
+    }
+  }
+}
+```
+
+While we do not want globals, we do want simplified access to the stores available in a given component scope.
+
+You can use the StoreHost component to host stores within any given scope:
+
+```typescript
+const stores = {
+  selection: new SimpleSelectionStore()
+};
+
+public render() {
+  return (
+    <StoreHost stores={ stores }>
+      <UIContent />
+    </StoreHost>
+  );
+}
+```
+
+You can write dumb components:
+
+```typescript
+const Item = (props) => (
+  <div onClick={ props.onClick }>{ `I am item ${ props.name } and I'm ${ props.isSelected ? 'selected' : 'unselected' }</div>
+);
+```
+
+And you can use the `connect` function to create a ConnectedItem which wraps the dumb component and translates the props
+and stores in its context into props for the dumb component:
+
+```typescript
+export ConnectedItem = connect(Item, (stores, props) => ({
+  name: props.item.name,
+  isSelected: stores.selection.isSelected(props.item.key),
+  onClick: () => stores.selection.setSelected(props.item.key)
+}));
+```
+
+Now in this setup, your state is in one place, it is composable and can have lifetime, and your dumb ui has no understanding
+of the contextual stores provided.
+
+# CSS class name guidelines
 
 TODO: include our class name guidelines.
 
diff --git a/package.json b/package.json
index 9c326b3c38f6e9..323879390d4971 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "office-ui-fabric-react",
-  "version": "0.47.0",
+  "version": "0.48.0",
   "description": "Reusable React components for building experiences for Office 365.",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
diff --git a/src/Utilities.ts b/src/Utilities.ts
index 9b00e246d1ff05..e95247a58fc45e 100644
--- a/src/Utilities.ts
+++ b/src/Utilities.ts
@@ -2,3 +2,4 @@ export * from './common/BaseComponent';
 export * from './utilities/css';
 export * from './utilities/rtl';
 export * from './utilities/hoist';
+export * from './utilities/autobind';
diff --git a/src/common/BaseComponent.test.ts b/src/common/BaseComponent.test.tsx
similarity index 74%
rename from src/common/BaseComponent.test.ts
rename to src/common/BaseComponent.test.tsx
index 91955bcbc6b384..7c647990d2a7a5 100644
--- a/src/common/BaseComponent.test.ts
+++ b/src/common/BaseComponent.test.tsx
@@ -1,3 +1,11 @@
+/* tslint:disable:no-unused-variable */
+import * as React from 'react';
+/* tslint:enable:no-unused-variable */
+
+import * as ReactTestUtils from 'react-addons-test-utils';
+
+let { expect } = chai;
+
 import { BaseComponent } from './BaseComponent';
 
 let { assert } = chai;
@@ -54,6 +62,22 @@ describe('BaseComponent', () => {
   _buildTestFor('render');
   _buildTestFor('componentDidUpdate');
   _buildTestFor('componentWillUnmount');
+
+  it('can resolve refs', () => {
+    class Foo extends BaseComponent<{}, {}> {
+      public root: HTMLElement;
+
+      public render() {
+        return <div ref={ this._resolveRef('root') } />;
+      }
+    }
+
+    let component = ReactTestUtils.renderIntoDocument(
+      <Foo />
+    ) as any;
+
+    expect(component.root).to.exist;
+  });
 });
 
 function _buildTestFor(methodName) {
diff --git a/src/common/BaseComponent.ts b/src/common/BaseComponent.ts
index 3fc781cfabe490..6e7a5d86c8774d 100644
--- a/src/common/BaseComponent.ts
+++ b/src/common/BaseComponent.ts
@@ -18,6 +18,7 @@ export class BaseComponent<P, S> extends React.Component<P, S> {
   private __async: Async;
   private __events: EventGroup;
   private __disposables: IDisposable[];
+  private __resolves: { [ name: string ]: (ref: any) => any };
 
   /**
    * BaseComponent constructor
@@ -103,6 +104,29 @@ export class BaseComponent<P, S> extends React.Component<P, S> {
 
     return this.__events;
   }
+
+  /**
+   * Helper to return a memoized ref resolver function.
+   * @params refName Name of the member to assign the ref to.
+   *
+   * @examples
+   * class Foo extends BaseComponent<...> {
+   *   private _root: HTMLElement;
+   *
+   *   public render() {
+   *     return <div ref={ this._resolveRef('_root') } />
+   *   }
+   * }
+   */
+  protected _resolveRef(refName: string) {
+    if (!this.__resolves) {
+      this.__resolves = {};
+    }
+    if (!this.__resolves[refName]) {
+      this.__resolves[refName] = (ref) => this[refName] = ref;
+    }
+    return this.__resolves[refName];
+  }
 }
 
 /**
diff --git a/src/components/Breadcrumb/Breadcrumb.tsx b/src/components/Breadcrumb/Breadcrumb.tsx
index 6ead7fa7f10d6a..a9b55be54209c8 100644
--- a/src/components/Breadcrumb/Breadcrumb.tsx
+++ b/src/components/Breadcrumb/Breadcrumb.tsx
@@ -7,6 +7,7 @@ import { DirectionalHint } from '../../common/DirectionalHint';
 import { getRTL } from '../../utilities/rtl';
 import { getId } from '../../utilities/object';
 import { css } from '../../utilities/css';
+import { autobind } from '../../utilities/autobind';
 import './Breadcrumb.scss';
 
 export interface IBreadcrumbState {
@@ -71,7 +72,7 @@ export class Breadcrumb extends BaseComponent<IBreadcrumbProps, IBreadcrumbState
           { renderedOverflowItems && renderedOverflowItems.length ? (
             <li className='ms-Breadcrumb-overflow' key={ OVERFLOW_KEY } ref={ OVERFLOW_KEY }>
               <div className='ms-Breadcrumb-overflowButton ms-Icon ms-Icon--More'
-                  onClick={ this._onOverflowClicked.bind(this) }
+                  onClick={ this._onOverflowClicked }
                   data-is-focusable={ true }
                   role='button'
                   aria-haspopup='true'
@@ -107,12 +108,13 @@ export class Breadcrumb extends BaseComponent<IBreadcrumbProps, IBreadcrumbState
               ) }
             id={ overflowMenuId }
             directionalHint={ DirectionalHint.bottomLeftEdge }
-            onDismiss={ this._onOverflowDismissed.bind(this) } />
+            onDismiss={ this._onOverflowDismissed } />
         ) : (null) }
       </div>
     );
   }
 
+  @autobind
   private _onOverflowClicked(ev: MouseEvent) {
     this.setState({
       'isOverflowOpen' : !this.state.isOverflowOpen,
@@ -120,6 +122,7 @@ export class Breadcrumb extends BaseComponent<IBreadcrumbProps, IBreadcrumbState
     });
   }
 
+  @autobind
   private _onOverflowDismissed(ev: MouseEvent) {
     this.setState({
       'isOverflowOpen' : false,
@@ -127,6 +130,7 @@ export class Breadcrumb extends BaseComponent<IBreadcrumbProps, IBreadcrumbState
     });
   }
 
+  @autobind
   private _onBreadcrumbClicked(item: IBreadcrumbItem, ev: MouseEvent) {
     if (item.onClick) {
       item.onClick(item.key);
diff --git a/src/components/Callout/Callout.tsx b/src/components/Callout/Callout.tsx
index cda20babcedf95..7dbfa57155d8bf 100644
--- a/src/components/Callout/Callout.tsx
+++ b/src/components/Callout/Callout.tsx
@@ -3,6 +3,7 @@ import { ICalloutProps } from './Callout.Props';
 import { DirectionalHint } from '../../common/DirectionalHint';
 import { Layer } from '../../Layer';
 import { css } from '../../utilities/css';
+import { autobind } from '../../utilities/autobind';
 import { EventGroup } from '../../utilities/eventGroup/EventGroup';
 import { getRelativePositions, IPositionInfo } from '../../utilities/positioning';
 import { focusFirstChild } from '../../utilities/focus';
@@ -43,8 +44,6 @@ export class Callout extends React.Component<ICalloutProps, ICalloutState> {
     };
 
     this._events = new EventGroup(this);
-
-    this._onLayerDidMount = this._onLayerDidMount.bind(this);
   }
 
   public componentDidUpdate() {
@@ -108,6 +107,7 @@ export class Callout extends React.Component<ICalloutProps, ICalloutState> {
     }
   }
 
+  @autobind
   private _onLayerDidMount() {
     // This is added so the callout will dismiss when the window is scrolled
     // but not when something inside the callout is scrolled.
diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index 5db76129637643..644702fec5202c 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -1,37 +1,37 @@
 import * as React from 'react';
+import { BaseComponent } from '../../common/BaseComponent';
 import {
   ICheckbox,
   ICheckboxProps
 } from './Checkbox.Props';
+import { autobind } from '../../utilities/autobind';
 import { css } from '../../utilities/css';
 import { getId } from '../../utilities/object';
-
 import './Checkbox.scss';
 
-export class Checkbox extends React.Component<ICheckboxProps, {}> implements ICheckbox {
+export interface ICheckboxState {
+  /** Is true when the control has focus. */
+  isFocused?: boolean;
+
+  /** Is true when Uncontrolled control is checked. */
+  isChecked?: boolean;
+}
+
+export class Checkbox extends BaseComponent<ICheckboxProps, ICheckboxState> implements ICheckbox {
   public static defaultProps: ICheckboxProps = {
   };
 
   private _id: string;
-  private _checkBox: HTMLElement;
-  private _checkBoxInput: HTMLInputElement;
-  private _checkBoxLabel: HTMLLabelElement;
+  private _checkBox: HTMLInputElement;
 
   constructor(props: ICheckboxProps) {
     super(props);
 
     this._id = getId('checkbox-');
-    this._onChange = this._onChange.bind(this);
-  }
-
-  public componentDidMount() {
-    this._checkBoxInput.addEventListener('focus', this._onFocus.bind(this), false);
-    this._checkBoxInput.addEventListener('blur', this._onBlur.bind(this), false);
-  }
-
-  public componentWillUnmount() {
-    this._checkBoxInput.removeEventListener('focus', this._onFocus.bind(this));
-    this._checkBoxInput.removeEventListener('blur', this._onBlur.bind(this));
+    this.state = {
+      isFocused: false,
+      isChecked: props.defaultChecked || false
+    };
   }
 
   public render() {
@@ -44,27 +44,33 @@ export class Checkbox extends React.Component<ICheckboxProps, {}> implements ICh
       label
     } = this.props;
 
+    const { isFocused, isChecked } = this.state;
+
     return (
       <div
-        className={ css('ms-Checkbox', className) }
-        ref={ (c): HTMLElement => this._checkBox = c }
+        className={ css('ms-Checkbox', className, { 'is-inFocus': isFocused }) }
       >
         <input
           { ...inputProps }
           { ...(checked !== undefined && { checked }) }
           { ...(defaultChecked !== undefined && { defaultChecked }) }
           disabled={ disabled }
-          ref={ (el): HTMLInputElement => this._checkBoxInput = el }
+          ref={ this._resolveRef('_checkBox') }
           id={ this._id }
           name={ this._id }
           className='ms-Checkbox-input'
           type='checkbox'
           onChange={ this._onChange }
+          onFocus= { this._onFocus }
+          onBlur= { this._onBlur }
           aria-checked={ checked }
         />
         <label htmlFor={ this._id }
-          ref={ (el): HTMLLabelElement => this._checkBoxLabel = el }
-          className={ css('ms-Checkbox-label', (checked || defaultChecked) && 'is-checked', disabled && 'is-disabled') }
+          className={ css('ms-Checkbox-label', {
+            'is-checked': checked || isChecked,
+            'is-disabled': disabled
+            })
+          }
         >
           { label && <span className='ms-Label'>{ label }</span> }
         </label>
@@ -73,37 +79,36 @@ export class Checkbox extends React.Component<ICheckboxProps, {}> implements ICh
   }
 
   public get checked(): boolean {
-    return this._checkBoxInput ? this._checkBoxInput.checked : false;
+    return this._checkBox ? this._checkBox.checked : false;
   }
 
   public focus() {
-      if (this._checkBoxInput) {
-          this._checkBoxInput.focus();
+      if (this._checkBox) {
+          this._checkBox.focus();
       }
   }
 
-  private _onFocus(): void {
-    this._checkBox.classList.add('is-inFocus');
+  @autobind
+  private _onFocus(ev: React.FocusEvent): void {
+    this.setState({ isFocused: true });
   }
 
-  private _onBlur(): void {
-    this._checkBox.classList.remove('is-inFocus');
+  @autobind
+  private _onBlur(ev: React.FocusEvent): void {
+    this.setState({ isFocused: false });
   }
 
+  @autobind
   private _onChange(ev: React.FormEvent) {
     const { onChange } = this.props;
     const isChecked = (ev.target as HTMLInputElement).checked;
 
-    if (this.props.checked === undefined && isChecked) {
-      this._checkBoxLabel.classList.add('is-checked');
-    }
-
-    if (this.props.checked === undefined && !isChecked) {
-      this._checkBoxLabel.classList.remove('is-checked');
-    }
-
     if (onChange) {
       onChange(ev, isChecked);
     }
+
+    if (this.props.checked === undefined) {
+      this.setState({ isChecked: isChecked });
+    }
   }
 }
diff --git a/src/components/ChoiceGroup/ChoiceGroup.tsx b/src/components/ChoiceGroup/ChoiceGroup.tsx
index 2415719fc81289..0f7a01c475c15e 100644
--- a/src/components/ChoiceGroup/ChoiceGroup.tsx
+++ b/src/components/ChoiceGroup/ChoiceGroup.tsx
@@ -7,6 +7,9 @@ import './ChoiceGroup.scss';
 
 export interface IChoiceGroupState {
   keyChecked: string;
+
+  /** Is true when the control has focus. */
+  keyFocused?: string;
 }
 
 export class ChoiceGroup extends React.Component<IChoiceGroupProps, IChoiceGroupState> {
@@ -16,28 +19,18 @@ export class ChoiceGroup extends React.Component<IChoiceGroupProps, IChoiceGroup
 
   private _id: string;
   private _descriptionId: string;
-  private _choiceFieldGroup: HTMLElement;
-  private _choiceFieldElements: HTMLElement[];
-  private _inputElements: HTMLInputElement[];
+  private _inputElement: HTMLElement;
 
   constructor(props: IChoiceGroupProps) {
     super();
 
     this.state = {
-      keyChecked: this._getKeyChecked(props.options)
+      keyChecked: this._getKeyChecked(props.options),
+      keyFocused: undefined
     };
 
     this._id = getId('ChoiceGroup');
     this._descriptionId = getId('ChoiceGroupDescription');
-    this._choiceFieldElements = [];
-    this._inputElements = [];
-  }
-
-  public componentDidMount() {
-    this._inputElements.forEach( inputElement => {
-      inputElement.addEventListener('focus', this._onFocus.bind(this), false);
-      inputElement.addEventListener('blur', this._onBlur.bind(this), false);
-    });
   }
 
   public componentWillReceiveProps(newProps: IChoiceGroupProps) {
@@ -46,23 +39,14 @@ export class ChoiceGroup extends React.Component<IChoiceGroupProps, IChoiceGroup
 
     if (newKeyChecked !== oldKeyCheched) {
       this.setState({
-        keyChecked: newKeyChecked
+        keyChecked: newKeyChecked,
       });
     }
   }
 
-  public componentWillUnmount() {
-    this._inputElements.forEach( inputElement => {
-      if (inputElement) {
-        inputElement.removeEventListener('focus', this._onFocus.bind(this));
-        inputElement.removeEventListener('blur', this._onBlur.bind(this));
-      }
-    });
-  }
-
   public render() {
     let { label, options, className, required } = this.props;
-    let { keyChecked } = this.state;
+    let { keyChecked, keyFocused } = this.state;
 
     const titleClassName = css('ms-Label', className, {
       'is-required': required
@@ -75,20 +59,22 @@ export class ChoiceGroup extends React.Component<IChoiceGroupProps, IChoiceGroup
           className='ms-ChoiceFieldGroup'
           role='radiogroup'
           aria-labelledby={ this.props.label ? this._id + '-label' : '' }
-          ref={ (c): HTMLElement => this._choiceFieldGroup = c }
         >
           <div className='ms-ChoiceFieldGroup-title'>
             { this.props.label ? <label className={ titleClassName } id={ this._id + '-label' }>{ label }</label> : null }
           </div>
 
-          { options.map((option, index) => (
+          { options.map((option) => (
             <div
               key={ option.key }
-              className={ css('ms-ChoiceField', { 'ms-ChoiceField--image': !!option.imageSrc}) }
-              ref={ (c): HTMLElement => { this._choiceFieldElements.push(c); return c; } }
+              className={ css('ms-ChoiceField', {
+                  'ms-ChoiceField--image': !!option.imageSrc,
+                  'is-inFocus': option.key === keyFocused
+                })
+              }
             >
               <input
-                ref={ (c): HTMLInputElement => { this._inputElements.push(c); return c; } }
+                ref={ (c): HTMLInputElement => this._inputElement = c }
                 id={ `${this._id}-${option.key}` }
                 className='ms-ChoiceField-input'
                 type='radio'
@@ -96,6 +82,8 @@ export class ChoiceGroup extends React.Component<IChoiceGroupProps, IChoiceGroup
                 disabled={ option.isDisabled }
                 checked={ option.key === keyChecked }
                 onChange={ this._handleInputChange.bind(this, option) }
+                onFocus={ this._onFocus.bind(this, option) }
+                onBlur={ this._onBlur.bind(this, option) }
                 aria-describedby={ `${this._descriptionId}-${option.key}` }
               />
               { this._renderField(option) }
@@ -107,21 +95,23 @@ export class ChoiceGroup extends React.Component<IChoiceGroupProps, IChoiceGroup
   }
 
   public focus() {
-    if (this._choiceFieldGroup) {
-      this._choiceFieldGroup.focus();
+    if (this._inputElement) {
+      this._inputElement.focus();
     }
   }
 
-  private _onFocus(event): void {
-    if (event.target && event.target.parentNode) {
-      event.target.parentNode.classList.add('is-inFocus');
-    }
+  private _onFocus(option: IChoiceGroupOption, ev: React.FocusEvent): void {
+    this.setState({
+      keyFocused: option.key,
+      keyChecked: this.state.keyChecked
+    });
   }
 
-  private _onBlur(event): void {
-    if (event.target && event.target.parentNode) {
-      event.target.parentNode.classList.remove('is-inFocus');
-    }
+  private _onBlur(option: IChoiceGroupOption, ev: React.FocusEvent): void {
+    this.setState({
+      keyFocused: undefined,
+      keyChecked: this.state.keyChecked
+    });
   }
 
   private _renderField(option: IChoiceGroupOption) {
diff --git a/src/components/ColorPicker/ColorPicker.tsx b/src/components/ColorPicker/ColorPicker.tsx
index 30fb7886b71d88..a22028bec33282 100644
--- a/src/components/ColorPicker/ColorPicker.tsx
+++ b/src/components/ColorPicker/ColorPicker.tsx
@@ -3,6 +3,7 @@ import { IColorPickerProps } from './ColorPicker.Props';
 import { TextField } from '../../TextField';
 import { ColorRectangle } from './ColorRectangle';
 import { ColorSlider } from './ColorSlider';
+import { autobind } from '../../utilities/autobind';
 import {
   IColor,
   MAX_COLOR_HUE,
@@ -34,11 +35,6 @@ export class ColorPicker extends React.Component<IColorPickerProps, any> {
   constructor(props: IColorPickerProps) {
     super(props);
 
-    this._onPickerClick = this._onPickerClick.bind(this);
-    this._onSVChanged = this._onSVChanged.bind(this);
-    this._onHChanged = this._onHChanged.bind(this);
-    this._onAChanged = this._onAChanged.bind(this);
-
     this.state = {
       color: getColorFromString(props.color)
     };
@@ -91,20 +87,17 @@ export class ColorPicker extends React.Component<IColorPickerProps, any> {
     );
   }
 
-  private _onPickerClick() {
-    this.setState({
-      isOpen: !this.state.isOpen
-    });
-  }
-
+  @autobind
   private _onSVChanged(s: number, v: number) {
     this._updateColor(updateSV(this.state.color, s, v));
   }
 
+  @autobind
   private _onHChanged(h: number) {
     this._updateColor(updateH(this.state.color, h));
   }
 
+  @autobind
   private _onAChanged(a: number) {
     this._updateColor(updateA(this.state.color, a));
   }
diff --git a/src/components/ColorPicker/ColorRectangle.tsx b/src/components/ColorPicker/ColorRectangle.tsx
index 64544b1de2940e..3d40c3fad2a6c5 100644
--- a/src/components/ColorPicker/ColorRectangle.tsx
+++ b/src/components/ColorPicker/ColorRectangle.tsx
@@ -6,6 +6,7 @@ import {
   getFullColorString
  } from './colors';
 import { assign } from '../../utilities/object';
+import { autobind } from '../../utilities/autobind';
 import { EventGroup } from '../../utilities/eventGroup/EventGroup';
 
 let hsv2hex = require('color-functions/lib/hsv2hex');
@@ -42,9 +43,6 @@ export class ColorRectangle extends React.Component<IColorRectangleProps, IColor
     let { color } = this.props;
 
     this._events = new EventGroup(this);
-    this._onMouseDown = this._onMouseDown.bind(this);
-    this._onMouseMove = this._onMouseMove.bind(this);
-    this._onMouseUp = this._onMouseUp.bind(this);
 
     this.state = {
       isAdjusting: false,
@@ -80,6 +78,7 @@ export class ColorRectangle extends React.Component<IColorRectangleProps, IColor
     );
   }
 
+  @autobind
   private _onMouseDown(ev: React.MouseEvent) {
     this._events.on(window, 'mousemove', this._onMouseMove, true);
     this._events.on(window, 'mouseup', this._onMouseUp, true);
@@ -87,6 +86,7 @@ export class ColorRectangle extends React.Component<IColorRectangleProps, IColor
     this._onMouseMove(ev);
   }
 
+  @autobind
   private _onMouseMove(ev: React.MouseEvent) {
     let { color, onSVChanged } = this.props;
     let rectSize = this.refs.root.getBoundingClientRect();
@@ -114,6 +114,7 @@ export class ColorRectangle extends React.Component<IColorRectangleProps, IColor
     ev.stopPropagation();
   }
 
+  @autobind
   private _onMouseUp(ev: React.MouseEvent) {
     this._events.off();
 
diff --git a/src/components/ColorPicker/ColorSlider.tsx b/src/components/ColorPicker/ColorSlider.tsx
index 825162ba10e0e9..e346bde4609a9d 100644
--- a/src/components/ColorPicker/ColorSlider.tsx
+++ b/src/components/ColorPicker/ColorSlider.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { autobind } from '../../utilities/autobind';
 import { css } from '../../utilities/css';
 import { EventGroup } from '../../utilities/eventGroup/EventGroup';
 
@@ -41,9 +42,6 @@ export class ColorSlider extends React.Component<IColorSliderProps, IColorSlider
     let { initialValue } = this.props;
 
     this._events = new EventGroup(this);
-    this._onMouseDown = this._onMouseDown.bind(this);
-    this._onMouseMove = this._onMouseMove.bind(this);
-    this._onMouseUp = this._onMouseUp.bind(this);
 
     this.state = {
       isAdjusting: false,
@@ -75,6 +73,7 @@ export class ColorSlider extends React.Component<IColorSliderProps, IColorSlider
     );
   }
 
+  @autobind
   private _onMouseDown(ev: React.MouseEvent) {
     this._events.on(window, 'mousemove', this._onMouseMove, true);
     this._events.on(window, 'mouseup', this._onMouseUp, true);
@@ -82,6 +81,7 @@ export class ColorSlider extends React.Component<IColorSliderProps, IColorSlider
     this._onMouseMove(ev);
   }
 
+  @autobind
   private _onMouseMove(ev: React.MouseEvent) {
     let { onChanged, minValue, maxValue } = this.props;
     let rectSize = this.refs.root.getBoundingClientRect();
@@ -102,6 +102,7 @@ export class ColorSlider extends React.Component<IColorSliderProps, IColorSlider
     ev.stopPropagation();
   }
 
+  @autobind
   private _onMouseUp(ev: React.MouseEvent) {
     this._events.off();
 
diff --git a/src/components/CommandBar/CommandBar.tsx b/src/components/CommandBar/CommandBar.tsx
index 73bf33ff892a0c..b47a81bd4fce15 100644
--- a/src/components/CommandBar/CommandBar.tsx
+++ b/src/components/CommandBar/CommandBar.tsx
@@ -4,6 +4,7 @@ import { FocusZone, FocusZoneDirection } from '../../FocusZone';
 import { ContextualMenu, IContextualMenuItem } from '../../ContextualMenu';
 import { EventGroup } from '../../utilities/eventGroup/EventGroup';
 import { DirectionalHint } from '../../common/DirectionalHint';
+import { autobind } from '../../utilities/autobind';
 import { css } from '../../utilities/css';
 import { getId } from '../../utilities/object';
 import './CommandBar.scss';
@@ -49,10 +50,6 @@ export class CommandBar extends React.Component<ICommandBarProps, ICommandBarSta
 
     this._id = getId('CommandBar');
     this._events = new EventGroup(this);
-
-    this._onItemClick = this._onItemClick.bind(this);
-    this._onOverflowClick = this._onOverflowClick.bind(this);
-    this._onContextMenuDismiss = this._onContextMenuDismiss.bind(this);
   }
 
   public componentDidMount() {
@@ -273,6 +270,7 @@ export class CommandBar extends React.Component<ICommandBarProps, ICommandBarSta
     }
   }
 
+  @autobind
   private _onOverflowClick(ev) {
     if (this.state.expandedMenuItemKey === OVERFLOW_KEY) {
       this._onContextMenuDismiss();
@@ -286,6 +284,7 @@ export class CommandBar extends React.Component<ICommandBarProps, ICommandBarSta
     }
   }
 
+  @autobind
   private _onContextMenuDismiss(ev?: any) {
     if (!ev || !ev.relatedTarget || !this.refs.commandSurface.contains(ev.relatedTarget as HTMLElement)) {
       this.setState({
diff --git a/src/components/ContextualMenu/ContextualMenu.Props.ts b/src/components/ContextualMenu/ContextualMenu.Props.ts
index 3d52b61dbe4af4..6c999ba07a97e7 100644
--- a/src/components/ContextualMenu/ContextualMenu.Props.ts
+++ b/src/components/ContextualMenu/ContextualMenu.Props.ts
@@ -75,6 +75,12 @@ export interface IContextualMenuProps extends React.Props<ContextualMenu>, IPosi
    */
   beakWidth?: number;
 
+  /**
+   * Aria label for accessibility for the ContextualMenu.
+   * If none specified no aria label will be applied to the ContextualMenu.
+   */
+  ariaLabel?: string;
+
 }
 
 export interface IContextualMenuItem {
diff --git a/src/components/ContextualMenu/ContextualMenu.tsx b/src/components/ContextualMenu/ContextualMenu.tsx
index f9f55429327bfa..c53350ae81be81 100644
--- a/src/components/ContextualMenu/ContextualMenu.tsx
+++ b/src/components/ContextualMenu/ContextualMenu.tsx
@@ -4,6 +4,7 @@ import { DirectionalHint } from '../../common/DirectionalHint';
 import { FocusZone, FocusZoneDirection } from '../../FocusZone';
 import { KeyCodes } from '../../utilities/KeyCodes';
 import { EventGroup } from '../../utilities/eventGroup/EventGroup';
+import { autobind } from '../../utilities/autobind';
 import { css } from '../../utilities/css';
 import { getRTL } from '../../utilities/rtl';
 import { getId } from '../../utilities/object';
@@ -99,14 +100,9 @@ export class ContextualMenu extends React.Component<IContextualMenuProps, IConte
     this._events = new EventGroup(this);
     this._async = new Async(this);
 
-    this.dismiss = this.dismiss.bind(this);
-    this._onKeyDown = this._onKeyDown.bind(this);
-    this._onItemClick = this._onItemClick.bind(this);
-    this._onSubMenuDismiss = this._onSubMenuDismiss.bind(this);
-    this._onMouseEnter = this._onMouseEnter.bind(this);
-    this._onMouseLeave = this._onMouseLeave.bind(this);
   }
 
+  @autobind
   public dismiss(ev?: any) {
     let { onDismiss } = this.props;
 
@@ -148,18 +144,19 @@ export class ContextualMenu extends React.Component<IContextualMenuProps, IConte
 
   public render() {
     let { className,
-          items,
-          isBeakVisible,
-          labelElementId,
-          targetElement,
-          id,
-          targetPoint,
-          useTargetPoint,
-          beakWidth,
-          directionalHint,
-          gapSpace,
-          isSubMenu,
-          coverTarget } = this.props;
+      items,
+      isBeakVisible,
+      labelElementId,
+      targetElement,
+      id,
+      targetPoint,
+      useTargetPoint,
+      beakWidth,
+      directionalHint,
+      gapSpace,
+      isSubMenu,
+      coverTarget,
+      ariaLabel } = this.props;
 
     let { submenuProps } = this.state;
 
@@ -190,21 +187,24 @@ export class ContextualMenu extends React.Component<IContextualMenuProps, IConte
               ref={ (focusZone) => this._focusZone = focusZone }
               rootProps={ { role: 'menu' } }
               >
-              <ul className='ms-ContextualMenu-list is-open' onKeyDown={ this._onKeyDown }>
+              <ul
+                className='ms-ContextualMenu-list is-open'
+                onKeyDown={ this._onKeyDown }
+                aria-label={ ariaLabel } >
                 { items.map((item, index) => (
                   // If the item name is equal to '-', a divider will be generated.
                   item.name === '-' ? (
                     <li
                       role='separator'
                       key={ item.key || index }
-                      className={ css('ms-ContextualMenu-divider', item.className ) }/>
+                      className={ css('ms-ContextualMenu-divider', item.className) }/>
                   ) : (
                       <li
                         role='menuitem'
                         title={ item.title }
                         key={ item.key || index }
-                        className={ css('ms-ContextualMenu-item', item.className ) }>
-                          { this._renderMenuItem(item, index, hasCheckmarks, hasIcons) }
+                        className={ css('ms-ContextualMenu-item', item.className) }>
+                        { this._renderMenuItem(item, index, hasCheckmarks, hasIcons) }
                       </li>
                     )
                 )) }
@@ -221,26 +221,37 @@ export class ContextualMenu extends React.Component<IContextualMenuProps, IConte
 
   private _renderMenuItem(item: IContextualMenuItem, index: number, hasCheckmarks: boolean, hasIcons: boolean) {
     let { expandedMenuItemKey, subMenuId } = this.state;
+    let ariaLabel = '';
+
+    if (item.ariaLabel) {
+      ariaLabel = item.ariaLabel;
+    } else if (item.name) {
+      ariaLabel = item.name;
+    }
 
     if (item.onRender) {
       return item.onRender(item);
     }
 
     return React.createElement(
-            'button',
-             { className: css('ms-ContextualMenu-link', { 'is-expanded': (expandedMenuItemKey === item.key) }),
-               onClick: item.onClick || (item.items && item.items.length) ? this._onItemClick.bind(this, item) : item.href ? () => { location.href = item.href; } : null,
-               onKeyDown: item.items && item.items.length ? this._onItemKeyDown.bind(this, item) : null,
-               onMouseEnter: this._onMouseEnter.bind(this, item),
-               onMouseLeave: this._onMouseLeave,
-               onMouseDown: (ev: any) => this._onItemMouseDown(item, ev),
-               disabled: item.isDisabled,
-               dataCommandKey: index,
-               role: 'menuitem',
-               href: item.href,
-               'aria-haspopup': item.items && item.items.length ? true : null,
-               'aria-owns': item.key === expandedMenuItemKey ? subMenuId : null },
-             this._renderMenuItemChildren(item, index, hasCheckmarks, hasIcons));
+      'button',
+      {
+        className: css('ms-ContextualMenu-link', { 'is-expanded': (expandedMenuItemKey === item.key) }),
+        onClick: item.onClick || (item.items && item.items.length) ? this._onItemClick.bind(this, item) : item.href ? () => { location.href = item.href; } : null,
+        onKeyDown: item.items && item.items.length ? this._onItemKeyDown.bind(this, item) : null,
+        onMouseEnter: this._onItemMouseEnter.bind(this, item),
+        onMouseLeave: this._onMouseLeave,
+        onMouseDown: (ev: any) => this._onItemMouseDown(item, ev),
+        disabled: item.isDisabled,
+        dataCommandKey: index,
+        role: 'menuitem',
+        href: item.href,
+        title: item.title,
+        'aria-label': ariaLabel,
+        'aria-haspopup': item.items && item.items.length ? true : null,
+        'aria-owns': item.key === expandedMenuItemKey ? subMenuId : null
+      },
+      this._renderMenuItemChildren(item, index, hasCheckmarks, hasIcons));
   }
 
   private _renderMenuItemChildren(item: IContextualMenuItem, index: number, hasCheckmarks: boolean, hasIcons: boolean) {
@@ -249,17 +260,17 @@ export class ContextualMenu extends React.Component<IContextualMenuProps, IConte
         {(hasCheckmarks) ? (
           <span
             className={
-              css('ms-ContextualMenu-icon', {'ms-Icon ms-Icon--CheckMark': item.isChecked, 'not-selected': !item.isChecked})
+              css('ms-ContextualMenu-icon', { 'ms-Icon ms-Icon--CheckMark': item.isChecked, 'not-selected': !item.isChecked })
             }
             onClick={ this._onItemClick.bind(this, item) } />
         ) : (null) }
         {(hasIcons) ? (
           <span className={ 'ms-ContextualMenu-icon' + ((item.icon) ? ` ms-Icon ms-Icon--${item.icon}` : ' no-icon') }/>
-        ) : (null)}
+        ) : (null) }
         <span className='ms-ContextualMenu-itemText ms-fontWeight-regular'>{ item.name }</span>
         {(item.items && item.items.length) ? (
           <i className={ css('ms-ContextualMenu-submenuChevron ms-Icon', getRTL() ? 'ms-Icon--ChevronLeft' : 'ms-Icon--ChevronRight') } />
-        ) : (null)}
+        ) : (null) }
       </div>
     );
   }
@@ -270,6 +281,7 @@ export class ContextualMenu extends React.Component<IContextualMenuProps, IConte
     }
   }
 
+  @autobind
   private _onKeyDown(ev: React.KeyboardEvent) {
     let submenuCloseKey = getRTL() ? KeyCodes.right : KeyCodes.left;
 
@@ -284,18 +296,19 @@ export class ContextualMenu extends React.Component<IContextualMenuProps, IConte
     }
   }
 
-  private _onMouseEnter(item: any, ev: React.MouseEvent) {
+  private _onItemMouseEnter(item: any, ev: React.MouseEvent) {
     let targetElement = ev.currentTarget as HTMLElement;
 
     if (item.key !== this.state.expandedMenuItemKey) {
       if (item.items && item.items.length) {
-        this._enterTimerId = this._async.setTimeout(() => this._onSubMenuExpand(item, targetElement), 500);
+        this._enterTimerId = this._async.setTimeout(() => this._onItemSubMenuExpand(item, targetElement), 500);
       } else {
         this._enterTimerId = this._async.setTimeout(() => this._onSubMenuDismiss(ev), 500);
       }
     }
   }
 
+  @autobind
   private _onMouseLeave(ev: React.MouseEvent) {
     this._async.clearTimeout(this._enterTimerId);
   }
@@ -317,7 +330,7 @@ export class ContextualMenu extends React.Component<IContextualMenuProps, IConte
         if (item.key === this.state.dismissedMenuItemKey) { // This has an expanded sub menu. collapse it.
           this._onSubMenuDismiss(ev);
         } else { // This has a collapsed sub menu. Expand it.
-          this._onSubMenuExpand(item, ev.currentTarget as HTMLElement);
+          this._onItemSubMenuExpand(item, ev.currentTarget as HTMLElement);
         }
       }
     }
@@ -330,11 +343,11 @@ export class ContextualMenu extends React.Component<IContextualMenuProps, IConte
     let openKey = getRTL() ? KeyCodes.left : KeyCodes.right;
 
     if (ev.which === openKey) {
-      this._onSubMenuExpand(item, ev.currentTarget as HTMLElement);
+      this._onItemSubMenuExpand(item, ev.currentTarget as HTMLElement);
     }
   }
 
-  private _onSubMenuExpand(item: any, target: HTMLElement) {
+  private _onItemSubMenuExpand(item: any, target: HTMLElement) {
     if (this.state.expandedMenuItemKey !== item.key) {
 
       if (this.state.submenuProps) {
@@ -355,8 +368,9 @@ export class ContextualMenu extends React.Component<IContextualMenuProps, IConte
         }
       });
     }
- }
+  }
 
+  @autobind
   private _onSubMenuDismiss(ev?: any) {
     this.setState({
       dismissedMenuItemKey: this.state.expandedMenuItemKey,
diff --git a/src/components/DatePicker/DatePicker.tsx b/src/components/DatePicker/DatePicker.tsx
index b770124683e908..b16daba8998652 100644
--- a/src/components/DatePicker/DatePicker.tsx
+++ b/src/components/DatePicker/DatePicker.tsx
@@ -356,8 +356,8 @@ export class DatePicker extends React.Component<IDatePickerProps, IDatePickerSta
       return;
     }
 
-    let date = null;
     if (allowTextInput) {
+      let date = null;
       if (inputValue) {
         date = parseDateFromString(inputValue);
         if (!date) {
@@ -377,13 +377,13 @@ export class DatePicker extends React.Component<IDatePickerProps, IDatePickerSta
           errorMessage: ''
         });
       }
-    }
 
-    // Execute onSelectDate callback
-    if (onSelectDate) {
-      // If no input date string or input date string is invalid
-      // date variable will be null, callback should expect null value for this case
-      onSelectDate(date);
+      // Execute onSelectDate callback
+      if (onSelectDate) {
+        // If no input date string or input date string is invalid
+        // date variable will be null, callback should expect null value for this case
+        onSelectDate(date);
+      }
     }
   }
 }
diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
index 7636a832b4f7e6..12c3415759ee60 100644
--- a/src/components/Dropdown/Dropdown.tsx
+++ b/src/components/Dropdown/Dropdown.tsx
@@ -50,7 +50,8 @@ export class Dropdown extends React.Component<IDropdownProps, any> {
 
   public componentWillReceiveProps(newProps: IDropdownProps) {
     this.setState({
-      selectedIndex: this._getSelectedIndex(newProps.options, newProps.selectedKey)
+      selectedIndex: this._getSelectedIndex(newProps.options, newProps.selectedKey),
+      isDisabled: newProps.isDisabled
     });
   }
 
diff --git a/src/components/FocusZone/FocusZone.tsx b/src/components/FocusZone/FocusZone.tsx
index 1a84daadda021f..e1214127b77f3b 100644
--- a/src/components/FocusZone/FocusZone.tsx
+++ b/src/components/FocusZone/FocusZone.tsx
@@ -8,6 +8,7 @@ import { EventGroup } from '../../utilities/eventGroup/EventGroup';
 import { KeyCodes } from '../../utilities/KeyCodes';
 import { getRTL } from '../../utilities/rtl';
 import { getId } from '../../utilities/object';
+import { autobind } from '../../utilities/autobind';
 import { css } from '../../utilities/css';
 import {
   getNextElement,
@@ -60,10 +61,6 @@ export class FocusZone extends React.Component<IFocusZoneProps, {}> implements I
     };
 
     this._events = new EventGroup(this);
-
-    this._onKeyDown = this._onKeyDown.bind(this);
-    this._onFocus = this._onFocus.bind(this);
-    this._onMouseDown = this._onMouseDown.bind(this);
   }
 
   public componentDidMount() {
@@ -100,7 +97,8 @@ export class FocusZone extends React.Component<IFocusZoneProps, {}> implements I
         aria-labelledby={ ariaLabelledBy }
         onMouseDownCapture={ this._onMouseDown }
         onKeyDown={ this._onKeyDown }
-        onFocus={ this._onFocus } >
+        onFocus={ this._onFocus }
+        >
         { this.props.children }
       </div>
     );
@@ -157,6 +155,7 @@ export class FocusZone extends React.Component<IFocusZoneProps, {}> implements I
     return false;
   }
 
+  @autobind
   private _onFocus(ev: React.FocusEvent) {
     let { onActiveElementChanged } = this.props;
 
@@ -182,12 +181,13 @@ export class FocusZone extends React.Component<IFocusZoneProps, {}> implements I
   /**
    * Handle global tab presses so that we can patch tabindexes on the fly.
    */
-  private _onKeyDownCapture(ev: React.KeyboardEvent) {
+  private _onKeyDownCapture(ev: KeyboardEvent) {
     if (ev.which === KeyCodes.tab) {
       this._updateTabIndexes();
     }
   }
 
+  @autobind
   private _onMouseDown(ev: React.MouseEvent) {
     const { disabled } = this.props;
 
@@ -218,6 +218,7 @@ export class FocusZone extends React.Component<IFocusZoneProps, {}> implements I
   /**
    * Handle the keystrokes.
    */
+  @autobind
   private _onKeyDown(ev: React.KeyboardEvent) {
     const { direction, disabled, isInnerZoneKeystroke } = this.props;
 
@@ -432,7 +433,7 @@ export class FocusZone extends React.Component<IFocusZoneProps, {}> implements I
       let distance = -1;
 
       if ((targetTop === -1 && targetRect.bottom <= activeRect.top) ||
-      (targetRect.top === targetTop)) {
+        (targetRect.top === targetTop)) {
         targetTop = targetRect.top;
         if (leftAlignment >= targetRect.left && leftAlignment <= (targetRect.left + targetRect.width)) {
           distance = 0;
diff --git a/src/components/GroupedList/GroupFooter.tsx b/src/components/GroupedList/GroupFooter.tsx
index 14691145fee7d4..15db445c998140 100644
--- a/src/components/GroupedList/GroupFooter.tsx
+++ b/src/components/GroupedList/GroupFooter.tsx
@@ -5,6 +5,7 @@ import {
   IGroup,
 } from './GroupedList.Props';
 import { GroupSpacer } from './GroupSpacer';
+import { autobind } from '../../utilities/autobind';
 import './GroupFooter.scss';
 
 export interface IGroupFooter {
@@ -15,11 +16,6 @@ export interface IGroupFooter {
 }
 
 export class GroupFooter extends React.Component<IGroupFooter, {}> {
-  constructor(props: IGroupFooter) {
-    super(props);
-
-    this._onToggleSummarize = this._onToggleSummarize.bind(this);
-  }
 
   public render() {
     let { group, groupLevel, footerProps } = this.props;
@@ -36,6 +32,7 @@ export class GroupFooter extends React.Component<IGroupFooter, {}> {
     );
   }
 
+  @autobind
   private _onToggleSummarize() {
     let { group, footerProps } = this.props;
     let onToggleSummarize = footerProps && footerProps.onToggleSummarize;
diff --git a/src/components/GroupedList/GroupHeader.tsx b/src/components/GroupedList/GroupHeader.tsx
index f5745ae5a1ec92..39a7bce3874d8c 100644
--- a/src/components/GroupedList/GroupHeader.tsx
+++ b/src/components/GroupedList/GroupHeader.tsx
@@ -9,6 +9,7 @@ import { GroupSpacer } from './GroupSpacer';
 import { Spinner } from '../../Spinner';
 import { FocusZone, FocusZoneDirection } from '../../FocusZone';
 import { css } from '../../utilities/css';
+import { autobind } from '../../utilities/autobind';
 import { IViewport } from '../../utilities/decorators/withViewport';
 import './GroupHeader.scss';
 
@@ -30,10 +31,6 @@ export class GroupHeader extends React.Component<IGroupHeader, IGroupHeaderState
   constructor(props: IGroupHeader) {
     super(props);
 
-    this._onToggleCollapse = this._onToggleCollapse.bind(this);
-    this._onToggleSelectGroup = this._onToggleSelectGroup.bind(this);
-    this._onHeaderClick = this._onHeaderClick.bind(this);
-
     this.state = {
       isCollapsed: this.props.group && this.props.group.isCollapsed,
       isLoadingVisible: false
@@ -115,6 +112,7 @@ export class GroupHeader extends React.Component<IGroupHeader, IGroupHeaderState
     );
   }
 
+  @autobind
   private _onToggleCollapse(ev: React.MouseEvent) {
     let { group, headerProps } = this.props;
     let { isCollapsed } = this.state;
@@ -136,6 +134,7 @@ export class GroupHeader extends React.Component<IGroupHeader, IGroupHeaderState
     ev.preventDefault();
   }
 
+  @autobind
   private _onToggleSelectGroup(ev: React.MouseEvent) {
     let { group, headerProps } = this.props;
     let onToggleSelectGroup = headerProps && headerProps.onToggleSelectGroup;
@@ -148,6 +147,7 @@ export class GroupHeader extends React.Component<IGroupHeader, IGroupHeaderState
     ev.stopPropagation();
   }
 
+  @autobind
   private _onHeaderClick() {
     let { group, headerProps } = this.props;
 
diff --git a/src/components/GroupedList/GroupedList.tsx b/src/components/GroupedList/GroupedList.tsx
index 1dba424c33b53d..06de96e4d71f5c 100644
--- a/src/components/GroupedList/GroupedList.tsx
+++ b/src/components/GroupedList/GroupedList.tsx
@@ -17,7 +17,7 @@ import {
 import {
   SelectionMode
 } from '../../utilities/selection/index';
-
+import { autobind } from '../../utilities/autobind';
 import { assign } from '../../utilities/object';
 import './GroupedList.scss';
 
@@ -44,11 +44,6 @@ export class GroupedList extends React.Component<IGroupedListProps, IGroupedList
   constructor(props: IGroupedListProps) {
     super(props);
 
-    this._onToggleCollapse = this._onToggleCollapse.bind(this);
-    this._onToggleSelectGroup = this._onToggleSelectGroup.bind(this);
-    this._onToggleSummarize = this._onToggleSummarize.bind(this);
-    this._getGroupKey = this._getGroupKey.bind(this);
-    this._renderGroup = this._renderGroup.bind(this);
     this._isSomeGroupExpanded = this._computeIsSomeGroupExpanded(props.groups);
 
     this.state = {
@@ -133,6 +128,7 @@ export class GroupedList extends React.Component<IGroupedListProps, IGroupedList
     }
   }
 
+  @autobind
   private _renderGroup(group, groupIndex) {
     let {
       dragDropEvents,
@@ -180,6 +176,7 @@ export class GroupedList extends React.Component<IGroupedListProps, IGroupedList
       ) : null;
   }
 
+  @autobind
   private _getGroupKey(group: IGroup): string {
     return 'group-' + (group ?
       group.key + '-' + group.count :
@@ -199,6 +196,7 @@ export class GroupedList extends React.Component<IGroupedListProps, IGroupedList
     return level;
   }
 
+  @autobind
   private _onToggleCollapse(group: IGroup) {
     let { groupProps } = this.props;
     let onToggleCollapse = groupProps && groupProps.headerProps && groupProps.headerProps.onToggleCollapse;
@@ -214,6 +212,7 @@ export class GroupedList extends React.Component<IGroupedListProps, IGroupedList
     }
   }
 
+  @autobind
   private _onToggleSelectGroup(group: IGroup) {
     let { groups } = this.state;
 
@@ -269,6 +268,7 @@ export class GroupedList extends React.Component<IGroupedListProps, IGroupedList
     }
   }
 
+  @autobind
   private _onToggleSummarize(group: IGroup) {
     let { groups } = this.state;
     let { groupProps } = this.props;
diff --git a/src/components/Link/Link.tsx b/src/components/Link/Link.tsx
index 9ab89a769e84df..d74c0d344d3c0c 100644
--- a/src/components/Link/Link.tsx
+++ b/src/components/Link/Link.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { css } from '../../utilities/css';
-import './Link.scss';
+import { autobind } from '../../utilities/autobind';
 import { ILinkProps, IPopupWindowProps, PopupWindowPosition } from './Link.Props';
+import './Link.scss';
 
 interface IMyScreen extends Screen {
   left: number;
@@ -12,13 +13,6 @@ declare var screen: IMyScreen;
 
 export class Link extends React.Component<ILinkProps, any> {
 
-  constructor(props: ILinkProps) {
-    super(props);
-
-    this._onClick = this._onClick.bind(this);
-    this._popupWindow = this._popupWindow.bind(this);
-  }
-
   public render() {
     let { children, className, href } = this.props;
 
@@ -42,6 +36,7 @@ export class Link extends React.Component<ILinkProps, any> {
       ));
   }
 
+  @autobind
   private _onClick(ev: React.MouseEvent) {
     let { popupWindowProps, onClick } = this.props;
 
diff --git a/src/components/MarqueeSelection/MarqueeSelection.tsx b/src/components/MarqueeSelection/MarqueeSelection.tsx
index f38904fe560939..8bcf94e40faa12 100644
--- a/src/components/MarqueeSelection/MarqueeSelection.tsx
+++ b/src/components/MarqueeSelection/MarqueeSelection.tsx
@@ -7,6 +7,7 @@ import { IRectangle } from '../../common/IRectangle';
 import { css } from '../../utilities/css';
 import { findScrollableParent } from '../../utilities/scrollUtilities';
 import { getDistanceBetweenPoints } from '../../utilities/math';
+import { autobind } from '../../utilities/autobind';
 
 import './MarqueeSelection.scss';
 
@@ -52,8 +53,6 @@ export class MarqueeSelection extends BaseComponent<IMarqueeSelectionProps, IMar
     this.state = {
       dragRect: undefined
     };
-
-    this._onMouseDown = this._onMouseDown.bind(this);
   }
 
   public componentDidMount() {
@@ -94,6 +93,7 @@ export class MarqueeSelection extends BaseComponent<IMarqueeSelectionProps, IMar
     );
   }
 
+  @autobind
   private _onMouseDown(ev: MouseEvent) {
     let { isEnabled, onShouldStartSelection } = this.props;
 
diff --git a/src/components/Persona/Persona.scss b/src/components/Persona/Persona.scss
index 209f1a8e181e11..d5ae74cfdb2d87 100644
--- a/src/components/Persona/Persona.scss
+++ b/src/components/Persona/Persona.scss
@@ -72,7 +72,7 @@ $ms-Persona-presenceSizeXl: 28px;
   display: table;
   table-layout: fixed;
   border-collapse: separate;
-  
+
   .ms-ContextualHost {
     display: none;
   }
@@ -222,7 +222,6 @@ $ms-Persona-presenceSizeXl: 28px;
 .ms-Persona-details {
   padding: 0 12px;
   vertical-align: middle;
-  overflow: hidden;
   @include text-align(left);
   @include padding-left($ms-Persona-sizeMd + $ms-Persona-imageDetailsLgSpace);
   display: table-cell;
@@ -454,7 +453,7 @@ $ms-Persona-presenceSizeXl: 28px;
 
   .ms-Persona-tertiaryText {
     padding-top: 5px;
-    display: block; 
+    display: block;
   }
 }
 
diff --git a/src/components/Persona/Persona.tsx b/src/components/Persona/Persona.tsx
index cd7dbb458cd9a2..b4871e6d7e10ef 100644
--- a/src/components/Persona/Persona.tsx
+++ b/src/components/Persona/Persona.tsx
@@ -23,7 +23,19 @@ export class Persona extends React.Component<IPersonaProps, any> {
   };
 
   public render() {
-    let { className, size, imageUrl, imageInitials, initialsColor, presence, primaryText, secondaryText, tertiaryText, optionalText, hidePersonaDetails } = this.props;
+    let {
+      className,
+      size,
+      imageUrl,
+      imageInitials,
+      initialsColor,
+      presence,
+      primaryText,
+      secondaryText,
+      tertiaryText,
+      optionalText,
+      hidePersonaDetails
+    } = this.props;
 
     let presenceElement = null;
     if (presence !== PersonaPresence.none) {
@@ -56,18 +68,17 @@ export class Persona extends React.Component<IPersonaProps, any> {
             ) : (null) }
             <div className='ms-Persona-tertiaryText'>{ tertiaryText }</div>
             <div className='ms-Persona-optionalText'>{ optionalText }</div>
+            { this.props.children }
           </div>;
     return (
-      <div { ... this.props as any } className={ css('ms-Persona', className, PERSONA_SIZE[size], PERSONA_PRESENCE[presence]) }>
+      <div { ...this.props as any } className={ css('ms-Persona', className, PERSONA_SIZE[size], PERSONA_PRESENCE[presence]) }>
         { size !== PersonaSize.tiny && (
           <div className='ms-Persona-imageArea'>
             <div className={ css('ms-Persona-initials', PERSONA_INITIALS_COLOR[initialsColor]) }>{ imageInitials }</div>
             <Image className='ms-Persona-image' imageFit={ ImageFit.cover } src={ imageUrl } />
           </div>
         ) }
-
         { presenceElement }
-
         { (!hidePersonaDetails || (size === PersonaSize.tiny)) && personaDetails }
       </div>
     );
diff --git a/src/components/Toggle/Toggle.tsx b/src/components/Toggle/Toggle.tsx
index a776e8147c7438..ab22ddffe75556 100644
--- a/src/components/Toggle/Toggle.tsx
+++ b/src/components/Toggle/Toggle.tsx
@@ -3,6 +3,8 @@ import { IToggleProps } from './Toggle.Props';
 import { css } from '../../utilities/css';
 import { Label } from '../../Label';
 import { getId } from '../../utilities/object';
+import { autobind } from '../../utilities/autobind';
+
 import './Toggle.scss';
 
 export interface IToggleState {
@@ -28,7 +30,6 @@ export class Toggle extends React.Component<IToggleProps, IToggleState> {
     };
 
     this._id = getId('Toggle');
-    this._onClick = this._onClick.bind(this);
   }
 
   /**
@@ -91,6 +92,7 @@ export class Toggle extends React.Component<IToggleProps, IToggleState> {
       }
   }
 
+  @autobind
   private _onClick() {
     let { checked, onChanged } = this.props;
     let { isChecked } = this.state;
diff --git a/src/demo/pages/ContextualMenuPage/examples/ContextualMenu.Basic.Example.tsx b/src/demo/pages/ContextualMenuPage/examples/ContextualMenu.Basic.Example.tsx
index c44a7b1c0abdf5..3a822688e9e2fe 100644
--- a/src/demo/pages/ContextualMenuPage/examples/ContextualMenu.Basic.Example.tsx
+++ b/src/demo/pages/ContextualMenuPage/examples/ContextualMenu.Basic.Example.tsx
@@ -14,14 +14,14 @@ export class ContextualMenuBasicExample extends React.Component<any, any> {
   public render() {
     return (
         <div>
-          <Button onClick={this._onClick}> Click for ContextualMenu </Button>
+          <Button onClick={ this._onClick }> Click for ContextualMenu </Button>
             { this.state.isContextMenuVisible ? (
           <ContextualMenu
             shouldFocusOnMount={ true }
-            targetPoint={this.state.target}
-            useTargetPoint={true}
-            onDismiss={this._onDismiss}
-            directionalHint={ getRTL() ? DirectionalHint.bottomRightEdge : DirectionalHint.bottomLeftEdge}
+            targetPoint={ this.state.target }
+            useTargetPoint={ true }
+            onDismiss={ this._onDismiss }
+            directionalHint={ getRTL() ? DirectionalHint.bottomRightEdge : DirectionalHint.bottomLeftEdge }
             items={
               [
                 {
diff --git a/src/utilities/selection/Selection.test.ts b/src/utilities/selection/Selection.test.ts
index cfc4846a80b22c..6ce427f5dadc46 100644
--- a/src/utilities/selection/Selection.test.ts
+++ b/src/utilities/selection/Selection.test.ts
@@ -1,6 +1,6 @@
 let { expect } = chai;
 
-import { Selection } from './index';
+import { Selection, IObjectWithKey } from './index';
 
 let setA = [ { key: 'a' }, { key: 'b' }, { key: 'c' } ];
 let setB = [ { key: 'a' }, { key: 'd' }, { key: 'b' } ];
@@ -52,4 +52,22 @@ describe('Selection', () => {
     expect(changeCount).equals(10, 'after range selecting from 0 to 2');
   });
 
+  it('returns false on isAllSelected when no items are selectable', () => {
+    let changeEvents = 0;
+    let selection = new Selection({
+      canSelectItem: (item: IObjectWithKey) => false,
+      onSelectionChanged: () => changeEvents++
+    });
+
+    selection.setItems(setA);
+
+    expect(selection.isAllSelected()).to.equal(false, 'isAllSelected was not false after initialization');
+
+    selection.setAllSelected(true);
+
+    expect(selection.isAllSelected()).to.equal(false, 'isAllSelected was not false after trying to select all the unselectables');
+
+    expect(changeEvents).to.equal(0, 'changeEvents were not 0');
+  });
+
 });
\ No newline at end of file
diff --git a/src/utilities/selection/Selection.ts b/src/utilities/selection/Selection.ts
index 251c35e4b53a87..7857891beb9e9a 100644
--- a/src/utilities/selection/Selection.ts
+++ b/src/utilities/selection/Selection.ts
@@ -156,10 +156,12 @@ export class Selection implements ISelection {
   }
 
   public isAllSelected(): boolean {
+    let selectableCount = this._items.length - this._unselectableCount;
+
     return (
       (this.count > 0) &&
       (this._isAllSelected && this._exemptedCount === 0) ||
-      (!this._isAllSelected && (this._exemptedCount === this._items.length - this._unselectableCount) && this._items.length > 0));
+      (!this._isAllSelected && (this._exemptedCount === selectableCount) && selectableCount > 0));
   }
 
   public isKeySelected(key: string): boolean {
@@ -176,7 +178,9 @@ export class Selection implements ISelection {
   }
 
   public setAllSelected(isAllSelected: boolean) {
-    if (this._exemptedCount > 0 || isAllSelected !== this._isAllSelected) {
+    let selectableCount = this._items ? (this._items.length - this._unselectableCount) : 0;
+
+    if (selectableCount > 0 && (this._exemptedCount > 0 || isAllSelected !== this._isAllSelected)) {
       this._exemptedIndices = {};
       this._exemptedCount = 0;
       this._isAllSelected = isAllSelected;
diff --git a/src/utilities/selection/SelectionZone.tsx b/src/utilities/selection/SelectionZone.tsx
index 5d94d42c8b955a..c505e1e76931c5 100644
--- a/src/utilities/selection/SelectionZone.tsx
+++ b/src/utilities/selection/SelectionZone.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { BaseComponent } from '../../common/BaseComponent';
+import { autobind } from '../../utilities/autobind';
 import { SelectionLayout } from './SelectionLayout';
 import { KeyCodes } from '../KeyCodes';
 import {
@@ -55,21 +56,6 @@ export class SelectionZone extends BaseComponent<ISelectionZoneProps, {}> {
   private _isMetaPressed: boolean;
   private _shouldIgnoreFocus: boolean;
 
-  constructor(props: ISelectionZoneProps) {
-    super(props);
-
-    // Specifically for the click methods, we will want to use React eventing to allow
-    // React and non React events to stop propagation and avoid the default SelectionZone
-    // behaviors (like executing onInvoked.)
-    this._onFocus = this._onFocus.bind(this);
-    this._onKeyDown = this._onKeyDown.bind(this);
-    this._onClick = this._onClick.bind(this);
-    this._onMouseDown = this._onMouseDown.bind(this);
-    this._onDoubleClick = this._onDoubleClick.bind(this);
-    this._updateModifiers = this._updateModifiers.bind(this);
-    this.ignoreNextFocus = this.ignoreNextFocus.bind(this);
-  }
-
   public componentDidMount() {
     // Track the latest modifier keys globally.
     this._events.on(window, 'keydown keyup', this._updateModifiers);
@@ -98,6 +84,7 @@ export class SelectionZone extends BaseComponent<ISelectionZoneProps, {}> {
    * been called on an element, so we need a flag to store the idea that we will bypass the "next"
    * focus event that occurs. This method does that.
    */
+  @autobind
   public ignoreNextFocus() {
     this._shouldIgnoreFocus = true;
   }
@@ -107,6 +94,7 @@ export class SelectionZone extends BaseComponent<ISelectionZoneProps, {}> {
    * as long as the focus did not originate from a mouse down/touch event. For those cases, we handle them
    * specially.
    */
+  @autobind
   private _onFocus(ev: React.FocusEvent) {
     let target = ev.target as HTMLElement;
     let { selection, selectionMode } = this.props;
@@ -132,6 +120,7 @@ export class SelectionZone extends BaseComponent<ISelectionZoneProps, {}> {
     }
   }
 
+  @autobind
   private _onMouseDown(ev: React.MouseEvent) {
     this._updateModifiers(ev);
 
@@ -156,6 +145,7 @@ export class SelectionZone extends BaseComponent<ISelectionZoneProps, {}> {
     }
   }
 
+  @autobind
   private _onClick(ev: React.MouseEvent) {
     this._updateModifiers(ev);
 
@@ -193,6 +183,7 @@ export class SelectionZone extends BaseComponent<ISelectionZoneProps, {}> {
    * In multi selection, if you double click within an item's root (but not within the invoke element or input elements),
    * we should execute the invoke handler.
    */
+  @autobind
   private _onDoubleClick(ev: React.MouseEvent) {
     let target = ev.target as HTMLElement;
     let { selectionMode, onItemInvoked } = this.props;
@@ -218,6 +209,7 @@ export class SelectionZone extends BaseComponent<ISelectionZoneProps, {}> {
     }
   }
 
+  @autobind
   private _onKeyDown(ev: React.KeyboardEvent) {
     this._updateModifiers(ev);