fix(Designer): Focus returns to search button after closing side panel (

#4126) * added aria-labelledby for searchable dropdown * PR comment * focus returns to search button --------- Co-authored-by: Danielle Cogburn <dacogburn@microsoft.com>
Azure · Feb 6, 2024 · 95aaccf · 95aaccf
1 parent 6c99876
commit 95aaccf
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 22 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,26 +1,25 @@
 # Logic Apps Designer
-## [2.110.0](https://github.com/Azure/LogicAppsUX/compare/v2.109.0...v2.110.0) (2024-02-05)
 
+## [2.110.0](https://github.com/Azure/LogicAppsUX/compare/v2.109.0...v2.110.0) (2024-02-05)
 
 ### Features
 
-* **vscode:** Add Integration account source and export custom API actions to export advance options ([#4097](https://github.com/Azure/LogicAppsUX/issues/4097)) ([6559428](https://github.com/Azure/LogicAppsUX/commit/655942836f8317af5ba321a9774346ebdf07841a))
-
+- **vscode:** Add Integration account source and export custom API actions to export advance options ([#4097](https://github.com/Azure/LogicAppsUX/issues/4097)) ([6559428](https://github.com/Azure/LogicAppsUX/commit/655942836f8317af5ba321a9774346ebdf07841a))
 
 ### Bug Fixes
 
-* **comsumption:** Setting Default Recurrence Interval based on Sku ([#4066](https://github.com/Azure/LogicAppsUX/issues/4066)) ([160d636](https://github.com/Azure/LogicAppsUX/commit/160d636c4b4e53935963363cfe55f9a5e8a23d02))
-* **designer-ui:** Ensure `isAdvanced: false` tokens are shown if far down in a list ([#4064](https://github.com/Azure/LogicAppsUX/issues/4064)) ([89ddb0b](https://github.com/Azure/LogicAppsUX/commit/89ddb0b3721c6f62ba6f4487aa742667027b3035))
-* **Designer:** added aria-labelledby for searchable dropdown ([#4090](https://github.com/Azure/LogicAppsUX/issues/4090)) ([213b5f0](https://github.com/Azure/LogicAppsUX/commit/213b5f0e0e3cbe326e608f8f52767eff7e45ff04))
-* **Designer:** Added catch for designer options race condition ([#4106](https://github.com/Azure/LogicAppsUX/issues/4106)) ([3373c32](https://github.com/Azure/LogicAppsUX/commit/3373c32490f5b6d508f90717e8ba2a75e44f8b98))
-* **Designer:** Added connection name check to avoid known connection name strings ([#4104](https://github.com/Azure/LogicAppsUX/issues/4104)) ([3fc73e5](https://github.com/Azure/LogicAppsUX/commit/3fc73e57344b41b0eafd8cef8fc3cfe45e3aacb0))
-* **Designer:** Added host option to force enable split-on ([#4098](https://github.com/Azure/LogicAppsUX/issues/4098)) ([54c133b](https://github.com/Azure/LogicAppsUX/commit/54c133bc02fbfbd9fa50fd832de86e04c106ab6e))
-* **Designer:** Changed test connection request to not run through batch api ([#4103](https://github.com/Azure/LogicAppsUX/issues/4103)) ([d342027](https://github.com/Azure/LogicAppsUX/commit/d342027e5462e8b1a034ed1adff35c6bf359b6d6))
-* **designer:** Fix issue where when token in htmleditor, link plugin not working ([#4099](https://github.com/Azure/LogicAppsUX/issues/4099)) ([6773fae](https://github.com/Azure/LogicAppsUX/commit/6773fae16065c26a200ebfa6cb39f05c5f7cf827))
-* **designer:** Fix stateless workflow check in `getSplitOn` ([#4121](https://github.com/Azure/LogicAppsUX/issues/4121)) ([b0d825d](https://github.com/Azure/LogicAppsUX/commit/b0d825df24f84bf5a79a4c25b65161f479b816d7))
-* **Designer:** Initializing invoker settings causes workflow to be dirty ([#4079](https://github.com/Azure/LogicAppsUX/issues/4079)) ([55109df](https://github.com/Azure/LogicAppsUX/commit/55109df6b36bfa2980e418d41351b2f2290c2ef7))
-* **Designer:** Skip non-dependent parameters in updateParameterAndDependencies ([#4112](https://github.com/Azure/LogicAppsUX/issues/4112)) ([c1cb6d3](https://github.com/Azure/LogicAppsUX/commit/c1cb6d38364abcea674af3f55e71abfb07be3f8f))
-* **vscode:** Update json file creation to overwrite values in workflow-designtime folder ([#4096](https://github.com/Azure/LogicAppsUX/issues/4096)) ([659a521](https://github.com/Azure/LogicAppsUX/commit/659a5215de07e016e60fb02e87a222747408b8f0))
+- **comsumption:** Setting Default Recurrence Interval based on Sku ([#4066](https://github.com/Azure/LogicAppsUX/issues/4066)) ([160d636](https://github.com/Azure/LogicAppsUX/commit/160d636c4b4e53935963363cfe55f9a5e8a23d02))
+- **designer-ui:** Ensure `isAdvanced: false` tokens are shown if far down in a list ([#4064](https://github.com/Azure/LogicAppsUX/issues/4064)) ([89ddb0b](https://github.com/Azure/LogicAppsUX/commit/89ddb0b3721c6f62ba6f4487aa742667027b3035))
+- **Designer:** added aria-labelledby for searchable dropdown ([#4090](https://github.com/Azure/LogicAppsUX/issues/4090)) ([213b5f0](https://github.com/Azure/LogicAppsUX/commit/213b5f0e0e3cbe326e608f8f52767eff7e45ff04))
+- **Designer:** Added catch for designer options race condition ([#4106](https://github.com/Azure/LogicAppsUX/issues/4106)) ([3373c32](https://github.com/Azure/LogicAppsUX/commit/3373c32490f5b6d508f90717e8ba2a75e44f8b98))
+- **Designer:** Added connection name check to avoid known connection name strings ([#4104](https://github.com/Azure/LogicAppsUX/issues/4104)) ([3fc73e5](https://github.com/Azure/LogicAppsUX/commit/3fc73e57344b41b0eafd8cef8fc3cfe45e3aacb0))
+- **Designer:** Added host option to force enable split-on ([#4098](https://github.com/Azure/LogicAppsUX/issues/4098)) ([54c133b](https://github.com/Azure/LogicAppsUX/commit/54c133bc02fbfbd9fa50fd832de86e04c106ab6e))
+- **Designer:** Changed test connection request to not run through batch api ([#4103](https://github.com/Azure/LogicAppsUX/issues/4103)) ([d342027](https://github.com/Azure/LogicAppsUX/commit/d342027e5462e8b1a034ed1adff35c6bf359b6d6))
+- **designer:** Fix issue where when token in htmleditor, link plugin not working ([#4099](https://github.com/Azure/LogicAppsUX/issues/4099)) ([6773fae](https://github.com/Azure/LogicAppsUX/commit/6773fae16065c26a200ebfa6cb39f05c5f7cf827))
+- **designer:** Fix stateless workflow check in `getSplitOn` ([#4121](https://github.com/Azure/LogicAppsUX/issues/4121)) ([b0d825d](https://github.com/Azure/LogicAppsUX/commit/b0d825df24f84bf5a79a4c25b65161f479b816d7))
+- **Designer:** Initializing invoker settings causes workflow to be dirty ([#4079](https://github.com/Azure/LogicAppsUX/issues/4079)) ([55109df](https://github.com/Azure/LogicAppsUX/commit/55109df6b36bfa2980e418d41351b2f2290c2ef7))
+- **Designer:** Skip non-dependent parameters in updateParameterAndDependencies ([#4112](https://github.com/Azure/LogicAppsUX/issues/4112)) ([c1cb6d3](https://github.com/Azure/LogicAppsUX/commit/c1cb6d38364abcea674af3f55e71abfb07be3f8f))
+- **vscode:** Update json file creation to overwrite values in workflow-designtime folder ([#4096](https://github.com/Azure/LogicAppsUX/issues/4096)) ([659a521](https://github.com/Azure/LogicAppsUX/commit/659a5215de07e016e60fb02e87a222747408b8f0))
 
 ## [2.109.0](https://github.com/Azure/LogicAppsUX/compare/v2.108.0...v2.109.0) (2024-02-01)
 

diff --git a/libs/designer/src/lib/core/state/panel/panelInterfaces.ts b/libs/designer/src/lib/core/state/panel/panelInterfaces.ts
@@ -15,6 +15,7 @@ export interface PanelState {
   selectedOperationId: string;
   addingTrigger: boolean;
   isLoading?: boolean;
+  focusReturnElementId?: string;
   creatingConnection?: boolean;
   selectedErrorsPanelTabId: string | undefined; // undefined will select first tab with > 0 messages
 }

diff --git a/libs/designer/src/lib/core/state/panel/panelSelectors.ts b/libs/designer/src/lib/core/state/panel/panelSelectors.ts
@@ -7,6 +7,8 @@ const getPanelState = (state: RootState) => state.panel;
 
 export const useIsPanelCollapsed = () => useSelector(createSelector(getPanelState, (state: PanelState) => state.collapsed));
 
+export const useFocusReturnElementId = () => useSelector(createSelector(getPanelState, (state: PanelState) => state.focusReturnElementId));
+
 export const useCurrentPanelMode = () => useSelector(createSelector(getPanelState, (state: PanelState) => state.currentPanelMode));
 
 export const useReferencePanelMode = () => useSelector(createSelector(getPanelState, (state: PanelState) => state.referencePanelMode));

diff --git a/libs/designer/src/lib/core/state/panel/panelSlice.ts b/libs/designer/src/lib/core/state/panel/panelSlice.ts
@@ -75,14 +75,21 @@ export const panelSlice = createSlice({
     },
     expandDiscoveryPanel: (
       state,
-      action: PayloadAction<{ relationshipIds: RelationshipIds; nodeId: string; isParallelBranch?: boolean; addingTrigger?: boolean }>
+      action: PayloadAction<{
+        relationshipIds: RelationshipIds;
+        nodeId: string;
+        isParallelBranch?: boolean;
+        focusReturnElementId?: string;
+        addingTrigger?: boolean;
+      }>
     ) => {
       state.collapsed = false;
       state.currentPanelMode = 'Discovery';
       state.relationshipIds = action.payload.relationshipIds;
       state.selectedNodes = [action.payload.nodeId];
       state.isParallelBranch = action.payload?.isParallelBranch ?? false;
       state.addingTrigger = !!action.payload?.addingTrigger;
+      state.focusReturnElementId = action.payload.focusReturnElementId;
 
       LoggerService().log({
         level: LogEntryLevel.Verbose,
@@ -111,6 +118,7 @@ export const panelSlice = createSlice({
         nodeIds?: string[];
         panelMode: PanelMode;
         referencePanelMode?: PanelMode;
+        focusReturnElementId?: string;
       }>
     ) => {
       const { nodeId, nodeIds, panelMode, referencePanelMode } = action?.payload ?? {};
@@ -119,6 +127,7 @@ export const panelSlice = createSlice({
       state.currentPanelMode = panelMode;
       state.referencePanelMode = referencePanelMode;
       state.selectedNodes = nodeIds ? nodeIds : nodeId ? [nodeId] : [];
+      state.focusReturnElementId = action?.payload.focusReturnElementId;
     },
     selectPanelTab: (state, action: PayloadAction<string | undefined>) => {
       state.selectedTabId = action.payload;

diff --git a/libs/designer/src/lib/ui/Controls.tsx b/libs/designer/src/lib/ui/Controls.tsx
@@ -11,13 +11,14 @@ const CustomControls = () => {
   const dispatch = useDispatch();
   const showMinimap = useShowMinimap();
   const { isInverted } = useTheme();
+  const searchId = 'control-search-button';
 
   const minimapToggleClick = () => {
     dispatch(toggleMinimap());
   };
 
   const searchToggleClick = () => {
-    dispatch(openPanel({ panelMode: 'NodeSearch' }));
+    dispatch(openPanel({ panelMode: 'NodeSearch', focusReturnElementId: searchId }));
   };
 
   const minimapAria = intl.formatMessage({
@@ -34,7 +35,7 @@ const CustomControls = () => {
 
   return (
     <Controls showInteractive={false}>
-      <ControlButton aria-label={searchAria} title={searchAria} onClick={searchToggleClick}>
+      <ControlButton id={searchId} aria-label={searchAria} title={searchAria} onClick={searchToggleClick}>
         <Icon iconName={'Search'} styles={iconStyles} />
       </ControlButton>
       <ControlButton aria-label={minimapAria} title={minimapAria} onClick={minimapToggleClick}>

diff --git a/libs/designer/src/lib/ui/panel/nodeSearchPanel/nodeSearchPanel.tsx b/libs/designer/src/lib/ui/panel/nodeSearchPanel/nodeSearchPanel.tsx
@@ -43,7 +43,11 @@ const NodeSearchCard = ({ node, displayRuntimeInfo }: { node: string; displayRun
   );
 };
 
-export const NodeSearchPanel = (props: CommonPanelProps) => {
+export type NodeSearchPanelProps = {
+  focusReturnElementId: string | undefined;
+} & CommonPanelProps;
+
+export const NodeSearchPanel = (props: NodeSearchPanelProps) => {
   const { displayRuntimeInfo } = useHostOptions();
   const allNodeNames = useNodeIds();
   const [searchTerm, setSearchTerm] = useState<string | null>(null);
@@ -68,8 +72,10 @@ export const NodeSearchPanel = (props: CommonPanelProps) => {
     description: 'Placeholder for search box that searches operations',
   });
 
+  const originalFocusElement = props.focusReturnElementId ? document.getElementById(props.focusReturnElementId) : undefined;
+
   return (
-    <FocusTrapZone>
+    <FocusTrapZone elementToFocusOnDismiss={originalFocusElement ? originalFocusElement : undefined}>
       <div className="msla-app-action-header">
         <Text variant="xLarge">{goToOperationHeader}</Text>
         <Button appearance="subtle" onClick={props.toggleCollapse} icon={<CloseIcon />} />

diff --git a/libs/designer/src/lib/ui/panel/panelRoot.tsx b/libs/designer/src/lib/ui/panel/panelRoot.tsx
@@ -1,6 +1,11 @@
 import type { AppDispatch } from '../../core';
 import { useIsDarkMode } from '../../core/state/designerOptions/designerOptionsSelectors';
-import { useCurrentPanelMode, useIsLoadingPanel, useIsPanelCollapsed } from '../../core/state/panel/panelSelectors';
+import {
+  useCurrentPanelMode,
+  useIsLoadingPanel,
+  useIsPanelCollapsed,
+  useFocusReturnElementId,
+} from '../../core/state/panel/panelSelectors';
 import { clearPanel } from '../../core/state/panel/panelSlice';
 import { ConnectionPanel } from './connectionsPanel/connectionsPanel';
 import { ErrorsPanel } from './errorsPanel/errorsPanel';
@@ -34,6 +39,7 @@ export const PanelRoot = (props: PanelRootProps): JSX.Element => {
 
   const collapsed = useIsPanelCollapsed();
   const currentPanelMode = useCurrentPanelMode();
+  const focusReturnElementId = useFocusReturnElementId();
 
   const [width, setWidth] = useState<PanelSize>(PanelSize.Auto);
 
@@ -100,7 +106,7 @@ export const PanelRoot = (props: PanelRootProps): JSX.Element => {
         ) : currentPanelMode === 'Discovery' ? (
           <RecommendationPanelContext {...commonPanelProps} />
         ) : currentPanelMode === 'NodeSearch' ? (
-          <NodeSearchPanel {...commonPanelProps} />
+          <NodeSearchPanel {...commonPanelProps} focusReturnElementId={focusReturnElementId} />
         ) : currentPanelMode === 'Connection' ? (
           <ConnectionPanel {...commonPanelProps} />
         ) : currentPanelMode === 'Error' ? (