fix(list): fix keyboard navigation when filterEnabled is true (#7385)

**Related Issue:** #6736

## Summary

- Updates keyboard navigable items to account for filtered items.
- Updates setFocus method to account for filter being enabled.
- Updates keyboard to account for filter navigation.
- Fixes test
- Adds test

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

@@ -369,23 +369,23 @@ describe("calcite-list", () => {
       await list.callMethod("setFocus");
       await page.waitForChanges();
 
-      await isElementFocused(page, "#one");
+      expect(await isElementFocused(page, "#one")).toBe(true);
 
       await list.press("ArrowDown");
 
-      await isElementFocused(page, "#two");
+      expect(await isElementFocused(page, "#two")).toBe(true);
 
       await list.press("ArrowDown");
 
-      await isElementFocused(page, "#two");
+      expect(await isElementFocused(page, "#two")).toBe(true);
 
       await list.press("ArrowUp");
 
-      await isElementFocused(page, "#one");
+      expect(await isElementFocused(page, "#one")).toBe(true);
 
       await list.press("ArrowDown");
 
-      await isElementFocused(page, "#two");
+      expect(await isElementFocused(page, "#two")).toBe(true);
 
       const listItemThree = await page.find("#three");
       listItemThree.setProperty("disabled", false);
@@ -394,7 +394,7 @@ describe("calcite-list", () => {
 
       await list.press("ArrowDown");
 
-      await isElementFocused(page, "#three");
+      expect(await isElementFocused(page, "#three")).toBe(true);
 
       const listItemFour = await page.find("#four");
       listItemFour.setProperty("closed", false);
@@ -403,15 +403,52 @@ describe("calcite-list", () => {
 
       await list.press("ArrowDown");
 
-      await isElementFocused(page, "#four");
+      expect(await isElementFocused(page, "#four")).toBe(true);
 
       await list.press("Home");
 
-      await isElementFocused(page, "#one");
+      expect(await isElementFocused(page, "#one")).toBe(true);
 
       await list.press("End");
 
-      await isElementFocused(page, "#four");
+      expect(await isElementFocused(page, "#four")).toBe(true);
+    });
+
+    it("should navigate via ArrowUp, ArrowDown with filtered items", async () => {
+      const page = await newE2EPage();
+      await page.setContent(html`
+        <calcite-list filter-enabled filter-text="water">
+          <calcite-list-item id="one" value="fire" label="fire" description="fire"></calcite-list-item>
+          <calcite-list-item id="two" value="fire" label="fire" description="fire"></calcite-list-item>
+          <calcite-list-item id="three" value="fire" label="fire" description="fire"></calcite-list-item>
+          <calcite-list-item id="four" value="water" label="water" description="water"></calcite-list-item>
+          <calcite-list-item id="five" value="water" label="water" description="water"></calcite-list-item>
+          <calcite-list-item id="six" value="water" label="water" description="water"></calcite-list-item>
+        </calcite-list>
+      `);
+      await page.waitForChanges();
+      const list = await page.find("calcite-list");
+      await page.waitForTimeout(listDebounceTimeout);
+      await list.callMethod("setFocus");
+      await page.waitForChanges();
+
+      expect(await isElementFocused(page, "calcite-filter", { shadowed: true })).toBe(true);
+
+      await list.press("ArrowDown");
+
+      expect(await isElementFocused(page, "#four")).toBe(true);
+
+      await list.press("ArrowDown");
+
+      expect(await isElementFocused(page, "#five")).toBe(true);
+
+      await list.press("ArrowUp");
+
+      expect(await isElementFocused(page, "#four")).toBe(true);
+
+      await list.press("ArrowUp");
+
+      expect(await isElementFocused(page, "calcite-filter", { shadowed: true })).toBe(true);
     });
   });
 });

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

@@ -269,6 +269,11 @@ export class List implements InteractiveComponent, LoadableComponent {
   @Method()
   async setFocus(): Promise<void> {
     await componentFocusable(this);
+
+    if (this.filterEnabled) {
+      return this.filterEl?.setFocus();
+    }
+
     return this.enabledListItems.find((listItem) => listItem.active)?.setFocus();
   }
 
@@ -493,7 +498,7 @@ export class List implements InteractiveComponent, LoadableComponent {
       }
     }
     this.updateFilteredItems(emit);
-    this.enabledListItems = items.filter((item) => !item.disabled && !item.closed);
+    this.enabledListItems = this.filteredItems.filter((item) => !item.disabled && !item.closed);
     this.setActiveListItem();
     this.updateSelectedItems(emit);
   }, debounceTimeout);
@@ -535,13 +540,19 @@ export class List implements InteractiveComponent, LoadableComponent {
 
     if (key === "ArrowDown") {
       event.preventDefault();
-      const nextIndex = currentIndex + 1;
+      const nextIndex = event.target === this.filterEl ? 0 : currentIndex + 1;
 
       if (filteredItems[nextIndex]) {
         this.focusRow(filteredItems[nextIndex]);
       }
     } else if (key === "ArrowUp") {
       event.preventDefault();
+
+      if (currentIndex === 0 && this.filterEnabled) {
+        this.filterEl?.setFocus();
+        return;
+      }
+
       const prevIndex = currentIndex - 1;
 
       if (filteredItems[prevIndex]) {