@oslokommune/punkt-react 12.41.0 → 12.42.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "12.41.0",
+  "version": "12.42.0",
   "description": "React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -38,7 +38,7 @@
   "dependencies": {
     "@lit-labs/ssr-dom-shim": "^1.2.1",
     "@lit/react": "^1.0.7",
-    "@oslokommune/punkt-elements": "^12.41.0",
+    "@oslokommune/punkt-elements": "^12.42.0",
     "angular-html-parser": "^6.0.2",
     "html-format": "^1.1.7",
     "prettier": "^3.3.3",
@@ -112,5 +112,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "0fa02d9d211044739d7b86ec9f24f334df782a1d"
+  "gitHead": "fdb019a20d3a46f588a23a1648fce810c54578a8"
 }

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

@@ -33,6 +33,22 @@ describe('PktAlert', () => {
     expect(onClose).toHaveBeenCalledTimes(1)
   })
 
+  test('renders with default role', async () => {
+    const { getByRole } = render(<PktAlert>Alert text</PktAlert>)
+    await window.customElements.whenDefined('pkt-alert')
+    const alert = getByRole('status')
+    expect(alert).toBeInTheDocument()
+    expect(alert).toHaveAttribute('role', 'status')
+  })
+
+  test('renders with alert as role prop', async () => {
+    const { getByRole } = render(<PktAlert role="alert">Alert text</PktAlert>)
+    await window.customElements.whenDefined('pkt-alert')
+    const alert = getByRole('alert')
+    expect(alert).toBeInTheDocument()
+    expect(alert).toHaveAttribute('role', 'alert')
+  })
+
   describe('accessibility', () => {
     test('renders with no wcag errors with axe', async () => {
       const { container } = render(<PktAlert title="Error" skin="error"></PktAlert>)

package/src/components/alert/Alert.tsx

@@ -12,6 +12,7 @@ export interface IPktAlert extends PktElType {
   date?: string
   ariaLive?: 'off' | 'polite' | 'assertive'
   compact?: boolean
+  role?: string
   onClose?: (e: CustomEvent) => void
 }
 

package/src/components/combobox/Combobox.tsx

@@ -9,9 +9,10 @@ import React, {
   FC,
   LegacyRef,
   forwardRef,
+  MouseEventHandler,
 } from 'react'
 import { PktCombobox as PktElCombobox } from '@oslokommune/punkt-elements'
-import type { IPktCombobox as IPktElCombobox, IPktComboboxOption } from '@oslokommune/punkt-elements'
+import type { IPktCombobox as IPktElCombobox } from '@oslokommune/punkt-elements'
 import { createComponent, EventName } from '@lit/react'
 import { PktEventWithTarget } from '@/interfaces/IPktElements'
 
@@ -20,6 +21,7 @@ type ExtendedCombobox = Omit<IPktElCombobox, 'helptext'> & SelectHTMLAttributes<
 export interface IPktCombobox extends ExtendedCombobox {
   helptext?: string | ReactNode | ReactNode[]
   ref?: LegacyRef<HTMLSelectElement>
+  onClick?: MouseEventHandler<HTMLSelectElement>
   onChange?: ChangeEventHandler<HTMLSelectElement>
   onInput?: ChangeEventHandler<HTMLSelectElement>
   onBlur?: FocusEventHandler<HTMLSelectElement>
@@ -34,6 +36,7 @@ export const LitComponent = createComponent({
   react: React,
   displayName: 'PktCombobox',
   events: {
+    onClick: 'click' as EventName<PktEventWithTarget>,
     onChange: 'change' as EventName<PktEventWithTarget>,
     onInput: 'input' as EventName<PktEventWithTarget>,
     onBlur: 'blur' as EventName<FocusEvent>,