@oslokommune/punkt-elements 13.3.1 → 13.4.0

package/CHANGELOG.md

@@ -5,6 +5,23 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [13.4.0](https://github.com/oslokommune/punkt/compare/13.3.1...13.4.0) (2025-09-03)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+Ingen
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
 ## [13.3.0](https://github.com/oslokommune/punkt/compare/13.2.4...13.3.0) (2025-09-01)
 
 ### ⚠ BREAKING CHANGES

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "13.3.1",
+  "version": "13.4.0",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -18,21 +18,32 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "build-app": "tsc && vite build --config vite.config-app.ts",
-    "preview": "vite preview --outDir dist-app"
+    "preview": "vite preview --outDir dist-app",
+    "test": "jest --config jest.config.cjs"
   },
   "dependencies": {
     "@date-fns/tz": "^1.2.0",
     "@lit-labs/router": "^0.1.3",
+    "@types/jest": "^29.5.14",
+    "@types/node": "^20.17.30",
+    "@types/testing-library__jest-dom": "^5.14.9",
     "date-fns": "^4.1.0",
     "dialog-polyfill": "^0.5.6",
     "lit": "^3.3.0",
     "react-dom": ">=18.2.22",
-    "urlpattern-polyfill": "^10.0.0"
+    "urlpattern-polyfill": "^10.0.0",
+    "whatwg-fetch": "^3.6.19"
   },
   "devDependencies": {
+    "@babel/preset-env": "^7.28.3",
     "@oslokommune/punkt-assets": "^13.3.1",
     "@oslokommune/punkt-css": "^13.3.1",
+    "@testing-library/jest-dom": "^6.6.3",
+    "jest": "^29.7.0",
+    "jest-axe": "^9.0.0",
+    "jest-environment-jsdom": "^29.7.0",
     "sass": "^1.78.0",
+    "ts-jest": "^29.2.6",
     "typescript": "^5.6.2",
     "vite": "^5.4.18",
     "vite-plugin-dts": "^4.2.1",
@@ -58,5 +69,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "7b997c2cc58b531ccbf06cce080b0dd8556a46be"
+  "gitHead": "1049219634cc4d4585dbd1c6f1592acf341a99f7"
 }

package/src/components/accordion/accordion.test.ts

