diff --git a/Composer/packages/client/src/components/BotRuntimeController/BotController.tsx b/Composer/packages/client/src/components/BotRuntimeController/BotController.tsx
index 672a75c7a7..a1929ebb4c 100644
--- a/Composer/packages/client/src/components/BotRuntimeController/BotController.tsx
+++ b/Composer/packages/client/src/components/BotRuntimeController/BotController.tsx
@@ -311,6 +311,7 @@ const BotController: React.FC<BotControllerProps> = ({ onHideController, isContr
         hidden={isControllerHidden}
         items={items}
         target={botControllerMenuTarget}
+        onDismiss={() => onHideController(true)}
       />
     </React.Fragment>
   );
diff --git a/Composer/packages/client/src/components/BotRuntimeController/BotControllerMenu.tsx b/Composer/packages/client/src/components/BotRuntimeController/BotControllerMenu.tsx
index d1adf1cfbf..396f8b5541 100644
--- a/Composer/packages/client/src/components/BotRuntimeController/BotControllerMenu.tsx
+++ b/Composer/packages/client/src/components/BotRuntimeController/BotControllerMenu.tsx
@@ -4,7 +4,7 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import React from 'react';
-import { Callout, DirectionalHint } from 'office-ui-fabric-react/lib/Callout';
+import { FocusTrapCallout, DirectionalHint } from 'office-ui-fabric-react/lib/Callout';
 import { DetailsList, DetailsListLayoutMode, IColumn } from 'office-ui-fabric-react/lib/DetailsList';
 import { IContextualMenuProps } from 'office-ui-fabric-react/lib/ContextualMenu';
 import { SelectionMode } from 'office-ui-fabric-react/lib/Utilities';
@@ -100,10 +100,14 @@ const tableColumns: IColumn[] = [
 const BotControllerMenu = React.forwardRef<HTMLDivElement, IContextualMenuProps>((props, ref) => {
   const { items, target, onDismiss, hidden } = props;
   return (
-    <Callout
+    <FocusTrapCallout
       hideOverflow
       setInitialFocus
       directionalHint={DirectionalHint.topRightEdge}
+      focusTrapProps={{
+        isClickableOutsideFocusTrap: true,
+        forceFocusInsideTrap: false,
+      }}
       hidden={hidden}
       role="dialog"
       styles={{
@@ -134,7 +138,7 @@ const BotControllerMenu = React.forwardRef<HTMLDivElement, IContextualMenuProps>
           />
         </div>
       </div>
-    </Callout>
+    </FocusTrapCallout>
   );
 });
 
diff --git a/Composer/packages/client/src/pages/design/DebugPanel/DebugPanel.tsx b/Composer/packages/client/src/pages/design/DebugPanel/DebugPanel.tsx
index 332291685c..1a6da1699f 100644
--- a/Composer/packages/client/src/pages/design/DebugPanel/DebugPanel.tsx
+++ b/Composer/packages/client/src/pages/design/DebugPanel/DebugPanel.tsx
@@ -3,10 +3,10 @@
 
 /** @jsx jsx */
 import { jsx, css } from '@emotion/core';
-import { useCallback, useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
 import formatMessage from 'format-message';
 import { IconButton } from 'office-ui-fabric-react/lib/Button';
-import { Pivot, PivotItem } from 'office-ui-fabric-react/lib/Pivot';
+import { IPivot, Pivot, PivotItem } from 'office-ui-fabric-react/lib/Pivot';
 import { FontSizes } from '@uifabric/fluent-theme';
 import { Resizable } from 're-resizable';
 import { Label } from 'office-ui-fabric-react/lib/Label';
@@ -36,6 +36,13 @@ export const DebugPanel: React.FC = () => {
   const { setActiveTabInDebugPanel, setDebugPanelExpansion } = useRecoilValue(dispatcherState);
   const isPanelExpanded = useRecoilValue(debugPanelExpansionState);
   const activeTab = useRecoilValue(debugPanelActiveTabState);
+  const pivotRef = useRef<IPivot>(null);
+
+  useEffect(() => {
+    if (isPanelExpanded) {
+      pivotRef.current?.focus();
+    }
+  }, [isPanelExpanded, activeTab]);
 
   const onExpandPanel = useCallback((activeTabKey: DebugDrawerKeys) => {
     setDebugPanelExpansion(true);
@@ -105,6 +112,7 @@ export const DebugPanel: React.FC = () => {
     return (
       <Pivot
         aria-label={formatMessage('Debug Panel Header')}
+        componentRef={pivotRef}
         selectedKey={isPanelExpanded ? activeTab : null}
         styles={{
           link: {
@@ -128,7 +136,7 @@ export const DebugPanel: React.FC = () => {
   }, [isPanelExpanded, activeTab]);
 
   return (
-    <div>
+    <div aria-label={formatMessage('debug panel')} role="region">
       <Resizable
         css={css`
           ${debugPaneContainerStyle}