@orangesk/orange-design-system 2.0.0-alpha.0 → 2.0.0-alpha.2

package/src/components/Accordion/tests/Accordion.unit.test.js

@@ -0,0 +1,822 @@
+import { render, fireEvent } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { AccordionItem } from "../AccordionItem";
+import { Accordion } from "../Accordion";
+import AccordionHeader from "../AccordionHeader";
+import HeadingContext from "../HeadingContext";
+import testData from "./data";
+
+const TestingAccordion = () => (
+  <Accordion data-testid="test-id">
+    <AccordionItem title="title-1" data-testid="item-test-id-1" id="item-1">
+      text-1
+    </AccordionItem>
+    <AccordionItem title="title-2" data-testid="item-test-id-2" id="item-2">
+      text-2
+    </AccordionItem>
+  </Accordion>
+);
+
+const TestingAccordionWithData = () => (
+  <Accordion data-testid="test-id">
+    {testData.map((item, index) => (
+      <AccordionItem
+        key={index}
+        title={item.title}
+        data-testid={`item-${index}`}
+        id={`item-${index}`}
+      >
+        {item.children}
+      </AccordionItem>
+    ))}
+  </Accordion>
+);
+
+describe("Accordion Component Tests", () => {
+  describe("Accordion Component", () => {
+    describe("initial state", () => {
+      it("has default class accordion", () => {
+        const { getByTestId } = render(<Accordion data-testid="test-id" />);
+        expect(getByTestId("test-id")).toHaveClass("accordion");
+      });
+
+      it("renders as ul element with data-accordion attribute", () => {
+        const { getByTestId } = render(<Accordion data-testid="test-id" />);
+        const accordion = getByTestId("test-id");
+        expect(accordion.tagName).toBe("UL");
+        expect(accordion).toHaveAttribute("data-accordion");
+      });
+
+      it("has default heading level of 3", () => {
+        const { container } = render(<TestingAccordion />);
+        const headers = container.querySelectorAll("h3");
+        expect(headers).toHaveLength(2);
+      });
+    });
+
+    describe("props and variants", () => {
+      it("applies custom heading level", () => {
+        const { container } = render(
+          <Accordion headingLevel={2} data-testid="test-id">
+            <AccordionItem
+              title="title-1"
+              data-testid="item-test-id-1"
+              id="item-1"
+            >
+              text-1
+            </AccordionItem>
+          </Accordion>,
+        );
+        const headers = container.querySelectorAll("h2");
+        expect(headers).toHaveLength(1);
+      });
+
+      it("applies large size class", () => {
+        const { getByTestId } = render(
+          <Accordion size="large" data-testid="test-id" />,
+        );
+        expect(getByTestId("test-id")).toHaveClass("accordion--large");
+      });
+
+      it("applies enclosed class", () => {
+        const { getByTestId } = render(
+          <Accordion isEnclosed data-testid="test-id" />,
+        );
+        expect(getByTestId("test-id")).toHaveClass("accordion--enclosed");
+      });
+
+      it("applies custom className", () => {
+        const { getByTestId } = render(
+          <Accordion className="custom-class" data-testid="test-id" />,
+        );
+        expect(getByTestId("test-id")).toHaveClass("custom-class");
+      });
+
+      it("passes additional props to ul element", () => {
+        const { getByTestId } = render(
+          <Accordion data-testid="test-id" data-custom="value" />,
+        );
+        expect(getByTestId("test-id")).toHaveAttribute("data-custom", "value");
+      });
+    });
+
+    describe("rendering with test data", () => {
+      it("renders all items from data.js", () => {
+        const { getByText } = render(<TestingAccordionWithData />);
+
+        testData.forEach((item) => {
+          expect(getByText(item.title)).toBeInTheDocument();
+          expect(getByText(item.children)).toBeInTheDocument();
+        });
+      });
+
+      it("renders correct number of accordion items", () => {
+        const { container } = render(<TestingAccordionWithData />);
+        const items = container.querySelectorAll(".accordion__item");
+        expect(items).toHaveLength(testData.length);
+      });
+    });
+
+    describe("mouse interactions", () => {
+      let accordion;
+      beforeEach(() => {
+        accordion = render(<TestingAccordion />);
+      });
+
+      it("AccordionItem div has hidden attribute set to false after button click", () => {
+        const { getByTestId, getByText } = accordion;
+        fireEvent.click(getByTestId("item-test-id-1"));
+        expect(getByText("text-1").hidden).toBe(false);
+      });
+
+      it("AccordionItem div has hidden attribute set to true after two button clicks", () => {
+        const { getByTestId, getByText } = accordion;
+        fireEvent.click(getByTestId("item-test-id-1"));
+        fireEvent.click(getByTestId("item-test-id-1"));
+        expect(getByText("text-1").hidden).toBe(true);
+      });
+
+      it("multiple items can be opened simultaneously", () => {
+        const { getByTestId, getByText } = accordion;
+        fireEvent.click(getByTestId("item-test-id-1"));
+        fireEvent.click(getByTestId("item-test-id-2"));
+
+        expect(getByText("text-1").hidden).toBe(false);
+        expect(getByText("text-2").hidden).toBe(false);
+        expect(
+          getByTestId("item-test-id-1").getAttribute("aria-expanded"),
+        ).toBe("true");
+        expect(
+          getByTestId("item-test-id-2").getAttribute("aria-expanded"),
+        ).toBe("true");
+      });
+    });
+
+    describe("keyboard interactions", () => {
+      let accordion;
+      beforeEach(() => {
+        window.document.getSelection = jest.fn();
+        accordion = render(<TestingAccordion />);
+      });
+
+      it("AccordionItem focus changes after tab press", async () => {
+        const { getByTestId } = accordion;
+        let accordionItem1 = getByTestId("item-test-id-1");
+        let accordionItem2 = getByTestId("item-test-id-2");
+        accordionItem1.focus();
+        expect(accordionItem1).toHaveFocus();
+        await userEvent.tab();
+        expect(accordionItem2).toHaveFocus();
+      });
+
+      it("space key toggles accordion item", async () => {
+        const { getByTestId, getByText } = accordion;
+        let accordionItem1 = getByTestId("item-test-id-1");
+        accordionItem1.focus();
+
+        await userEvent.keyboard(" ");
+        expect(getByText("text-1").hidden).toBe(false);
+        expect(
+          getByTestId("item-test-id-1").getAttribute("aria-expanded"),
+        ).toBe("true");
+
+        await userEvent.keyboard(" ");
+        expect(getByText("text-1").hidden).toBe(true);
+        expect(
+          getByTestId("item-test-id-1").getAttribute("aria-expanded"),
+        ).toBe("false");
+      });
+    });
+
+    describe("accessibility features", () => {
+      it("has proper ARIA attributes", () => {
+        const { getByTestId } = render(<TestingAccordion />);
+        const button = getByTestId("item-test-id-1");
+        const section = getByTestId("item-test-id-1").nextElementSibling;
+
+        expect(button).toHaveAttribute("aria-controls", "item-1-section");
+        const ariaExpanded = button.getAttribute("aria-expanded");
+        expect([null, "false"]).toContain(ariaExpanded);
+        if (section) {
+          expect(section).toHaveAttribute("aria-labelledby", "item-1");
+          expect(section).toHaveAttribute("id", "item-1-section");
+        }
+      });
+    });
+
+    describe("edge cases", () => {
+      it("handles empty accordion gracefully", () => {
+        const { getByTestId } = render(<Accordion data-testid="test-id" />);
+        expect(getByTestId("test-id")).toBeInTheDocument();
+      });
+
+      it("handles accordion with single item", () => {
+        const { getByText } = render(
+          <Accordion>
+            <AccordionItem title="Single Item" id="single">
+              Single content
+            </AccordionItem>
+          </Accordion>,
+        );
+        expect(getByText("Single Item")).toBeInTheDocument();
+        expect(getByText("Single content")).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe("AccordionItem Component", () => {
+    describe("initial state and context provider", () => {
+      let accordionItem;
+
+      beforeEach(() => {
+        accordionItem = render(
+          <HeadingContext.Provider value={1}>
+            <AccordionItem title="Test Title" />
+          </HeadingContext.Provider>,
+        );
+      });
+
+      it("renders list item with class accordion__item", () => {
+        const { container } = accordionItem;
+        expect(container.querySelector("li")).toBeInTheDocument();
+        expect(container.querySelector("li")).toHaveClass("accordion__item");
+      });
+
+      it("renders div with class accordion__body", () => {
+        const { container } = accordionItem;
+        expect(container.querySelector("div")).toBeInTheDocument();
+        expect(container.querySelector("div")).toHaveClass("accordion__body");
+      });
+
+      it("renders AccordionHeader component with h1 heading when value 1 is provided by context", () => {
+        const { container } = accordionItem;
+        expect(container.querySelector("h1")).toBeInTheDocument();
+        expect(container.querySelector("h1")).toHaveClass("accordion__header");
+      });
+
+      it("div has hidden attribute set to true when isActive is not passed", () => {
+        const { container } = accordionItem;
+        expect(container.querySelector("div").hidden).toBeTruthy();
+      });
+    });
+
+    describe("props and functionality", () => {
+      it("renders children inside div", () => {
+        const { container } = render(
+          <HeadingContext.Provider value={1}>
+            <AccordionItem title="Test">test content</AccordionItem>
+          </HeadingContext.Provider>,
+        );
+        expect(container.querySelector("div").textContent).toBe("test content");
+      });
+
+      it("renders title when title is passed", () => {
+        const { getByText } = render(
+          <HeadingContext.Provider value={1}>
+            <AccordionItem title="test-title" />
+          </HeadingContext.Provider>,
+        );
+        expect(getByText("test-title")).toBeInTheDocument();
+      });
+
+      it("button has aria-expanded attribute set to true when isActive is passed", () => {
+        const { container } = render(
+          <HeadingContext.Provider value={1}>
+            <AccordionItem isActive title="Test" />
+          </HeadingContext.Provider>,
+        );
+        expect(
+          container.querySelector("button").getAttribute("aria-expanded"),
+        ).toBe("true");
+      });
+
+      it("div has hidden attribute set to false when isActive is passed", () => {
+        const { container } = render(
+          <HeadingContext.Provider value={1}>
+            <AccordionItem isActive title="Test" />
+          </HeadingContext.Provider>,
+        );
+        expect(container.querySelector("div").hidden).toBeFalsy();
+      });
+
+      it("div has additional class is-active when isActive is passed", () => {
+        const { container } = render(
+          <HeadingContext.Provider value={1}>
+            <AccordionItem isActive title="Test" />
+          </HeadingContext.Provider>,
+        );
+        expect(container.querySelector("div")).toHaveClass("accordion__body");
+        expect(container.querySelector("div")).toHaveClass("is-active");
+      });
+
+      it("renders custom header when renderHeader is passed", () => {
+        const renderHeader = (title, currentId, isActive) => (
+          <p id={currentId} aria-expanded={isActive}>
+            {title}
+          </p>
+        );
+        const { container } = render(
+          <HeadingContext.Provider value={1}>
+            <AccordionItem
+              renderHeader={(title, currentId, isActive) =>
+                renderHeader(title, currentId, isActive)
+              }
+              title="test-title"
+            />
+          </HeadingContext.Provider>,
+        );
+        expect(container.querySelector("h1")).not.toBeInTheDocument();
+        expect(container.querySelector("p")).toBeInTheDocument();
+        expect(container.querySelector("p").textContent).toBe("test-title");
+      });
+    });
+
+    describe("state management", () => {
+      it("toggles isActive state correctly", () => {
+        const { rerender, container } = render(
+          <HeadingContext.Provider value={1}>
+            <AccordionItem title="Test" isActive={false} />
+          </HeadingContext.Provider>,
+        );
+
+        // Initially inactive
+        expect(container.querySelector("div")).toHaveClass("accordion__body");
+        expect(container.querySelector("div")).not.toHaveClass("is-active");
+        expect(container.querySelector("div").hidden).toBe(true);
+        expect(
+          container.querySelector("button").getAttribute("aria-expanded"),
+        ).toBe("false");
+
+        // Change to active
+        rerender(
+          <HeadingContext.Provider value={1}>
+            <AccordionItem title="Test" isActive={true} />
+          </HeadingContext.Provider>,
+        );
+
+        expect(container.querySelector("div")).toHaveClass("is-active");
+        expect(container.querySelector("div").hidden).toBe(false);
+        expect(
+          container.querySelector("button").getAttribute("aria-expanded"),
+        ).toBe("true");
+      });
+    });
+  });
+
+  describe("AccordionHeader Component", () => {
+    describe("initial state and context provider", () => {
+      let accordionHeader;
+
+      beforeEach(() => {
+        accordionHeader = render(
+          <HeadingContext.Provider value={1}>
+            <AccordionHeader
+              data-testid="test-id"
+              id="test-id"
+              title="Test Title"
+            />
+          </HeadingContext.Provider>,
+        );
+      });
+
+      it("renders button with default class accordion__button", () => {
+        const { getByTestId } = accordionHeader;
+        expect(getByTestId("test-id").tagName).toBe("BUTTON");
+        expect(getByTestId("test-id")).toHaveClass("accordion__button");
+      });
+
+      it("renders button with type button", () => {
+        const { getByTestId } = accordionHeader;
+        expect(getByTestId("test-id").tagName).toBe("BUTTON");
+        expect(getByTestId("test-id").getAttribute("type")).toBe("button");
+      });
+
+      it("renders button with data-accordion-toggle attribute set to true", () => {
+        const { getByTestId } = accordionHeader;
+        expect(getByTestId("test-id").tagName).toBe("BUTTON");
+        expect(
+          getByTestId("test-id").getAttribute("data-accordion-toggle"),
+        ).toBeTruthy();
+      });
+
+      it("renders h1 header when value 1 is provided by context", () => {
+        const { container } = accordionHeader;
+        expect(container.querySelector("h1")).toBeInTheDocument();
+      });
+
+      it("header has class accordion__header", () => {
+        const { container } = accordionHeader;
+        expect(container.querySelector("h1")).toBeInTheDocument();
+        expect(container.querySelector("h1")).toHaveClass("accordion__header");
+      });
+
+      it("renders span with class accordion__title", () => {
+        const { container } = accordionHeader;
+        expect(container.querySelector("span")).toBeInTheDocument();
+        expect(container.querySelector("span")).toHaveClass("accordion__title");
+      });
+
+      it("renders icon with correct classes", () => {
+        const { container } = accordionHeader;
+        expect(container.querySelector("svg")).toBeInTheDocument();
+        expect(container.querySelector("svg")).toHaveClass("icon--medium");
+        expect(container.querySelector("svg")).toHaveClass("accordion__icon");
+      });
+    });
+
+    describe("props and functionality", () => {
+      it("renders title inside span element", () => {
+        const { container } = render(
+          <HeadingContext.Provider value={1}>
+            <AccordionHeader
+              id="test-id"
+              title="test-title"
+              isActive
+              className="test-class"
+            />
+          </HeadingContext.Provider>,
+        );
+        expect(container.querySelector("span")).toBeInTheDocument();
+        expect(container.querySelector("span")).toHaveTextContent("test-title");
+      });
+
+      it("renders button with aria-expanded attribute set to true when isActive prop is passed", () => {
+        const { container } = render(
+          <HeadingContext.Provider value={1}>
+            <AccordionHeader id="test-id" title="test-title" isActive />
+          </HeadingContext.Provider>,
+        );
+        expect(container.querySelector("button")).toBeInTheDocument();
+        expect(
+          container.querySelector("button").getAttribute("aria-expanded"),
+        ).toBe("true");
+      });
+
+      it("renders button with aria-controls attribute set to test-id-section when id prop is set to test-id", () => {
+        const { container } = render(
+          <HeadingContext.Provider value={1}>
+            <AccordionHeader id="test-id" title="test-title" />
+          </HeadingContext.Provider>,
+        );
+        expect(container.querySelector("button")).toBeInTheDocument();
+        expect(
+          container.querySelector("button").getAttribute("aria-controls"),
+        ).toBe("test-id-section");
+      });
+
+      it("renders button with id attribute set to id prop", () => {
+        const { container } = render(
+          <HeadingContext.Provider value={1}>
+            <AccordionHeader id="test-id" title="test-title" />
+          </HeadingContext.Provider>,
+        );
+        expect(container.querySelector("button")).toBeInTheDocument();
+        expect(container.querySelector("button").getAttribute("id")).toBe(
+          "test-id",
+        );
+      });
+    });
+
+    describe("heading level context variations", () => {
+      it("renders h2 when context value is 2", () => {
+        const { container } = render(
+          <HeadingContext.Provider value={2}>
+            <AccordionHeader id="test" title="Test" />
+          </HeadingContext.Provider>,
+        );
+        expect(container.querySelector("h2")).toBeInTheDocument();
+        expect(container.querySelector("h2")).toHaveClass("accordion__header");
+      });
+
+      it("renders h6 when context value is 6", () => {
+        const { container } = render(
+          <HeadingContext.Provider value={6}>
+            <AccordionHeader id="test" title="Test" />
+          </HeadingContext.Provider>,
+        );
+        expect(container.querySelector("h6")).toBeInTheDocument();
+        expect(container.querySelector("h6")).toHaveClass("accordion__header");
+      });
+
+      it("defaults to h3 when no context is provided", () => {
+        const { container } = render(
+          <AccordionHeader id="test" title="Test" />,
+        );
+        expect(container.querySelector("h3")).toBeInTheDocument();
+        expect(container.querySelector("h3")).toHaveClass("accordion__header");
+      });
+    });
+
+    describe("state management", () => {
+      it("toggles isActive state correctly", () => {
+        const { rerender, container } = render(
+          <HeadingContext.Provider value={1}>
+            <AccordionHeader id="test-id" title="Test" isActive={false} />
+          </HeadingContext.Provider>,
+        );
+
+        // Initially inactive
+        expect(
+          container.querySelector("button").getAttribute("aria-expanded"),
+        ).toBe("false");
+
+        // Change to active
+        rerender(
+          <HeadingContext.Provider value={1}>
+            <AccordionHeader id="test-id" title="Test" isActive={true} />
+          </HeadingContext.Provider>,
+        );
+
+        expect(
+          container.querySelector("button").getAttribute("aria-expanded"),
+        ).toBe("true");
+      });
+    });
+  });
+
+  describe("Integration Tests", () => {
+    describe("complex accordion scenarios", () => {
+      it("renders accordion with all variants and props", () => {
+        const { container } = render(
+          <Accordion
+            headingLevel={2}
+            size="large"
+            isEnclosed
+            className="custom-accordion"
+            data-testid="complex-accordion"
+          >
+            <AccordionItem
+              title="Active Item"
+              id="active-item"
+              isActive={true}
+              className="custom-item"
+            >
+              <p>Active content</p>
+            </AccordionItem>
+            <AccordionItem
+              title="Inactive Item"
+              id="inactive-item"
+              isActive={false}
+            >
+              <p>Inactive content</p>
+            </AccordionItem>
+          </Accordion>,
+        );
+
+        // Check accordion classes
+        const accordion = container.querySelector(".accordion");
+        expect(accordion).toHaveClass("accordion--large");
+        expect(accordion).toHaveClass("accordion--enclosed");
+        expect(accordion).toHaveClass("custom-accordion");
+
+        // Check heading level
+        const headers = container.querySelectorAll("h2");
+        expect(headers).toHaveLength(2);
+
+        // Check active item
+        const activeItem = container.querySelector("#active-item");
+        const activeSection = container.querySelector("#active-item-section");
+        expect(activeItem.getAttribute("aria-expanded")).toBe("true");
+        expect(activeSection).toHaveClass("is-active");
+        expect(activeSection.hidden).toBe(false);
+
+        // Check inactive item
+        const inactiveItem = container.querySelector("#inactive-item");
+        const inactiveSection = container.querySelector(
+          "#inactive-item-section",
+        );
+        expect(inactiveItem.getAttribute("aria-expanded")).toBe("false");
+        expect(inactiveSection).not.toHaveClass("is-active");
+        expect(inactiveSection.hidden).toBe(true);
+      });
+
+      it("handles multiple accordion items with complex interactions", async () => {
+        const user = userEvent.setup();
+
+        const { getByText, getByTestId } = render(
+          <Accordion data-testid="multi-accordion">
+            {testData.map((item, index) => (
+              <AccordionItem
+                key={index}
+                title={item.title}
+                data-testid={`item-${index}`}
+                id={`item-${index}`}
+              >
+                {item.children}
+              </AccordionItem>
+            ))}
+          </Accordion>,
+        );
+
+        // Open first item
+        await user.click(getByTestId("item-0"));
+        expect(getByText(testData[0].children)).toBeVisible();
+        expect(getByTestId("item-0").getAttribute("aria-expanded")).toBe(
+          "true",
+        );
+
+        // Open second item
+        await user.click(getByTestId("item-1"));
+        expect(getByText(testData[1].children)).toBeVisible();
+        expect(getByTestId("item-1").getAttribute("aria-expanded")).toBe(
+          "true",
+        );
+
+        // First item should still be open
+        expect(getByText(testData[0].children)).toBeVisible();
+        expect(getByTestId("item-0").getAttribute("aria-expanded")).toBe(
+          "true",
+        );
+
+        // Close first item
+        await user.click(getByTestId("item-0"));
+        expect(getByText(testData[0].children)).not.toBeVisible();
+        expect(getByTestId("item-0").getAttribute("aria-expanded")).toBe(
+          "false",
+        );
+
+        // Second item should still be open
+        expect(getByText(testData[1].children)).toBeVisible();
+        expect(getByTestId("item-1").getAttribute("aria-expanded")).toBe(
+          "true",
+        );
+      });
+    });
+
+    describe("custom header rendering", () => {
+      it("renders custom header with complex layout", () => {
+        const CustomHeader = ({ title, currentId, isActive }) => (
+          <div className="custom-header" data-testid="custom-header">
+            <div className="header-content">
+              <h3>{title}</h3>
+              <span className="status">{isActive ? "Open" : "Closed"}</span>
+            </div>
+            <button
+              className="custom-button"
+              aria-expanded={isActive}
+              aria-controls={`${currentId}-section`}
+              id={currentId}
+              data-accordion-toggle
+            >
+              Toggle
+            </button>
+          </div>
+        );
+
+        const { getByTestId } = render(
+          <Accordion>
+            <AccordionItem
+              title="Custom Header Item"
+              renderHeader={CustomHeader}
+              isActive={false}
+            >
+              <p>Custom header content</p>
+            </AccordionItem>
+          </Accordion>,
+        );
+
+        const customHeader = getByTestId("custom-header");
+        expect(customHeader).toBeInTheDocument();
+        expect(customHeader.querySelector(".status")).toHaveTextContent(
+          "Closed",
+        );
+        const customButton = customHeader.querySelector(".custom-button");
+        const ariaExpanded = customButton.getAttribute("aria-expanded");
+        expect([null, "false"]).toContain(ariaExpanded);
+      });
+    });
+
+    describe("keyboard navigation scenarios", () => {
+      it("handles keyboard activation of items", async () => {
+        const user = userEvent.setup();
+
+        const { getByTestId, getByText } = render(
+          <Accordion>
+            {testData.map((item, index) => (
+              <AccordionItem
+                key={index}
+                title={item.title}
+                data-testid={`item-${index}`}
+                id={`item-${index}`}
+              >
+                {item.children}
+              </AccordionItem>
+            ))}
+          </Accordion>,
+        );
+
+        const firstItem = getByTestId("item-0");
+        firstItem.focus();
+
+        // Activate with Enter
+        await user.keyboard("{Enter}");
+        expect(getByText(testData[0].children)).toBeVisible();
+        expect(firstItem.getAttribute("aria-expanded")).toBe("true");
+
+        // Deactivate with Enter
+        await user.keyboard("{Enter}");
+        expect(getByText(testData[0].children)).not.toBeVisible();
+        expect(firstItem.getAttribute("aria-expanded")).toBe("false");
+
+        // Activate with Space
+        await user.keyboard(" ");
+        expect(getByText(testData[0].children)).toBeVisible();
+        expect(firstItem.getAttribute("aria-expanded")).toBe("true");
+
+        // Deactivate with Space
+        await user.keyboard(" ");
+        expect(getByText(testData[0].children)).not.toBeVisible();
+        expect(firstItem.getAttribute("aria-expanded")).toBe("false");
+      });
+    });
+
+    describe("accessibility integration", () => {
+      it("maintains proper ARIA relationships", () => {
+        const { container } = render(
+          <Accordion>
+            <AccordionItem title="Item 1" id="item1">
+              <p>Content 1</p>
+            </AccordionItem>
+            <AccordionItem title="Item 2" id="item2">
+              <p>Content 2</p>
+            </AccordionItem>
+          </Accordion>,
+        );
+
+        const buttons = container.querySelectorAll("button");
+
+        buttons.forEach((button, index) => {
+          const sectionId = `item${index + 1}-section`;
+          const section = container.querySelector(`#${sectionId}`);
+
+          expect(button).toHaveAttribute("aria-controls", sectionId);
+          expect(section).toHaveAttribute(
+            "aria-labelledby",
+            `item${index + 1}`,
+          );
+          expect(button).toHaveAttribute("id", `item${index + 1}`);
+        });
+      });
+    });
+
+    describe("performance and edge cases", () => {
+      it("handles large number of items", () => {
+        const manyItems = Array.from({ length: 100 }, (_, i) => ({
+          title: `Item ${i + 1}`,
+          content: `Content for item ${i + 1}`,
+        }));
+
+        const { container, getByText } = render(
+          <Accordion>
+            {manyItems.map((item, index) => (
+              <AccordionItem
+                key={index}
+                title={item.title}
+                id={`item-${index}`}
+              >
+                {item.content}
+              </AccordionItem>
+            ))}
+          </Accordion>,
+        );
+
+        const items = container.querySelectorAll(".accordion__item");
+        expect(items).toHaveLength(100);
+
+        // Check first and last items are rendered
+        expect(getByText("Item 1")).toBeInTheDocument();
+        expect(getByText("Item 100")).toBeInTheDocument();
+        expect(getByText("Content for item 1")).toBeInTheDocument();
+        expect(getByText("Content for item 100")).toBeInTheDocument();
+      });
+
+      it("handles rapid state changes", async () => {
+        const user = userEvent.setup();
+
+        const { getByTestId } = render(
+          <Accordion>
+            <AccordionItem
+              title="Rapid Item"
+              data-testid="rapid-item"
+              id="rapid"
+            >
+              Rapid content
+            </AccordionItem>
+          </Accordion>,
+        );
+
+        const item = getByTestId("rapid-item");
+
+        // Rapidly click the item
+        for (let i = 0; i < 10; i++) {
+          await user.click(item);
+        }
+
+        // Should end up in a consistent state
+        const finalState = item.getAttribute("aria-expanded");
+        expect(["true", "false"]).toContain(finalState);
+      });
+    });
+  });
+});