fix(flow): Call setFocus() on back button click

packages/calcite-components/src/components/flow/flow.e2e.ts

@@ -4,6 +4,7 @@ import { html } from "../../../support/formatting";
 import { accessible, focusable, hidden, renders } from "../../tests/commonTests";
 import { CSS as ITEM_CSS } from "../flow-item/resources";
 import { CSS } from "./resources";
+import { isElementFocused } from "../../tests/utils";
 
 describe("calcite-flow", () => {
   describe("renders", () => {
@@ -55,6 +56,27 @@ describe("calcite-flow", () => {
       expect(flowItem).toBeNull();
     });
 
+    it("should call setFocus() on back button click", async () => {
+      const page = await newE2EPage();
+
+      await page.setContent(
+        html`<calcite-flow
+          ><calcite-flow-item id="one"></calcite-flow-item><calcite-flow-item id="two"></calcite-flow-item
+        ></calcite-flow>`
+      );
+
+      await page.$eval(
+        "#two",
+        (elm: HTMLCalciteFlowItemElement, backButtonCSS: string) => {
+          elm.shadowRoot.querySelector<HTMLCalciteActionElement>(`.${backButtonCSS}`)?.click();
+        },
+        ITEM_CSS.backButton
+      );
+      await page.waitForChanges();
+
+      await isElementFocused(page, "#one");
+    });
+
     it("goes back when item back button is clicked", async () => {
       const page = await newE2EPage();
 

packages/calcite-components/src/components/flow/flow.tsx

@@ -107,8 +107,9 @@ export class Flow implements LoadableComponent {
   // --------------------------------------------------------------------------
 
   @Listen("calciteFlowItemBack")
-  handleItemBackClick(): void {
-    this.back();
+  async handleItemBackClick(): Promise<void> {
+    await this.back();
+    return this.setFocus();
   }
 
   getFlowDirection = (oldFlowItemCount: number, newFlowItemCount: number): FlowDirection | null => {