@oslokommune/punkt-react 15.4.6 → 16.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "15.4.6",
+  "version": "16.0.0",
   "description": "React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -39,7 +39,7 @@
   "dependencies": {
     "@lit-labs/ssr-dom-shim": "^1.2.1",
     "@lit/react": "^1.0.7",
-    "@oslokommune/punkt-elements": "^15.4.5",
+    "@oslokommune/punkt-elements": "^16.0.0",
     "classnames": "^2.5.1",
     "prettier": "^3.3.3",
     "react-hook-form": "^7.53.0"
@@ -49,8 +49,8 @@
     "@eslint/compat": "^2.0.2",
     "@eslint/eslintrc": "^3.3.3",
     "@eslint/js": "^9.37.0",
-    "@oslokommune/punkt-assets": "^15.0.0",
-    "@oslokommune/punkt-css": "^15.4.4",
+    "@oslokommune/punkt-assets": "^16.0.0",
+    "@oslokommune/punkt-css": "^16.0.0",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
@@ -109,5 +109,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "03d974d6df2ab807ecb13eb54ec6073234bab2b5"
+  "gitHead": "b3e88b7c06f9a63c2e911693af6b9860cd73c27b"
 }

package/src/components/accordion/Accordion.test.tsx

@@ -2,6 +2,7 @@ import '@testing-library/jest-dom'
 
 import { fireEvent,render, screen } from '@testing-library/react'
 import { axe, toHaveNoViolations } from 'jest-axe'
+import { vi } from 'vitest'
 import { createRef } from 'react'
 
 import { PktAccordion } from './Accordion'
