diff --git a/common/changes/office-ui-fabric-react/jg-ftz-disabled-prop_2019-04-22-23-09.json b/common/changes/office-ui-fabric-react/jg-ftz-disabled-prop_2019-04-22-23-09.json
new file mode 100644
index 0000000000000..e10810e6f54c8
--- /dev/null
+++ b/common/changes/office-ui-fabric-react/jg-ftz-disabled-prop_2019-04-22-23-09.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "FocusTrapZone: Add disabled prop.",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "jagore@microsoft.com"
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.md b/packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.md
index 1db9733ee3dc7..ce3e93cc7afea 100644
--- a/packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.md
+++ b/packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.md
@@ -4225,6 +4225,7 @@ export interface IFocusTrapZone {
 export interface IFocusTrapZoneProps extends React.HTMLAttributes<HTMLDivElement> {
     ariaLabelledBy?: string;
     componentRef?: IRefObject<IFocusTrapZone>;
+    disabled?: boolean;
     disableFirstFocus?: boolean;
     elementToFocusOnDismiss?: HTMLElement;
     firstFocusableSelector?: string | (() => string);
diff --git a/packages/office-ui-fabric-react/src/components/Callout/FocusTrapCallout.tsx b/packages/office-ui-fabric-react/src/components/Callout/FocusTrapCallout.tsx
index 99c507688d398..c06d7aa017c25 100644
--- a/packages/office-ui-fabric-react/src/components/Callout/FocusTrapCallout.tsx
+++ b/packages/office-ui-fabric-react/src/components/Callout/FocusTrapCallout.tsx
@@ -11,7 +11,9 @@ import { FocusTrapZone } from '../../FocusTrapZone';
 export const FocusTrapCallout: React.StatelessComponent<IFocusTrapCalloutProps> = (props: IFocusTrapCalloutProps): JSX.Element => {
   return (
     <Callout {...props}>
-      <FocusTrapZone {...props.focusTrapProps}>{props.children}</FocusTrapZone>
+      <FocusTrapZone disabled={props.hidden} {...props.focusTrapProps}>
+        {props.children}
+      </FocusTrapZone>
     </Callout>
   );
 };
diff --git a/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.doc.tsx b/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.doc.tsx
index f38ec14542b0d..2b9f37363c1de 100644
--- a/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.doc.tsx
+++ b/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.doc.tsx
@@ -18,10 +18,6 @@ import { FocusTrapZoneNestedExample } from './examples/FocusTrapZone.Nested.Exam
 const FocusTrapZoneNestedExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Nested.Example.tsx') as string;
 const FocusTrapZoneNestedExampleCodepen = require('!@uifabric/codepen-loader!office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Nested.Example.tsx') as string;
 
-import { FocusTrapZoneNoTabbableExample } from './examples/FocusTrapZone.NoTabbable.Example';
-const FocusTrapZoneNoTabbableExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.NoTabbable.Example.tsx') as string;
-const FocusTrapZoneNoTabbableExampleCodepen = require('!@uifabric/codepen-loader!office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.NoTabbable.Example.tsx') as string;
-
 import { FocusTrapZoneFocusZoneExample } from './examples/FocusTrapZone.FocusZone.Example';
 const FocusTrapZoneFocusZoneExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.FocusZone.Example.tsx') as string;
 const FocusTrapZoneFocusZoneExampleCodepen = require('!@uifabric/codepen-loader!office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.FocusZone.Example.tsx') as string;
@@ -66,12 +62,6 @@ export const FocusTrapZonePageProps: IDocPageProps = {
       codepenJS: FocusTrapZoneFocusZoneExampleCodepen,
       view: <FocusTrapZoneFocusZoneExample />
     },
-    {
-      title: 'FocusTrapZone with no tabbable elements',
-      code: FocusTrapZoneNoTabbableExampleCode,
-      codepenJS: FocusTrapZoneNoTabbableExampleCodepen,
-      view: <FocusTrapZoneNoTabbableExample />
-    },
     {
       title: 'A Dialog nested in a Panel',
       code: FocusTrapZoneDialogInPanelExampleCode,
diff --git a/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.test.tsx b/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.test.tsx
index dec6135099c6f..613fa6afbc0ac 100644
--- a/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.test.tsx
@@ -579,6 +579,19 @@ describe('FocusTrapZone', () => {
       expect(document.activeElement).toBe(activeElement);
     });
 
+    it('Does not focus first on mount while disabled', async () => {
+      expect.assertions(1);
+
+      const activeElement = document.activeElement;
+
+      setupTest({ disabled: true });
+
+      // document.activeElement can be used to detect activeElement after component mount, but it does not
+      // update based on focus events due to limitations of ReactDOM.
+      // Make sure activeElement didn't change.
+      expect(document.activeElement).toBe(activeElement);
+    });
+
     it('Focuses on firstFocusableSelector on mount', async () => {
       expect.assertions(1);
 
@@ -587,6 +600,16 @@ describe('FocusTrapZone', () => {
       expect(document.activeElement).toBe(buttonC);
     });
 
+    it('Does not focus on firstFocusableSelector on mount while disabled', async () => {
+      expect.assertions(1);
+
+      const activeElement = document.activeElement;
+
+      setupTest({ firstFocusableSelector: 'c', disabled: true });
+
+      expect(document.activeElement).toBe(activeElement);
+    });
+
     it('Falls back to first focusable element with invalid firstFocusableSelector', async () => {
       const { buttonA } = setupTest({ firstFocusableSelector: 'invalidSelector' });
 
diff --git a/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.tsx b/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.tsx
index d2faefa5c7a88..7da1c3a7daba1 100644
--- a/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.tsx
+++ b/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.tsx
@@ -47,22 +47,28 @@ export class FocusTrapZone extends React.Component<IFocusTrapZoneProps, {}> impl
   public componentDidUpdate(prevProps: IFocusTrapZoneProps) {
     const prevForceFocusInsideTrap = prevProps.forceFocusInsideTrap !== undefined ? prevProps.forceFocusInsideTrap : true;
     const newForceFocusInsideTrap = this.props.forceFocusInsideTrap !== undefined ? this.props.forceFocusInsideTrap : true;
+    const prevDisabled = prevProps.disabled !== undefined ? prevProps.disabled : false;
+    const newDisabled = this.props.disabled !== undefined ? this.props.disabled : false;
 
-    if (!prevForceFocusInsideTrap && newForceFocusInsideTrap) {
-      // Transition from forceFocusInsideTrap disabled to enabled. Emulate what happens when a FocusTrapZone gets mounted
+    if ((!prevForceFocusInsideTrap && newForceFocusInsideTrap) || (prevDisabled && !newDisabled)) {
+      // Transition from forceFocusInsideTrap / FTZ disabled to enabled.
+      // Emulate what happens when a FocusTrapZone gets mounted.
       this._bringFocusIntoZone();
-    } else if (prevForceFocusInsideTrap && !newForceFocusInsideTrap) {
-      // Transition from forceFocusInsideTrap enabled to disabled. Emulate what happens when a FocusTrapZone gets unmounted
+    } else if ((prevForceFocusInsideTrap && !newForceFocusInsideTrap) || (!prevDisabled && newDisabled)) {
+      // Transition from forceFocusInsideTrap / FTZ enabled to disabled.
+      // Emulate what happens when a FocusTrapZone gets unmounted.
       this._returnFocusToInitiator();
     }
   }
 
   public componentWillUnmount(): void {
-    this._returnFocusToInitiator();
+    if (!this.props.disabled) {
+      this._returnFocusToInitiator();
+    }
   }
 
   public render(): JSX.Element {
-    const { className, ariaLabelledBy } = this.props;
+    const { className, disabled = false, ariaLabelledBy } = this.props;
     const divProps = getNativeProps(this.props, divProperties);
 
     const bumperProps = {
@@ -70,7 +76,7 @@ export class FocusTrapZone extends React.Component<IFocusTrapZoneProps, {}> impl
         pointerEvents: 'none',
         position: 'fixed' // 'fixed' prevents browsers from scrolling to bumpers when viewport does not contain them
       },
-      tabIndex: 0,
+      tabIndex: disabled ? -1 : 0, // make bumpers tabbable only when enabled
       'aria-hidden': true,
       'data-is-visible': true
     } as React.HTMLAttributes<HTMLDivElement>;
@@ -168,7 +174,12 @@ export class FocusTrapZone extends React.Component<IFocusTrapZoneProps, {}> impl
   };
 
   private _onBumperFocus = (isFirstBumper: boolean) => {
+    if (this.props.disabled) {
+      return;
+    }
+
     const currentBumper = (isFirstBumper === this._hasFocus ? this._lastBumper.current : this._firstBumper.current) as HTMLElement;
+
     if (this._root.current) {
       const nextFocusable =
         isFirstBumper === this._hasFocus
@@ -187,7 +198,11 @@ export class FocusTrapZone extends React.Component<IFocusTrapZoneProps, {}> impl
   };
 
   private _bringFocusIntoZone(): void {
-    const { elementToFocusOnDismiss, disableFirstFocus = false } = this.props;
+    const { elementToFocusOnDismiss, disabled = false, disableFirstFocus = false } = this.props;
+
+    if (disabled) {
+      return;
+    }
 
     FocusTrapZone._focusStack.push(this);
 
@@ -252,6 +267,10 @@ export class FocusTrapZone extends React.Component<IFocusTrapZoneProps, {}> impl
   }
 
   private _forceFocusInTrap = (ev: FocusEvent): void => {
+    if (this.props.disabled) {
+      return;
+    }
+
     if (FocusTrapZone._focusStack.length && this === FocusTrapZone._focusStack[FocusTrapZone._focusStack.length - 1]) {
       const focusedElement = document.activeElement as HTMLElement;
 
@@ -265,6 +284,10 @@ export class FocusTrapZone extends React.Component<IFocusTrapZoneProps, {}> impl
   };
 
   private _forceClickInTrap = (ev: MouseEvent): void => {
+    if (this.props.disabled) {
+      return;
+    }
+
     if (FocusTrapZone._focusStack.length && this === FocusTrapZone._focusStack[FocusTrapZone._focusStack.length - 1]) {
       const clickedElement = ev.target as HTMLElement;
 
diff --git a/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.types.ts b/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.types.ts
index 6b8f0f5a98da1..f3c71a6def8ac 100644
--- a/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.types.ts
+++ b/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.types.ts
@@ -22,9 +22,15 @@ export interface IFocusTrapZoneProps extends React.HTMLAttributes<HTMLDivElement
    */
   componentRef?: IRefObject<IFocusTrapZone>;
 
+  /**
+   * Disables the FocusTrapZone's focus trapping behavior when set.
+   * @defaultvalue false
+   */
+  disabled?: boolean;
+
   /**
    * Sets the HTMLElement to focus on when exiting the FocusTrapZone.
-   * @defaultvalue The element.target that triggered the FTZ.
+   * @defaultvalue element.target The element.target that triggered the FTZ.
    */
   elementToFocusOnDismiss?: HTMLElement;
 
diff --git a/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Click.Example.tsx b/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Click.Example.tsx
index 2870ca3a9ad1b..7c29bb4328e76 100644
--- a/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Click.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Click.Example.tsx
@@ -16,51 +16,33 @@ export class FocusTrapZoneBoxClickExample extends React.Component<{}, IFocusTrap
   private _toggle = React.createRef<IToggle>();
 
   public render() {
-    return (
-      <div>
-        {this.state.useTrapZone ? (
-          <FocusTrapZone isClickableOutsideFocusTrap={true} forceFocusInsideTrap={false}>
-            {this._internalContents()}
-          </FocusTrapZone>
-        ) : (
-          this._internalContents()
-        )}
-      </div>
-    );
-  }
-
-  private _internalContents() {
     const { useTrapZone } = this.state;
 
     return (
-      <Stack
-        horizontalAlign="start"
-        tokens={{ childrenGap: 15 }}
-        styles={{
-          root: { border: `2px dashed ${useTrapZone ? '#ababab' : 'transparent'}`, padding: 10 }
-        }}
-      >
-        <Toggle
-          label="Use trap zone"
-          componentRef={this._toggle}
-          checked={useTrapZone}
-          onChange={this._onFocusTrapZoneToggleChanged}
-          onText="On (toggle to exit)"
-          offText="Off"
-        />
-        <TextField label="Input inside trap zone" styles={{ root: { width: 300 } }} />
-        <Link href="https://bing.com">Hyperlink inside trap zone</Link>
-      </Stack>
+      <FocusTrapZone disabled={!useTrapZone} isClickableOutsideFocusTrap={true} forceFocusInsideTrap={false}>
+        <Stack
+          horizontalAlign="start"
+          tokens={{ childrenGap: 15 }}
+          styles={{
+            root: { border: `2px dashed ${useTrapZone ? '#ababab' : 'transparent'}`, padding: 10 }
+          }}
+        >
+          <Toggle
+            label="Use trap zone"
+            componentRef={this._toggle}
+            checked={useTrapZone}
+            onChange={this._onFocusTrapZoneToggleChanged}
+            onText="On (toggle to exit)"
+            offText="Off"
+          />
+          <TextField label="Input inside trap zone" styles={{ root: { width: 300 } }} />
+          <Link href="https://bing.com">Hyperlink inside trap zone</Link>
+        </Stack>
+      </FocusTrapZone>
     );
   }
 
   private _onFocusTrapZoneToggleChanged = (ev: React.MouseEvent<HTMLElement>, checked?: boolean): void => {
-    this.setState({ useTrapZone: !!checked }, () => {
-      // Restore focus to toggle after disabling the trap zone
-      // (the trap zone itself will handle initial focus when it's enabled)
-      if (!checked) {
-        this._toggle.current!.focus();
-      }
-    });
+    this.setState({ useTrapZone: !!checked });
   };
 }
diff --git a/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Example.tsx b/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Example.tsx
index 47b62fcecf8e7..dca44a9a1eea3 100644
--- a/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Example.tsx
@@ -1,10 +1,12 @@
 import * as React from 'react';
 
+import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
 import { FocusTrapZone } from 'office-ui-fabric-react/lib/FocusTrapZone';
 import { Link } from 'office-ui-fabric-react/lib/Link';
+import { Stack } from 'office-ui-fabric-react/lib/Stack';
+import { Text } from 'office-ui-fabric-react/lib/Text';
 import { TextField } from 'office-ui-fabric-react/lib/TextField';
 import { Toggle, IToggle } from 'office-ui-fabric-react/lib/Toggle';
-import { Stack } from 'office-ui-fabric-react/lib/Stack';
 
 export interface IFocusTrapZoneBoxExampleState {
   useTrapZone: boolean;
@@ -18,50 +20,49 @@ export class FocusTrapZoneBoxExample extends React.Component<{}, IFocusTrapZoneB
   private _toggle = React.createRef<IToggle>();
 
   public render() {
-    return (
-      <div>
-        {this.state.useTrapZone ? (
-          <FocusTrapZone>{this._internalContents()}</FocusTrapZone>
-        ) : (
-          // prettier-ignore
-          this._internalContents()
-        )}
-      </div>
-    );
-  }
-
-  private _internalContents() {
     const { useTrapZone } = this.state;
 
     return (
-      <Stack
-        horizontalAlign="start"
-        tokens={{ childrenGap: 15 }}
-        styles={{
-          root: { border: `2px solid ${useTrapZone ? '#ababab' : 'transparent'}`, padding: 10 }
-        }}
-      >
-        <Toggle
-          label="Use trap zone"
-          componentRef={this._toggle}
-          checked={useTrapZone}
-          onChange={this._onFocusTrapZoneToggleChanged}
-          onText="On (toggle to exit)"
-          offText="Off"
-        />
-        <TextField label="Input inside trap zone" styles={{ root: { width: 300 } }} />
-        <Link href="https://bing.com">Hyperlink inside trap zone</Link>
+      <Stack tokens={{ childrenGap: 8 }}>
+        <Stack.Item>
+          <Text>
+            If this button is used to enable FocusTrapZone, focus should return to this button after the FocusTrapZone is disabled.
+          </Text>
+        </Stack.Item>
+        <Stack.Item>
+          <DefaultButton onClick={this._onButtonClickHandler} text="Trap Focus" />
+        </Stack.Item>
+        <FocusTrapZone disabled={!useTrapZone}>
+          <Stack
+            horizontalAlign="start"
+            tokens={{ childrenGap: 15 }}
+            styles={{
+              root: { border: `2px solid ${useTrapZone ? '#ababab' : 'transparent'}`, padding: 10 }
+            }}
+          >
+            <Toggle
+              label="Use trap zone"
+              componentRef={this._toggle}
+              checked={useTrapZone}
+              onChange={this._onFocusTrapZoneToggleChanged}
+              onText="On (toggle to exit)"
+              offText="Off"
+            />
+            <TextField label="Input inside trap zone" styles={{ root: { width: 300 } }} />
+            <Link href="https://bing.com">Hyperlink inside trap zone</Link>
+          </Stack>
+        </FocusTrapZone>
       </Stack>
     );
   }
 
-  private _onFocusTrapZoneToggleChanged = (ev: React.MouseEvent<HTMLElement>, checked?: boolean): void => {
-    this.setState({ useTrapZone: !!checked }, () => {
-      // Restore focus to toggle after disabling the trap zone
-      // (the trap zone itself will handle initial focus when it's enabled)
-      if (!checked) {
-        this._toggle.current!.focus();
-      }
+  private _onButtonClickHandler = (): void => {
+    this.setState({
+      useTrapZone: true
     });
   };
+
+  private _onFocusTrapZoneToggleChanged = (ev: React.MouseEvent<HTMLElement>, checked?: boolean): void => {
+    this.setState({ useTrapZone: !!checked });
+  };
 }
diff --git a/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.FocusOnCustomElement.Example.tsx b/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.FocusOnCustomElement.Example.tsx
index c558eb8731828..fe36165463702 100644
--- a/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.FocusOnCustomElement.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.FocusOnCustomElement.Example.tsx
@@ -1,10 +1,12 @@
 import * as React from 'react';
 
+import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
 import { FocusTrapZone } from 'office-ui-fabric-react/lib/FocusTrapZone';
 import { Link } from 'office-ui-fabric-react/lib/Link';
+import { Stack } from 'office-ui-fabric-react/lib/Stack';
+import { Text } from 'office-ui-fabric-react/lib/Text';
 import { TextField } from 'office-ui-fabric-react/lib/TextField';
 import { Toggle, IToggle } from 'office-ui-fabric-react/lib/Toggle';
-import { Stack } from 'office-ui-fabric-react/lib/Stack';
 
 export interface IFocusTrapZoneBoxCustomElementExampleState {
   useTrapZone: boolean;
@@ -20,51 +22,49 @@ export class FocusTrapZoneBoxCustomElementExample extends React.Component<{}, IF
   private _toggle = React.createRef<IToggle>();
 
   public render() {
-    return (
-      <div>
-        {this.state.useTrapZone ? (
-          <FocusTrapZone firstFocusableSelector={_focusClassName}>{this._internalContents()}</FocusTrapZone>
-        ) : (
-          this._internalContents()
-        )}
-      </div>
-    );
-  }
-
-  private _internalContents() {
     const { useTrapZone } = this.state;
 
     return (
-      <Stack
-        horizontalAlign="start"
-        tokens={{ childrenGap: 15 }}
-        styles={{
-          root: { border: `2px solid ${useTrapZone ? '#ababab' : 'transparent'}`, padding: 10 }
-        }}
-      >
-        <Toggle
-          label="Use trap zone"
-          componentRef={this._toggle}
-          checked={useTrapZone}
-          onChange={this._onFocusTrapZoneToggleChanged}
-          onText="On (toggle to exit)"
-          offText="Off"
-        />
-        <TextField label="Input inside trap zone" styles={{ root: { width: 300 } }} />
-        <Link href="https://bing.com" className={_focusClassName}>
-          Hyperlink which will receive initial focus when trap zone is activated
-        </Link>
+      <Stack tokens={{ childrenGap: 8 }}>
+        <Stack.Item>
+          <Text>If this button is used to enable FocusTrapZone, the hyperlink should be focused.</Text>
+        </Stack.Item>
+        <Stack.Item>
+          <DefaultButton onClick={this._onButtonClickHandler} text="Focus Custom Element" />
+        </Stack.Item>
+        <FocusTrapZone disabled={!useTrapZone} firstFocusableSelector={_focusClassName}>
+          <Stack
+            horizontalAlign="start"
+            tokens={{ childrenGap: 15 }}
+            styles={{
+              root: { border: `2px solid ${useTrapZone ? '#ababab' : 'transparent'}`, padding: 10 }
+            }}
+          >
+            <Toggle
+              label="Use trap zone"
+              componentRef={this._toggle}
+              checked={useTrapZone}
+              onChange={this._onFocusTrapZoneToggleChanged}
+              onText="On (toggle to exit)"
+              offText="Off"
+            />
+            <TextField label="Input inside trap zone" styles={{ root: { width: 300 } }} />
+            <Link href="https://bing.com" className={_focusClassName}>
+              Hyperlink which will receive initial focus when trap zone is activated
+            </Link>
+          </Stack>
+        </FocusTrapZone>
       </Stack>
     );
   }
 
-  private _onFocusTrapZoneToggleChanged = (ev: React.MouseEvent<HTMLElement>, checked?: boolean): void => {
-    this.setState({ useTrapZone: !!checked }, () => {
-      // Restore focus to toggle after disabling the trap zone
-      // (the trap zone itself will handle initial focus when it's enabled)
-      if (!checked) {
-        this._toggle.current!.focus();
-      }
+  private _onButtonClickHandler = (): void => {
+    this.setState({
+      useTrapZone: true
     });
   };
+
+  private _onFocusTrapZoneToggleChanged = (ev: React.MouseEvent<HTMLElement>, checked?: boolean): void => {
+    this.setState({ useTrapZone: !!checked });
+  };
 }
diff --git a/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.FocusZone.Example.tsx b/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.FocusZone.Example.tsx
index 3f96bbc7560a5..d0dd9ed2249ee 100644
--- a/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.FocusZone.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.FocusZone.Example.tsx
@@ -18,20 +18,6 @@ export class FocusTrapZoneFocusZoneExample extends React.Component<{}, IFocusTra
   private _toggle = React.createRef<IToggle>();
 
   public render() {
-    return (
-      <div>
-        {this.state.useTrapZone ? (
-          <FocusTrapZone forceFocusInsideTrap={true} focusPreviouslyFocusedInnerElement={true}>
-            {this._internalContents()}
-          </FocusTrapZone>
-        ) : (
-          this._internalContents()
-        )}
-      </div>
-    );
-  }
-
-  private _internalContents() {
     const { useTrapZone } = this.state;
     const padding = 10;
     const border = '2px dashed #ababab';
@@ -39,34 +25,36 @@ export class FocusTrapZoneFocusZoneExample extends React.Component<{}, IFocusTra
     const tokens: IStackTokens = { childrenGap: 10 };
 
     return (
-      <Stack tokens={tokens} horizontalAlign="start" styles={{ root: { border: rootBorder, padding } }}>
-        <Toggle
-          label="Use trap zone"
-          componentRef={this._toggle}
-          checked={useTrapZone}
-          onChange={this._onFocusTrapZoneToggleChanged}
-          onText="On (toggle to exit)"
-          offText="Off"
-        />
+      <FocusTrapZone disabled={!useTrapZone} forceFocusInsideTrap={true} focusPreviouslyFocusedInnerElement={true}>
+        <Stack tokens={tokens} horizontalAlign="start" styles={{ root: { border: rootBorder, padding } }}>
+          <Toggle
+            label="Use trap zone"
+            componentRef={this._toggle}
+            checked={useTrapZone}
+            onChange={this._onFocusTrapZoneToggleChanged}
+            onText="On (toggle to exit)"
+            offText="Off"
+          />
 
-        <FocusZone direction={FocusZoneDirection.horizontal} data-is-visible={true}>
-          <Stack horizontal tokens={tokens} styles={{ root: { border, padding } }}>
-            <DefaultButton text="FZ1" />
-            <DefaultButton text="FZ1" />
-            <DefaultButton text="FZ1" />
-          </Stack>
-        </FocusZone>
+          <FocusZone direction={FocusZoneDirection.horizontal} data-is-visible={true}>
+            <Stack horizontal tokens={tokens} styles={{ root: { border, padding } }}>
+              <DefaultButton text="FZ1" />
+              <DefaultButton text="FZ1" />
+              <DefaultButton text="FZ1" />
+            </Stack>
+          </FocusZone>
 
-        <DefaultButton text="No FZ" />
+          <DefaultButton text="No FZ" />
 
-        <FocusZone direction={FocusZoneDirection.horizontal} data-is-visible={true}>
-          <Stack horizontal tokens={tokens} styles={{ root: { border, padding } }}>
-            <DefaultButton text="FZ2" />
-            <DefaultButton text="FZ2" />
-            <DefaultButton text="FZ2" />
-          </Stack>
-        </FocusZone>
-      </Stack>
+          <FocusZone direction={FocusZoneDirection.horizontal} data-is-visible={true}>
+            <Stack horizontal tokens={tokens} styles={{ root: { border, padding } }}>
+              <DefaultButton text="FZ2" />
+              <DefaultButton text="FZ2" />
+              <DefaultButton text="FZ2" />
+            </Stack>
+          </FocusZone>
+        </Stack>
+      </FocusTrapZone>
     );
   }
 
diff --git a/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Nested.Example.tsx b/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Nested.Example.tsx
index 9c72a6509960e..5d039e9225fe5 100644
--- a/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Nested.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Nested.Example.tsx
@@ -14,35 +14,32 @@ interface IFocusTrapComponentProps {
 class FocusTrapComponent extends React.Component<IFocusTrapComponentProps> {
   public render() {
     const { isActive, zoneNumber, children } = this.props;
-    const contents = (
-      <Stack
-        horizontal={zoneNumber === 2}
-        horizontalAlign="start"
-        tokens={{ childrenGap: 10 }}
-        styles={{
-          root: { border: `2px solid ${isActive ? '#ababab' : 'transparent'}`, padding: 10 }
-        }}
-      >
-        <Toggle
-          defaultChecked={isActive}
-          onChange={this._onFocusTrapZoneToggleChanged}
-          label={'Enable trap zone ' + zoneNumber}
-          onText="On (toggle to exit)"
-          offText="Off"
+
+    return (
+      <FocusTrapZone disabled={!isActive} forceFocusInsideTrap={false}>
+        <Stack
+          horizontalAlign="start"
+          tokens={{ childrenGap: 10 }}
           styles={{
-            // Set a width on these toggles in the horizontal zone to prevent jumping when enabled
-            root: zoneNumber >= 2 && zoneNumber <= 4 && { width: 200 }
+            root: { border: `2px solid ${isActive ? '#ababab' : 'transparent'}`, padding: 10 }
           }}
-        />
-        <DefaultButton onClick={this._onStringButtonClicked} text={`Zone ${zoneNumber} button`} />
-        {children}
-      </Stack>
+        >
+          <Toggle
+            checked={isActive}
+            onChange={this._onFocusTrapZoneToggleChanged}
+            label={'Enable trap zone ' + zoneNumber}
+            onText="On (toggle to exit)"
+            offText="Off"
+            styles={{
+              // Set a width on these toggles in the horizontal zone to prevent jumping when enabled
+              root: zoneNumber >= 2 && zoneNumber <= 4 && { width: 200 }
+            }}
+          />
+          <DefaultButton onClick={this._onStringButtonClicked} text={`Zone ${zoneNumber} button`} />
+          {children}
+        </Stack>
+      </FocusTrapZone>
     );
-
-    if (this.props.isActive) {
-      return <FocusTrapZone forceFocusInsideTrap={false}>{contents}</FocusTrapZone>;
-    }
-    return contents;
   }
 
   private _onStringButtonClicked = (): void => {
@@ -86,6 +83,12 @@ export class FocusTrapZoneNestedExample extends React.Component<{}, IFocusTrapZo
     this.setState({ activeStates: { ...activeStates, [zoneNumber]: isActive } });
   };
 
+  // This randomize example is exposing a quirk in focus stack behavior.
+  // For the randomize example, components render from the bottom up with all of the new "activeStates" simultaneously set.
+  // The most recently active item in the focusStack ends up being the highest parent, which is the reverse order focus
+  // trap zones would normally be put on the focusStack. That means children aren't capturing focus as one would normally
+  // expect when toggling the FTZ's individually. This would also be an issue if anyone ever rendered multiple nested and enabled
+  //  FocusTrapZones simultaneously.
   private _randomize = (): void => {
     const activeStates: IFocusTrapZoneNestedExampleState['activeStates'] = {};
     [1, 2, 3, 4, 5].forEach(zoneNumber => {
diff --git a/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.NoTabbable.Example.tsx b/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.NoTabbable.Example.tsx
deleted file mode 100644
index 808f2be2cd55d..0000000000000
--- a/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.NoTabbable.Example.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import * as React from 'react';
-
-import { FocusTrapZone } from 'office-ui-fabric-react/lib/FocusTrapZone';
-import { TextField } from 'office-ui-fabric-react/lib/TextField';
-import { Toggle, IToggle } from 'office-ui-fabric-react/lib/Toggle';
-import { Stack } from 'office-ui-fabric-react/lib/Stack';
-
-export interface IFocusTrapZoneNoTabbableExampleState {
-  useTrapZone: boolean;
-}
-
-export class FocusTrapZoneNoTabbableExample extends React.Component<{}, IFocusTrapZoneNoTabbableExampleState> {
-  public state: IFocusTrapZoneNoTabbableExampleState = { useTrapZone: false };
-
-  private _toggle = React.createRef<IToggle>();
-
-  public render() {
-    return (
-      <div>
-        {this.state.useTrapZone ? (
-          <FocusTrapZone forceFocusInsideTrap={true} focusPreviouslyFocusedInnerElement={true}>
-            {this._internalContents()}
-          </FocusTrapZone>
-        ) : (
-          this._internalContents()
-        )}
-      </div>
-    );
-  }
-
-  private _internalContents() {
-    const { useTrapZone } = this.state;
-
-    return (
-      <Stack
-        horizontalAlign="start"
-        tokens={{ childrenGap: 15 }}
-        styles={{
-          root: { border: `2px solid ${useTrapZone ? '#ababab' : 'transparent'}`, padding: 10 }
-        }}
-      >
-        <Toggle
-          label="Use trap zone"
-          componentRef={this._toggle}
-          checked={useTrapZone}
-          onChange={this._onFocusTrapZoneToggleChanged}
-          onText="On (toggle to exit)"
-          offText="Off"
-        />
-        <TextField placeholder="Not tabbable" tabIndex={-1} />
-        <TextField placeholder="Not tabbable" tabIndex={-1} />
-        <TextField placeholder="Not tabbable" tabIndex={-1} />
-      </Stack>
-    );
-  }
-
-  private _onFocusTrapZoneToggleChanged = (ev: React.MouseEvent<HTMLElement>, checked?: boolean): void => {
-    this.setState({ useTrapZone: !!checked }, () => {
-      // Restore focus to toggle after disabling the trap zone
-      // (the trap zone itself will handle initial focus when it's enabled)
-      if (!checked) {
-        this._toggle.current!.focus();
-      }
-    });
-  };
-}
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/FocusTrapZone.Box.Click.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/FocusTrapZone.Box.Click.Example.tsx.shot
index 2ed16525833f2..e73090a94375e 100644
--- a/packages/office-ui-fabric-react/src/components/__snapshots__/FocusTrapZone.Box.Click.Example.tsx.shot
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/FocusTrapZone.Box.Click.Example.tsx.shot
@@ -1,7 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Component Examples renders FocusTrapZone.Box.Click.Example.tsx correctly 1`] = `
-<div>
+<div
+  onBlur={[Function]}
+  onFocus={[Function]}
+  onFocusCapture={[Function]}
+>
+  <div
+    aria-hidden={true}
+    data-is-visible={true}
+    onFocus={[Function]}
+    style={
+      Object {
+        "pointerEvents": "none",
+        "position": "fixed",
+      }
+    }
+    tabIndex={-1}
+  />
   <div
     className=
         ms-Stack
@@ -384,5 +400,17 @@ exports[`Component Examples renders FocusTrapZone.Box.Click.Example.tsx correctl
       Hyperlink inside trap zone
     </a>
   </div>
+  <div
+    aria-hidden={true}
+    data-is-visible={true}
+    onFocus={[Function]}
+    style={
+      Object {
+        "pointerEvents": "none",
+        "position": "fixed",
+      }
+    }
+    tabIndex={-1}
+  />
 </div>
 `;
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/FocusTrapZone.Box.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/FocusTrapZone.Box.Example.tsx.shot
index 1cba7b46ad1b8..b31458f09c497 100644
--- a/packages/office-ui-fabric-react/src/components/__snapshots__/FocusTrapZone.Box.Example.tsx.shot
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/FocusTrapZone.Box.Example.tsx.shot
@@ -1,232 +1,249 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Component Examples renders FocusTrapZone.Box.Example.tsx correctly 1`] = `
-<div>
+<div
+  className=
+      ms-Stack
+      {
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        flex-wrap: nowrap;
+        height: auto;
+        width: auto;
+      }
+      & > * {
+        text-overflow: ellipsis;
+      }
+      & > *:not(:first-child) {
+        margin-top: 8px;
+      }
+      & > *:not(.ms-StackItem) {
+        flex-shrink: 1;
+      }
+>
   <div
     className=
-        ms-Stack
+        ms-StackItem
         {
-          align-items: flex-start;
-          border: 2px solid transparent;
-          box-sizing: border-box;
-          display: flex;
-          flex-direction: column;
-          flex-wrap: nowrap;
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          flex-shrink: 1;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 14px;
+          font-weight: 400;
           height: auto;
-          padding-bottom: 10px;
-          padding-left: 10px;
-          padding-right: 10px;
-          padding-top: 10px;
           width: auto;
         }
-        & > * {
-          text-overflow: ellipsis;
-        }
-        & > *:not(:first-child) {
-          margin-top: 15px;
-        }
-        & > *:not(.ms-StackItem) {
+  >
+    <span
+      className=
+
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            color: inherit;
+            display: inline;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            moz-osx-font-smoothing: grayscale;
+            webkit-font-smoothing: antialiased;
+          }
+    >
+      If this button is used to enable FocusTrapZone, focus should return to this button after the FocusTrapZone is disabled.
+    </span>
+  </div>
+  <div
+    className=
+        ms-StackItem
+        {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
           flex-shrink: 1;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 14px;
+          font-weight: 400;
+          height: auto;
+          width: auto;
         }
   >
-    <div
+    <button
       className=
-          ms-Toggle
-          is-enabled
+          ms-Button
+          ms-Button--default
           {
             -moz-osx-font-smoothing: grayscale;
             -webkit-font-smoothing: antialiased;
+            background-color: #f4f4f4;
+            border-radius: 0px;
+            border: 1px solid transparent;
+            box-sizing: border-box;
+            color: #333333;
+            cursor: pointer;
+            display: inline-block;
             font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
             font-size: 14px;
             font-weight: 400;
-            margin-bottom: 8px;
+            height: 32px;
+            min-width: 80px;
+            outline: transparent;
+            padding-bottom: 0;
+            padding-left: 16px;
+            padding-right: 16px;
+            padding-top: 0;
+            position: relative;
+            text-align: center;
+            text-decoration: none;
+            user-select: none;
+            vertical-align: top;
+          }
+          &::-moz-focus-inner {
+            border: 0;
           }
+          .ms-Fabric--isFocusVisible &:focus:after {
+            border: 1px solid #ffffff;
+            bottom: 0px;
+            content: "";
+            left: 0px;
+            outline: 1px solid #666666;
+            position: absolute;
+            right: 0px;
+            top: 0px;
+            z-index: 1;
+          }
+          @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
+            border: none;
+            bottom: -2px;
+            left: -2px;
+            outline-color: ButtonText;
+            right: -2px;
+            top: -2px;
+          }
+          &:active > * {
+            left: 0px;
+            position: relative;
+            top: 0px;
+          }
+          &:hover {
+            background-color: #eaeaea;
+            color: #212121;
+          }
+          @media screen and (-ms-high-contrast: active){&:hover {
+            border-color: Highlight;
+            color: Highlight;
+          }
+          &:active {
+            background-color: #c8c8c8;
+            color: #212121;
+          }
+      data-is-focusable={true}
+      onClick={[Function]}
+      onKeyDown={[Function]}
+      onKeyPress={[Function]}
+      onKeyUp={[Function]}
+      onMouseDown={[Function]}
+      onMouseUp={[Function]}
+      type="button"
     >
-      <label
-        className=
-            ms-Label
-            ms-Toggle-label
-            {
-              -moz-osx-font-smoothing: grayscale;
-              -webkit-font-smoothing: antialiased;
-              box-shadow: none;
-              box-sizing: border-box;
-              color: #333333;
-              display: block;
-              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-              font-size: 14px;
-              font-weight: 400;
-              margin-bottom: 0px;
-              margin-left: 0px;
-              margin-right: 0px;
-              margin-top: 0px;
-              overflow-wrap: break-word;
-              padding-bottom: 5px;
-              padding-left: 0;
-              padding-right: 0;
-              padding-top: 5px;
-              word-wrap: break-word;
-            }
-        htmlFor="Toggle0"
-        id="Toggle0-label"
-      >
-        Use trap zone
-      </label>
       <div
         className=
-            ms-Toggle-innerContainer
+            ms-Button-flexContainer
             {
-              display: inline-flex;
-              position: relative;
+              align-items: center;
+              display: flex;
+              flex-wrap: nowrap;
+              height: 100%;
+              justify-content: center;
             }
       >
-        <button
-          aria-checked={false}
-          aria-labelledby="Toggle0-label"
-          checked={false}
+        <div
           className=
-              ms-Toggle-background
+              ms-Button-textContainer
               {
-                align-items: center;
-                background: #ffffff;
-                border-color: #666666;
-                border-radius: 1em;
-                border-style: solid;
-                border-width: 1px;
-                box-sizing: border-box;
-                cursor: pointer;
-                display: flex;
-                font-size: 20px;
-                height: 1em;
-                outline: transparent;
-                padding-bottom: 0;
-                padding-left: .2em;
-                padding-right: .2em;
-                padding-top: 0;
-                position: relative;
-                transition: all 0.1s ease;
-                width: 2.2em;
-              }
-              &::-moz-focus-inner {
-                border: 0;
-              }
-              .ms-Fabric--isFocusVisible &:focus:after {
-                border: 1px solid #ffffff;
-                bottom: -2px;
-                content: "";
-                left: -2px;
-                outline: 1px solid #666666;
-                position: absolute;
-                right: -2px;
-                top: -2px;
-                z-index: 1;
-              }
-              &:hover {
-                border-color: #333333;
+                flex-grow: 1;
               }
-              @media screen and (-ms-high-contrast: active){&:hover .ms-Toggle-thumb {
-                border-color: Highlight;
-              }
-              @media screen and (-ms-high-contrast: active){&:hover {
-                border-color: Highlight;
-              }
-          data-is-focusable={true}
-          id="Toggle0"
-          onChange={[Function]}
-          onClick={[Function]}
-          role="switch"
-          type="button"
         >
           <div
             className=
-                ms-Toggle-thumb
+                ms-Button-label
                 {
-                  background-color: #333333;
-                  border-color: transparent;
-                  border-radius: .5em;
-                  border-style: solid;
-                  border-width: .28em;
-                  box-sizing: border-box;
-                  height: .5em;
-                  transition: all 0.1s ease;
-                  width: .5em;
+                  font-weight: 600;
+                  line-height: 100%;
+                  margin-bottom: 0;
+                  margin-left: 4px;
+                  margin-right: 4px;
+                  margin-top: 0;
                 }
-          />
-        </button>
-        <label
-          className=
-              ms-Label
-              ms-Toggle-stateText
-              {
-                -moz-osx-font-smoothing: grayscale;
-                -webkit-font-smoothing: antialiased;
-                box-shadow: none;
-                box-sizing: border-box;
-                color: #333333;
-                display: block;
-                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                font-size: 14px;
-                font-weight: 400;
-                margin-bottom: 0px;
-                margin-left: 0px;
-                margin-right: 0px;
-                margin-top: 0px;
-                overflow-wrap: break-word;
-                padding-bottom: 5px;
-                padding-left: 0;
-                padding-right: 0;
-                padding-top: 5px;
-                word-wrap: break-word;
-              }
-              && {
-                margin-bottom: 0;
-                margin-left: 8px;
-                margin-right: 8px;
-                margin-top: 0;
-                padding-bottom: 0;
-                padding-left: 0;
-                padding-right: 0;
-                padding-top: 0;
-                user-select: none;
-              }
-          htmlFor="Toggle0"
-          id="Toggle0-stateText"
-        >
-          Off
-        </label>
+            id="id__0"
+          >
+            Trap Focus
+          </div>
+        </div>
       </div>
-    </div>
+    </button>
+  </div>
+  <div
+    onBlur={[Function]}
+    onFocus={[Function]}
+    onFocusCapture={[Function]}
+  >
+    <div
+      aria-hidden={true}
+      data-is-visible={true}
+      onFocus={[Function]}
+      style={
+        Object {
+          "pointerEvents": "none",
+          "position": "fixed",
+        }
+      }
+      tabIndex={-1}
+    />
     <div
       className=
-          ms-TextField
+          ms-Stack
           {
-            -moz-osx-font-smoothing: grayscale;
-            -webkit-font-smoothing: antialiased;
-            box-shadow: none;
+            align-items: flex-start;
+            border: 2px solid transparent;
             box-sizing: border-box;
-            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-            font-size: 14px;
-            font-weight: 400;
-            margin-bottom: 0px;
-            margin-left: 0px;
-            margin-right: 0px;
-            margin-top: 0px;
-            padding-bottom: 0px;
-            padding-left: 0px;
-            padding-right: 0px;
-            padding-top: 0px;
-            position: relative;
-            width: 300px;
+            display: flex;
+            flex-direction: column;
+            flex-wrap: nowrap;
+            height: auto;
+            padding-bottom: 10px;
+            padding-left: 10px;
+            padding-right: 10px;
+            padding-top: 10px;
+            width: auto;
+          }
+          & > * {
+            text-overflow: ellipsis;
+          }
+          & > *:not(:first-child) {
+            margin-top: 15px;
+          }
+          & > *:not(.ms-StackItem) {
+            flex-shrink: 1;
           }
     >
       <div
         className=
-            ms-TextField-wrapper
-
+            ms-Toggle
+            is-enabled
+            {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 14px;
+              font-weight: 400;
+              margin-bottom: 8px;
+            }
       >
         <label
           className=
               ms-Label
+              ms-Toggle-label
               {
                 -moz-osx-font-smoothing: grayscale;
                 -webkit-font-smoothing: antialiased;
@@ -248,54 +265,103 @@ exports[`Component Examples renders FocusTrapZone.Box.Example.tsx correctly 1`]
                 padding-top: 5px;
                 word-wrap: break-word;
               }
-          htmlFor="TextField1"
+          htmlFor="Toggle3"
+          id="Toggle3-label"
         >
-          Input inside trap zone
+          Use trap zone
         </label>
         <div
           className=
-              ms-TextField-fieldGroup
+              ms-Toggle-innerContainer
               {
-                align-items: stretch;
-                background: #ffffff;
-                border: 1px solid #a6a6a6;
-                box-shadow: none;
-                box-sizing: border-box;
-                cursor: text;
-                display: flex;
-                flex-direction: row;
-                height: 32px;
-                margin-bottom: 0px;
-                margin-left: 0px;
-                margin-right: 0px;
-                margin-top: 0px;
-                padding-bottom: 0px;
-                padding-left: 0px;
-                padding-right: 0px;
-                padding-top: 0px;
+                display: inline-flex;
                 position: relative;
               }
-              &:hover {
-                border-color: #333333;
-              }
-              @media screen and (-ms-high-contrast: active){&:hover {
-                border-color: Highlight;
-              }
         >
-          <input
-            aria-invalid={false}
+          <button
+            aria-checked={false}
+            aria-labelledby="Toggle3-label"
+            checked={false}
             className=
-                ms-TextField-field
+                ms-Toggle-background
+                {
+                  align-items: center;
+                  background: #ffffff;
+                  border-color: #666666;
+                  border-radius: 1em;
+                  border-style: solid;
+                  border-width: 1px;
+                  box-sizing: border-box;
+                  cursor: pointer;
+                  display: flex;
+                  font-size: 20px;
+                  height: 1em;
+                  outline: transparent;
+                  padding-bottom: 0;
+                  padding-left: .2em;
+                  padding-right: .2em;
+                  padding-top: 0;
+                  position: relative;
+                  transition: all 0.1s ease;
+                  width: 2.2em;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+                .ms-Fabric--isFocusVisible &:focus:after {
+                  border: 1px solid #ffffff;
+                  bottom: -2px;
+                  content: "";
+                  left: -2px;
+                  outline: 1px solid #666666;
+                  position: absolute;
+                  right: -2px;
+                  top: -2px;
+                  z-index: 1;
+                }
+                &:hover {
+                  border-color: #333333;
+                }
+                @media screen and (-ms-high-contrast: active){&:hover .ms-Toggle-thumb {
+                  border-color: Highlight;
+                }
+                @media screen and (-ms-high-contrast: active){&:hover {
+                  border-color: Highlight;
+                }
+            data-is-focusable={true}
+            id="Toggle3"
+            onChange={[Function]}
+            onClick={[Function]}
+            role="switch"
+            type="button"
+          >
+            <div
+              className=
+                  ms-Toggle-thumb
+                  {
+                    background-color: #333333;
+                    border-color: transparent;
+                    border-radius: .5em;
+                    border-style: solid;
+                    border-width: .28em;
+                    box-sizing: border-box;
+                    height: .5em;
+                    transition: all 0.1s ease;
+                    width: .5em;
+                  }
+            />
+          </button>
+          <label
+            className=
+                ms-Label
+                ms-Toggle-stateText
                 {
                   -moz-osx-font-smoothing: grayscale;
                   -webkit-font-smoothing: antialiased;
-                  background-color: transparent;
-                  background: none;
-                  border-radius: 0px;
-                  border: none;
                   box-shadow: none;
                   box-sizing: border-box;
                   color: #333333;
+                  display: block;
                   font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
                   font-size: 14px;
                   font-weight: 400;
@@ -303,86 +369,231 @@ exports[`Component Examples renders FocusTrapZone.Box.Example.tsx correctly 1`]
                   margin-left: 0px;
                   margin-right: 0px;
                   margin-top: 0px;
-                  min-width: 0px;
-                  outline: 0px;
+                  overflow-wrap: break-word;
+                  padding-bottom: 5px;
+                  padding-left: 0;
+                  padding-right: 0;
+                  padding-top: 5px;
+                  word-wrap: break-word;
+                }
+                && {
+                  margin-bottom: 0;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 0;
                   padding-bottom: 0;
-                  padding-left: 12px;
-                  padding-right: 12px;
+                  padding-left: 0;
+                  padding-right: 0;
                   padding-top: 0;
-                  text-overflow: ellipsis;
-                  width: 100%;
+                  user-select: none;
                 }
-                &:active, &:focus, &:hover {
-                  outline: 0px;
-                }
-                &::-ms-clear {
-                  display: none;
-                }
-                &::placeholder {
+            htmlFor="Toggle3"
+            id="Toggle3-stateText"
+          >
+            Off
+          </label>
+        </div>
+      </div>
+      <div
+        className=
+            ms-TextField
+            {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              box-shadow: none;
+              box-sizing: border-box;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 14px;
+              font-weight: 400;
+              margin-bottom: 0px;
+              margin-left: 0px;
+              margin-right: 0px;
+              margin-top: 0px;
+              padding-bottom: 0px;
+              padding-left: 0px;
+              padding-right: 0px;
+              padding-top: 0px;
+              position: relative;
+              width: 300px;
+            }
+      >
+        <div
+          className=
+              ms-TextField-wrapper
+
+        >
+          <label
+            className=
+                ms-Label
+                {
                   -moz-osx-font-smoothing: grayscale;
                   -webkit-font-smoothing: antialiased;
-                  color: #666666;
+                  box-shadow: none;
+                  box-sizing: border-box;
+                  color: #333333;
+                  display: block;
                   font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
                   font-size: 14px;
                   font-weight: 400;
-                  opacity: 1;
+                  margin-bottom: 0px;
+                  margin-left: 0px;
+                  margin-right: 0px;
+                  margin-top: 0px;
+                  overflow-wrap: break-word;
+                  padding-bottom: 5px;
+                  padding-left: 0;
+                  padding-right: 0;
+                  padding-top: 5px;
+                  word-wrap: break-word;
                 }
-                &:-ms-input-placeholder {
-                  -moz-osx-font-smoothing: grayscale;
-                  -webkit-font-smoothing: antialiased;
-                  color: #666666;
-                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                  font-size: 14px;
-                  font-weight: 400;
-                  opacity: 1;
+            htmlFor="TextField4"
+          >
+            Input inside trap zone
+          </label>
+          <div
+            className=
+                ms-TextField-fieldGroup
+                {
+                  align-items: stretch;
+                  background: #ffffff;
+                  border: 1px solid #a6a6a6;
+                  box-shadow: none;
+                  box-sizing: border-box;
+                  cursor: text;
+                  display: flex;
+                  flex-direction: row;
+                  height: 32px;
+                  margin-bottom: 0px;
+                  margin-left: 0px;
+                  margin-right: 0px;
+                  margin-top: 0px;
+                  padding-bottom: 0px;
+                  padding-left: 0px;
+                  padding-right: 0px;
+                  padding-top: 0px;
+                  position: relative;
                 }
-            id="TextField1"
-            onBlur={[Function]}
-            onChange={[Function]}
-            onFocus={[Function]}
-            onInput={[Function]}
-            type="text"
-            value=""
-          />
+                &:hover {
+                  border-color: #333333;
+                }
+                @media screen and (-ms-high-contrast: active){&:hover {
+                  border-color: Highlight;
+                }
+          >
+            <input
+              aria-invalid={false}
+              className=
+                  ms-TextField-field
+                  {
+                    -moz-osx-font-smoothing: grayscale;
+                    -webkit-font-smoothing: antialiased;
+                    background-color: transparent;
+                    background: none;
+                    border-radius: 0px;
+                    border: none;
+                    box-shadow: none;
+                    box-sizing: border-box;
+                    color: #333333;
+                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                    font-size: 14px;
+                    font-weight: 400;
+                    margin-bottom: 0px;
+                    margin-left: 0px;
+                    margin-right: 0px;
+                    margin-top: 0px;
+                    min-width: 0px;
+                    outline: 0px;
+                    padding-bottom: 0;
+                    padding-left: 12px;
+                    padding-right: 12px;
+                    padding-top: 0;
+                    text-overflow: ellipsis;
+                    width: 100%;
+                  }
+                  &:active, &:focus, &:hover {
+                    outline: 0px;
+                  }
+                  &::-ms-clear {
+                    display: none;
+                  }
+                  &::placeholder {
+                    -moz-osx-font-smoothing: grayscale;
+                    -webkit-font-smoothing: antialiased;
+                    color: #666666;
+                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                    font-size: 14px;
+                    font-weight: 400;
+                    opacity: 1;
+                  }
+                  &:-ms-input-placeholder {
+                    -moz-osx-font-smoothing: grayscale;
+                    -webkit-font-smoothing: antialiased;
+                    color: #666666;
+                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                    font-size: 14px;
+                    font-weight: 400;
+                    opacity: 1;
+                  }
+              id="TextField4"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onFocus={[Function]}
+              onInput={[Function]}
+              type="text"
+              value=""
+            />
+          </div>
         </div>
       </div>
+      <a
+        className=
+            ms-Link
+            {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              color: #0078d4;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: inherit;
+              font-weight: inherit;
+              outline: none;
+              text-decoration: none;
+            }
+            .ms-Fabric--isFocusVisible &:focus {
+              box-shadow: 0 0 0 1px #666666 inset;
+            }
+            @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus {
+              outline: 1px solid WindowText;
+            }
+            @media screen and (-ms-high-contrast: active){& {
+              border-bottom: none;
+            }
+            &:active, &:hover, &:active:hover {
+              color: #004578;
+            }
+            @media screen and (-ms-high-contrast: active){&:active, &:hover, &:active:hover {
+              text-decoration: underline;
+            }
+            &:focus {
+              color: #0078d4;
+            }
+        href="https://bing.com"
+        onClick={[Function]}
+      >
+        Hyperlink inside trap zone
+      </a>
     </div>
-    <a
-      className=
-          ms-Link
-          {
-            -moz-osx-font-smoothing: grayscale;
-            -webkit-font-smoothing: antialiased;
-            color: #0078d4;
-            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-            font-size: inherit;
-            font-weight: inherit;
-            outline: none;
-            text-decoration: none;
-          }
-          .ms-Fabric--isFocusVisible &:focus {
-            box-shadow: 0 0 0 1px #666666 inset;
-          }
-          @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus {
-            outline: 1px solid WindowText;
-          }
-          @media screen and (-ms-high-contrast: active){& {
-            border-bottom: none;
-          }
-          &:active, &:hover, &:active:hover {
-            color: #004578;
-          }
-          @media screen and (-ms-high-contrast: active){&:active, &:hover, &:active:hover {
-            text-decoration: underline;
-          }
-          &:focus {
-            color: #0078d4;
-          }
-      href="https://bing.com"
-      onClick={[Function]}
-    >
-      Hyperlink inside trap zone
-    </a>
+    <div
+      aria-hidden={true}
+      data-is-visible={true}
+      onFocus={[Function]}
+      style={
+        Object {
+          "pointerEvents": "none",
+          "position": "fixed",
+        }
+      }
+      tabIndex={-1}
+    />
   </div>
 </div>
 `;
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/FocusTrapZone.Box.FocusOnCustomElement.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/FocusTrapZone.Box.FocusOnCustomElement.Example.tsx.shot
index f45756455cb72..dca8f46c5f8f0 100644
--- a/packages/office-ui-fabric-react/src/components/__snapshots__/FocusTrapZone.Box.FocusOnCustomElement.Example.tsx.shot
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/FocusTrapZone.Box.FocusOnCustomElement.Example.tsx.shot
@@ -1,232 +1,249 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Component Examples renders FocusTrapZone.Box.FocusOnCustomElement.Example.tsx correctly 1`] = `
-<div>
+<div
+  className=
+      ms-Stack
+      {
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        flex-wrap: nowrap;
+        height: auto;
+        width: auto;
+      }
+      & > * {
+        text-overflow: ellipsis;
+      }
+      & > *:not(:first-child) {
+        margin-top: 8px;
+      }
+      & > *:not(.ms-StackItem) {
+        flex-shrink: 1;
+      }
+>
   <div
     className=
-        ms-Stack
+        ms-StackItem
         {
-          align-items: flex-start;
-          border: 2px solid transparent;
-          box-sizing: border-box;
-          display: flex;
-          flex-direction: column;
-          flex-wrap: nowrap;
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          flex-shrink: 1;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 14px;
+          font-weight: 400;
           height: auto;
-          padding-bottom: 10px;
-          padding-left: 10px;
-          padding-right: 10px;
-          padding-top: 10px;
           width: auto;
         }
-        & > * {
-          text-overflow: ellipsis;
-        }
-        & > *:not(:first-child) {
-          margin-top: 15px;
-        }
-        & > *:not(.ms-StackItem) {
+  >
+    <span
+      className=
+
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            color: inherit;
+            display: inline;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            moz-osx-font-smoothing: grayscale;
+            webkit-font-smoothing: antialiased;
+          }
+    >
+      If this button is used to enable FocusTrapZone, the hyperlink should be focused.
+    </span>
+  </div>
+  <div
+    className=
+        ms-StackItem
+        {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
           flex-shrink: 1;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 14px;
+          font-weight: 400;
+          height: auto;
+          width: auto;
         }
   >
-    <div
+    <button
       className=
-          ms-Toggle
-          is-enabled
+          ms-Button
+          ms-Button--default
           {
             -moz-osx-font-smoothing: grayscale;
             -webkit-font-smoothing: antialiased;
+            background-color: #f4f4f4;
+            border-radius: 0px;
+            border: 1px solid transparent;
+            box-sizing: border-box;
+            color: #333333;
+            cursor: pointer;
+            display: inline-block;
             font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
             font-size: 14px;
             font-weight: 400;
-            margin-bottom: 8px;
+            height: 32px;
+            min-width: 80px;
+            outline: transparent;
+            padding-bottom: 0;
+            padding-left: 16px;
+            padding-right: 16px;
+            padding-top: 0;
+            position: relative;
+            text-align: center;
+            text-decoration: none;
+            user-select: none;
+            vertical-align: top;
+          }
+          &::-moz-focus-inner {
+            border: 0;
           }
+          .ms-Fabric--isFocusVisible &:focus:after {
+            border: 1px solid #ffffff;
+            bottom: 0px;
+            content: "";
+            left: 0px;
+            outline: 1px solid #666666;
+            position: absolute;
+            right: 0px;
+            top: 0px;
+            z-index: 1;
+          }
+          @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
+            border: none;
+            bottom: -2px;
+            left: -2px;
+            outline-color: ButtonText;
+            right: -2px;
+            top: -2px;
+          }
+          &:active > * {
+            left: 0px;
+            position: relative;
+            top: 0px;
+          }
+          &:hover {
+            background-color: #eaeaea;
+            color: #212121;
+          }
+          @media screen and (-ms-high-contrast: active){&:hover {
+            border-color: Highlight;
+            color: Highlight;
+          }
+          &:active {
+            background-color: #c8c8c8;
+            color: #212121;
+          }
+      data-is-focusable={true}
+      onClick={[Function]}
+      onKeyDown={[Function]}
+      onKeyPress={[Function]}
+      onKeyUp={[Function]}
+      onMouseDown={[Function]}
+      onMouseUp={[Function]}
+      type="button"
     >
-      <label
-        className=
-            ms-Label
-            ms-Toggle-label
-            {
-              -moz-osx-font-smoothing: grayscale;
-              -webkit-font-smoothing: antialiased;
-              box-shadow: none;
-              box-sizing: border-box;
-              color: #333333;
-              display: block;
-              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-              font-size: 14px;
-              font-weight: 400;
-              margin-bottom: 0px;
-              margin-left: 0px;
-              margin-right: 0px;
-              margin-top: 0px;
-              overflow-wrap: break-word;
-              padding-bottom: 5px;
-              padding-left: 0;
-              padding-right: 0;
-              padding-top: 5px;
-              word-wrap: break-word;
-            }
-        htmlFor="Toggle0"
-        id="Toggle0-label"
-      >
-        Use trap zone
-      </label>
       <div
         className=
-            ms-Toggle-innerContainer
+            ms-Button-flexContainer
             {
-              display: inline-flex;
-              position: relative;
+              align-items: center;
+              display: flex;
+              flex-wrap: nowrap;
+              height: 100%;
+              justify-content: center;
             }
       >
-        <button
-          aria-checked={false}
-          aria-labelledby="Toggle0-label"
-          checked={false}
+        <div
           className=
-              ms-Toggle-background
+              ms-Button-textContainer
               {
-                align-items: center;
-                background: #ffffff;
-                border-color: #666666;
-                border-radius: 1em;
-                border-style: solid;
-                border-width: 1px;
-                box-sizing: border-box;
-                cursor: pointer;
-                display: flex;
-                font-size: 20px;
-                height: 1em;
-                outline: transparent;
-                padding-bottom: 0;
-                padding-left: .2em;
-                padding-right: .2em;
-                padding-top: 0;
-                position: relative;
-                transition: all 0.1s ease;
-                width: 2.2em;
-              }
-              &::-moz-focus-inner {
-                border: 0;
-              }
-              .ms-Fabric--isFocusVisible &:focus:after {
-                border: 1px solid #ffffff;
-                bottom: -2px;
-                content: "";
-                left: -2px;
-                outline: 1px solid #666666;
-                position: absolute;
-                right: -2px;
-                top: -2px;
-                z-index: 1;
-              }
-              &:hover {
-                border-color: #333333;
+                flex-grow: 1;
               }
-              @media screen and (-ms-high-contrast: active){&:hover .ms-Toggle-thumb {
-                border-color: Highlight;
-              }
-              @media screen and (-ms-high-contrast: active){&:hover {
-                border-color: Highlight;
-              }
-          data-is-focusable={true}
-          id="Toggle0"
-          onChange={[Function]}
-          onClick={[Function]}
-          role="switch"
-          type="button"
         >
           <div
             className=
-                ms-Toggle-thumb
+                ms-Button-label
                 {
-                  background-color: #333333;
-                  border-color: transparent;
-                  border-radius: .5em;
-                  border-style: solid;
-                  border-width: .28em;
-                  box-sizing: border-box;
-                  height: .5em;
-                  transition: all 0.1s ease;
-                  width: .5em;
+                  font-weight: 600;
+                  line-height: 100%;
+                  margin-bottom: 0;
+                  margin-left: 4px;
+                  margin-right: 4px;
+                  margin-top: 0;
                 }
-          />
-        </button>
-        <label
-          className=
-              ms-Label
-              ms-Toggle-stateText
-              {
-                -moz-osx-font-smoothing: grayscale;
-                -webkit-font-smoothing: antialiased;
-                box-shadow: none;
-                box-sizing: border-box;
-                color: #333333;
-                display: block;
-                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                font-size: 14px;
-                font-weight: 400;
-                margin-bottom: 0px;
-                margin-left: 0px;
-                margin-right: 0px;
-                margin-top: 0px;
-                overflow-wrap: break-word;
-                padding-bottom: 5px;
-                padding-left: 0;
-                padding-right: 0;
-                padding-top: 5px;
-                word-wrap: break-word;
-              }
-              && {
-                margin-bottom: 0;
-                margin-left: 8px;
-                margin-right: 8px;
-                margin-top: 0;
-                padding-bottom: 0;
-                padding-left: 0;
-                padding-right: 0;
-                padding-top: 0;
-                user-select: none;
-              }
-          htmlFor="Toggle0"
-          id="Toggle0-stateText"
-        >
-          Off
-        </label>
+            id="id__0"
+          >
+            Focus Custom Element
+          </div>
+        </div>
       </div>
-    </div>
+    </button>
+  </div>
+  <div
+    onBlur={[Function]}
+    onFocus={[Function]}
+    onFocusCapture={[Function]}
+  >
+    <div
+      aria-hidden={true}
+      data-is-visible={true}
+      onFocus={[Function]}
+      style={
+        Object {
+          "pointerEvents": "none",
+          "position": "fixed",
+        }
+      }
+      tabIndex={-1}
+    />
     <div
       className=
-          ms-TextField
+          ms-Stack
           {
-            -moz-osx-font-smoothing: grayscale;
-            -webkit-font-smoothing: antialiased;
-            box-shadow: none;
+            align-items: flex-start;
+            border: 2px solid transparent;
             box-sizing: border-box;
-            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-            font-size: 14px;
-            font-weight: 400;
-            margin-bottom: 0px;
-            margin-left: 0px;
-            margin-right: 0px;
-            margin-top: 0px;
-            padding-bottom: 0px;
-            padding-left: 0px;
-            padding-right: 0px;
-            padding-top: 0px;
-            position: relative;
-            width: 300px;
+            display: flex;
+            flex-direction: column;
+            flex-wrap: nowrap;
+            height: auto;
+            padding-bottom: 10px;
+            padding-left: 10px;
+            padding-right: 10px;
+            padding-top: 10px;
+            width: auto;
+          }
+          & > * {
+            text-overflow: ellipsis;
+          }
+          & > *:not(:first-child) {
+            margin-top: 15px;
+          }
+          & > *:not(.ms-StackItem) {
+            flex-shrink: 1;
           }
     >
       <div
         className=
-            ms-TextField-wrapper
-
+            ms-Toggle
+            is-enabled
+            {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 14px;
+              font-weight: 400;
+              margin-bottom: 8px;
+            }
       >
         <label
           className=
               ms-Label
+              ms-Toggle-label
               {
                 -moz-osx-font-smoothing: grayscale;
                 -webkit-font-smoothing: antialiased;
@@ -248,54 +265,103 @@ exports[`Component Examples renders FocusTrapZone.Box.FocusOnCustomElement.Examp
                 padding-top: 5px;
                 word-wrap: break-word;
               }
-          htmlFor="TextField1"
+          htmlFor="Toggle3"
+          id="Toggle3-label"
         >
-          Input inside trap zone
+          Use trap zone
         </label>
         <div
           className=
-              ms-TextField-fieldGroup
+              ms-Toggle-innerContainer
               {
-                align-items: stretch;
-                background: #ffffff;
-                border: 1px solid #a6a6a6;
-                box-shadow: none;
-                box-sizing: border-box;
-                cursor: text;
-                display: flex;
-                flex-direction: row;
-                height: 32px;
-                margin-bottom: 0px;
-                margin-left: 0px;
-                margin-right: 0px;
-                margin-top: 0px;
-                padding-bottom: 0px;
-                padding-left: 0px;
-                padding-right: 0px;
-                padding-top: 0px;
+                display: inline-flex;
                 position: relative;
               }
-              &:hover {
-                border-color: #333333;
-              }
-              @media screen and (-ms-high-contrast: active){&:hover {
-                border-color: Highlight;
-              }
         >
-          <input
-            aria-invalid={false}
+          <button
+            aria-checked={false}
+            aria-labelledby="Toggle3-label"
+            checked={false}
             className=
-                ms-TextField-field
+                ms-Toggle-background
+                {
+                  align-items: center;
+                  background: #ffffff;
+                  border-color: #666666;
+                  border-radius: 1em;
+                  border-style: solid;
+                  border-width: 1px;
+                  box-sizing: border-box;
+                  cursor: pointer;
+                  display: flex;
+                  font-size: 20px;
+                  height: 1em;
+                  outline: transparent;
+                  padding-bottom: 0;
+                  padding-left: .2em;
+                  padding-right: .2em;
+                  padding-top: 0;
+                  position: relative;
+                  transition: all 0.1s ease;
+                  width: 2.2em;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+                .ms-Fabric--isFocusVisible &:focus:after {
+                  border: 1px solid #ffffff;
+                  bottom: -2px;
+                  content: "";
+                  left: -2px;
+                  outline: 1px solid #666666;
+                  position: absolute;
+                  right: -2px;
+                  top: -2px;
+                  z-index: 1;
+                }
+                &:hover {
+                  border-color: #333333;
+                }
+                @media screen and (-ms-high-contrast: active){&:hover .ms-Toggle-thumb {
+                  border-color: Highlight;
+                }
+                @media screen and (-ms-high-contrast: active){&:hover {
+                  border-color: Highlight;
+                }
+            data-is-focusable={true}
+            id="Toggle3"
+            onChange={[Function]}
+            onClick={[Function]}
+            role="switch"
+            type="button"
+          >
+            <div
+              className=
+                  ms-Toggle-thumb
+                  {
+                    background-color: #333333;
+                    border-color: transparent;
+                    border-radius: .5em;
+                    border-style: solid;
+                    border-width: .28em;
+                    box-sizing: border-box;
+                    height: .5em;
+                    transition: all 0.1s ease;
+                    width: .5em;
+                  }
+            />
+          </button>
+          <label
+            className=
+                ms-Label
+                ms-Toggle-stateText
                 {
                   -moz-osx-font-smoothing: grayscale;
                   -webkit-font-smoothing: antialiased;
-                  background-color: transparent;
-                  background: none;
-                  border-radius: 0px;
-                  border: none;
                   box-shadow: none;
                   box-sizing: border-box;
                   color: #333333;
+                  display: block;
                   font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
                   font-size: 14px;
                   font-weight: 400;
@@ -303,87 +369,232 @@ exports[`Component Examples renders FocusTrapZone.Box.FocusOnCustomElement.Examp
                   margin-left: 0px;
                   margin-right: 0px;
                   margin-top: 0px;
-                  min-width: 0px;
-                  outline: 0px;
+                  overflow-wrap: break-word;
+                  padding-bottom: 5px;
+                  padding-left: 0;
+                  padding-right: 0;
+                  padding-top: 5px;
+                  word-wrap: break-word;
+                }
+                && {
+                  margin-bottom: 0;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 0;
                   padding-bottom: 0;
-                  padding-left: 12px;
-                  padding-right: 12px;
+                  padding-left: 0;
+                  padding-right: 0;
                   padding-top: 0;
-                  text-overflow: ellipsis;
-                  width: 100%;
+                  user-select: none;
                 }
-                &:active, &:focus, &:hover {
-                  outline: 0px;
-                }
-                &::-ms-clear {
-                  display: none;
-                }
-                &::placeholder {
+            htmlFor="Toggle3"
+            id="Toggle3-stateText"
+          >
+            Off
+          </label>
+        </div>
+      </div>
+      <div
+        className=
+            ms-TextField
+            {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              box-shadow: none;
+              box-sizing: border-box;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 14px;
+              font-weight: 400;
+              margin-bottom: 0px;
+              margin-left: 0px;
+              margin-right: 0px;
+              margin-top: 0px;
+              padding-bottom: 0px;
+              padding-left: 0px;
+              padding-right: 0px;
+              padding-top: 0px;
+              position: relative;
+              width: 300px;
+            }
+      >
+        <div
+          className=
+              ms-TextField-wrapper
+
+        >
+          <label
+            className=
+                ms-Label
+                {
                   -moz-osx-font-smoothing: grayscale;
                   -webkit-font-smoothing: antialiased;
-                  color: #666666;
+                  box-shadow: none;
+                  box-sizing: border-box;
+                  color: #333333;
+                  display: block;
                   font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
                   font-size: 14px;
                   font-weight: 400;
-                  opacity: 1;
+                  margin-bottom: 0px;
+                  margin-left: 0px;
+                  margin-right: 0px;
+                  margin-top: 0px;
+                  overflow-wrap: break-word;
+                  padding-bottom: 5px;
+                  padding-left: 0;
+                  padding-right: 0;
+                  padding-top: 5px;
+                  word-wrap: break-word;
                 }
-                &:-ms-input-placeholder {
-                  -moz-osx-font-smoothing: grayscale;
-                  -webkit-font-smoothing: antialiased;
-                  color: #666666;
-                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                  font-size: 14px;
-                  font-weight: 400;
-                  opacity: 1;
+            htmlFor="TextField4"
+          >
+            Input inside trap zone
+          </label>
+          <div
+            className=
+                ms-TextField-fieldGroup
+                {
+                  align-items: stretch;
+                  background: #ffffff;
+                  border: 1px solid #a6a6a6;
+                  box-shadow: none;
+                  box-sizing: border-box;
+                  cursor: text;
+                  display: flex;
+                  flex-direction: row;
+                  height: 32px;
+                  margin-bottom: 0px;
+                  margin-left: 0px;
+                  margin-right: 0px;
+                  margin-top: 0px;
+                  padding-bottom: 0px;
+                  padding-left: 0px;
+                  padding-right: 0px;
+                  padding-top: 0px;
+                  position: relative;
                 }
-            id="TextField1"
-            onBlur={[Function]}
-            onChange={[Function]}
-            onFocus={[Function]}
-            onInput={[Function]}
-            type="text"
-            value=""
-          />
+                &:hover {
+                  border-color: #333333;
+                }
+                @media screen and (-ms-high-contrast: active){&:hover {
+                  border-color: Highlight;
+                }
+          >
+            <input
+              aria-invalid={false}
+              className=
+                  ms-TextField-field
+                  {
+                    -moz-osx-font-smoothing: grayscale;
+                    -webkit-font-smoothing: antialiased;
+                    background-color: transparent;
+                    background: none;
+                    border-radius: 0px;
+                    border: none;
+                    box-shadow: none;
+                    box-sizing: border-box;
+                    color: #333333;
+                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                    font-size: 14px;
+                    font-weight: 400;
+                    margin-bottom: 0px;
+                    margin-left: 0px;
+                    margin-right: 0px;
+                    margin-top: 0px;
+                    min-width: 0px;
+                    outline: 0px;
+                    padding-bottom: 0;
+                    padding-left: 12px;
+                    padding-right: 12px;
+                    padding-top: 0;
+                    text-overflow: ellipsis;
+                    width: 100%;
+                  }
+                  &:active, &:focus, &:hover {
+                    outline: 0px;
+                  }
+                  &::-ms-clear {
+                    display: none;
+                  }
+                  &::placeholder {
+                    -moz-osx-font-smoothing: grayscale;
+                    -webkit-font-smoothing: antialiased;
+                    color: #666666;
+                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                    font-size: 14px;
+                    font-weight: 400;
+                    opacity: 1;
+                  }
+                  &:-ms-input-placeholder {
+                    -moz-osx-font-smoothing: grayscale;
+                    -webkit-font-smoothing: antialiased;
+                    color: #666666;
+                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                    font-size: 14px;
+                    font-weight: 400;
+                    opacity: 1;
+                  }
+              id="TextField4"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onFocus={[Function]}
+              onInput={[Function]}
+              type="text"
+              value=""
+            />
+          </div>
         </div>
       </div>
+      <a
+        className=
+            ms-Link
+            shouldFocusInput
+            {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              color: #0078d4;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: inherit;
+              font-weight: inherit;
+              outline: none;
+              text-decoration: none;
+            }
+            .ms-Fabric--isFocusVisible &:focus {
+              box-shadow: 0 0 0 1px #666666 inset;
+            }
+            @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus {
+              outline: 1px solid WindowText;
+            }
+            @media screen and (-ms-high-contrast: active){& {
+              border-bottom: none;
+            }
+            &:active, &:hover, &:active:hover {
+              color: #004578;
+            }
+            @media screen and (-ms-high-contrast: active){&:active, &:hover, &:active:hover {
+              text-decoration: underline;
+            }
+            &:focus {
+              color: #0078d4;
+            }
+        href="https://bing.com"
+        onClick={[Function]}
+      >
+        Hyperlink which will receive initial focus when trap zone is activated
+      </a>
     </div>
-    <a
-      className=
-          ms-Link
-          shouldFocusInput
-          {
-            -moz-osx-font-smoothing: grayscale;
-            -webkit-font-smoothing: antialiased;
-            color: #0078d4;
-            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-            font-size: inherit;
-            font-weight: inherit;
-            outline: none;
-            text-decoration: none;
-          }
-          .ms-Fabric--isFocusVisible &:focus {
-            box-shadow: 0 0 0 1px #666666 inset;
-          }
-          @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus {
-            outline: 1px solid WindowText;
-          }
-          @media screen and (-ms-high-contrast: active){& {
-            border-bottom: none;
-          }
-          &:active, &:hover, &:active:hover {
-            color: #004578;
-          }
-          @media screen and (-ms-high-contrast: active){&:active, &:hover, &:active:hover {
-            text-decoration: underline;
-          }
-          &:focus {
-            color: #0078d4;
-          }
-      href="https://bing.com"
-      onClick={[Function]}
-    >
-      Hyperlink which will receive initial focus when trap zone is activated
-    </a>
+    <div
+      aria-hidden={true}
+      data-is-visible={true}
+      onFocus={[Function]}
+      style={
+        Object {
+          "pointerEvents": "none",
+          "position": "fixed",
+        }
+      }
+      tabIndex={-1}
+    />
   </div>
 </div>
 `;
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/FocusTrapZone.FocusZone.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/FocusTrapZone.FocusZone.Example.tsx.shot
index 3dde764483dd8..d678bddc49af6 100644
--- a/packages/office-ui-fabric-react/src/components/__snapshots__/FocusTrapZone.FocusZone.Example.tsx.shot
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/FocusTrapZone.FocusZone.Example.tsx.shot
@@ -1,7 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Component Examples renders FocusTrapZone.FocusZone.Example.tsx correctly 1`] = `
-<div>
+<div
+  onBlur={[Function]}
+  onFocus={[Function]}
+  onFocusCapture={[Function]}
+>
+  <div
+    aria-hidden={true}
+    data-is-visible={true}
+    onFocus={[Function]}
+    style={
+      Object {
+        "pointerEvents": "none",
+        "position": "fixed",
+      }
+    }
+    tabIndex={-1}
+  />
   <div
     className=
         ms-Stack
@@ -1069,5 +1085,17 @@ exports[`Component Examples renders FocusTrapZone.FocusZone.Example.tsx correctl
       </div>
     </div>
   </div>
+  <div
+    aria-hidden={true}
+    data-is-visible={true}
+    onFocus={[Function]}
+    style={
+      Object {
+        "pointerEvents": "none",
+        "position": "fixed",
+      }
+    }
+    tabIndex={-1}
+  />
 </div>
 `;
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/FocusTrapZone.Nested.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/FocusTrapZone.Nested.Example.tsx.shot
index 33230fc326865..1ac9d20b0f13d 100644
--- a/packages/office-ui-fabric-react/src/components/__snapshots__/FocusTrapZone.Nested.Example.tsx.shot
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/FocusTrapZone.Nested.Example.tsx.shot
@@ -118,323 +118,33 @@ exports[`Component Examples renders FocusTrapZone.Nested.Example.tsx correctly 1
     </div>
   </button>
   <div
-    className=
-        ms-Stack
-        {
-          align-items: flex-start;
-          border: 2px solid transparent;
-          box-sizing: border-box;
-          display: flex;
-          flex-direction: column;
-          flex-wrap: nowrap;
-          height: auto;
-          padding-bottom: 10px;
-          padding-left: 10px;
-          padding-right: 10px;
-          padding-top: 10px;
-          width: auto;
-        }
-        & > * {
-          text-overflow: ellipsis;
-        }
-        & > *:not(:first-child) {
-          margin-top: 10px;
-        }
-        & > *:not(.ms-StackItem) {
-          flex-shrink: 1;
-        }
+    onBlur={[Function]}
+    onFocus={[Function]}
+    onFocusCapture={[Function]}
   >
     <div
-      className=
-          ms-Toggle
-          is-enabled
-          {
-            -moz-osx-font-smoothing: grayscale;
-            -webkit-font-smoothing: antialiased;
-            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-            font-size: 14px;
-            font-weight: 400;
-            margin-bottom: 8px;
-          }
-    >
-      <label
-        className=
-            ms-Label
-            ms-Toggle-label
-            {
-              -moz-osx-font-smoothing: grayscale;
-              -webkit-font-smoothing: antialiased;
-              box-shadow: none;
-              box-sizing: border-box;
-              color: #333333;
-              display: block;
-              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-              font-size: 14px;
-              font-weight: 400;
-              margin-bottom: 0px;
-              margin-left: 0px;
-              margin-right: 0px;
-              margin-top: 0px;
-              overflow-wrap: break-word;
-              padding-bottom: 5px;
-              padding-left: 0;
-              padding-right: 0;
-              padding-top: 5px;
-              word-wrap: break-word;
-            }
-        htmlFor="Toggle3"
-        id="Toggle3-label"
-      >
-        Enable trap zone 1
-      </label>
-      <div
-        className=
-            ms-Toggle-innerContainer
-            {
-              display: inline-flex;
-              position: relative;
-            }
-      >
-        <button
-          aria-checked={false}
-          aria-labelledby="Toggle3-label"
-          className=
-              ms-Toggle-background
-              {
-                align-items: center;
-                background: #ffffff;
-                border-color: #666666;
-                border-radius: 1em;
-                border-style: solid;
-                border-width: 1px;
-                box-sizing: border-box;
-                cursor: pointer;
-                display: flex;
-                font-size: 20px;
-                height: 1em;
-                outline: transparent;
-                padding-bottom: 0;
-                padding-left: .2em;
-                padding-right: .2em;
-                padding-top: 0;
-                position: relative;
-                transition: all 0.1s ease;
-                width: 2.2em;
-              }
-              &::-moz-focus-inner {
-                border: 0;
-              }
-              .ms-Fabric--isFocusVisible &:focus:after {
-                border: 1px solid #ffffff;
-                bottom: -2px;
-                content: "";
-                left: -2px;
-                outline: 1px solid #666666;
-                position: absolute;
-                right: -2px;
-                top: -2px;
-                z-index: 1;
-              }
-              &:hover {
-                border-color: #333333;
-              }
-              @media screen and (-ms-high-contrast: active){&:hover .ms-Toggle-thumb {
-                border-color: Highlight;
-              }
-              @media screen and (-ms-high-contrast: active){&:hover {
-                border-color: Highlight;
-              }
-          data-is-focusable={true}
-          id="Toggle3"
-          onChange={[Function]}
-          onClick={[Function]}
-          role="switch"
-          type="button"
-        >
-          <div
-            className=
-                ms-Toggle-thumb
-                {
-                  background-color: #333333;
-                  border-color: transparent;
-                  border-radius: .5em;
-                  border-style: solid;
-                  border-width: .28em;
-                  box-sizing: border-box;
-                  height: .5em;
-                  transition: all 0.1s ease;
-                  width: .5em;
-                }
-          />
-        </button>
-        <label
-          className=
-              ms-Label
-              ms-Toggle-stateText
-              {
-                -moz-osx-font-smoothing: grayscale;
-                -webkit-font-smoothing: antialiased;
-                box-shadow: none;
-                box-sizing: border-box;
-                color: #333333;
-                display: block;
-                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                font-size: 14px;
-                font-weight: 400;
-                margin-bottom: 0px;
-                margin-left: 0px;
-                margin-right: 0px;
-                margin-top: 0px;
-                overflow-wrap: break-word;
-                padding-bottom: 5px;
-                padding-left: 0;
-                padding-right: 0;
-                padding-top: 5px;
-                word-wrap: break-word;
-              }
-              && {
-                margin-bottom: 0;
-                margin-left: 8px;
-                margin-right: 8px;
-                margin-top: 0;
-                padding-bottom: 0;
-                padding-left: 0;
-                padding-right: 0;
-                padding-top: 0;
-                user-select: none;
-              }
-          htmlFor="Toggle3"
-          id="Toggle3-stateText"
-        >
-          Off
-        </label>
-      </div>
-    </div>
-    <button
-      className=
-          ms-Button
-          ms-Button--default
-          {
-            -moz-osx-font-smoothing: grayscale;
-            -webkit-font-smoothing: antialiased;
-            background-color: #f4f4f4;
-            border-radius: 0px;
-            border: 1px solid transparent;
-            box-sizing: border-box;
-            color: #333333;
-            cursor: pointer;
-            display: inline-block;
-            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-            font-size: 14px;
-            font-weight: 400;
-            height: 32px;
-            min-width: 80px;
-            outline: transparent;
-            padding-bottom: 0;
-            padding-left: 16px;
-            padding-right: 16px;
-            padding-top: 0;
-            position: relative;
-            text-align: center;
-            text-decoration: none;
-            user-select: none;
-            vertical-align: top;
-          }
-          &::-moz-focus-inner {
-            border: 0;
-          }
-          .ms-Fabric--isFocusVisible &:focus:after {
-            border: 1px solid #ffffff;
-            bottom: 0px;
-            content: "";
-            left: 0px;
-            outline: 1px solid #666666;
-            position: absolute;
-            right: 0px;
-            top: 0px;
-            z-index: 1;
-          }
-          @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
-            border: none;
-            bottom: -2px;
-            left: -2px;
-            outline-color: ButtonText;
-            right: -2px;
-            top: -2px;
-          }
-          &:active > * {
-            left: 0px;
-            position: relative;
-            top: 0px;
-          }
-          &:hover {
-            background-color: #eaeaea;
-            color: #212121;
-          }
-          @media screen and (-ms-high-contrast: active){&:hover {
-            border-color: Highlight;
-            color: Highlight;
-          }
-          &:active {
-            background-color: #c8c8c8;
-            color: #212121;
-          }
-      data-is-focusable={true}
-      onClick={[Function]}
-      onKeyDown={[Function]}
-      onKeyPress={[Function]}
-      onKeyUp={[Function]}
-      onMouseDown={[Function]}
-      onMouseUp={[Function]}
-      type="button"
-    >
-      <div
-        className=
-            ms-Button-flexContainer
-            {
-              align-items: center;
-              display: flex;
-              flex-wrap: nowrap;
-              height: 100%;
-              justify-content: center;
-            }
-      >
-        <div
-          className=
-              ms-Button-textContainer
-              {
-                flex-grow: 1;
-              }
-        >
-          <div
-            className=
-                ms-Button-label
-                {
-                  font-weight: 600;
-                  line-height: 100%;
-                  margin-bottom: 0;
-                  margin-left: 4px;
-                  margin-right: 4px;
-                  margin-top: 0;
-                }
-            id="id__4"
-          >
-            Zone 1 button
-          </div>
-        </div>
-      </div>
-    </button>
+      aria-hidden={true}
+      data-is-visible={true}
+      onFocus={[Function]}
+      style={
+        Object {
+          "pointerEvents": "none",
+          "position": "fixed",
+        }
+      }
+      tabIndex={-1}
+    />
     <div
       className=
           ms-Stack
           {
+            align-items: flex-start;
             border: 2px solid transparent;
             box-sizing: border-box;
             display: flex;
-            flex-direction: row;
+            flex-direction: column;
             flex-wrap: nowrap;
             height: auto;
-            justify-content: flex-start;
             padding-bottom: 10px;
             padding-left: 10px;
             padding-right: 10px;
@@ -445,7 +155,7 @@ exports[`Component Examples renders FocusTrapZone.Nested.Example.tsx correctly 1
             text-overflow: ellipsis;
           }
           & > *:not(:first-child) {
-            margin-left: 10px;
+            margin-top: 10px;
           }
           & > *:not(.ms-StackItem) {
             flex-shrink: 1;
@@ -462,7 +172,6 @@ exports[`Component Examples renders FocusTrapZone.Nested.Example.tsx correctly 1
               font-size: 14px;
               font-weight: 400;
               margin-bottom: 8px;
-              width: 200px;
             }
       >
         <label
@@ -490,10 +199,10 @@ exports[`Component Examples renders FocusTrapZone.Nested.Example.tsx correctly 1
                 padding-top: 5px;
                 word-wrap: break-word;
               }
-          htmlFor="Toggle7"
-          id="Toggle7-label"
+          htmlFor="Toggle3"
+          id="Toggle3-label"
         >
-          Enable trap zone 2
+          Enable trap zone 1
         </label>
         <div
           className=
@@ -505,7 +214,8 @@ exports[`Component Examples renders FocusTrapZone.Nested.Example.tsx correctly 1
         >
           <button
             aria-checked={false}
-            aria-labelledby="Toggle7-label"
+            aria-labelledby="Toggle3-label"
+            checked={false}
             className=
                 ms-Toggle-background
                 {
@@ -553,7 +263,7 @@ exports[`Component Examples renders FocusTrapZone.Nested.Example.tsx correctly 1
                   border-color: Highlight;
                 }
             data-is-focusable={true}
-            id="Toggle7"
+            id="Toggle3"
             onChange={[Function]}
             onClick={[Function]}
             role="switch"
@@ -611,8 +321,8 @@ exports[`Component Examples renders FocusTrapZone.Nested.Example.tsx correctly 1
                   padding-top: 0;
                   user-select: none;
                 }
-            htmlFor="Toggle7"
-            id="Toggle7-stateText"
+            htmlFor="Toggle3"
+            id="Toggle3-stateText"
           >
             Off
           </label>
@@ -725,168 +435,75 @@ exports[`Component Examples renders FocusTrapZone.Nested.Example.tsx correctly 1
                     margin-right: 4px;
                     margin-top: 0;
                   }
-              id="id__8"
+              id="id__4"
             >
-              Zone 2 button
+              Zone 1 button
             </div>
           </div>
         </div>
       </button>
       <div
-        className=
-            ms-Stack
-            {
-              align-items: flex-start;
-              border: 2px solid transparent;
-              box-sizing: border-box;
-              display: flex;
-              flex-direction: column;
-              flex-wrap: nowrap;
-              height: auto;
-              padding-bottom: 10px;
-              padding-left: 10px;
-              padding-right: 10px;
-              padding-top: 10px;
-              width: auto;
-            }
-            & > * {
-              text-overflow: ellipsis;
-            }
-            & > *:not(:first-child) {
-              margin-top: 10px;
-            }
-            & > *:not(.ms-StackItem) {
-              flex-shrink: 1;
-            }
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onFocusCapture={[Function]}
       >
+        <div
+          aria-hidden={true}
+          data-is-visible={true}
+          onFocus={[Function]}
+          style={
+            Object {
+              "pointerEvents": "none",
+              "position": "fixed",
+            }
+          }
+          tabIndex={-1}
+        />
         <div
           className=
-              ms-Toggle
-              is-enabled
+              ms-Stack
               {
-                -moz-osx-font-smoothing: grayscale;
-                -webkit-font-smoothing: antialiased;
-                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                font-size: 14px;
-                font-weight: 400;
-                margin-bottom: 8px;
-                width: 200px;
+                align-items: flex-start;
+                border: 2px solid transparent;
+                box-sizing: border-box;
+                display: flex;
+                flex-direction: column;
+                flex-wrap: nowrap;
+                height: auto;
+                padding-bottom: 10px;
+                padding-left: 10px;
+                padding-right: 10px;
+                padding-top: 10px;
+                width: auto;
+              }
+              & > * {
+                text-overflow: ellipsis;
+              }
+              & > *:not(:first-child) {
+                margin-top: 10px;
+              }
+              & > *:not(.ms-StackItem) {
+                flex-shrink: 1;
               }
         >
-          <label
+          <div
             className=
-                ms-Label
-                ms-Toggle-label
+                ms-Toggle
+                is-enabled
                 {
                   -moz-osx-font-smoothing: grayscale;
                   -webkit-font-smoothing: antialiased;
-                  box-shadow: none;
-                  box-sizing: border-box;
-                  color: #333333;
-                  display: block;
                   font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
                   font-size: 14px;
                   font-weight: 400;
-                  margin-bottom: 0px;
-                  margin-left: 0px;
-                  margin-right: 0px;
-                  margin-top: 0px;
-                  overflow-wrap: break-word;
-                  padding-bottom: 5px;
-                  padding-left: 0;
-                  padding-right: 0;
-                  padding-top: 5px;
-                  word-wrap: break-word;
-                }
-            htmlFor="Toggle11"
-            id="Toggle11-label"
-          >
-            Enable trap zone 3
-          </label>
-          <div
-            className=
-                ms-Toggle-innerContainer
-                {
-                  display: inline-flex;
-                  position: relative;
+                  margin-bottom: 8px;
+                  width: 200px;
                 }
           >
-            <button
-              aria-checked={false}
-              aria-labelledby="Toggle11-label"
-              className=
-                  ms-Toggle-background
-                  {
-                    align-items: center;
-                    background: #ffffff;
-                    border-color: #666666;
-                    border-radius: 1em;
-                    border-style: solid;
-                    border-width: 1px;
-                    box-sizing: border-box;
-                    cursor: pointer;
-                    display: flex;
-                    font-size: 20px;
-                    height: 1em;
-                    outline: transparent;
-                    padding-bottom: 0;
-                    padding-left: .2em;
-                    padding-right: .2em;
-                    padding-top: 0;
-                    position: relative;
-                    transition: all 0.1s ease;
-                    width: 2.2em;
-                  }
-                  &::-moz-focus-inner {
-                    border: 0;
-                  }
-                  .ms-Fabric--isFocusVisible &:focus:after {
-                    border: 1px solid #ffffff;
-                    bottom: -2px;
-                    content: "";
-                    left: -2px;
-                    outline: 1px solid #666666;
-                    position: absolute;
-                    right: -2px;
-                    top: -2px;
-                    z-index: 1;
-                  }
-                  &:hover {
-                    border-color: #333333;
-                  }
-                  @media screen and (-ms-high-contrast: active){&:hover .ms-Toggle-thumb {
-                    border-color: Highlight;
-                  }
-                  @media screen and (-ms-high-contrast: active){&:hover {
-                    border-color: Highlight;
-                  }
-              data-is-focusable={true}
-              id="Toggle11"
-              onChange={[Function]}
-              onClick={[Function]}
-              role="switch"
-              type="button"
-            >
-              <div
-                className=
-                    ms-Toggle-thumb
-                    {
-                      background-color: #333333;
-                      border-color: transparent;
-                      border-radius: .5em;
-                      border-style: solid;
-                      border-width: .28em;
-                      box-sizing: border-box;
-                      height: .5em;
-                      transition: all 0.1s ease;
-                      width: .5em;
-                    }
-              />
-            </button>
             <label
               className=
                   ms-Label
-                  ms-Toggle-stateText
+                  ms-Toggle-label
                   {
                     -moz-osx-font-smoothing: grayscale;
                     -webkit-font-smoothing: antialiased;
@@ -908,294 +525,1004 @@ exports[`Component Examples renders FocusTrapZone.Nested.Example.tsx correctly 1
                     padding-top: 5px;
                     word-wrap: break-word;
                   }
-                  && {
-                    margin-bottom: 0;
-                    margin-left: 8px;
-                    margin-right: 8px;
-                    margin-top: 0;
-                    padding-bottom: 0;
-                    padding-left: 0;
-                    padding-right: 0;
-                    padding-top: 0;
-                    user-select: none;
-                  }
-              htmlFor="Toggle11"
-              id="Toggle11-stateText"
+              htmlFor="Toggle7"
+              id="Toggle7-label"
             >
-              Off
+              Enable trap zone 2
             </label>
-          </div>
-        </div>
-        <button
-          className=
-              ms-Button
-              ms-Button--default
-              {
-                -moz-osx-font-smoothing: grayscale;
-                -webkit-font-smoothing: antialiased;
-                background-color: #f4f4f4;
-                border-radius: 0px;
-                border: 1px solid transparent;
-                box-sizing: border-box;
-                color: #333333;
-                cursor: pointer;
-                display: inline-block;
-                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                font-size: 14px;
-                font-weight: 400;
-                height: 32px;
-                min-width: 80px;
-                outline: transparent;
-                padding-bottom: 0;
-                padding-left: 16px;
-                padding-right: 16px;
-                padding-top: 0;
-                position: relative;
-                text-align: center;
-                text-decoration: none;
-                user-select: none;
-                vertical-align: top;
-              }
-              &::-moz-focus-inner {
-                border: 0;
-              }
-              .ms-Fabric--isFocusVisible &:focus:after {
-                border: 1px solid #ffffff;
-                bottom: 0px;
-                content: "";
-                left: 0px;
-                outline: 1px solid #666666;
-                position: absolute;
-                right: 0px;
-                top: 0px;
-                z-index: 1;
-              }
-              @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
-                border: none;
-                bottom: -2px;
-                left: -2px;
-                outline-color: ButtonText;
-                right: -2px;
-                top: -2px;
-              }
-              &:active > * {
-                left: 0px;
-                position: relative;
-                top: 0px;
-              }
-              &:hover {
-                background-color: #eaeaea;
-                color: #212121;
-              }
-              @media screen and (-ms-high-contrast: active){&:hover {
-                border-color: Highlight;
-                color: Highlight;
-              }
-              &:active {
-                background-color: #c8c8c8;
-                color: #212121;
-              }
-          data-is-focusable={true}
-          onClick={[Function]}
-          onKeyDown={[Function]}
-          onKeyPress={[Function]}
-          onKeyUp={[Function]}
-          onMouseDown={[Function]}
-          onMouseUp={[Function]}
-          type="button"
-        >
-          <div
-            className=
-                ms-Button-flexContainer
-                {
-                  align-items: center;
-                  display: flex;
-                  flex-wrap: nowrap;
-                  height: 100%;
-                  justify-content: center;
-                }
-          >
             <div
               className=
-                  ms-Button-textContainer
+                  ms-Toggle-innerContainer
                   {
-                    flex-grow: 1;
+                    display: inline-flex;
+                    position: relative;
                   }
             >
-              <div
+              <button
+                aria-checked={false}
+                aria-labelledby="Toggle7-label"
+                checked={false}
+                className=
+                    ms-Toggle-background
+                    {
+                      align-items: center;
+                      background: #ffffff;
+                      border-color: #666666;
+                      border-radius: 1em;
+                      border-style: solid;
+                      border-width: 1px;
+                      box-sizing: border-box;
+                      cursor: pointer;
+                      display: flex;
+                      font-size: 20px;
+                      height: 1em;
+                      outline: transparent;
+                      padding-bottom: 0;
+                      padding-left: .2em;
+                      padding-right: .2em;
+                      padding-top: 0;
+                      position: relative;
+                      transition: all 0.1s ease;
+                      width: 2.2em;
+                    }
+                    &::-moz-focus-inner {
+                      border: 0;
+                    }
+                    .ms-Fabric--isFocusVisible &:focus:after {
+                      border: 1px solid #ffffff;
+                      bottom: -2px;
+                      content: "";
+                      left: -2px;
+                      outline: 1px solid #666666;
+                      position: absolute;
+                      right: -2px;
+                      top: -2px;
+                      z-index: 1;
+                    }
+                    &:hover {
+                      border-color: #333333;
+                    }
+                    @media screen and (-ms-high-contrast: active){&:hover .ms-Toggle-thumb {
+                      border-color: Highlight;
+                    }
+                    @media screen and (-ms-high-contrast: active){&:hover {
+                      border-color: Highlight;
+                    }
+                data-is-focusable={true}
+                id="Toggle7"
+                onChange={[Function]}
+                onClick={[Function]}
+                role="switch"
+                type="button"
+              >
+                <div
+                  className=
+                      ms-Toggle-thumb
+                      {
+                        background-color: #333333;
+                        border-color: transparent;
+                        border-radius: .5em;
+                        border-style: solid;
+                        border-width: .28em;
+                        box-sizing: border-box;
+                        height: .5em;
+                        transition: all 0.1s ease;
+                        width: .5em;
+                      }
+                />
+              </button>
+              <label
                 className=
-                    ms-Button-label
+                    ms-Label
+                    ms-Toggle-stateText
                     {
-                      font-weight: 600;
-                      line-height: 100%;
+                      -moz-osx-font-smoothing: grayscale;
+                      -webkit-font-smoothing: antialiased;
+                      box-shadow: none;
+                      box-sizing: border-box;
+                      color: #333333;
+                      display: block;
+                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                      font-size: 14px;
+                      font-weight: 400;
+                      margin-bottom: 0px;
+                      margin-left: 0px;
+                      margin-right: 0px;
+                      margin-top: 0px;
+                      overflow-wrap: break-word;
+                      padding-bottom: 5px;
+                      padding-left: 0;
+                      padding-right: 0;
+                      padding-top: 5px;
+                      word-wrap: break-word;
+                    }
+                    && {
                       margin-bottom: 0;
-                      margin-left: 4px;
-                      margin-right: 4px;
+                      margin-left: 8px;
+                      margin-right: 8px;
                       margin-top: 0;
+                      padding-bottom: 0;
+                      padding-left: 0;
+                      padding-right: 0;
+                      padding-top: 0;
+                      user-select: none;
                     }
-                id="id__12"
+                htmlFor="Toggle7"
+                id="Toggle7-stateText"
               >
-                Zone 3 button
-              </div>
+                Off
+              </label>
             </div>
           </div>
-        </button>
-      </div>
-      <div
-        className=
-            ms-Stack
-            {
-              align-items: flex-start;
-              border: 2px solid transparent;
-              box-sizing: border-box;
-              display: flex;
-              flex-direction: column;
-              flex-wrap: nowrap;
-              height: auto;
-              padding-bottom: 10px;
-              padding-left: 10px;
-              padding-right: 10px;
-              padding-top: 10px;
-              width: auto;
-            }
-            & > * {
-              text-overflow: ellipsis;
-            }
-            & > *:not(:first-child) {
-              margin-top: 10px;
-            }
-            & > *:not(.ms-StackItem) {
-              flex-shrink: 1;
-            }
-      >
-        <div
-          className=
-              ms-Toggle
-              is-enabled
-              {
-                -moz-osx-font-smoothing: grayscale;
-                -webkit-font-smoothing: antialiased;
-                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                font-size: 14px;
-                font-weight: 400;
-                margin-bottom: 8px;
-                width: 200px;
-              }
-        >
-          <label
+          <button
             className=
-                ms-Label
-                ms-Toggle-label
+                ms-Button
+                ms-Button--default
                 {
                   -moz-osx-font-smoothing: grayscale;
                   -webkit-font-smoothing: antialiased;
-                  box-shadow: none;
+                  background-color: #f4f4f4;
+                  border-radius: 0px;
+                  border: 1px solid transparent;
                   box-sizing: border-box;
                   color: #333333;
-                  display: block;
+                  cursor: pointer;
+                  display: inline-block;
                   font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
                   font-size: 14px;
                   font-weight: 400;
-                  margin-bottom: 0px;
-                  margin-left: 0px;
-                  margin-right: 0px;
-                  margin-top: 0px;
-                  overflow-wrap: break-word;
-                  padding-bottom: 5px;
-                  padding-left: 0;
-                  padding-right: 0;
-                  padding-top: 5px;
-                  word-wrap: break-word;
+                  height: 32px;
+                  min-width: 80px;
+                  outline: transparent;
+                  padding-bottom: 0;
+                  padding-left: 16px;
+                  padding-right: 16px;
+                  padding-top: 0;
+                  position: relative;
+                  text-align: center;
+                  text-decoration: none;
+                  user-select: none;
+                  vertical-align: top;
                 }
-            htmlFor="Toggle15"
-            id="Toggle15-label"
-          >
-            Enable trap zone 4
-          </label>
-          <div
-            className=
-                ms-Toggle-innerContainer
-                {
-                  display: inline-flex;
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+                .ms-Fabric--isFocusVisible &:focus:after {
+                  border: 1px solid #ffffff;
+                  bottom: 0px;
+                  content: "";
+                  left: 0px;
+                  outline: 1px solid #666666;
+                  position: absolute;
+                  right: 0px;
+                  top: 0px;
+                  z-index: 1;
+                }
+                @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
+                  border: none;
+                  bottom: -2px;
+                  left: -2px;
+                  outline-color: ButtonText;
+                  right: -2px;
+                  top: -2px;
+                }
+                &:active > * {
+                  left: 0px;
                   position: relative;
+                  top: 0px;
+                }
+                &:hover {
+                  background-color: #eaeaea;
+                  color: #212121;
+                }
+                @media screen and (-ms-high-contrast: active){&:hover {
+                  border-color: Highlight;
+                  color: Highlight;
+                }
+                &:active {
+                  background-color: #c8c8c8;
+                  color: #212121;
                 }
+            data-is-focusable={true}
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            onKeyPress={[Function]}
+            onKeyUp={[Function]}
+            onMouseDown={[Function]}
+            onMouseUp={[Function]}
+            type="button"
           >
-            <button
-              aria-checked={false}
-              aria-labelledby="Toggle15-label"
+            <div
               className=
-                  ms-Toggle-background
+                  ms-Button-flexContainer
                   {
                     align-items: center;
-                    background: #ffffff;
-                    border-color: #666666;
-                    border-radius: 1em;
-                    border-style: solid;
-                    border-width: 1px;
+                    display: flex;
+                    flex-wrap: nowrap;
+                    height: 100%;
+                    justify-content: center;
+                  }
+            >
+              <div
+                className=
+                    ms-Button-textContainer
+                    {
+                      flex-grow: 1;
+                    }
+              >
+                <div
+                  className=
+                      ms-Button-label
+                      {
+                        font-weight: 600;
+                        line-height: 100%;
+                        margin-bottom: 0;
+                        margin-left: 4px;
+                        margin-right: 4px;
+                        margin-top: 0;
+                      }
+                  id="id__8"
+                >
+                  Zone 2 button
+                </div>
+              </div>
+            </div>
+          </button>
+          <div
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onFocusCapture={[Function]}
+          >
+            <div
+              aria-hidden={true}
+              data-is-visible={true}
+              onFocus={[Function]}
+              style={
+                Object {
+                  "pointerEvents": "none",
+                  "position": "fixed",
+                }
+              }
+              tabIndex={-1}
+            />
+            <div
+              className=
+                  ms-Stack
+                  {
+                    align-items: flex-start;
+                    border: 2px solid transparent;
                     box-sizing: border-box;
-                    cursor: pointer;
                     display: flex;
-                    font-size: 20px;
-                    height: 1em;
-                    outline: transparent;
-                    padding-bottom: 0;
-                    padding-left: .2em;
-                    padding-right: .2em;
-                    padding-top: 0;
-                    position: relative;
-                    transition: all 0.1s ease;
-                    width: 2.2em;
+                    flex-direction: column;
+                    flex-wrap: nowrap;
+                    height: auto;
+                    padding-bottom: 10px;
+                    padding-left: 10px;
+                    padding-right: 10px;
+                    padding-top: 10px;
+                    width: auto;
                   }
-                  &::-moz-focus-inner {
-                    border: 0;
+                  & > * {
+                    text-overflow: ellipsis;
                   }
-                  .ms-Fabric--isFocusVisible &:focus:after {
-                    border: 1px solid #ffffff;
-                    bottom: -2px;
-                    content: "";
-                    left: -2px;
-                    outline: 1px solid #666666;
-                    position: absolute;
-                    right: -2px;
-                    top: -2px;
-                    z-index: 1;
+                  & > *:not(:first-child) {
+                    margin-top: 10px;
                   }
-                  &:hover {
-                    border-color: #333333;
+                  & > *:not(.ms-StackItem) {
+                    flex-shrink: 1;
                   }
-                  @media screen and (-ms-high-contrast: active){&:hover .ms-Toggle-thumb {
-                    border-color: Highlight;
+            >
+              <div
+                className=
+                    ms-Toggle
+                    is-enabled
+                    {
+                      -moz-osx-font-smoothing: grayscale;
+                      -webkit-font-smoothing: antialiased;
+                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                      font-size: 14px;
+                      font-weight: 400;
+                      margin-bottom: 8px;
+                      width: 200px;
+                    }
+              >
+                <label
+                  className=
+                      ms-Label
+                      ms-Toggle-label
+                      {
+                        -moz-osx-font-smoothing: grayscale;
+                        -webkit-font-smoothing: antialiased;
+                        box-shadow: none;
+                        box-sizing: border-box;
+                        color: #333333;
+                        display: block;
+                        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                        font-size: 14px;
+                        font-weight: 400;
+                        margin-bottom: 0px;
+                        margin-left: 0px;
+                        margin-right: 0px;
+                        margin-top: 0px;
+                        overflow-wrap: break-word;
+                        padding-bottom: 5px;
+                        padding-left: 0;
+                        padding-right: 0;
+                        padding-top: 5px;
+                        word-wrap: break-word;
+                      }
+                  htmlFor="Toggle11"
+                  id="Toggle11-label"
+                >
+                  Enable trap zone 3
+                </label>
+                <div
+                  className=
+                      ms-Toggle-innerContainer
+                      {
+                        display: inline-flex;
+                        position: relative;
+                      }
+                >
+                  <button
+                    aria-checked={false}
+                    aria-labelledby="Toggle11-label"
+                    checked={false}
+                    className=
+                        ms-Toggle-background
+                        {
+                          align-items: center;
+                          background: #ffffff;
+                          border-color: #666666;
+                          border-radius: 1em;
+                          border-style: solid;
+                          border-width: 1px;
+                          box-sizing: border-box;
+                          cursor: pointer;
+                          display: flex;
+                          font-size: 20px;
+                          height: 1em;
+                          outline: transparent;
+                          padding-bottom: 0;
+                          padding-left: .2em;
+                          padding-right: .2em;
+                          padding-top: 0;
+                          position: relative;
+                          transition: all 0.1s ease;
+                          width: 2.2em;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid #ffffff;
+                          bottom: -2px;
+                          content: "";
+                          left: -2px;
+                          outline: 1px solid #666666;
+                          position: absolute;
+                          right: -2px;
+                          top: -2px;
+                          z-index: 1;
+                        }
+                        &:hover {
+                          border-color: #333333;
+                        }
+                        @media screen and (-ms-high-contrast: active){&:hover .ms-Toggle-thumb {
+                          border-color: Highlight;
+                        }
+                        @media screen and (-ms-high-contrast: active){&:hover {
+                          border-color: Highlight;
+                        }
+                    data-is-focusable={true}
+                    id="Toggle11"
+                    onChange={[Function]}
+                    onClick={[Function]}
+                    role="switch"
+                    type="button"
+                  >
+                    <div
+                      className=
+                          ms-Toggle-thumb
+                          {
+                            background-color: #333333;
+                            border-color: transparent;
+                            border-radius: .5em;
+                            border-style: solid;
+                            border-width: .28em;
+                            box-sizing: border-box;
+                            height: .5em;
+                            transition: all 0.1s ease;
+                            width: .5em;
+                          }
+                    />
+                  </button>
+                  <label
+                    className=
+                        ms-Label
+                        ms-Toggle-stateText
+                        {
+                          -moz-osx-font-smoothing: grayscale;
+                          -webkit-font-smoothing: antialiased;
+                          box-shadow: none;
+                          box-sizing: border-box;
+                          color: #333333;
+                          display: block;
+                          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                          font-size: 14px;
+                          font-weight: 400;
+                          margin-bottom: 0px;
+                          margin-left: 0px;
+                          margin-right: 0px;
+                          margin-top: 0px;
+                          overflow-wrap: break-word;
+                          padding-bottom: 5px;
+                          padding-left: 0;
+                          padding-right: 0;
+                          padding-top: 5px;
+                          word-wrap: break-word;
+                        }
+                        && {
+                          margin-bottom: 0;
+                          margin-left: 8px;
+                          margin-right: 8px;
+                          margin-top: 0;
+                          padding-bottom: 0;
+                          padding-left: 0;
+                          padding-right: 0;
+                          padding-top: 0;
+                          user-select: none;
+                        }
+                    htmlFor="Toggle11"
+                    id="Toggle11-stateText"
+                  >
+                    Off
+                  </label>
+                </div>
+              </div>
+              <button
+                className=
+                    ms-Button
+                    ms-Button--default
+                    {
+                      -moz-osx-font-smoothing: grayscale;
+                      -webkit-font-smoothing: antialiased;
+                      background-color: #f4f4f4;
+                      border-radius: 0px;
+                      border: 1px solid transparent;
+                      box-sizing: border-box;
+                      color: #333333;
+                      cursor: pointer;
+                      display: inline-block;
+                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                      font-size: 14px;
+                      font-weight: 400;
+                      height: 32px;
+                      min-width: 80px;
+                      outline: transparent;
+                      padding-bottom: 0;
+                      padding-left: 16px;
+                      padding-right: 16px;
+                      padding-top: 0;
+                      position: relative;
+                      text-align: center;
+                      text-decoration: none;
+                      user-select: none;
+                      vertical-align: top;
+                    }
+                    &::-moz-focus-inner {
+                      border: 0;
+                    }
+                    .ms-Fabric--isFocusVisible &:focus:after {
+                      border: 1px solid #ffffff;
+                      bottom: 0px;
+                      content: "";
+                      left: 0px;
+                      outline: 1px solid #666666;
+                      position: absolute;
+                      right: 0px;
+                      top: 0px;
+                      z-index: 1;
+                    }
+                    @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
+                      border: none;
+                      bottom: -2px;
+                      left: -2px;
+                      outline-color: ButtonText;
+                      right: -2px;
+                      top: -2px;
+                    }
+                    &:active > * {
+                      left: 0px;
+                      position: relative;
+                      top: 0px;
+                    }
+                    &:hover {
+                      background-color: #eaeaea;
+                      color: #212121;
+                    }
+                    @media screen and (-ms-high-contrast: active){&:hover {
+                      border-color: Highlight;
+                      color: Highlight;
+                    }
+                    &:active {
+                      background-color: #c8c8c8;
+                      color: #212121;
+                    }
+                data-is-focusable={true}
+                onClick={[Function]}
+                onKeyDown={[Function]}
+                onKeyPress={[Function]}
+                onKeyUp={[Function]}
+                onMouseDown={[Function]}
+                onMouseUp={[Function]}
+                type="button"
+              >
+                <div
+                  className=
+                      ms-Button-flexContainer
+                      {
+                        align-items: center;
+                        display: flex;
+                        flex-wrap: nowrap;
+                        height: 100%;
+                        justify-content: center;
+                      }
+                >
+                  <div
+                    className=
+                        ms-Button-textContainer
+                        {
+                          flex-grow: 1;
+                        }
+                  >
+                    <div
+                      className=
+                          ms-Button-label
+                          {
+                            font-weight: 600;
+                            line-height: 100%;
+                            margin-bottom: 0;
+                            margin-left: 4px;
+                            margin-right: 4px;
+                            margin-top: 0;
+                          }
+                      id="id__12"
+                    >
+                      Zone 3 button
+                    </div>
+                  </div>
+                </div>
+              </button>
+            </div>
+            <div
+              aria-hidden={true}
+              data-is-visible={true}
+              onFocus={[Function]}
+              style={
+                Object {
+                  "pointerEvents": "none",
+                  "position": "fixed",
+                }
+              }
+              tabIndex={-1}
+            />
+          </div>
+          <div
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onFocusCapture={[Function]}
+          >
+            <div
+              aria-hidden={true}
+              data-is-visible={true}
+              onFocus={[Function]}
+              style={
+                Object {
+                  "pointerEvents": "none",
+                  "position": "fixed",
+                }
+              }
+              tabIndex={-1}
+            />
+            <div
+              className=
+                  ms-Stack
+                  {
+                    align-items: flex-start;
+                    border: 2px solid transparent;
+                    box-sizing: border-box;
+                    display: flex;
+                    flex-direction: column;
+                    flex-wrap: nowrap;
+                    height: auto;
+                    padding-bottom: 10px;
+                    padding-left: 10px;
+                    padding-right: 10px;
+                    padding-top: 10px;
+                    width: auto;
+                  }
+                  & > * {
+                    text-overflow: ellipsis;
                   }
-                  @media screen and (-ms-high-contrast: active){&:hover {
-                    border-color: Highlight;
+                  & > *:not(:first-child) {
+                    margin-top: 10px;
+                  }
+                  & > *:not(.ms-StackItem) {
+                    flex-shrink: 1;
                   }
-              data-is-focusable={true}
-              id="Toggle15"
-              onChange={[Function]}
-              onClick={[Function]}
-              role="switch"
-              type="button"
             >
               <div
                 className=
-                    ms-Toggle-thumb
+                    ms-Toggle
+                    is-enabled
                     {
-                      background-color: #333333;
-                      border-color: transparent;
-                      border-radius: .5em;
-                      border-style: solid;
-                      border-width: .28em;
+                      -moz-osx-font-smoothing: grayscale;
+                      -webkit-font-smoothing: antialiased;
+                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                      font-size: 14px;
+                      font-weight: 400;
+                      margin-bottom: 8px;
+                      width: 200px;
+                    }
+              >
+                <label
+                  className=
+                      ms-Label
+                      ms-Toggle-label
+                      {
+                        -moz-osx-font-smoothing: grayscale;
+                        -webkit-font-smoothing: antialiased;
+                        box-shadow: none;
+                        box-sizing: border-box;
+                        color: #333333;
+                        display: block;
+                        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                        font-size: 14px;
+                        font-weight: 400;
+                        margin-bottom: 0px;
+                        margin-left: 0px;
+                        margin-right: 0px;
+                        margin-top: 0px;
+                        overflow-wrap: break-word;
+                        padding-bottom: 5px;
+                        padding-left: 0;
+                        padding-right: 0;
+                        padding-top: 5px;
+                        word-wrap: break-word;
+                      }
+                  htmlFor="Toggle15"
+                  id="Toggle15-label"
+                >
+                  Enable trap zone 4
+                </label>
+                <div
+                  className=
+                      ms-Toggle-innerContainer
+                      {
+                        display: inline-flex;
+                        position: relative;
+                      }
+                >
+                  <button
+                    aria-checked={false}
+                    aria-labelledby="Toggle15-label"
+                    checked={false}
+                    className=
+                        ms-Toggle-background
+                        {
+                          align-items: center;
+                          background: #ffffff;
+                          border-color: #666666;
+                          border-radius: 1em;
+                          border-style: solid;
+                          border-width: 1px;
+                          box-sizing: border-box;
+                          cursor: pointer;
+                          display: flex;
+                          font-size: 20px;
+                          height: 1em;
+                          outline: transparent;
+                          padding-bottom: 0;
+                          padding-left: .2em;
+                          padding-right: .2em;
+                          padding-top: 0;
+                          position: relative;
+                          transition: all 0.1s ease;
+                          width: 2.2em;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid #ffffff;
+                          bottom: -2px;
+                          content: "";
+                          left: -2px;
+                          outline: 1px solid #666666;
+                          position: absolute;
+                          right: -2px;
+                          top: -2px;
+                          z-index: 1;
+                        }
+                        &:hover {
+                          border-color: #333333;
+                        }
+                        @media screen and (-ms-high-contrast: active){&:hover .ms-Toggle-thumb {
+                          border-color: Highlight;
+                        }
+                        @media screen and (-ms-high-contrast: active){&:hover {
+                          border-color: Highlight;
+                        }
+                    data-is-focusable={true}
+                    id="Toggle15"
+                    onChange={[Function]}
+                    onClick={[Function]}
+                    role="switch"
+                    type="button"
+                  >
+                    <div
+                      className=
+                          ms-Toggle-thumb
+                          {
+                            background-color: #333333;
+                            border-color: transparent;
+                            border-radius: .5em;
+                            border-style: solid;
+                            border-width: .28em;
+                            box-sizing: border-box;
+                            height: .5em;
+                            transition: all 0.1s ease;
+                            width: .5em;
+                          }
+                    />
+                  </button>
+                  <label
+                    className=
+                        ms-Label
+                        ms-Toggle-stateText
+                        {
+                          -moz-osx-font-smoothing: grayscale;
+                          -webkit-font-smoothing: antialiased;
+                          box-shadow: none;
+                          box-sizing: border-box;
+                          color: #333333;
+                          display: block;
+                          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                          font-size: 14px;
+                          font-weight: 400;
+                          margin-bottom: 0px;
+                          margin-left: 0px;
+                          margin-right: 0px;
+                          margin-top: 0px;
+                          overflow-wrap: break-word;
+                          padding-bottom: 5px;
+                          padding-left: 0;
+                          padding-right: 0;
+                          padding-top: 5px;
+                          word-wrap: break-word;
+                        }
+                        && {
+                          margin-bottom: 0;
+                          margin-left: 8px;
+                          margin-right: 8px;
+                          margin-top: 0;
+                          padding-bottom: 0;
+                          padding-left: 0;
+                          padding-right: 0;
+                          padding-top: 0;
+                          user-select: none;
+                        }
+                    htmlFor="Toggle15"
+                    id="Toggle15-stateText"
+                  >
+                    Off
+                  </label>
+                </div>
+              </div>
+              <button
+                className=
+                    ms-Button
+                    ms-Button--default
+                    {
+                      -moz-osx-font-smoothing: grayscale;
+                      -webkit-font-smoothing: antialiased;
+                      background-color: #f4f4f4;
+                      border-radius: 0px;
+                      border: 1px solid transparent;
                       box-sizing: border-box;
-                      height: .5em;
-                      transition: all 0.1s ease;
-                      width: .5em;
+                      color: #333333;
+                      cursor: pointer;
+                      display: inline-block;
+                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                      font-size: 14px;
+                      font-weight: 400;
+                      height: 32px;
+                      min-width: 80px;
+                      outline: transparent;
+                      padding-bottom: 0;
+                      padding-left: 16px;
+                      padding-right: 16px;
+                      padding-top: 0;
+                      position: relative;
+                      text-align: center;
+                      text-decoration: none;
+                      user-select: none;
+                      vertical-align: top;
+                    }
+                    &::-moz-focus-inner {
+                      border: 0;
+                    }
+                    .ms-Fabric--isFocusVisible &:focus:after {
+                      border: 1px solid #ffffff;
+                      bottom: 0px;
+                      content: "";
+                      left: 0px;
+                      outline: 1px solid #666666;
+                      position: absolute;
+                      right: 0px;
+                      top: 0px;
+                      z-index: 1;
+                    }
+                    @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
+                      border: none;
+                      bottom: -2px;
+                      left: -2px;
+                      outline-color: ButtonText;
+                      right: -2px;
+                      top: -2px;
+                    }
+                    &:active > * {
+                      left: 0px;
+                      position: relative;
+                      top: 0px;
+                    }
+                    &:hover {
+                      background-color: #eaeaea;
+                      color: #212121;
+                    }
+                    @media screen and (-ms-high-contrast: active){&:hover {
+                      border-color: Highlight;
+                      color: Highlight;
+                    }
+                    &:active {
+                      background-color: #c8c8c8;
+                      color: #212121;
                     }
-              />
-            </button>
+                data-is-focusable={true}
+                onClick={[Function]}
+                onKeyDown={[Function]}
+                onKeyPress={[Function]}
+                onKeyUp={[Function]}
+                onMouseDown={[Function]}
+                onMouseUp={[Function]}
+                type="button"
+              >
+                <div
+                  className=
+                      ms-Button-flexContainer
+                      {
+                        align-items: center;
+                        display: flex;
+                        flex-wrap: nowrap;
+                        height: 100%;
+                        justify-content: center;
+                      }
+                >
+                  <div
+                    className=
+                        ms-Button-textContainer
+                        {
+                          flex-grow: 1;
+                        }
+                  >
+                    <div
+                      className=
+                          ms-Button-label
+                          {
+                            font-weight: 600;
+                            line-height: 100%;
+                            margin-bottom: 0;
+                            margin-left: 4px;
+                            margin-right: 4px;
+                            margin-top: 0;
+                          }
+                      id="id__16"
+                    >
+                      Zone 4 button
+                    </div>
+                  </div>
+                </div>
+              </button>
+            </div>
+            <div
+              aria-hidden={true}
+              data-is-visible={true}
+              onFocus={[Function]}
+              style={
+                Object {
+                  "pointerEvents": "none",
+                  "position": "fixed",
+                }
+              }
+              tabIndex={-1}
+            />
+          </div>
+        </div>
+        <div
+          aria-hidden={true}
+          data-is-visible={true}
+          onFocus={[Function]}
+          style={
+            Object {
+              "pointerEvents": "none",
+              "position": "fixed",
+            }
+          }
+          tabIndex={-1}
+        />
+      </div>
+      <div
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onFocusCapture={[Function]}
+      >
+        <div
+          aria-hidden={true}
+          data-is-visible={true}
+          onFocus={[Function]}
+          style={
+            Object {
+              "pointerEvents": "none",
+              "position": "fixed",
+            }
+          }
+          tabIndex={-1}
+        />
+        <div
+          className=
+              ms-Stack
+              {
+                align-items: flex-start;
+                border: 2px solid transparent;
+                box-sizing: border-box;
+                display: flex;
+                flex-direction: column;
+                flex-wrap: nowrap;
+                height: auto;
+                padding-bottom: 10px;
+                padding-left: 10px;
+                padding-right: 10px;
+                padding-top: 10px;
+                width: auto;
+              }
+              & > * {
+                text-overflow: ellipsis;
+              }
+              & > *:not(:first-child) {
+                margin-top: 10px;
+              }
+              & > *:not(.ms-StackItem) {
+                flex-shrink: 1;
+              }
+        >
+          <div
+            className=
+                ms-Toggle
+                is-enabled
+                {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 14px;
+                  font-weight: 400;
+                  margin-bottom: 8px;
+                }
+          >
             <label
               className=
                   ms-Label
-                  ms-Toggle-stateText
+                  ms-Toggle-label
                   {
                     -moz-osx-font-smoothing: grayscale;
                     -webkit-font-smoothing: antialiased;
@@ -1217,448 +1544,276 @@ exports[`Component Examples renders FocusTrapZone.Nested.Example.tsx correctly 1
                     padding-top: 5px;
                     word-wrap: break-word;
                   }
-                  && {
-                    margin-bottom: 0;
-                    margin-left: 8px;
-                    margin-right: 8px;
-                    margin-top: 0;
-                    padding-bottom: 0;
-                    padding-left: 0;
-                    padding-right: 0;
-                    padding-top: 0;
-                    user-select: none;
-                  }
-              htmlFor="Toggle15"
-              id="Toggle15-stateText"
+              htmlFor="Toggle19"
+              id="Toggle19-label"
             >
-              Off
+              Enable trap zone 5
             </label>
-          </div>
-        </div>
-        <button
-          className=
-              ms-Button
-              ms-Button--default
-              {
-                -moz-osx-font-smoothing: grayscale;
-                -webkit-font-smoothing: antialiased;
-                background-color: #f4f4f4;
-                border-radius: 0px;
-                border: 1px solid transparent;
-                box-sizing: border-box;
-                color: #333333;
-                cursor: pointer;
-                display: inline-block;
-                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                font-size: 14px;
-                font-weight: 400;
-                height: 32px;
-                min-width: 80px;
-                outline: transparent;
-                padding-bottom: 0;
-                padding-left: 16px;
-                padding-right: 16px;
-                padding-top: 0;
-                position: relative;
-                text-align: center;
-                text-decoration: none;
-                user-select: none;
-                vertical-align: top;
-              }
-              &::-moz-focus-inner {
-                border: 0;
-              }
-              .ms-Fabric--isFocusVisible &:focus:after {
-                border: 1px solid #ffffff;
-                bottom: 0px;
-                content: "";
-                left: 0px;
-                outline: 1px solid #666666;
-                position: absolute;
-                right: 0px;
-                top: 0px;
-                z-index: 1;
-              }
-              @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
-                border: none;
-                bottom: -2px;
-                left: -2px;
-                outline-color: ButtonText;
-                right: -2px;
-                top: -2px;
-              }
-              &:active > * {
-                left: 0px;
-                position: relative;
-                top: 0px;
-              }
-              &:hover {
-                background-color: #eaeaea;
-                color: #212121;
-              }
-              @media screen and (-ms-high-contrast: active){&:hover {
-                border-color: Highlight;
-                color: Highlight;
-              }
-              &:active {
-                background-color: #c8c8c8;
-                color: #212121;
-              }
-          data-is-focusable={true}
-          onClick={[Function]}
-          onKeyDown={[Function]}
-          onKeyPress={[Function]}
-          onKeyUp={[Function]}
-          onMouseDown={[Function]}
-          onMouseUp={[Function]}
-          type="button"
-        >
-          <div
-            className=
-                ms-Button-flexContainer
-                {
-                  align-items: center;
-                  display: flex;
-                  flex-wrap: nowrap;
-                  height: 100%;
-                  justify-content: center;
-                }
-          >
             <div
               className=
-                  ms-Button-textContainer
+                  ms-Toggle-innerContainer
                   {
-                    flex-grow: 1;
+                    display: inline-flex;
+                    position: relative;
                   }
             >
-              <div
+              <button
+                aria-checked={false}
+                aria-labelledby="Toggle19-label"
+                checked={false}
+                className=
+                    ms-Toggle-background
+                    {
+                      align-items: center;
+                      background: #ffffff;
+                      border-color: #666666;
+                      border-radius: 1em;
+                      border-style: solid;
+                      border-width: 1px;
+                      box-sizing: border-box;
+                      cursor: pointer;
+                      display: flex;
+                      font-size: 20px;
+                      height: 1em;
+                      outline: transparent;
+                      padding-bottom: 0;
+                      padding-left: .2em;
+                      padding-right: .2em;
+                      padding-top: 0;
+                      position: relative;
+                      transition: all 0.1s ease;
+                      width: 2.2em;
+                    }
+                    &::-moz-focus-inner {
+                      border: 0;
+                    }
+                    .ms-Fabric--isFocusVisible &:focus:after {
+                      border: 1px solid #ffffff;
+                      bottom: -2px;
+                      content: "";
+                      left: -2px;
+                      outline: 1px solid #666666;
+                      position: absolute;
+                      right: -2px;
+                      top: -2px;
+                      z-index: 1;
+                    }
+                    &:hover {
+                      border-color: #333333;
+                    }
+                    @media screen and (-ms-high-contrast: active){&:hover .ms-Toggle-thumb {
+                      border-color: Highlight;
+                    }
+                    @media screen and (-ms-high-contrast: active){&:hover {
+                      border-color: Highlight;
+                    }
+                data-is-focusable={true}
+                id="Toggle19"
+                onChange={[Function]}
+                onClick={[Function]}
+                role="switch"
+                type="button"
+              >
+                <div
+                  className=
+                      ms-Toggle-thumb
+                      {
+                        background-color: #333333;
+                        border-color: transparent;
+                        border-radius: .5em;
+                        border-style: solid;
+                        border-width: .28em;
+                        box-sizing: border-box;
+                        height: .5em;
+                        transition: all 0.1s ease;
+                        width: .5em;
+                      }
+                />
+              </button>
+              <label
                 className=
-                    ms-Button-label
+                    ms-Label
+                    ms-Toggle-stateText
                     {
-                      font-weight: 600;
-                      line-height: 100%;
+                      -moz-osx-font-smoothing: grayscale;
+                      -webkit-font-smoothing: antialiased;
+                      box-shadow: none;
+                      box-sizing: border-box;
+                      color: #333333;
+                      display: block;
+                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                      font-size: 14px;
+                      font-weight: 400;
+                      margin-bottom: 0px;
+                      margin-left: 0px;
+                      margin-right: 0px;
+                      margin-top: 0px;
+                      overflow-wrap: break-word;
+                      padding-bottom: 5px;
+                      padding-left: 0;
+                      padding-right: 0;
+                      padding-top: 5px;
+                      word-wrap: break-word;
+                    }
+                    && {
                       margin-bottom: 0;
-                      margin-left: 4px;
-                      margin-right: 4px;
+                      margin-left: 8px;
+                      margin-right: 8px;
                       margin-top: 0;
+                      padding-bottom: 0;
+                      padding-left: 0;
+                      padding-right: 0;
+                      padding-top: 0;
+                      user-select: none;
                     }
-                id="id__16"
+                htmlFor="Toggle19"
+                id="Toggle19-stateText"
               >
-                Zone 4 button
-              </div>
+                Off
+              </label>
             </div>
           </div>
-        </button>
-      </div>
-    </div>
-    <div
-      className=
-          ms-Stack
-          {
-            align-items: flex-start;
-            border: 2px solid transparent;
-            box-sizing: border-box;
-            display: flex;
-            flex-direction: column;
-            flex-wrap: nowrap;
-            height: auto;
-            padding-bottom: 10px;
-            padding-left: 10px;
-            padding-right: 10px;
-            padding-top: 10px;
-            width: auto;
-          }
-          & > * {
-            text-overflow: ellipsis;
-          }
-          & > *:not(:first-child) {
-            margin-top: 10px;
-          }
-          & > *:not(.ms-StackItem) {
-            flex-shrink: 1;
-          }
-    >
-      <div
-        className=
-            ms-Toggle
-            is-enabled
-            {
-              -moz-osx-font-smoothing: grayscale;
-              -webkit-font-smoothing: antialiased;
-              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-              font-size: 14px;
-              font-weight: 400;
-              margin-bottom: 8px;
-            }
-      >
-        <label
-          className=
-              ms-Label
-              ms-Toggle-label
-              {
-                -moz-osx-font-smoothing: grayscale;
-                -webkit-font-smoothing: antialiased;
-                box-shadow: none;
-                box-sizing: border-box;
-                color: #333333;
-                display: block;
-                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                font-size: 14px;
-                font-weight: 400;
-                margin-bottom: 0px;
-                margin-left: 0px;
-                margin-right: 0px;
-                margin-top: 0px;
-                overflow-wrap: break-word;
-                padding-bottom: 5px;
-                padding-left: 0;
-                padding-right: 0;
-                padding-top: 5px;
-                word-wrap: break-word;
-              }
-          htmlFor="Toggle19"
-          id="Toggle19-label"
-        >
-          Enable trap zone 5
-        </label>
-        <div
-          className=
-              ms-Toggle-innerContainer
-              {
-                display: inline-flex;
-                position: relative;
-              }
-        >
           <button
-            aria-checked={false}
-            aria-labelledby="Toggle19-label"
             className=
-                ms-Toggle-background
+                ms-Button
+                ms-Button--default
                 {
-                  align-items: center;
-                  background: #ffffff;
-                  border-color: #666666;
-                  border-radius: 1em;
-                  border-style: solid;
-                  border-width: 1px;
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  background-color: #f4f4f4;
+                  border-radius: 0px;
+                  border: 1px solid transparent;
                   box-sizing: border-box;
+                  color: #333333;
                   cursor: pointer;
-                  display: flex;
-                  font-size: 20px;
-                  height: 1em;
+                  display: inline-block;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 14px;
+                  font-weight: 400;
+                  height: 32px;
+                  min-width: 80px;
                   outline: transparent;
                   padding-bottom: 0;
-                  padding-left: .2em;
-                  padding-right: .2em;
+                  padding-left: 16px;
+                  padding-right: 16px;
                   padding-top: 0;
                   position: relative;
-                  transition: all 0.1s ease;
-                  width: 2.2em;
+                  text-align: center;
+                  text-decoration: none;
+                  user-select: none;
+                  vertical-align: top;
                 }
                 &::-moz-focus-inner {
                   border: 0;
                 }
                 .ms-Fabric--isFocusVisible &:focus:after {
                   border: 1px solid #ffffff;
-                  bottom: -2px;
+                  bottom: 0px;
                   content: "";
-                  left: -2px;
+                  left: 0px;
                   outline: 1px solid #666666;
                   position: absolute;
+                  right: 0px;
+                  top: 0px;
+                  z-index: 1;
+                }
+                @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
+                  border: none;
+                  bottom: -2px;
+                  left: -2px;
+                  outline-color: ButtonText;
                   right: -2px;
                   top: -2px;
-                  z-index: 1;
                 }
-                &:hover {
-                  border-color: #333333;
+                &:active > * {
+                  left: 0px;
+                  position: relative;
+                  top: 0px;
                 }
-                @media screen and (-ms-high-contrast: active){&:hover .ms-Toggle-thumb {
-                  border-color: Highlight;
+                &:hover {
+                  background-color: #eaeaea;
+                  color: #212121;
                 }
                 @media screen and (-ms-high-contrast: active){&:hover {
                   border-color: Highlight;
+                  color: Highlight;
+                }
+                &:active {
+                  background-color: #c8c8c8;
+                  color: #212121;
                 }
             data-is-focusable={true}
-            id="Toggle19"
-            onChange={[Function]}
             onClick={[Function]}
-            role="switch"
+            onKeyDown={[Function]}
+            onKeyPress={[Function]}
+            onKeyUp={[Function]}
+            onMouseDown={[Function]}
+            onMouseUp={[Function]}
             type="button"
           >
             <div
               className=
-                  ms-Toggle-thumb
-                  {
-                    background-color: #333333;
-                    border-color: transparent;
-                    border-radius: .5em;
-                    border-style: solid;
-                    border-width: .28em;
-                    box-sizing: border-box;
-                    height: .5em;
-                    transition: all 0.1s ease;
-                    width: .5em;
-                  }
-            />
-          </button>
-          <label
-            className=
-                ms-Label
-                ms-Toggle-stateText
-                {
-                  -moz-osx-font-smoothing: grayscale;
-                  -webkit-font-smoothing: antialiased;
-                  box-shadow: none;
-                  box-sizing: border-box;
-                  color: #333333;
-                  display: block;
-                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                  font-size: 14px;
-                  font-weight: 400;
-                  margin-bottom: 0px;
-                  margin-left: 0px;
-                  margin-right: 0px;
-                  margin-top: 0px;
-                  overflow-wrap: break-word;
-                  padding-bottom: 5px;
-                  padding-left: 0;
-                  padding-right: 0;
-                  padding-top: 5px;
-                  word-wrap: break-word;
-                }
-                && {
-                  margin-bottom: 0;
-                  margin-left: 8px;
-                  margin-right: 8px;
-                  margin-top: 0;
-                  padding-bottom: 0;
-                  padding-left: 0;
-                  padding-right: 0;
-                  padding-top: 0;
-                  user-select: none;
-                }
-            htmlFor="Toggle19"
-            id="Toggle19-stateText"
-          >
-            Off
-          </label>
-        </div>
-      </div>
-      <button
-        className=
-            ms-Button
-            ms-Button--default
-            {
-              -moz-osx-font-smoothing: grayscale;
-              -webkit-font-smoothing: antialiased;
-              background-color: #f4f4f4;
-              border-radius: 0px;
-              border: 1px solid transparent;
-              box-sizing: border-box;
-              color: #333333;
-              cursor: pointer;
-              display: inline-block;
-              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-              font-size: 14px;
-              font-weight: 400;
-              height: 32px;
-              min-width: 80px;
-              outline: transparent;
-              padding-bottom: 0;
-              padding-left: 16px;
-              padding-right: 16px;
-              padding-top: 0;
-              position: relative;
-              text-align: center;
-              text-decoration: none;
-              user-select: none;
-              vertical-align: top;
-            }
-            &::-moz-focus-inner {
-              border: 0;
-            }
-            .ms-Fabric--isFocusVisible &:focus:after {
-              border: 1px solid #ffffff;
-              bottom: 0px;
-              content: "";
-              left: 0px;
-              outline: 1px solid #666666;
-              position: absolute;
-              right: 0px;
-              top: 0px;
-              z-index: 1;
-            }
-            @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
-              border: none;
-              bottom: -2px;
-              left: -2px;
-              outline-color: ButtonText;
-              right: -2px;
-              top: -2px;
-            }
-            &:active > * {
-              left: 0px;
-              position: relative;
-              top: 0px;
-            }
-            &:hover {
-              background-color: #eaeaea;
-              color: #212121;
-            }
-            @media screen and (-ms-high-contrast: active){&:hover {
-              border-color: Highlight;
-              color: Highlight;
-            }
-            &:active {
-              background-color: #c8c8c8;
-              color: #212121;
-            }
-        data-is-focusable={true}
-        onClick={[Function]}
-        onKeyDown={[Function]}
-        onKeyPress={[Function]}
-        onKeyUp={[Function]}
-        onMouseDown={[Function]}
-        onMouseUp={[Function]}
-        type="button"
-      >
-        <div
-          className=
-              ms-Button-flexContainer
-              {
-                align-items: center;
-                display: flex;
-                flex-wrap: nowrap;
-                height: 100%;
-                justify-content: center;
-              }
-        >
-          <div
-            className=
-                ms-Button-textContainer
-                {
-                  flex-grow: 1;
-                }
-          >
-            <div
-              className=
-                  ms-Button-label
+                  ms-Button-flexContainer
                   {
-                    font-weight: 600;
-                    line-height: 100%;
-                    margin-bottom: 0;
-                    margin-left: 4px;
-                    margin-right: 4px;
-                    margin-top: 0;
+                    align-items: center;
+                    display: flex;
+                    flex-wrap: nowrap;
+                    height: 100%;
+                    justify-content: center;
                   }
-              id="id__20"
             >
-              Zone 5 button
+              <div
+                className=
+                    ms-Button-textContainer
+                    {
+                      flex-grow: 1;
+                    }
+              >
+                <div
+                  className=
+                      ms-Button-label
+                      {
+                        font-weight: 600;
+                        line-height: 100%;
+                        margin-bottom: 0;
+                        margin-left: 4px;
+                        margin-right: 4px;
+                        margin-top: 0;
+                      }
+                  id="id__20"
+                >
+                  Zone 5 button
+                </div>
+              </div>
             </div>
-          </div>
+          </button>
         </div>
-      </button>
+        <div
+          aria-hidden={true}
+          data-is-visible={true}
+          onFocus={[Function]}
+          style={
+            Object {
+              "pointerEvents": "none",
+              "position": "fixed",
+            }
+          }
+          tabIndex={-1}
+        />
+      </div>
     </div>
+    <div
+      aria-hidden={true}
+      data-is-visible={true}
+      onFocus={[Function]}
+      style={
+        Object {
+          "pointerEvents": "none",
+          "position": "fixed",
+        }
+      }
+      tabIndex={-1}
+    />
   </div>
 </div>
 `;