@oslokommune/punkt-elements 13.8.0 → 13.9.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "13.8.0",
+  "version": "13.9.1",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -29,6 +29,7 @@
   "dependencies": {
     "@date-fns/tz": "^1.2.0",
     "@lit-labs/router": "^0.1.3",
+    "@lit/context": "^1.1.6",
     "@types/node": "^20.17.30",
     "date-fns": "^4.1.0",
     "dialog-polyfill": "^0.5.6",
@@ -43,7 +44,7 @@
     "@babel/preset-env": "^7.28.3",
     "@babel/preset-typescript": "^7.25.9",
     "@oslokommune/punkt-assets": "^13.6.3",
-    "@oslokommune/punkt-css": "^13.6.15",
+    "@oslokommune/punkt-css": "^13.9.1",
     "@testing-library/jest-dom": "^6.6.3",
     "@typescript-eslint/eslint-plugin": "^8.46.0",
     "@typescript-eslint/parser": "^8.46.0",
@@ -80,5 +81,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "291eaf91a93ce286149605e36547068da3bf90e9"
+  "gitHead": "44dcfeeeecbe7f3d5404f3d77f2de46689ccb80e"
 }

package/src/components/index.ts

@@ -25,6 +25,7 @@ export { PktRadioButton } from '@/components/radiobutton'
 // TODO: Avklar om RadioButton kan eksporteres som *kun* PktRadiobutton
 export { PktRadioButton as PktRadiobutton } from '@/components/radiobutton'
 export { PktTag } from '@/components/tag'
+export { PktTabs, PktTabItem } from '@/components/tabs'
 export { PktTextarea } from '@/components/textarea'
 export { PktTextinput } from '@/components/textinput'
 export { PktSelect } from '@/components/select'
@@ -62,6 +63,8 @@ export type { IPktHeading, TPktHeadingSize, TPktHeadingLevel } from '@/component
 
 export type { TTagSkin, TTagType } from '@/components/tag'
 
+export type { IPktTabs, IPktTabItem, TSkin as TTabItemSkin } from '@/components/tabs'
+
 export type { TSelectOption } from '@/components/select'
 
 export type { IPktBackLink } from '@/components/backlink'

package/src/components/tabs/index.ts

@@ -0,0 +1,8 @@
+import PktTabs from './tabs'
+import type { IPktTabs } from './tabs'
+import PktTabItem from './tabitem'
+import type { IPktTabItem, TSkin } from './tabitem'
+
+export { PktTabs, PktTabItem }
+export type { IPktTabs, IPktTabItem, TSkin }
+export default PktTabs

package/src/components/tabs/tabitem.ts

