From 52193272c3b296626bcdb39af817d7f64a99ad24 Mon Sep 17 00:00:00 2001
From: Long Alan <alanlong9278@126.com>
Date: Sun, 10 May 2020 00:34:51 +0800
Subject: [PATCH] a11y: focus move around composer, visual editor & form editor
 when click tab. (#2785)

* focus move

* merge conflict

Co-authored-by: Ben Yackley <61990921+beyackle@users.noreply.github.com>
Co-authored-by: Chris Whitten <christopher.whitten@microsoft.com>
Co-authored-by: Andy Brown <asbrown002@gmail.com>
---
 .../src/components/lib/KeyboardZone.tsx          |  2 +-
 .../visual-designer/src/editors/ObiEditor.tsx    | 16 ++++++++++++++--
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/Composer/packages/extensions/visual-designer/src/components/lib/KeyboardZone.tsx b/Composer/packages/extensions/visual-designer/src/components/lib/KeyboardZone.tsx
index ffa2b3ad4d..ada67fd998 100644
--- a/Composer/packages/extensions/visual-designer/src/components/lib/KeyboardZone.tsx
+++ b/Composer/packages/extensions/visual-designer/src/components/lib/KeyboardZone.tsx
@@ -32,7 +32,7 @@ const KeyNameByModifierAttr = {
   shiftKey: 'Shift',
 };
 
-const overriddenKeyCodes = ['Tab', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
+const overriddenKeyCodes = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
 
 interface KeyboardZoneProps {
   onCommand: (action, e: KeyboardEvent) => object | void;
diff --git a/Composer/packages/extensions/visual-designer/src/editors/ObiEditor.tsx b/Composer/packages/extensions/visual-designer/src/editors/ObiEditor.tsx
index 08446b891b..d578de1e8f 100644
--- a/Composer/packages/extensions/visual-designer/src/editors/ObiEditor.tsx
+++ b/Composer/packages/extensions/visual-designer/src/editors/ObiEditor.tsx
@@ -21,7 +21,7 @@ import { normalizeSelection } from '../utils/normalizeSelection';
 import { KeyboardZone } from '../components/lib/KeyboardZone';
 import { scrollNodeIntoView } from '../utils/nodeOperation';
 import { designerCache } from '../store/DesignerCache';
-import { MenuEventTypes } from '../constants/MenuTypes';
+import { MenuTypes, MenuEventTypes } from '../constants/MenuTypes';
 
 import { AdaptiveDialogEditor } from './AdaptiveDialogEditor';
 
@@ -252,6 +252,12 @@ export const ObiEditor: FC<ObiEditorProps> = ({
     setSelectableElements(querySelectableElements());
   }, [data, focusedEvent]);
 
+  useEffect((): void => {
+    if (!focusedId) {
+      resetSelectionData();
+    }
+  }, [focusedId]);
+
   const selection = new Selection({
     onSelectionChanged: (): void => {
       const selectedIndices = selection.getSelectedIndices();
@@ -323,7 +329,13 @@ export const ObiEditor: FC<ObiEditorProps> = ({
         break;
       case KeyboardPrimaryTypes.Cursor: {
         const currentSelectedId = selectionContext.selectedIds[0] || focusedId || '';
-        const { selected, focused, tab } = moveCursor(selectableElements, currentSelectedId, command);
+        const { selected, focused, tab } = currentSelectedId
+          ? moveCursor(selectableElements, currentSelectedId, command)
+          : {
+              selected: `${focusedEvent}.actions[0]${MenuTypes.EdgeMenu}`,
+              focused: undefined,
+              tab: '',
+            };
         setSelectionContext({
           getNodeIndex: selectionContext.getNodeIndex,
           selectedIds: [selected as string],