fix(list-item): store last focused cell from focusing on elements within a cell.

packages/calcite-components/src/components/list-item/list-item.tsx

@@ -27,7 +27,7 @@ import {
 } from "../../utils/interactive";
 import { SelectionMode } from "../interfaces";
 import { SelectionAppearance } from "../list/resources";
-import { CSS, ICONS, SLOTS } from "./resources";
+import { CSS, activeCellTestAttribute, ICONS, SLOTS } from "./resources";
 import {
   getDepth,
   getListItemChildren,
@@ -426,6 +426,7 @@ export class ListItem
         aria-label={label}
         class={CSS.dragContainer}
         key="drag-handle-container"
+        onFocusin={this.focusCellHandle}
         role="gridcell"
         // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
         ref={(el) => (this.handleGridEl = el)}
@@ -469,6 +470,7 @@ export class ListItem
         class={CSS.actionsStart}
         hidden={!hasActionsStart}
         key="actions-start-container"
+        onFocusin={this.focusCellActionsStart}
         role="gridcell"
         // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
         ref={(el) => (this.actionsStartEl = el)}
@@ -486,6 +488,7 @@ export class ListItem
         class={CSS.actionsEnd}
         hidden={!(hasActionsEnd || closable)}
         key="actions-end-container"
+        onFocusin={this.focusCellActionsEnd}
         role="gridcell"
         // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
         ref={(el) => (this.actionsEndEl = el)}
@@ -600,6 +603,7 @@ export class ListItem
         }}
         key="content-container"
         onClick={this.handleItemClick}
+        onFocusin={this.focusCellContent}
         role="gridcell"
         // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
         ref={(el) => (this.contentEl = el)}
@@ -646,6 +650,7 @@ export class ListItem
             }}
             hidden={closed}
             onFocus={this.focusCellNull}
+            onFocusin={this.emitInternalListItemActive}
             onKeyDown={this.handleItemKeyDown}
             role="row"
             style={{ "--calcite-list-item-spacing-indent-multiplier": `${visualLevel}` }}
@@ -673,6 +678,26 @@ export class ListItem
   //
   // --------------------------------------------------------------------------
 
+  private emitInternalListItemActive = (): void => {
+    this.calciteInternalListItemActive.emit();
+  };
+
+  private focusCellHandle = (): void => {
+    this.focusCell(this.handleGridEl);
+  };
+
+  private focusCellActionsStart = (): void => {
+    this.focusCell(this.actionsStartEl);
+  };
+
+  private focusCellContent = (): void => {
+    this.focusCell(this.contentEl);
+  };
+
+  private focusCellActionsEnd = (): void => {
+    this.focusCell(this.actionsEndEl);
+  };
+
   private emitCalciteInternalListItemChange(): void {
     this.calciteInternalListItemChange.emit();
   }
@@ -763,7 +788,6 @@ export class ListItem
     }
 
     this.toggleSelected(event.shiftKey);
-    this.calciteInternalListItemActive.emit();
   };
 
   private toggleSelected = (shiftKey: boolean): void => {
@@ -853,18 +877,22 @@ export class ListItem
       focusMap.set(parentListEl, null);
     }
 
-    const focusedEl = getFirstTabbable(focusEl);
+    const gridCells = this.getGridCells();
 
-    this.getGridCells().forEach((tableCell, cellIndex) => {
-      // Only one cell within a list-item should be focusable at a time. Ensures the active cell is focusable.
-      if (tableCell === focusEl) {
-        tableCell.tabIndex = focusEl === focusedEl ? 0 : -1;
-        saveFocusIndex && focusMap.set(parentListEl, cellIndex);
-      } else {
-        tableCell.tabIndex = -1;
-      }
+    gridCells.forEach((tableCell) => {
+      tableCell.tabIndex = -1;
+      tableCell.removeAttribute(activeCellTestAttribute);
     });
 
+    const focusedEl = getFirstTabbable(focusEl);
+
+    // Only one cell within a list-item should be focusable at a time. Ensures the active cell is focusable.
+    if (focusEl) {
+      focusEl.tabIndex = focusEl === focusedEl ? 0 : -1;
+      saveFocusIndex && focusMap.set(parentListEl, gridCells.indexOf(focusEl));
+      focusEl.setAttribute(activeCellTestAttribute, "");
+    }
+
     focusedEl?.focus();
   };
 }

packages/calcite-components/src/components/list-item/resources.ts

@@ -43,3 +43,5 @@ export const ICONS = {
   blank: "blank",
   close: "x",
 };
+
+export const activeCellTestAttribute = "data-test-active";

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

@@ -3,7 +3,7 @@ import { placeholderImage } from "../../../.storybook/placeholderImage";
 import { html } from "../../../support/formatting";
 import { E2EPage, newE2EPage } from "@stencil/core/testing";
 import { debounceTimeout } from "./resources";
-import { CSS } from "../list-item/resources";
+import { CSS, activeCellTestAttribute } from "../list-item/resources";
 import { DEBOUNCE_TIMEOUT as FILTER_DEBOUNCE_TIMEOUT } from "../filter/resources";
 import { GlobalTestProps, dragAndDrop, isElementFocused, getFocusedElementProp } from "../../tests/utils";
 import { ListDragDetail } from "./interfaces";
@@ -143,15 +143,14 @@ describe("calcite-list", () => {
 
       expect(await getFocusedElementProp(page, "id")).toBe("action-3");
 
-      await secondItem.setProperty("disabled", true);
+      secondItem.setProperty("disabled", true);
       await page.waitForChanges();
-      await secondItem.setProperty("disabled", false);
+      secondItem.setProperty("disabled", false);
       await page.waitForChanges();
 
       await firstItem.callMethod("setFocus");
       await page.waitForChanges();
 
-      await page.keyboard.press("Tab");
       await page.keyboard.press("Tab");
       await page.keyboard.press("Tab");
 
@@ -722,6 +721,37 @@ describe("calcite-list", () => {
       expect(await isElementFocused(page, "#one")).toBe(true);
       expect(await one.getProperty("open")).toBe(false);
     });
+
+    it("should navigate after focusing within a cell", async () => {
+      const page = await newE2EPage();
+      await page.setContent(html`
+        <calcite-list drag-enabled>
+          <calcite-list-item id="one" value="one" label="One" description="hello world"> </calcite-list-item>
+          <calcite-list-item id="two" value="two" label="Two" description="hello world"> </calcite-list-item>
+          <calcite-list-item id="three" value="three" label="Three" description="hello world"></calcite-list-item>
+        </calcite-list>
+      `);
+      await page.waitForChanges();
+      const items = await page.findAll("calcite-list-item");
+      const secondHandleCell = await page.find(`#two >>> .${CSS.dragContainer}`);
+
+      expect(await items[0].getProperty("active")).toBe(true);
+      expect(await items[1].getProperty("active")).toBe(false);
+      expect(await items[2].getProperty("active")).toBe(false);
+      expect(secondHandleCell.getAttribute(activeCellTestAttribute)).toBe(null);
+
+      const secondDragHandle = await page.find("#two >>> calcite-handle");
+
+      await secondDragHandle.click();
+
+      await page.waitForChanges();
+      await page.waitForTimeout(listDebounceTimeout);
+
+      expect(await items[0].getProperty("active")).toBe(false);
+      expect(await items[1].getProperty("active")).toBe(true);
+      expect(await items[2].getProperty("active")).toBe(false);
+      expect(secondHandleCell.getAttribute(activeCellTestAttribute)).toBe("");
+    });
   });
 
   describe("drag and drop", () => {