@@ -0,0 +1,117 @@
+import { PktElement } from '@/base-elements/element'
+import { PktSlotController } from '@/controllers/pkt-slot-controller'
+import { html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { consume } from '@lit/context'
+import { createRef, Ref, ref } from 'lit/directives/ref.js'
+import { ifDefined } from 'lit/directives/if-defined.js'
+import { tabsContext, type TabsContext } from './tabs-context'
+
+export type TSkin = 'blue' | 'green' | 'red' | 'beige' | 'yellow' | 'grey' | 'gray' | 'blue-light'
+
+export interface IPktTabItem {
+  active?: boolean
+  href?: string
+  icon?: string
+  controls?: string
+  tag?: string
+  tagSkin?: TSkin
+  index?: number
+}
+
+@customElement('pkt-tab-item')
+export class PktTabItem extends PktElement<IPktTabItem> implements IPktTabItem {
+  @property({ type: Boolean, reflect: true }) active: boolean = false
+  @property({ type: String, reflect: true }) href: string = ''
+  @property({ type: String, reflect: true }) icon: string = ''
+  @property({ type: String, reflect: true }) controls: string = ''
+  @property({ type: String, reflect: true }) tag: string = ''
+  @property({ type: String, reflect: true, attribute: 'tag-skin' }) tagSkin: TSkin = 'blue'
+  @property({ type: Number, reflect: true }) index: number = 0
+
+  // Consume context from parent pkt-tabs
+  @consume({ context: tabsContext, subscribe: true })
+  @property({ attribute: false })
+  context?: TabsContext
+
+  elementRef: Ref<HTMLAnchorElement | HTMLButtonElement> = createRef()
+  defaultSlot: Ref<HTMLElement> = createRef()
+  slotController!: PktSlotController
+
+  constructor() {
+    super()
+    this.slotController = new PktSlotController(this, this.defaultSlot)
+  }
+
+  connectedCallback() {
+    super.connectedCallback()
+    // Wait for element to be fully initialized
+    this.updateComplete.then(() => {
+      if (this.elementRef.value && this.context) {
+        this.context.registerTab(this.elementRef.value, this.index)
+      }
+    })
+  }
+
+  private handleClick() {
+    if (this.context) {
+      this.context.handleClick(this.index)
+    }
+  }
+
+  private handleKeyUp(event: KeyboardEvent) {
+    if (this.context) {
+      this.context.handleKeyUp(event, this.index)
+    }
+  }
+
+  render() {
+    const useArrowNav = this.context?.useArrowNav ?? true
+    const commonClasses = this.active ? 'active' : ''
+    const role = useArrowNav ? 'tab' : undefined
+    const ariaSelected = useArrowNav ? this.active : undefined
+    const tabIndex = this.active || !useArrowNav ? undefined : -1
+
+    const content = html`
+      ${this.icon ? html`<pkt-icon name=${this.icon} class="pkt-icon--small"></pkt-icon>` : ''}
+      <span ${ref(this.defaultSlot)}></span>
+      ${this.tag ? html`<pkt-tag skin=${this.tagSkin} size="small">${this.tag}</pkt-tag>` : ''}
+    `
+
+    if (this.href) {
+      return html`
+        <a
+          ${ref(this.elementRef)}
+          href=${this.href}
+          class="pkt-tabs__link ${commonClasses}"
+          role=${ifDefined(role)}
+          aria-selected=${ifDefined(ariaSelected)}
+          aria-controls=${ifDefined(this.controls || undefined)}
+          tabindex=${ifDefined(tabIndex)}
+          @click=${this.handleClick}
+          @keyup=${this.handleKeyUp}
+        >
+          ${content}
+        </a>
+      `
+    }
+
+    return html`
+      <button
+        ${ref(this.elementRef)}
+        type="button"
+        class="pkt-tabs__button pkt-link-button ${commonClasses}"
+        role=${ifDefined(role)}
+        aria-selected=${ifDefined(ariaSelected)}
+        aria-controls=${ifDefined(this.controls || undefined)}
+        tabindex=${ifDefined(tabIndex)}
+        @click=${this.handleClick}
+        @keyup=${this.handleKeyUp}
+      >
+        ${content}
+      </button>
+    `
+  }
+}
+
+export default PktTabItem

package/src/components/tabs/tabs-context.ts

@@ -0,0 +1,25 @@
+import { createContext } from '@lit/context'
+
+export interface TabsContext {
+  /**
+   * Whether arrow navigation is enabled (computed from arrowNav && !disableArrowNav)
+   */
+  useArrowNav: boolean
+
+  /**
+   * Register a tab item with the parent tabs container
+   */
+  registerTab: (element: HTMLElement, index: number) => void
+
+  /**
+   * Handle click event from a tab item
+   */
+  handleClick: (index: number) => void
+
+  /**
+   * Handle keyboard event from a tab item
+   */
+  handleKeyUp: (event: KeyboardEvent, index: number) => void
+}
+
+export const tabsContext = createContext<TabsContext>(Symbol('pkt-tabs-context'))

package/src/components/tabs/tabs.test.ts

@@ -0,0 +1,495 @@
+import '@testing-library/jest-dom'
+import { axe, toHaveNoViolations } from 'jest-axe'
+import { vi } from 'vitest'
+
+expect.extend(toHaveNoViolations)
+
+// Import the components
+import './tabs'
+import './tabitem'
+
+// Import component classes
+import { PktTabs } from './tabs'
+
+const waitForCustomElements = async () => {
+  await Promise.all([
+    customElements.whenDefined('pkt-tabs'),
+    customElements.whenDefined('pkt-tab-item'),
+  ])
+}
+
+// Helper function to create tabs markup
+const createTabs = async (tabsProps = '', tabItemsMarkup = '') => {
+  const container = document.createElement('div')
+  const defaultMarkup = `
+    <pkt-tab-item index="0" active>Tab 1</pkt-tab-item>
+    <pkt-tab-item index="1">Tab 2</pkt-tab-item>
+    <pkt-tab-item index="2">Tab 3</pkt-tab-item>
+  `
+  container.innerHTML = `
+    <pkt-tabs ${tabsProps}>
+      ${tabItemsMarkup || defaultMarkup}
+    </pkt-tabs>
+  `
+  document.body.appendChild(container)
+  await waitForCustomElements()
+
+  const tabs = container.querySelector('pkt-tabs') as PktTabs
+  await tabs.updateComplete
+
+  // Wait for tab items to be updated
+  const tabItems = container.querySelectorAll('pkt-tab-item')
+  await Promise.all(
+    Array.from(tabItems).map(
+      (item) => (item as HTMLElement & { updateComplete: Promise<boolean> }).updateComplete,
+    ),
+  )
+
+  return container
+}
+
+// Cleanup after each test
+afterEach(() => {
+  document.body.innerHTML = ''
+})
+
+describe('PktTabs', () => {
+  describe('Rendering and basic functionality', () => {
+    test('renders without errors', async () => {
+      const container = await createTabs()
+      const tabs = container.querySelector('pkt-tabs') as PktTabs
+      expect(tabs).toBeInTheDocument()
+    })
+
+    test('renders tab items from children', async () => {
+      const container = await createTabs()
+      const tabItems = container.querySelectorAll('pkt-tab-item')
+      expect(tabItems).toHaveLength(3)
+      expect(tabItems[0].textContent?.trim()).toBe('Tab 1')
+      expect(tabItems[1].textContent?.trim()).toBe('Tab 2')
+      expect(tabItems[2].textContent?.trim()).toBe('Tab 3')
+    })
+
+    test('applies active class to the active tab', async () => {
+      const container = await createTabs()
+      const tabItems = container.querySelectorAll('pkt-tab-item')
+
+      const firstTabButton = tabItems[0].querySelector('button, a')
+      const secondTabButton = tabItems[1].querySelector('button, a')
+
+      expect(firstTabButton).toHaveClass('active')
+      expect(secondTabButton).not.toHaveClass('active')
+    })
+
+    test('renders as button when no href is provided', async () => {
+      const container = await createTabs()
+      const firstTabItem = container.querySelector('pkt-tab-item')
+      const button = firstTabItem?.querySelector('button')
+      const link = firstTabItem?.querySelector('a')
+
+      expect(button).toBeInTheDocument()
+      expect(link).not.toBeInTheDocument()
+      expect(button?.tagName).toBe('BUTTON')
+    })
+
+    test('renders as link when href is provided', async () => {
+      const container = await createTabs(
+        '',
+        '<pkt-tab-item index="0" href="/first">First Tab</pkt-tab-item>',
+      )
+      const firstTabItem = container.querySelector('pkt-tab-item')
+      const link = firstTabItem?.querySelector('a')
+      const button = firstTabItem?.querySelector('button')
+
+      expect(link).toBeInTheDocument()
+      expect(button).not.toBeInTheDocument()
+      expect(link?.getAttribute('href')).toBe('/first')
+    })
+
+    test('applies default arrowNav property correctly', async () => {
+      const container = await createTabs()
+      const tabs = container.querySelector('pkt-tabs') as PktTabs
+      await tabs.updateComplete
+
+      expect(tabs.arrowNav).toBe(true)
+      expect(tabs.disableArrowNav).toBe(false)
+    })
+
+    test('applies custom arrowNav property correctly', async () => {
+      const container = await createTabs('disable-arrow-nav')
+      const tabs = container.querySelector('pkt-tabs') as PktTabs
+      await tabs.updateComplete
+
+      // When disable-arrow-nav is present, effective arrowNav should be false
+      expect(tabs.disableArrowNav).toBe(true)
+      expect(tabs.arrowNav).toBe(true) // arrowNav prop itself is still true by default
+    })
+
+    test('applies disableArrowNav property correctly', async () => {
+      const container = await createTabs('disable-arrow-nav="true"')
+      const tabs = container.querySelector('pkt-tabs') as PktTabs
+      await tabs.updateComplete
+
+      expect(tabs.disableArrowNav).toBe(true)
+    })
+  })
+
+  describe('Tab item props', () => {
+    test('renders icon when icon prop is provided', async () => {
+      const container = await createTabs(
+        '',
+        '<pkt-tab-item index="0" icon="user">Tab with icon</pkt-tab-item>',
+      )
+      const icon = container.querySelector('pkt-icon')
+      expect(icon).toBeInTheDocument()
+      expect(icon?.getAttribute('name')).toBe('user')
+      expect(icon).toHaveClass('pkt-icon--small')
+    })
+
+    test('renders tag when tag prop is provided', async () => {
+      const container = await createTabs(
+        '',
+        '<pkt-tab-item index="0" tag="New" tag-skin="blue">Tab with tag</pkt-tab-item>',
+      )
+      const tag = container.querySelector('pkt-tag')
+      expect(tag).toBeInTheDocument()
+      expect(tag?.textContent?.trim()).toBe('New')
+      expect(tag?.getAttribute('skin')).toBe('blue')
+    })
+
+    test('applies controls attribute when provided', async () => {
+      const container = await createTabs(
+        '',
+        '<pkt-tab-item index="0" controls="panel-1">Tab 1</pkt-tab-item>',
+      )
+      const button = container.querySelector('button')
+      expect(button?.getAttribute('aria-controls')).toBe('panel-1')
+    })
+  })
+
+  describe('Click interactions', () => {
+    test('dispatches tab-selected event when tab is clicked', async () => {
+      const container = await createTabs()
+      const tabs = container.querySelector('pkt-tabs') as PktTabs
+
+      const eventListener = vi.fn()
+      tabs.addEventListener('tab-selected', eventListener)
+
+      const secondTabItem = container.querySelectorAll('pkt-tab-item')[1]
+      const button = secondTabItem.querySelector('button')
+      button?.click()
+
+      expect(eventListener).toHaveBeenCalled()
+      expect(eventListener.mock.calls[0][0].detail.index).toBe(1)
+    })
+
+    test('dispatches tab-selected event with correct index for each tab', async () => {
+      const container = await createTabs()
+      const tabs = container.querySelector('pkt-tabs') as PktTabs
+
+      const eventListener = vi.fn()
+      tabs.addEventListener('tab-selected', eventListener)
+
+      const tabItems = container.querySelectorAll('pkt-tab-item')
+
+      // Click first tab
+      tabItems[0].querySelector('button')?.click()
+      expect(eventListener).toHaveBeenCalledTimes(1)
+      expect(eventListener.mock.calls[0][0].detail.index).toBe(0)
+
+      // Click third tab
+      tabItems[2].querySelector('button')?.click()
+      expect(eventListener).toHaveBeenCalledTimes(2)
+      expect(eventListener.mock.calls[1][0].detail.index).toBe(2)
+    })
+  })
+
+  describe('Keyboard navigation', () => {
+    test('handles ArrowRight keyboard navigation', async () => {
+      const container = await createTabs()
+      const tabItems = container.querySelectorAll('pkt-tab-item')
+
+      const firstButton = tabItems[0].querySelector('button') as HTMLButtonElement
+      const secondButton = tabItems[1].querySelector('button') as HTMLButtonElement
+
+      firstButton.focus()
+      expect(document.activeElement).toBe(firstButton)
+
+      // Simulate ArrowRight key
+      const keyEvent = new KeyboardEvent('keyup', { code: 'ArrowRight', bubbles: true })
+      firstButton.dispatchEvent(keyEvent)
+
+      // Wait for focus to change
+      await new Promise((resolve) => setTimeout(resolve, 50))
+
+      expect(document.activeElement).toBe(secondButton)
+    })
+
+    test('handles ArrowLeft keyboard navigation', async () => {
+      const container = await createTabs()
+      const tabItems = container.querySelectorAll('pkt-tab-item')
+
+      const firstButton = tabItems[0].querySelector('button') as HTMLButtonElement
+      const secondButton = tabItems[1].querySelector('button') as HTMLButtonElement
+
+      secondButton.focus()
+      expect(document.activeElement).toBe(secondButton)
+
+      // Simulate ArrowLeft key
+      const keyEvent = new KeyboardEvent('keyup', { code: 'ArrowLeft', bubbles: true })
+      secondButton.dispatchEvent(keyEvent)
+
+      // Wait for focus to change
+      await new Promise((resolve) => setTimeout(resolve, 50))
+
+      expect(document.activeElement).toBe(firstButton)
+    })
+
+    test('stays on last tab when navigating past it with ArrowRight', async () => {
+      const container = await createTabs()
+      const tabItems = container.querySelectorAll('pkt-tab-item')
+
+      const thirdButton = tabItems[2].querySelector('button') as HTMLButtonElement
+
+      thirdButton.focus()
+      expect(document.activeElement).toBe(thirdButton)
+
+      // Simulate ArrowRight key
+      const keyEvent = new KeyboardEvent('keyup', { code: 'ArrowRight', bubbles: true })
+      thirdButton.dispatchEvent(keyEvent)
+
+      // Wait
+      await new Promise((resolve) => setTimeout(resolve, 50))
+
+      // Should stay on third tab
+      expect(document.activeElement).toBe(thirdButton)
+    })
+
+    test('stays on first tab when navigating before it with ArrowLeft', async () => {
+      const container = await createTabs()
+      const tabItems = container.querySelectorAll('pkt-tab-item')
+
+      const firstButton = tabItems[0].querySelector('button') as HTMLButtonElement
+
+      firstButton.focus()
+      expect(document.activeElement).toBe(firstButton)
+
+      // Simulate ArrowLeft key
+      const keyEvent = new KeyboardEvent('keyup', { code: 'ArrowLeft', bubbles: true })
+      firstButton.dispatchEvent(keyEvent)
+
+      // Wait
+      await new Promise((resolve) => setTimeout(resolve, 50))
+
+      // Should stay on first tab
+      expect(document.activeElement).toBe(firstButton)
+    })
+
+    test('dispatches tab-selected event when Space key is pressed', async () => {
+      const container = await createTabs()
+      const tabs = container.querySelector('pkt-tabs') as PktTabs
+
+      const eventListener = vi.fn()
+      tabs.addEventListener('tab-selected', eventListener)
+
+      const secondTabItem = container.querySelectorAll('pkt-tab-item')[1]
+      const button = secondTabItem.querySelector('button') as HTMLButtonElement
+
+      // Simulate Space key
+      const keyEvent = new KeyboardEvent('keyup', { code: 'Space', bubbles: true })
+      button.dispatchEvent(keyEvent)
+
+      // Wait
+      await new Promise((resolve) => setTimeout(resolve, 50))
+
+      expect(eventListener).toHaveBeenCalled()
+      expect(eventListener.mock.calls[0][0].detail.index).toBe(1)
+    })
+
+    test('dispatches tab-selected event when ArrowDown key is pressed', async () => {
+      const container = await createTabs()
+      const tabs = container.querySelector('pkt-tabs') as PktTabs
+
+      const eventListener = vi.fn()
+      tabs.addEventListener('tab-selected', eventListener)
+
+      const secondTabItem = container.querySelectorAll('pkt-tab-item')[1]
+      const button = secondTabItem.querySelector('button') as HTMLButtonElement
+
+      // Simulate ArrowDown key
+      const keyEvent = new KeyboardEvent('keyup', { code: 'ArrowDown', bubbles: true })
+      button.dispatchEvent(keyEvent)
+
+      // Wait
+      await new Promise((resolve) => setTimeout(resolve, 50))
+
+      expect(eventListener).toHaveBeenCalled()
+      expect(eventListener.mock.calls[0][0].detail.index).toBe(1)
+    })
+
+    test('disables keyboard navigation when arrowNav is false', async () => {
+      const container = await createTabs('disable-arrow-nav')
+      const tabs = container.querySelector('pkt-tabs') as PktTabs
+      await tabs.updateComplete
+
+      const tabItems = container.querySelectorAll('pkt-tab-item')
+
+      const firstButton = tabItems[0].querySelector('button') as HTMLButtonElement
+
+      firstButton.focus()
+      expect(document.activeElement).toBe(firstButton)
+
+      // Simulate ArrowRight key
+      const keyEvent = new KeyboardEvent('keyup', { code: 'ArrowRight', bubbles: true })
+      firstButton.dispatchEvent(keyEvent)
+
+      // Wait
+      await new Promise((resolve) => setTimeout(resolve, 50))
+
+      // Should NOT move to second tab
+      expect(document.activeElement).toBe(firstButton)
+    })
+
+    test('disables keyboard navigation when disableArrowNav is true', async () => {
+      const container = await createTabs('disable-arrow-nav="true"')
+      const tabItems = container.querySelectorAll('pkt-tab-item')
+
+      const firstButton = tabItems[0].querySelector('button') as HTMLButtonElement
+
+      firstButton.focus()
+      expect(document.activeElement).toBe(firstButton)
+
+      // Simulate ArrowRight key
+      const keyEvent = new KeyboardEvent('keyup', { code: 'ArrowRight', bubbles: true })
+      firstButton.dispatchEvent(keyEvent)
+
+      // Wait
+      await new Promise((resolve) => setTimeout(resolve, 50))
+
+      // Should NOT move to second tab
+      expect(document.activeElement).toBe(firstButton)
+    })
+
+    test('disableArrowNav overrides arrowNav when both are set', async () => {
+      const container = await createTabs('arrow-nav="true" disable-arrow-nav="true"')
+      const tabItems = container.querySelectorAll('pkt-tab-item')
+
+      const firstButton = tabItems[0].querySelector('button') as HTMLButtonElement
+
+      firstButton.focus()
+
+      // Simulate ArrowRight key
+      const keyEvent = new KeyboardEvent('keyup', { code: 'ArrowRight', bubbles: true })
+      firstButton.dispatchEvent(keyEvent)
+
+      // Wait
+      await new Promise((resolve) => setTimeout(resolve, 50))
+
+      // Should NOT move to second tab (disableArrowNav overrides arrowNav)
+      expect(document.activeElement).toBe(firstButton)
+    })
+  })
+
+  describe('Accessibility', () => {
+    test('should not have any accessibility violations', async () => {
+      const container = await createTabs()
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    test('sets correct ARIA attributes on buttons when arrowNav is true', async () => {
+      const container = await createTabs()
+      const tabItems = container.querySelectorAll('pkt-tab-item')
+
+      const firstButton = tabItems[0].querySelector('button')
+      const secondButton = tabItems[1].querySelector('button')
+
+      expect(firstButton).toHaveAttribute('role', 'tab')
+      expect(firstButton).toHaveAttribute('aria-selected', 'true')
+      expect(secondButton).toHaveAttribute('role', 'tab')
+      expect(secondButton).toHaveAttribute('aria-selected', 'false')
+    })
+
+    test('does not set tab role or aria-selected on links when arrowNav is false', async () => {
+      const container = await createTabs(
+        'disable-arrow-nav',
+        `
+        <pkt-tab-item index="0" href="/" active>Home</pkt-tab-item>
+        <pkt-tab-item index="1" href="/about">About</pkt-tab-item>
+      `,
+      )
+      await new Promise((resolve) => setTimeout(resolve, 50))
+      const tabItems = container.querySelectorAll('pkt-tab-item')
+
+      const homeLink = tabItems[0].querySelector('a')
+      const aboutLink = tabItems[1].querySelector('a')
+
+      expect(homeLink).not.toHaveAttribute('role')
+      expect(homeLink).not.toHaveAttribute('aria-selected')
+      expect(aboutLink).not.toHaveAttribute('role')
+      expect(aboutLink).not.toHaveAttribute('aria-selected')
+    })
+
+    test('works with href links when arrowNav is false (no WCAG violations)', async () => {
+      const container = await createTabs(
+        'disable-arrow-nav',
+        `
+        <pkt-tab-item index="0" href="/" active>Home</pkt-tab-item>
+        <pkt-tab-item index="1" href="/about">About</pkt-tab-item>
+      `,
+      )
+      await new Promise((resolve) => setTimeout(resolve, 50))
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    test('sets role="tablist" when arrowNav is true', async () => {
+      const container = await createTabs()
+      const tabs = container.querySelector('pkt-tabs') as PktTabs
+      const tabList = tabs.querySelector('.pkt-tabs__list')
+
+      expect(tabList).toHaveAttribute('role', 'tablist')
+    })
+
+    test('sets role="navigation" when arrowNav is false', async () => {
+      const container = await createTabs('disable-arrow-nav')
+      const tabs = container.querySelector('pkt-tabs') as PktTabs
+      await tabs.updateComplete
+      const tabList = tabs.querySelector('.pkt-tabs__list')
+
+      expect(tabList).toHaveAttribute('role', 'navigation')
+    })
+  })
+
+  describe('Multiple tab items', () => {
+    test('works with many tab items', async () => {
+      const container = await createTabs(
+        '',
+        `
+        <pkt-tab-item index="0" active>Tab 1</pkt-tab-item>
+        <pkt-tab-item index="1">Tab 2</pkt-tab-item>
+        <pkt-tab-item index="2">Tab 3</pkt-tab-item>
+        <pkt-tab-item index="3">Tab 4</pkt-tab-item>
+        <pkt-tab-item index="4">Tab 5</pkt-tab-item>
+      `,
+      )
+
+      const tabItems = container.querySelectorAll('pkt-tab-item')
+      expect(tabItems).toHaveLength(5)
+
+      // Test navigation from first to last
+      const firstButton = tabItems[0].querySelector('button') as HTMLButtonElement
+      firstButton.focus()
+
+      // Navigate through all tabs
+      for (let i = 0; i < 4; i++) {
+        const keyEvent = new KeyboardEvent('keyup', { code: 'ArrowRight', bubbles: true })
+        ;(document.activeElement as HTMLElement).dispatchEvent(keyEvent)
+        await new Promise((resolve) => setTimeout(resolve, 50))
+      }
+
+      const lastButton = tabItems[4].querySelector('button') as HTMLButtonElement
+      expect(document.activeElement).toBe(lastButton)
+    })
+  })
+})