@oslokommune/punkt-elements 13.7.0 → 13.9.0

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)
+    })
+  })
+})

package/src/components/tabs/tabs.ts

@@ -0,0 +1,103 @@
+import { PktElement } from '@/base-elements/element'
+import { PktSlotController } from '@/controllers/pkt-slot-controller'
+import { html, PropertyValues } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+import { provide } from '@lit/context'
+import { createRef, Ref, ref } from 'lit/directives/ref.js'
+import { tabsContext, type TabsContext } from './tabs-context'
+
+export interface IPktTabs {
+  arrowNav?: boolean
+  disableArrowNav?: boolean
+}
+
+@customElement('pkt-tabs')
+export class PktTabs extends PktElement<IPktTabs> implements IPktTabs {
+  @property({ type: Boolean, reflect: true, attribute: 'arrow-nav' }) arrowNav: boolean = true
+  @property({ type: Boolean, reflect: true, attribute: 'disable-arrow-nav' })
+  disableArrowNav: boolean = false
+
+  @state() private tabRefs: Array<HTMLAnchorElement | HTMLButtonElement | null> = []
+  @state() private tabCount: number = 0
+
+  private get useArrowNav(): boolean {
+    return this.arrowNav && !this.disableArrowNav
+  }
+
+  defaultSlot: Ref<HTMLElement> = createRef()
+  slotController!: PktSlotController
+
+  constructor() {
+    super()
+    this.slotController = new PktSlotController(this, this.defaultSlot)
+  }
+
+  // Provide context to child tab items
+  @provide({ context: tabsContext })
+  @state()
+  private context: TabsContext = {
+    useArrowNav: this.useArrowNav,
+    registerTab: this.registerTab.bind(this),
+    handleClick: this.handleClick.bind(this),
+    handleKeyUp: this.handleKeyUp.bind(this),
+  }
+
+  // Update context when properties change
+  updated(changedProperties: PropertyValues) {
+    if (changedProperties.has('arrowNav') || changedProperties.has('disableArrowNav')) {
+      this.context = {
+        ...this.context,
+        useArrowNav: this.useArrowNav,
+      }
+    }
+  }
+
+  private registerTab(element: HTMLElement, index: number) {
+    this.tabRefs[index] = element as HTMLAnchorElement | HTMLButtonElement
+    this.tabCount = Math.max(this.tabCount, index + 1)
+  }
+
+  private handleClick(index: number) {
+    this.dispatchEvent(
+      new CustomEvent('tab-selected', {
+        detail: { index },
+        bubbles: true,
+        composed: true,
+      }),
+    )
+  }
+
+  private handleKeyUp(keyEvent: KeyboardEvent, index: number) {
+    if (!this.useArrowNav) return
+
+    if (keyEvent.code === 'ArrowLeft' && index !== 0) {
+      this.tabRefs[index - 1]?.focus()
+    }
+
+    if (keyEvent.code === 'ArrowRight' && index < this.tabCount - 1) {
+      this.tabRefs[index + 1]?.focus()
+    }
+
+    if (keyEvent.code === 'ArrowDown' || keyEvent.code === 'Space') {
+      this.dispatchEvent(
+        new CustomEvent('tab-selected', {
+          detail: { index },
+          bubbles: true,
+          composed: true,
+        }),
+      )
+    }
+  }
+
+  render() {
+    const role = this.useArrowNav ? 'tablist' : 'navigation'
+
+    return html`
+      <div class="pkt-tabs">
+        <div class="pkt-tabs__list" role=${role} ${ref(this.defaultSlot)}></div>
+      </div>
+    `
+  }
+}
+
+export default PktTabs