diff --git a/Composer/packages/adaptive-flow/src/adaptive-flow-editor/components/KeyboardZone.ts b/Composer/packages/adaptive-flow/src/adaptive-flow-editor/components/KeyboardZone.ts index 2413415470..391535ea9d 100644 --- a/Composer/packages/adaptive-flow/src/adaptive-flow-editor/components/KeyboardZone.ts +++ b/Composer/packages/adaptive-flow/src/adaptive-flow-editor/components/KeyboardZone.ts @@ -12,7 +12,7 @@ const KeyNameByModifierAttr = { shiftKey: 'Shift', }; -const overriddenKeyCodes = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight']; +const overriddenKeyCodes = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Tab']; interface KeyboardCommand { area: string; diff --git a/Composer/packages/adaptive-flow/src/adaptive-flow-editor/renderers/NodeWrapper.tsx b/Composer/packages/adaptive-flow/src/adaptive-flow-editor/renderers/NodeWrapper.tsx index 48260cba32..081e0a36c1 100644 --- a/Composer/packages/adaptive-flow/src/adaptive-flow-editor/renderers/NodeWrapper.tsx +++ b/Composer/packages/adaptive-flow/src/adaptive-flow-editor/renderers/NodeWrapper.tsx @@ -3,7 +3,7 @@ /** @jsx jsx */ import { jsx, css } from '@emotion/core'; -import { FC, useContext, useCallback } from 'react'; +import { FC, useContext, useCallback, useEffect } from 'react'; import { generateActionTitle, PromptTab } from '@bfc/shared'; import { useShellApi } from '@bfc/extension-client'; @@ -38,6 +38,7 @@ export const ActionNodeWrapper: FC = ({ id, tab, data, onEvent const nodeFocused = focusedId === id || focusedEvent === id; const nodeDoubleSelected = tab && nodeFocused && tab === focusedTab; const nodeSelected = selectedIds.includes(id); + const nodeId = `action-${selectableId}`; const declareElementAttributes = (selectedId: string, id: string) => { return { @@ -58,6 +59,13 @@ export const ActionNodeWrapper: FC = ({ id, tab, data, onEvent addCoachMarkRef({ action }); }, []); + useEffect(() => { + if (nodeSelected || nodeDoubleSelected) { + const actionNode = document.getElementById(nodeId); + actionNode?.focus(); + } + }, [nodeSelected, tab, nodeDoubleSelected]); + // Set 'use-select' to none to disable browser's default // text selection effect when pressing Shift + Click. return ( @@ -75,6 +83,8 @@ export const ActionNodeWrapper: FC = ({ id, tab, data, onEvent } `} data-testid="ActionNodeWrapper" + id={nodeId} + tabIndex={0} {...declareElementAttributes(selectableId, id)} aria-label={generateActionTitle(data, '', '', tab)} onClick={(e) => {