@@ -22,7 +23,7 @@ describe('PktAccordion', () => {
   })
 
   test('renders children', () => {
-    const mockToggleOpen = jest.fn()
+    const mockToggleOpen = vi.fn()
     render(
       <PktAccordion>
         <PktAccordionItem title="Title 1" id="item1" onClick={mockToggleOpen}>
@@ -144,7 +145,7 @@ describe('PktAccordionItem', () => {
   })
 
   test('calls onClick handler', () => {
-    const mockOnClick = jest.fn()
+    const mockOnClick = vi.fn()
     const { container } = render(
       <PktAccordionItem title="Title" id="item1" onClick={mockOnClick}>
         Content

package/src/components/alert/Alert.test.tsx

@@ -2,6 +2,7 @@ import '@testing-library/jest-dom'
 
 import { cleanup, fireEvent, render, waitFor } from '@testing-library/react'
 import { axe, toHaveNoViolations } from 'jest-axe'
+import { vi } from 'vitest'
 
 import { PktAlert } from './Alert'
 
@@ -11,7 +12,7 @@ afterEach(cleanup)
 
 describe('PktAlert', () => {
   test('calls onClose when close button is clicked', async () => {
-    const onClose = jest.fn()
+    const onClose = vi.fn()
     const { getByLabelText } = render(
       <PktAlert closeAlert={true} onClose={onClose}>
         Hello World

package/src/components/backlink/BackLink.test.tsx

@@ -1,5 +1,6 @@
 import { fireEvent, render } from '@testing-library/react'
 import { axe, toHaveNoViolations } from 'jest-axe'
+import { vi } from 'vitest'
 
 import { PktBackLink } from './BackLink'
 
@@ -23,7 +24,7 @@ describe('PktBackLink', () => {
   })
 
   it('calls onClick when clicked', async () => {
-    const onClickMock = jest.fn()
+    const onClickMock = vi.fn()
     const { getByText } = render(<PktBackLink text="Back" onClick={onClickMock} />)
     await window.customElements.whenDefined('pkt-backlink')
     const link = getByText('Back')

package/src/components/button/Button.test.tsx

@@ -3,6 +3,7 @@ import '@testing-library/jest-dom'
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { axe, toHaveNoViolations } from 'jest-axe'
+import { vi } from 'vitest'
 import { createRef } from 'react'
 import { useForm } from 'react-hook-form'
 
@@ -13,7 +14,7 @@ expect.extend(toHaveNoViolations)
 // Mock Form Component
 const MockForm = ({ buttonPosition }: { buttonPosition: 'inside' | 'outside' }) => {
   const { register, handleSubmit, reset } = useForm()
-  const onSubmit = jest.fn()
+  const onSubmit = vi.fn()
 
   return (
     <>
@@ -95,7 +96,7 @@ test('forwardRef works correctly', async () => {
 })
 
 test('PktButton triggers click when focused and enter is pressed', async () => {
-  const handleClick = jest.fn()
+  const handleClick = vi.fn()
   render(<PktButton onClick={handleClick}>trøkk her</PktButton>)
 
   const button = screen.getByRole('button', { name: /trøkk her/i })
@@ -108,7 +109,7 @@ test('PktButton triggers click when focused and enter is pressed', async () => {
 })
 
 test('PktButton triggers click when focused and space is pressed', async () => {
-  const handleClick = jest.fn()
+  const handleClick = vi.fn()
   render(<PktButton onClick={handleClick}>Trøkk igjen</PktButton>)
 
   const button = screen.getByRole('button')

package/src/components/calendar/Calendar.interaction.test.tsx

@@ -1,5 +1,6 @@
 import '@testing-library/jest-dom'
 import { render, fireEvent, act } from '@testing-library/react'
+import { vi } from 'vitest'
 
 import { PktCalendar, IPktCalendar } from './Calendar'
 
@@ -41,7 +42,7 @@ describe('PktCalendar', () => {
     })
 
     test('handles escape key', () => {
-      const onClose = jest.fn()
+      const onClose = vi.fn()
       const { container } = createCalendar({ onClose })
 
       const calendarEl = container.querySelector('.pkt-calendar') as HTMLElement

package/src/components/checkbox/Checkbox.test.tsx

@@ -2,6 +2,7 @@ import '@testing-library/jest-dom'
 
 import { fireEvent, render, screen } from '@testing-library/react'
 import { axe, toHaveNoViolations } from 'jest-axe'
+import { vi } from 'vitest'
 
 import { PktCheckbox } from './Checkbox'
 
@@ -45,7 +46,7 @@ describe('PktCheckbox', () => {
   })
 
   test('handles onClick callback', async () => {
-    const onClickMock = jest.fn()
+    const onClickMock = vi.fn()
     const { getByLabelText } = render(<PktCheckbox id="myCheckbox" label="My Checkbox" onClick={onClickMock} />)
 
     // Get the checkbox label element

package/src/components/combobox/Combobox.accessibility.test.tsx

@@ -0,0 +1,277 @@
+import '@testing-library/jest-dom'
+
+import { fireEvent, render } from '@testing-library/react'
+import { axe, toHaveNoViolations } from 'jest-axe'
+
+import type { IPktComboboxOption } from 'shared-types/combobox'
+import { PktCombobox } from './Combobox'
+import type { IPktCombobox } from './types'
+
+expect.extend(toHaveNoViolations)
+
+const comboboxId = 'test-combobox'
+const label = 'Test Combobox'
+
+const getDefaultOptions = (): IPktComboboxOption[] => [
+  { value: 'apple', label: 'Apple' },
+  { value: 'banana', label: 'Banana' },
+  { value: 'cherry', label: 'Cherry' },
+]
+
+const createComboboxTest = (props: Partial<IPktCombobox> = {}) => {
+  const defaultProps: IPktCombobox = {
+    label,
+    id: comboboxId,
+    ...props,
+  }
+
+  return render(<PktCombobox {...defaultProps} />)
+}
+
+describe('PktCombobox', () => {
+  describe('Accessibility (axe)', () => {
+    test('basic combobox has no accessibility violations', async () => {
+      const { container } = createComboboxTest()
+
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    test('combobox with options has no accessibility violations', async () => {
+      const { container } = createComboboxTest({
+        options: getDefaultOptions(),
+      })
+
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    test('combobox with text input has no accessibility violations', async () => {
+      const { container } = createComboboxTest({
+        allowUserInput: true,
+        options: getDefaultOptions(),
+      })
+
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    test('combobox with typeahead has no accessibility violations', async () => {
+      const { container } = createComboboxTest({
+        typeahead: true,
+        options: getDefaultOptions(),
+      })
+
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    test('multiple combobox has no accessibility violations', async () => {
+      const { container } = createComboboxTest({
+        multiple: true,
+        options: getDefaultOptions(),
+      })
+
+      // Exclude nested-interactive: the decorative checkbox inside li[role="option"]
+      // is aria-hidden and non-focusable, but axe flags it anyway.
+      // Selection state is conveyed by aria-selected on the option element.
+      const results = await axe(container, {
+        rules: { 'nested-interactive': { enabled: false } },
+      })
+      expect(results).toHaveNoViolations()
+    })
+
+    test('disabled combobox has no accessibility violations', async () => {
+      const { container } = createComboboxTest({ disabled: true })
+
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    test('combobox with error state has no accessibility violations', async () => {
+      const { container } = createComboboxTest({
+        hasError: true,
+        errorMessage: 'Required field',
+      })
+
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    test('combobox with selected value has no accessibility violations', async () => {
+      const { container } = createComboboxTest({
+        defaultValue: 'apple',
+        options: getDefaultOptions(),
+      })
+
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    test('combobox with multiple selected values has no accessibility violations', async () => {
+      const { container } = createComboboxTest({
+        multiple: true,
+        defaultValue: ['apple', 'banana'],
+        options: getDefaultOptions(),
+      })
+
+      // Exclude nested-interactive: decorative checkboxes inside options (see above)
+      const results = await axe(container, {
+        rules: { 'nested-interactive': { enabled: false } },
+      })
+      expect(results).toHaveNoViolations()
+    })
+  })
+
+  describe('ARIA attributes', () => {
+    test('select-only combobox has correct ARIA attributes', () => {
+      const { container } = createComboboxTest()
+
+      const comboboxInput = container.querySelector('.pkt-combobox__input')
+
+      expect(comboboxInput?.getAttribute('role')).toBe('combobox')
+      expect(comboboxInput?.getAttribute('aria-controls')).toBe(`${comboboxId}-listbox`)
+      expect(comboboxInput?.getAttribute('aria-haspopup')).toBe('listbox')
+      expect(comboboxInput?.getAttribute('aria-expanded')).toBe('false')
+      expect(comboboxInput?.getAttribute('aria-labelledby')).toBe(`${comboboxId}-combobox-label`)
+    })
+
+    test('combobox aria-expanded updates when dropdown opens', () => {
+      const { container } = createComboboxTest()
+
+      const comboboxInput = container.querySelector('.pkt-combobox__input')
+      expect(comboboxInput?.getAttribute('aria-expanded')).toBe('false')
+
+      fireEvent.click(comboboxInput!)
+
+      expect(comboboxInput?.getAttribute('aria-expanded')).toBe('true')
+    })
+
+    test('text input has correct ARIA attributes for allowUserInput', () => {
+      const { container } = createComboboxTest({ allowUserInput: true })
+
+      const textInput = container.querySelector('input[type="text"][role="combobox"]')
+
+      expect(textInput?.getAttribute('role')).toBe('combobox')
+      expect(textInput?.getAttribute('aria-controls')).toBe(`${comboboxId}-listbox`)
+      expect(textInput?.getAttribute('aria-label')).toBe(label)
+      expect(textInput?.getAttribute('aria-autocomplete')).toBe('list')
+    })
+
+    test('text input has correct ARIA attributes for typeahead', () => {
+      const { container } = createComboboxTest({ typeahead: true })
+
+      const textInput = container.querySelector('input[type="text"]')
+      expect(textInput?.getAttribute('aria-autocomplete')).toBe('both')
+    })
+
+    test('text input sets aria-activedescendant when value is selected', () => {
+      const { container } = createComboboxTest({
+        allowUserInput: true,
+        defaultValue: 'apple',
+        options: getDefaultOptions(),
+      })
+
+      const textInput = container.querySelector('input[type="text"]')
+      expect(textInput?.getAttribute('aria-activedescendant')).toBeTruthy()
+    })
+
+    test('text input aria-expanded reflects dropdown state', () => {
+      const { container } = createComboboxTest({ allowUserInput: true })
+
+      const textInput = container.querySelector('input[type="text"]')
+      expect(textInput?.getAttribute('aria-expanded')).toBe('false')
+
+      fireEvent.focus(textInput!)
+
+      expect(textInput?.getAttribute('aria-expanded')).toBe('true')
+    })
+
+    test('listbox has correct id for aria-controls reference', () => {
+      const { container } = createComboboxTest()
+
+      const listbox = container.querySelector('.pkt-listbox')
+      expect(listbox?.getAttribute('id')).toBe(`${comboboxId}-listbox`)
+    })
+
+    test('listbox has role=listbox', () => {
+      const { container } = createComboboxTest({ options: getDefaultOptions() })
+
+      const listbox = container.querySelector('.pkt-listbox')
+      expect(listbox?.getAttribute('role')).toBe('listbox')
+    })
+
+    test('listbox has aria-label with component label', () => {
+      const { container } = createComboboxTest({ options: getDefaultOptions() })
+
+      const listbox = container.querySelector('.pkt-listbox')
+      expect(listbox?.getAttribute('aria-label')).toBe(`Liste: ${label}`)
+    })
+
+    test('options have role=option with aria-selected', () => {
+      const { container } = createComboboxTest({
+        defaultValue: 'apple',
+        options: getDefaultOptions(),
+      })
+
+      const options = container.querySelectorAll('.pkt-listbox__option')
+      expect(options[0].getAttribute('role')).toBe('option')
+      expect(options[0].getAttribute('aria-selected')).toBe('true')
+      expect(options[1].getAttribute('aria-selected')).toBe('false')
+    })
+  })
+
+  describe('Keyboard accessibility', () => {
+    test('select-only combobox is focusable when not disabled', () => {
+      const { container } = createComboboxTest()
+
+      const comboboxInput = container.querySelector('.pkt-combobox__input') as HTMLElement
+      expect(comboboxInput.getAttribute('tabindex')).toBe('0')
+    })
+
+    test('select-only combobox is not focusable when disabled', () => {
+      const { container } = createComboboxTest({ disabled: true })
+
+      const comboboxInput = container.querySelector('.pkt-combobox__input') as HTMLElement
+      expect(comboboxInput.getAttribute('tabindex')).toBe('-1')
+    })
+
+    test('text input is part of tab order', () => {
+      const { container } = createComboboxTest({ allowUserInput: true })
+
+      const textInput = container.querySelector('input[type="text"]') as HTMLElement
+      expect(textInput).toBeInTheDocument()
+      // Text inputs are naturally tabbable (no tabindex needed)
+      expect(textInput.hasAttribute('tabindex')).toBe(false)
+    })
+
+    test('text input is disabled when component is disabled', () => {
+      const { container } = createComboboxTest({
+        allowUserInput: true,
+        disabled: true,
+      })
+
+      const textInput = container.querySelector('input[type="text"]') as HTMLInputElement
+      expect(textInput).toBeDisabled()
+    })
+  })
+
+  describe('Label association', () => {
+    test('input wrapper label targets text input when allowUserInput', () => {
+      const { container } = createComboboxTest({ allowUserInput: true })
+
+      const labelEl = container.querySelector('label')
+      expect(labelEl).toBeInTheDocument()
+      expect(labelEl?.getAttribute('for')).toBe(`${comboboxId}-input`)
+    })
+
+    test('input wrapper uses fieldset/legend when no text input (select-only)', () => {
+      const { container } = createComboboxTest()
+
+      const fieldset = container.querySelector('fieldset')
+      expect(fieldset).toBeInTheDocument()
+      const legend = container.querySelector('legend')
+      expect(legend).toBeInTheDocument()
+    })
+  })
+})