fix(carousel): Prevent unexpected keyboard autoplay activation

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

@@ -678,6 +678,78 @@ describe("calcite-carousel", () => {
       expect(await carousel.getProperty("paused")).toBe(false);
       expect(selectedItem.id).toEqual("three");
     });
+
+    it("does not begin autoplay after keyboard interaction if not enabled via property", async () => {
+      const page = await newE2EPage();
+
+      await page.setContent(
+        `<calcite-carousel label="Carousel example" id="example-carousel>
+          <calcite-carousel-item label="Carousel Item 1" id="one"><p>no pre-selected attribute</p></calcite-carousel-item>
+          <calcite-carousel-item label="Carousel Item 2" id="two" selected><p>pre-selected and not first</p></calcite-carousel-item>
+          <calcite-carousel-item label="Carousel Item 3" id="three"><p>no pre-selected attribute</p></calcite-carousel-item>
+        </calcite-carousel>`,
+      );
+
+      const carousel = await page.find("calcite-carousel");
+      const playSpy = await page.spyOnEvent("calciteCarouselPlay");
+      const stopSpy = await page.spyOnEvent("calciteCarouselStop");
+      const pauseSpy = await page.spyOnEvent("calciteCarouselPause");
+      const resumeSpy = await page.spyOnEvent("calciteCarouselResume");
+
+      let selectedItem = await carousel.find(`calcite-carousel-item[selected]`);
+      expect(selectedItem.id).toEqual("two");
+      expect(playSpy).not.toHaveReceivedEvent();
+      expect(stopSpy).not.toHaveReceivedEvent();
+      expect(pauseSpy).not.toHaveReceivedEvent();
+      expect(resumeSpy).not.toHaveReceivedEvent();
+      expect(await carousel.getProperty("paused")).toBe(undefined);
+
+      await page.keyboard.press("Tab");
+      await page.waitForChanges();
+      expect(selectedItem.id).toEqual("two");
+      expect(playSpy).not.toHaveReceivedEvent();
+      expect(stopSpy).not.toHaveReceivedEvent();
+      expect(pauseSpy).not.toHaveReceivedEvent();
+      expect(resumeSpy).not.toHaveReceivedEvent();
+      expect(await page.evaluate(() => document.activeElement.id)).toEqual(carousel.id);
+
+      await page.waitForTimeout(slideDurationWaitTimer);
+      selectedItem = await carousel.find(`calcite-carousel-item[selected]`);
+      expect(selectedItem.id).toEqual("two");
+
+      await page.keyboard.press("Enter");
+      await page.waitForChanges();
+      expect(selectedItem.id).toEqual("two");
+      expect(playSpy).not.toHaveReceivedEvent();
+      expect(stopSpy).not.toHaveReceivedEvent();
+      expect(pauseSpy).not.toHaveReceivedEvent();
+      expect(resumeSpy).not.toHaveReceivedEvent();
+      expect(await carousel.getProperty("paused")).toBe(undefined);
+      expect(selectedItem.id).toEqual("two");
+
+      await page.waitForTimeout(slideDurationWaitTimer);
+      selectedItem = await carousel.find(`calcite-carousel-item[selected]`);
+      expect(selectedItem.id).toEqual("two");
+
+      await page.keyboard.press("Space");
+      await page.waitForChanges();
+      expect(playSpy).not.toHaveReceivedEvent();
+      expect(stopSpy).not.toHaveReceivedEvent();
+      expect(pauseSpy).not.toHaveReceivedEvent();
+      expect(resumeSpy).not.toHaveReceivedEvent();
+      expect(await carousel.getProperty("paused")).toBe(undefined);
+
+      expect(selectedItem.id).toEqual("two");
+
+      await page.keyboard.press("Space");
+      await page.waitForChanges();
+      expect(playSpy).not.toHaveReceivedEvent();
+      expect(stopSpy).not.toHaveReceivedEvent();
+      expect(pauseSpy).not.toHaveReceivedEvent();
+      expect(resumeSpy).not.toHaveReceivedEvent();
+      expect(await carousel.getProperty("paused")).toBe(undefined);
+      expect(selectedItem.id).toEqual("two");
+    });
   });
 
   describe("pagination", () => {
@@ -773,6 +845,7 @@ describe("calcite-carousel", () => {
       expect(selectedItem.id).toEqual("two");
     });
   });
+
   describe("public methods", () => {
     it("plays and stops correctly when autoplay", async () => {
       const page = await newE2EPage();

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

@@ -498,7 +498,9 @@ export class Carousel
       case " ":
       case "Enter":
         event.preventDefault();
-        this.toggleRotation();
+        if (this.autoplay === "" || this.autoplay || this.autoplay === "paused") {
+          this.toggleRotation();
+        }
         break;
       case "ArrowRight":
         this.direction = "forward";