a11y: focus move around composer, visual editor & form editor when cl…

…ick 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>
microsoft · May 9, 2020 · 5219327 · 5219327
1 parent 60582fd
commit 5219327
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 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
@@ -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
@@ -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],