@@ -0,0 +1,644 @@
+import '@testing-library/jest-dom'
+import { axe, toHaveNoViolations } from 'jest-axe'
+
+expect.extend(toHaveNoViolations)
+
+// Import the components
+import './accordion'
+import './accordionitem'
+
+// Import the component classes for type checking
+import { PktAccordion } from './accordion'
+import { PktAccordionItem } from './accordionitem'
+
+// Helper function to wait for custom elements to be defined and rendered
+const waitForCustomElements = async () => {
+  await Promise.all([
+    customElements.whenDefined('pkt-accordion'),
+    customElements.whenDefined('pkt-accordion-item'),
+    customElements.whenDefined('pkt-icon'),
+  ])
+  // Give components a chance to render and settle
+  await new Promise((resolve) => setTimeout(resolve, 50))
+}
+
+// Helper function to create accordion markup
+const createAccordion = async (
+  accordionProps = '',
+  accordionItemProps = '',
+  content = 'Test content',
+) => {
+  const container = document.createElement('div')
+  container.innerHTML = `
+    <pkt-accordion ${accordionProps}>
+      <pkt-accordion-item id="test-item" title="Test Title" ${accordionItemProps}>
+        ${content}
+      </pkt-accordion-item>
+    </pkt-accordion>
+  `
+  document.body.appendChild(container)
+  await waitForCustomElements()
+  return container
+}
+
+// Helper function to create multiple accordion items
+const createAccordionWithMultipleItems = async (accordionProps = '') => {
+  const container = document.createElement('div')
+  container.innerHTML = `
+    <pkt-accordion ${accordionProps}>
+      <pkt-accordion-item id="item1" title="Title 1">
+        Content 1
+      </pkt-accordion-item>
+      <pkt-accordion-item id="item2" title="Title 2">
+        Content 2
+      </pkt-accordion-item>
+      <pkt-accordion-item id="item3" title="Title 3">
+        Content 3
+      </pkt-accordion-item>
+    </pkt-accordion>
+  `
+  document.body.appendChild(container)
+  await waitForCustomElements()
+  return container
+}
+
+// Cleanup after each test
+afterEach(() => {
+  document.body.innerHTML = ''
+})
+
+describe('PktAccordion', () => {
+  describe('Rendering and basic functionality', () => {
+    test('renders without errors', async () => {
+      const container = await createAccordion()
+
+      const accordion = container.querySelector('pkt-accordion') as PktAccordion
+      expect(accordion).toBeInTheDocument()
+
+      await accordion.updateComplete
+      expect(accordion.shadowRoot).toBeTruthy()
+    })
+
+    test('renders children accordion items', async () => {
+      const container = await createAccordionWithMultipleItems()
+
+      const accordionItems = container.querySelectorAll('pkt-accordion-item')
+      expect(accordionItems).toHaveLength(3)
+
+      // Verify content is rendered
+      expect(container.textContent).toContain('Title 1')
+      expect(container.textContent).toContain('Content 1')
+      expect(container.textContent).toContain('Title 2')
+      expect(container.textContent).toContain('Content 2')
+      expect(container.textContent).toContain('Title 3')
+      expect(container.textContent).toContain('Content 3')
+    })
+
+    test('applies default properties correctly', async () => {
+      const container = await createAccordion()
+
+      const accordion = container.querySelector('pkt-accordion') as PktAccordion
+      await accordion.updateComplete
+
+      expect(accordion.compact).toBe(false)
+      expect(accordion.skin).toBe('borderless')
+      expect(accordion.name).toBe('')
+      expect(accordion.ariaLabelledBy).toBe('')
+
+      const accordionDiv = accordion.shadowRoot?.querySelector('.pkt-accordion')
+      expect(accordionDiv).toHaveClass('pkt-accordion')
+      expect(accordionDiv).toHaveClass('pkt-accordion--borderless')
+      expect(accordionDiv).not.toHaveClass('pkt-accordion--compact')
+    })
+  })
+
+  describe('Properties and attributes', () => {
+    test('applies compact property correctly', async () => {
+      const container = await createAccordion('compact')
+
+      const accordion = container.querySelector('pkt-accordion') as PktAccordion
+      await accordion.updateComplete
+
+      expect(accordion.compact).toBe(true)
+      expect(accordion.hasAttribute('compact')).toBe(true)
+
+      const accordionDiv = accordion.shadowRoot?.querySelector('.pkt-accordion')
+      expect(accordionDiv).toHaveClass('pkt-accordion--compact')
+    })
+
+    test('applies different skin properties correctly', async () => {
+      const skins = ['borderless', 'outlined', 'beige', 'blue']
+
+      for (const skin of skins) {
+        const container = await createAccordion(`skin="${skin}"`)
+        const accordion = container.querySelector('pkt-accordion') as PktAccordion
+        await accordion.updateComplete
+
+        expect(accordion.skin).toBe(skin)
+        expect(accordion.getAttribute('skin')).toBe(skin)
+
+        const accordionDiv = accordion.shadowRoot?.querySelector('.pkt-accordion')
+        expect(accordionDiv).toHaveClass(`pkt-accordion--${skin}`)
+
+        // Cleanup for next iteration
+        container.remove()
+      }
+    })
+
+    test('applies aria-labelledby correctly', async () => {
+      const container = await createAccordion('aria-labelledby="test-heading"')
+
+      const accordion = container.querySelector('pkt-accordion') as PktAccordion
+      await accordion.updateComplete
+
+      expect(accordion.ariaLabelledBy).toBe('test-heading')
+      expect(accordion.getAttribute('aria-labelledby')).toBe('test-heading')
+
+      const accordionDiv = accordion.shadowRoot?.querySelector('.pkt-accordion')
+      expect(accordionDiv?.getAttribute('aria-labelledby')).toBe('test-heading')
+    })
+
+    test('applies name property and updates accordion items', async () => {
+      const container = await createAccordionWithMultipleItems('name="test-group"')
+
+      const accordion = container.querySelector('pkt-accordion') as PktAccordion
+      const accordionItems = container.querySelectorAll('pkt-accordion-item')
+      await accordion.updateComplete
+
+      expect(accordion.name).toBe('test-group')
+      expect(accordion.getAttribute('name')).toBe('test-group')
+
+      // All accordion items should inherit the name
+      accordionItems.forEach((item) => {
+        expect(item.getAttribute('name')).toBe('test-group')
+      })
+    })
+
+    test('updates accordion item names when name property changes', async () => {
+      const container = await createAccordionWithMultipleItems()
+
+      const accordion = container.querySelector('pkt-accordion') as PktAccordion
+      const accordionItems = container.querySelectorAll('pkt-accordion-item')
+      await accordion.updateComplete
+
+      // Initially no name
+      expect(accordion.name).toBe('')
+      accordionItems.forEach((item) => {
+        expect(item.getAttribute('name')).toBe(null)
+      })
+
+      // Update name property
+      accordion.name = 'updated-group'
+      await accordion.updateComplete
+
+      // All accordion items should now have the updated name
+      accordionItems.forEach((item) => {
+        expect(item.getAttribute('name')).toBe('updated-group')
+      })
+    })
+
+    test('does not override existing name on accordion items', async () => {
+      const container = document.createElement('div')
+      container.innerHTML = `
+        <pkt-accordion name="group-name">
+          <pkt-accordion-item id="item1" title="Title 1" name="existing-name">
+            Content 1
+          </pkt-accordion-item>
+          <pkt-accordion-item id="item2" title="Title 2">
+            Content 2
+          </pkt-accordion-item>
+        </pkt-accordion>
+      `
+      document.body.appendChild(container)
+      await waitForCustomElements()
+
+      const accordion = container.querySelector('pkt-accordion') as PktAccordion
+      const accordionItems = container.querySelectorAll('pkt-accordion-item')
+      await accordion.updateComplete
+
+      // First item should keep its existing name
+      expect(accordionItems[0].getAttribute('name')).toBe('existing-name')
+      // Second item should get the accordion's name
+      expect(accordionItems[1].getAttribute('name')).toBe('group-name')
+    })
+  })
+
+  describe('Dynamic content handling', () => {
+    test('handles dynamically added accordion items', async () => {
+      const container = await createAccordion('name="dynamic-group"')
+
+      const accordion = container.querySelector('pkt-accordion') as PktAccordion
+      await accordion.updateComplete
+
+      // Add a new accordion item
+      const newItem = document.createElement('pkt-accordion-item') as PktAccordionItem
+      newItem.setAttribute('id', 'dynamic-item')
+      newItem.setAttribute('title', 'Dynamic Title')
+      newItem.textContent = 'Dynamic Content'
+      accordion.appendChild(newItem)
+
+      // Wait for the slot change to propagate
+      await new Promise((resolve) => setTimeout(resolve, 100))
+      await accordion.updateComplete
+
+      expect(newItem.getAttribute('name')).toBe('dynamic-group')
+    })
+  })
+})
+
+describe('PktAccordionItem', () => {
+  describe('Rendering and basic functionality', () => {
+    test('renders without errors', async () => {
+      const container = await createAccordion()
+
+      const accordionItem = container.querySelector('pkt-accordion-item') as PktAccordionItem
+      expect(accordionItem).toBeInTheDocument()
+
+      await accordionItem.updateComplete
+      expect(accordionItem).toBeTruthy()
+
+      const details = accordionItem.querySelector('details')
+      expect(details).toBeInTheDocument()
+    })
+
+    test('renders with correct structure', async () => {
+      const container = await createAccordion('', '', 'Test accordion content')
+
+      const accordionItem = container.querySelector('pkt-accordion-item') as PktAccordionItem
+      await accordionItem.updateComplete
+
+      const details = accordionItem.querySelector('details')
+      const summary = details?.querySelector('summary')
+      const content = details?.querySelector('.pkt-accordion-item__content')
+      const contentInner = content?.querySelector('.pkt-accordion-item__content-inner')
+
+      expect(summary).toHaveClass('pkt-accordion-item__title')
+      expect(summary?.textContent).toContain('Test Title')
+      expect(content?.getAttribute('role')).toBe('region')
+      expect(contentInner?.textContent).toContain('Test accordion content')
+      expect(contentInner).toBeInTheDocument()
+    })
+
+    test('renders icon correctly', async () => {
+      const container = await createAccordion()
+
+      const accordionItem = container.querySelector('pkt-accordion-item') as PktAccordionItem
+      await accordionItem.updateComplete
+
+      const icon = accordionItem.querySelector('pkt-icon')
+      expect(icon).toBeInTheDocument()
+      expect(icon?.getAttribute('name')).toBe('chevron-thin-down')
+      expect(icon).toHaveClass('pkt-accordion-item__icon')
+      expect(icon?.getAttribute('aria-hidden')).toBe('true')
+    })
+  })
+
+  describe('Properties and attributes', () => {
+    test('applies default properties correctly', async () => {
+      const container = await createAccordion()
+
+      const accordionItem = container.querySelector('pkt-accordion-item') as PktAccordionItem
+      await accordionItem.updateComplete
+
+      expect(accordionItem.defaultOpen).toBe(false)
+      expect(accordionItem.title).toBe('Test Title')
+      expect(accordionItem.skin).toBe(undefined)
+
+      const details = accordionItem.querySelector('details')
+      expect(details?.hasAttribute('open')).toBe(false)
+    })
+
+    test('applies different skin properties correctly', async () => {
+      const skins = ['borderless', 'outlined', 'beige', 'blue']
+
+      for (const skin of skins) {
+        const container = await createAccordion('', `skin="${skin}"`)
+        const accordionItem = container.querySelector('pkt-accordion-item') as PktAccordionItem
+        await accordionItem.updateComplete
+
+        expect(accordionItem.skin).toBe(skin)
+        expect(accordionItem.getAttribute('skin')).toBe(skin)
+
+        const details = accordionItem.querySelector('details')
+        expect(details).toHaveClass(`pkt-accordion-item--${skin}`)
+
+        // Cleanup for next iteration
+        container.remove()
+      }
+    })
+
+    test('handles defaultOpen property', async () => {
+      const container = await createAccordion('', '')
+
+      const accordionItem = container.querySelector('pkt-accordion-item') as PktAccordionItem
+
+      // Test that setting defaultOpen to true sets isOpen to true
+      accordionItem.defaultOpen = true
+      await accordionItem.updateComplete
+
+      // Manually trigger what firstUpdated should do
+      if (accordionItem.defaultOpen) {
+        accordionItem.isOpen = true
+      }
+      await accordionItem.updateComplete
+
+      expect(accordionItem.defaultOpen).toBe(true)
+      // When defaultOpen is true, isOpen should be set to true
+      expect(accordionItem.isOpen).toBe(true)
+
+      const details = accordionItem.querySelector('details')
+      expect(details?.hasAttribute('open')).toBe(true)
+    })
+
+    test('handles title property updates', async () => {
+      const container = await createAccordion()
+
+      const accordionItem = container.querySelector('pkt-accordion-item') as PktAccordionItem
+      await accordionItem.updateComplete
+
+      const summary = accordionItem.querySelector('summary')
+      expect(summary?.textContent).toContain('Test Title')
+
+      // Update title
+      accordionItem.title = 'Updated Title'
+      await accordionItem.updateComplete
+
+      expect(summary?.textContent).toContain('Updated Title')
+    })
+  })
+
+  describe('Interaction and state management', () => {
+    test('toggles open state when isOpen property changes', async () => {
+      const container = await createAccordion()
+
+      const accordionItem = container.querySelector('pkt-accordion-item') as PktAccordionItem
+      await accordionItem.updateComplete
+
+      const details = accordionItem.querySelector('details')
+      expect(details?.hasAttribute('open')).toBe(false)
+
+      // Set isOpen to true
+      accordionItem.isOpen = true
+      await accordionItem.updateComplete
+
+      expect(details?.hasAttribute('open')).toBe(true)
+
+      // Set isOpen to false
+      accordionItem.isOpen = false
+      await accordionItem.updateComplete
+
+      expect(details?.hasAttribute('open')).toBe(false)
+    })
+
+    test('respects name attribute for grouped behavior', async () => {
+      const container = await createAccordionWithMultipleItems('name="test-group"')
+
+      const accordionItems = container.querySelectorAll(
+        'pkt-accordion-item',
+      ) as NodeListOf<PktAccordionItem>
+      await Promise.all(Array.from(accordionItems).map((item) => item.updateComplete))
+
+      const details = Array.from(accordionItems)
+        .map((item) => item.querySelector('details'))
+        .filter(Boolean) as HTMLDetailsElement[]
+
+      // Open first item programmatically
+      accordionItems[0].isOpen = true
+      await Promise.all(Array.from(accordionItems).map((item) => item.updateComplete))
+
+      expect(details[0].hasAttribute('open')).toBe(true)
+      expect(details[1].hasAttribute('open')).toBe(false)
+      expect(details[2].hasAttribute('open')).toBe(false)
+
+      // Open second item (should close first due to grouping)
+      accordionItems[1].isOpen = true
+      await Promise.all(Array.from(accordionItems).map((item) => item.updateComplete))
+
+      // Note: If grouping behavior is implemented, first item should close
+      // For now, let's test basic functionality
+      expect(details[1].hasAttribute('open')).toBe(true)
+    })
+
+    test('allows multiple items open when no name grouping', async () => {
+      const container = await createAccordionWithMultipleItems()
+
+      const accordionItems = container.querySelectorAll(
+        'pkt-accordion-item',
+      ) as NodeListOf<PktAccordionItem>
+      await Promise.all(Array.from(accordionItems).map((item) => item.updateComplete))
+
+      const details = Array.from(accordionItems)
+        .map((item) => item.querySelector('details'))
+        .filter(Boolean) as HTMLDetailsElement[]
+
+      // Open first and third items programmatically
+      accordionItems[0].isOpen = true
+      accordionItems[2].isOpen = true
+      await Promise.all(Array.from(accordionItems).map((item) => item.updateComplete))
+
+      // Both should remain open since there's no grouping
+      expect(details[0].hasAttribute('open')).toBe(true)
+      expect(details[1].hasAttribute('open')).toBe(false)
+      expect(details[2].hasAttribute('open')).toBe(true)
+    })
+  })
+})
+
+describe('Integration tests', () => {
+  test('accordion and accordion items work together correctly', async () => {
+    const container = await createAccordionWithMultipleItems(
+      'skin="outlined" compact name="integration-test"',
+    )
+
+    const accordion = container.querySelector('pkt-accordion') as PktAccordion
+    const accordionItems = container.querySelectorAll(
+      'pkt-accordion-item',
+    ) as NodeListOf<PktAccordionItem>
+    await accordion.updateComplete
+    await Promise.all(Array.from(accordionItems).map((item) => item.updateComplete))
+
+    // Verify accordion properties
+    expect(accordion.skin).toBe('outlined')
+    expect(accordion.compact).toBe(true)
+    expect(accordion.name).toBe('integration-test')
+
+    const accordionDiv = accordion.shadowRoot?.querySelector('.pkt-accordion')
+    expect(accordionDiv).toHaveClass('pkt-accordion')
+    expect(accordionDiv).toHaveClass('pkt-accordion--outlined')
+    expect(accordionDiv).toHaveClass('pkt-accordion--compact')
+
+    // Verify all items have inherited name
+    accordionItems.forEach((item) => {
+      expect(item.getAttribute('name')).toBe('integration-test')
+    })
+
+    const details = Array.from(accordionItems)
+      .map((item) => item.querySelector('details'))
+      .filter(Boolean) as HTMLDetailsElement[]
+
+    // Open items programmatically to test functionality
+    accordionItems[0].isOpen = true
+    accordionItems[2].isOpen = true
+    await Promise.all(Array.from(accordionItems).map((item) => item.updateComplete))
+
+    // Test that properties are reflected to attributes
+    expect(details[0].hasAttribute('open')).toBe(true)
+    expect(details[2].hasAttribute('open')).toBe(true)
+  })
+
+  test('handles mixed open states correctly', async () => {
+    const container = document.createElement('div')
+    container.innerHTML = `
+      <pkt-accordion>
+        <pkt-accordion-item id="item1" title="Title 1" default-open>
+          Content 1
+        </pkt-accordion-item>
+        <pkt-accordion-item id="item2" title="Title 2">
+          Content 2
+        </pkt-accordion-item>
+      </pkt-accordion>
+    `
+    document.body.appendChild(container)
+    await waitForCustomElements()
+
+    const accordionItems = container.querySelectorAll(
+      'pkt-accordion-item',
+    ) as NodeListOf<PktAccordionItem>
+
+    // Set defaultOpen and isOpen programmatically to test the functionality
+    accordionItems[0].defaultOpen = true
+    accordionItems[0].isOpen = true
+
+    await Promise.all(Array.from(accordionItems).map((item) => item.updateComplete))
+
+    const details = Array.from(accordionItems)
+      .map((item) => item.querySelector('details'))
+      .filter(Boolean) as HTMLDetailsElement[]
+
+    // Item 1 should be open due to defaultOpen
+    expect(details[0].hasAttribute('open')).toBe(true)
+    // Item 2 should be closed
+    expect(details[1].hasAttribute('open')).toBe(false)
+  })
+})
+
+describe('Accessibility', () => {
+  test('has correct ARIA attributes', async () => {
+    const container = document.createElement('div')
+    container.innerHTML = `
+      <h2 id="accordion-heading">Main Accordion</h2>
+      <pkt-accordion aria-labelledby="accordion-heading">
+        <pkt-accordion-item id="test-item" title="Test Title">
+          Test content
+        </pkt-accordion-item>
+      </pkt-accordion>
+    `
+    document.body.appendChild(container)
+    await waitForCustomElements()
+
+    const accordion = container.querySelector('pkt-accordion') as PktAccordion
+    const accordionItem = container.querySelector('pkt-accordion-item') as PktAccordionItem
+    await accordion.updateComplete
+    await accordionItem.updateComplete
+
+    const accordionDiv = accordion.shadowRoot?.querySelector('.pkt-accordion')
+    const content = accordionItem.querySelector('.pkt-accordion-item__content')
+    const icon = accordionItem.querySelector('pkt-icon')
+
+    expect(accordionDiv?.getAttribute('aria-labelledby')).toBe('accordion-heading')
+    expect(content?.getAttribute('role')).toBe('region')
+    expect(icon?.getAttribute('aria-hidden')).toBe('true')
+  })
+
+  test('renders with no WCAG errors with axe - simple accordion', async () => {
+    const container = await createAccordion()
+
+    // Wait for all components to be fully rendered
+    const accordion = container.querySelector('pkt-accordion') as PktAccordion
+    const accordionItem = container.querySelector('pkt-accordion-item') as PktAccordionItem
+    await accordion.updateComplete
+    await accordionItem.updateComplete
+
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+
+  test('renders with no WCAG errors with axe - complex accordion', async () => {
+    const container = document.createElement('div')
+    container.innerHTML = `
+      <h2 id="accordion-heading">Test Accordion Heading</h2>
+      <pkt-accordion skin="outlined" compact aria-labelledby="accordion-heading" name="test-group">
+        <pkt-accordion-item id="item1" title="First Item" default-open>
+          <p>This is the first accordion item content with <a href="#">a link</a>.</p>
+        </pkt-accordion-item>
+        <pkt-accordion-item id="item2" title="Second Item">
+          <div>
+            <h3>Nested content</h3>
+            <ul>
+              <li>List item 1</li>
+              <li>List item 2</li>
+            </ul>
+          </div>
+        </pkt-accordion-item>
+        <pkt-accordion-item id="item3" title="Third Item" skin="blue">
+          <form>
+            <label for="test-input">Test Input:</label>
+            <input type="text" id="test-input" name="test" />
+            <button type="submit">Submit</button>
+          </form>
+        </pkt-accordion-item>
+      </pkt-accordion>
+    `
+    document.body.appendChild(container)
+    await waitForCustomElements()
+
+    const accordion = container.querySelector('pkt-accordion') as PktAccordion
+    const accordionItems = container.querySelectorAll(
+      'pkt-accordion-item',
+    ) as NodeListOf<PktAccordionItem>
+    await accordion.updateComplete
+    await Promise.all(Array.from(accordionItems).map((item) => item.updateComplete))
+
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+
+  test('renders with no WCAG errors with axe - multiple accordions', async () => {
+    const container = document.createElement('div')
+    container.innerHTML = `
+      <div>
+        <h2 id="first-accordion-heading">First Accordion</h2>
+        <pkt-accordion aria-labelledby="first-accordion-heading" name="first-group">
+          <pkt-accordion-item id="first-item1" title="First Group Item 1">
+            Content for first group
+          </pkt-accordion-item>
+          <pkt-accordion-item id="first-item2" title="First Group Item 2">
+            More content for first group
+          </pkt-accordion-item>
+        </pkt-accordion>
+
+        <h2 id="second-accordion-heading">Second Accordion</h2>
+        <pkt-accordion aria-labelledby="second-accordion-heading" name="second-group" skin="beige">
+          <pkt-accordion-item id="second-item1" title="Second Group Item 1">
+            Content for second group
+          </pkt-accordion-item>
+          <pkt-accordion-item id="second-item2" title="Second Group Item 2">
+            More content for second group
+          </pkt-accordion-item>
+        </pkt-accordion>
+      </div>
+    `
+    document.body.appendChild(container)
+    await waitForCustomElements()
+
+    const accordions = container.querySelectorAll('pkt-accordion') as NodeListOf<PktAccordion>
+    const accordionItems = container.querySelectorAll(
+      'pkt-accordion-item',
+    ) as NodeListOf<PktAccordionItem>
+    await Promise.all(Array.from(accordions).map((acc) => acc.updateComplete))
+    await Promise.all(Array.from(accordionItems).map((item) => item.updateComplete))
+
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+})