@oslokommune/punkt-elements 13.5.2 → 13.5.3

package/CHANGELOG.md

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

package/dist/{alert-DQNBDKjT.cjs → alert-7rUOhlNi.cjs}

@@ -1,4 +1,4 @@
-"use strict";const c=require("./class-map-BBG2gMX4.cjs"),t=require("./element-6DBpyGQm.cjs"),d=require("./state-DPobt-Yz.cjs"),h=require("./pkt-slot-controller-BzddBp7z.cjs"),u=require("./ref-iJtiv3o2.cjs"),k=require("./classutils-BwNK82ZQ.cjs");require("./icon-B_ryAy4Q.cjs");require("./button-B8rdtaHB.cjs");const v={skin:{default:"info"},ariaLive:{default:"polite"},compact:{default:!1},closeAlert:{default:!1}},a={props:v};var f=Object.defineProperty,_=Object.getOwnPropertyDescriptor,i=(o,e,s,r)=>{for(var l=r>1?void 0:r?_(e,s):e,p=o.length-1,n;p>=0;p--)(n=o[p])&&(l=(r?n(e,s,l):n(l))||l);return r&&l&&f(e,s,l),l};exports.PktAlert=class extends t.PktElement{constructor(){super(),this.defaultSlot=u.e(),this.compact=a.props.compact.default,this.title="",this.skin=a.props.skin.default,this.ariaLive=a.props.ariaLive.default,this["aria-live"]=null,this.closeAlert=a.props.closeAlert.default,this.date=null,this.role="status",this._isClosed=!1,this.close=e=>{this._isClosed=!0,this.dispatchEvent(new CustomEvent("close",{detail:{origin:e},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("on-close",{detail:{origin:e},bubbles:!0,composed:!0}))},this.slotController=new h.PktSlotController(this,this.defaultSlot),this._isClosed=!1}connectedCallback(){super.connectedCallback(),this["aria-live"]=this.getAttribute("aria-live")||this.ariaLive}attributeChangedCallback(e,s,r){e==="ariaLive"&&(this["aria-live"]=r),super.attributeChangedCallback(e,s,r)}updated(e){super.updated(e),e.has("ariaLive")&&(this["aria-live"]=this.ariaLive),e.has("_isClosed")&&k.updateClassAttribute(this,"pkt-hide",this._isClosed)}render(){const e={"pkt-alert":!0,"pkt-alert--compact":this.compact,[`pkt-alert--${this.skin}`]:this.skin,"pkt-hide":this._isClosed},s={"pkt-alert__grid":!0,"pkt-alert__noTitle":!this.title,"pkt-alert__noDate":!this.date};return t.x`
+"use strict";const c=require("./class-map-BBG2gMX4.cjs"),t=require("./element-6DBpyGQm.cjs"),d=require("./state-DPobt-Yz.cjs"),h=require("./pkt-slot-controller-BzddBp7z.cjs"),u=require("./ref-iJtiv3o2.cjs"),k=require("./classutils-BwNK82ZQ.cjs");require("./icon-B_ryAy4Q.cjs");require("./button-B8rdtaHB.cjs");const v={skin:{default:"info"},ariaLive:{default:"polite"},compact:{default:!1},closeAlert:{default:!1}},a={props:v};var f=Object.defineProperty,_=Object.getOwnPropertyDescriptor,i=(o,e,s,l)=>{for(var r=l>1?void 0:l?_(e,s):e,p=o.length-1,n;p>=0;p--)(n=o[p])&&(r=(l?n(e,s,r):n(r))||r);return l&&r&&f(e,s,r),r};exports.PktAlert=class extends t.PktElement{constructor(){super(),this.defaultSlot=u.e(),this.compact=a.props.compact.default,this.title="",this.skin=a.props.skin.default,this.ariaLive=a.props.ariaLive.default,this["aria-live"]=null,this.closeAlert=a.props.closeAlert.default,this.date=null,this.role="status",this._isClosed=!1,this.close=e=>{this._isClosed=!0,this.dispatchEvent(new CustomEvent("close",{detail:{origin:e},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("on-close",{detail:{origin:e},bubbles:!0,composed:!0}))},this.slotController=new h.PktSlotController(this,this.defaultSlot),this._isClosed=!1}connectedCallback(){super.connectedCallback(),this["aria-live"]=this.getAttribute("aria-live")||this.ariaLive}attributeChangedCallback(e,s,l){e==="ariaLive"&&(this["aria-live"]=l),super.attributeChangedCallback(e,s,l)}updated(e){super.updated(e),e.has("ariaLive")&&(this["aria-live"]=this.ariaLive),e.has("_isClosed")&&k.updateClassAttribute(this,"pkt-hide",this._isClosed)}render(){const e={"pkt-alert":!0,"pkt-alert--compact":this.compact,[`pkt-alert--${this.skin}`]:this.skin,"pkt-hide":this._isClosed},s={"pkt-alert__grid":!0,"pkt-alert__noTitle":!this.title,"pkt-alert__noDate":!this.date};return t.x`
       <div class=${c.e(e)} aria-live=${this["aria-live"]}>
         <div class=${c.e(s)}>
           <pkt-icon
@@ -19,6 +19,7 @@
                     variant="icon-only"
                     @click=${this.close}
                   >
+                    <span class="sr-only">Lukk</span>
                   </pkt-button>
                 </div>
               `:t.E}

package/dist/{alert-B07oUpkq.js → alert-cUBtwi2k.js}

@@ -1,7 +1,7 @@
-import { e as u } from "./class-map-BpTj9gtz.js";
-import { P as f, E as h, x as p, n as a, a as v } from "./element-CgEWt74-.js";
-import { r as m } from "./state-Bo2bck5_.js";
-import { P as k } from "./pkt-slot-controller-BPGj-LC5.js";
+import { e as h } from "./class-map-BpTj9gtz.js";
+import { P as f, E as u, x as p, n as a, a as v } from "./element-CgEWt74-.js";
+import { r as k } from "./state-Bo2bck5_.js";
+import { P as m } from "./pkt-slot-controller-BPGj-LC5.js";
 import { e as _, n as b } from "./ref-BBYSqgeW.js";
 import { u as y } from "./classutils-RQs1k6D9.js";
 import "./icon-CC1js8eR.js";
@@ -35,7 +35,7 @@ let e = class extends f {
       ), this.dispatchEvent(
         new CustomEvent("on-close", { detail: { origin: t }, bubbles: !0, composed: !0 })
       );
-    }, this.slotController = new k(this, this.defaultSlot), this._isClosed = !1;
+    }, this.slotController = new m(this, this.defaultSlot), this._isClosed = !1;
   }
   // Lifecycle
   connectedCallback() {
@@ -60,8 +60,8 @@ let e = class extends f {
       "pkt-alert__noDate": !this.date
     };
     return p`
-      <div class=${u(t)} aria-live=${this["aria-live"]}>
-        <div class=${u(s)}>
+      <div class=${h(t)} aria-live=${this["aria-live"]}>
+        <div class=${h(s)}>
           <pkt-icon
             class="pkt-alert__icon"
             aria-hidden="true"
@@ -80,14 +80,15 @@ let e = class extends f {
                     variant="icon-only"
                     @click=${this.close}
                   >
+                    <span class="sr-only">Lukk</span>
                   </pkt-button>
                 </div>
-              ` : h}
-          ${this.title ? p`<div class="pkt-alert__title">${this.title}</div>` : h}
+              ` : u}
+          ${this.title ? p`<div class="pkt-alert__title">${this.title}</div>` : u}
 
           <div class="pkt-alert__text" ${b(this.defaultSlot)}></div>
 
-          ${this.date ? p`<div class="pkt-alert__date">Sist oppdatert: ${this.date}</div>` : h}
+          ${this.date ? p`<div class="pkt-alert__date">Sist oppdatert: ${this.date}</div>` : u}
         </div>
       </div>
     `;
@@ -118,7 +119,7 @@ i([
   a({ type: String, reflect: !0 })
 ], e.prototype, "role", 2);
 i([
-  m()
+  k()
 ], e.prototype, "_isClosed", 2);
 e = i([
   v("pkt-alert")

package/dist/pkt-alert.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./alert-DQNBDKjT.cjs"),t=e.PktAlert;Object.defineProperty(exports,"PktAlert",{enumerable:!0,get:()=>e.PktAlert});exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./alert-7rUOhlNi.cjs"),t=e.PktAlert;Object.defineProperty(exports,"PktAlert",{enumerable:!0,get:()=>e.PktAlert});exports.default=t;

package/dist/pkt-alert.js

@@ -1,4 +1,4 @@
-import { P as t } from "./alert-B07oUpkq.js";
+import { P as t } from "./alert-cUBtwi2k.js";
 const e = t;
 export {
   t as PktAlert,

package/dist/pkt-index.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const P=require("./alert-DQNBDKjT.cjs"),l=require("./accordionitem-Csh7iSVG.cjs"),d=require("./backlink-JbBNi3qg.cjs"),b=require("./button-B8rdtaHB.cjs"),k=require("./calendar-32W9p9uc.cjs"),m=require("./card-DBlFf1ry.cjs"),g=require("./combobox-DjO0RMUB.cjs"),h=require("./consent-hYeFWNFr.cjs"),f=require("./checkbox-Gn7Wtk9h.cjs"),t=require("./element-6DBpyGQm.cjs"),y=require("./pkt-slot-controller-BzddBp7z.cjs"),s=require("./ref-iJtiv3o2.cjs"),O=require("./class-map-BBG2gMX4.cjs"),j=require("./datepicker-CmTrG5GE.cjs"),q=require("./helptext-CzQX6YVE.cjs"),x=require("./heading-CNycsyMj.cjs"),C=require("./icon-B_ryAy4Q.cjs"),v=require("./input-wrapper-CZ-a00V7.cjs"),S=require("./link-Cjl0xwSq.cjs"),$=require("./linkcard-DqIvb54H.cjs"),L=require("./loader-CHPxY9c6.cjs"),_=require("./messagebox-CqUBJs_D.cjs"),A=require("./modal-CRtxhCaP.cjs"),B=require("./progressbar-DhMBXkww.cjs"),p=require("./radiobutton-CdT6v1oq.cjs"),T=require("./tag-Bbs0U_Au.cjs"),I=require("./textarea-CPXsMFUq.cjs"),M=require("./textinput-aNI5kibM.cjs"),R=require("./select-Dkl0KhGW.cjs");var H=Object.defineProperty,w=Object.getOwnPropertyDescriptor,o=(a,e,r,i)=>{for(var n=i>1?void 0:i?w(e,r):e,u=a.length-1,c;u>=0;u--)(c=a[u])&&(n=(i?c(e,r,n):c(n))||n);return i&&n&&H(e,r,n),n};exports.PktComponent=class extends t.PktElement{constructor(){super(),this.string="",this.strings=[],this.darkmode=!1,this._list=[],this.defaultSlot=s.e(),this.namedSlot=s.e(),this.slotController=new y.PktSlotController(this,this.defaultSlot,this.namedSlot)}connectedCallback(){this.strings.length&&this.strings.forEach(e=>{this._list.push(e.toUpperCase())}),super.connectedCallback()}render(){const e={"pkt-component":!0,"pkt-component--has-list":this.strings.length>0,"pkt-darkmode":this.darkmode};return t.x`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const P=require("./alert-7rUOhlNi.cjs"),l=require("./accordionitem-Csh7iSVG.cjs"),d=require("./backlink-JbBNi3qg.cjs"),b=require("./button-B8rdtaHB.cjs"),k=require("./calendar-32W9p9uc.cjs"),m=require("./card-DBlFf1ry.cjs"),g=require("./combobox-DjO0RMUB.cjs"),h=require("./consent-hYeFWNFr.cjs"),f=require("./checkbox-Gn7Wtk9h.cjs"),t=require("./element-6DBpyGQm.cjs"),y=require("./pkt-slot-controller-BzddBp7z.cjs"),s=require("./ref-iJtiv3o2.cjs"),O=require("./class-map-BBG2gMX4.cjs"),j=require("./datepicker-CmTrG5GE.cjs"),q=require("./helptext-CzQX6YVE.cjs"),x=require("./heading-CNycsyMj.cjs"),C=require("./icon-B_ryAy4Q.cjs"),v=require("./input-wrapper-CZ-a00V7.cjs"),S=require("./link-Cjl0xwSq.cjs"),$=require("./linkcard-DqIvb54H.cjs"),L=require("./loader-CHPxY9c6.cjs"),_=require("./messagebox-CqUBJs_D.cjs"),A=require("./modal-CRtxhCaP.cjs"),B=require("./progressbar-DhMBXkww.cjs"),p=require("./radiobutton-CdT6v1oq.cjs"),T=require("./tag-Bbs0U_Au.cjs"),I=require("./textarea-CPXsMFUq.cjs"),M=require("./textinput-aNI5kibM.cjs"),R=require("./select-Dkl0KhGW.cjs");var H=Object.defineProperty,w=Object.getOwnPropertyDescriptor,o=(a,e,r,i)=>{for(var n=i>1?void 0:i?w(e,r):e,u=a.length-1,c;u>=0;u--)(c=a[u])&&(n=(i?c(e,r,n):c(n))||n);return i&&n&&H(e,r,n),n};exports.PktComponent=class extends t.PktElement{constructor(){super(),this.string="",this.strings=[],this.darkmode=!1,this._list=[],this.defaultSlot=s.e(),this.namedSlot=s.e(),this.slotController=new y.PktSlotController(this,this.defaultSlot,this.namedSlot)}connectedCallback(){this.strings.length&&this.strings.forEach(e=>{this._list.push(e.toUpperCase())}),super.connectedCallback()}render(){const e={"pkt-component":!0,"pkt-component--has-list":this.strings.length>0,"pkt-darkmode":this.darkmode};return t.x`
       <div class="${O.e(e)}">
         <h1 class="pkt-txt-28">${this.string}</h1>
 

package/dist/pkt-index.js

@@ -1,4 +1,4 @@
-import { P as A } from "./alert-B07oUpkq.js";
+import { P as A } from "./alert-cUBtwi2k.js";
 import { P as B, a as E } from "./accordionitem-C9T3nlM0.js";
 import { P as O } from "./backlink-C2jbzu0U.js";
 import { P as T } from "./button-DhispFOY.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "13.5.2",
+  "version": "13.5.3",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -35,7 +35,11 @@
     "whatwg-fetch": "^3.6.19"
   },
   "devDependencies": {
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-private-methods": "^7.25.9",
+    "@babel/plugin-transform-private-property-in-object": "^7.25.9",
     "@babel/preset-env": "^7.28.3",
+    "@babel/preset-typescript": "^7.25.9",
     "@oslokommune/punkt-assets": "^13.3.1",
     "@oslokommune/punkt-css": "^13.5.0",
     "@testing-library/jest-dom": "^6.6.3",
@@ -69,5 +73,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "30c1e36c7f9d9a5e5fa3e32389060a70eeffaf8f"
+  "gitHead": "6b43945924c71b96b609f1abc7875e139e297233"
 }

package/src/components/alert/alert.test.ts

@@ -1,27 +1,32 @@
 import '@testing-library/jest-dom'
 import { axe, toHaveNoViolations } from 'jest-axe'
 import { fireEvent } from '@testing-library/dom'
+import { createElementTest, BaseTestConfig } from '../../tests/test-framework'
+import { CustomElementFor } from '../../tests/component-registry'
+import './alert'
 
 expect.extend(toHaveNoViolations)
 
-import './alert'
-import { PktAlert } from './alert' // For type checking
-
-const waitForCustomElements = async () => {
-  await customElements.whenDefined('pkt-alert')
+export interface AlertTestConfig extends BaseTestConfig {
+  skin?: string
+  compact?: boolean
+  title?: string
+  date?: string
+  closeAlert?: boolean
+  ariaLive?: string
 }
 
-// Helper function to create alert markup
-const createAlert = async (alertProps = '', content = 'Test alert content') => {
-  const container = document.createElement('div')
-  container.innerHTML = `
-    <pkt-alert ${alertProps}>
-      ${content}
-    </pkt-alert>
-  `
-  document.body.appendChild(container)
-  await waitForCustomElements()
-  return container
+// Use shared framework
+export const createAlertTest = async (config: AlertTestConfig = {}) => {
+  const { container, element } = await createElementTest<
+    CustomElementFor<'pkt-alert'>,
+    AlertTestConfig
+  >('pkt-alert', config)
+
+  return {
+    container,
+    alert: element,
+  }
 }
 
 // Cleanup after each test
@@ -32,11 +37,11 @@ afterEach(() => {
 describe('PktAlert', () => {
   describe('Rendering and basic functionality', () => {
     test('renders without errors', async () => {
-      const container = await createAlert()
+      const { alert } = await createAlertTest({
+        content: 'Test alert content',
+      })
 
-      const alert = container.querySelector('pkt-alert') as PktAlert
       expect(alert).toBeInTheDocument()
-
       await alert.updateComplete
       expect(alert).toBeTruthy()
 
@@ -45,9 +50,11 @@ describe('PktAlert', () => {
     })
 
     test('renders with correct structure', async () => {
-      const container = await createAlert('title="Test Title"', 'Test alert message')
+      const { alert } = await createAlertTest({
+        title: 'Test Title',
+        content: 'Test alert message',
+      })
 
-      const alert = container.querySelector('pkt-alert') as PktAlert
       await alert.updateComplete
 
       const alertDiv = alert.querySelector('.pkt-alert')
@@ -68,8 +75,7 @@ describe('PktAlert', () => {
       const skins = ['error', 'success', 'warning', 'info'] as const
 
       for (const skin of skins) {
-        const container = await createAlert(`skin="${skin}"`)
-        const alert = container.querySelector('pkt-alert') as PktAlert
+        const { alert } = await createAlertTest({ skin })
         await alert.updateComplete
 
         const icon = alert.querySelector('pkt-icon')
@@ -77,18 +83,14 @@ describe('PktAlert', () => {
 
         expect(icon?.getAttribute('name')).toBe(expectedIconName)
         expect(icon?.getAttribute('aria-hidden')).toBe('true')
-
-        // Cleanup for next iteration
-        container.remove()
       }
     })
   })
 
   describe('Properties and attributes', () => {
     test('applies default properties correctly', async () => {
-      const container = await createAlert()
+      const { alert } = await createAlertTest()
 
-      const alert = container.querySelector('pkt-alert') as PktAlert
       await alert.updateComplete
 
       expect(alert.skin).toBe('info')
@@ -108,8 +110,7 @@ describe('PktAlert', () => {
       const skins = ['error', 'success', 'warning', 'info'] as const
 
       for (const skin of skins) {
-        const container = await createAlert(`skin="${skin}"`)
-        const alert = container.querySelector('pkt-alert') as PktAlert
+        const { alert } = await createAlertTest({ skin })
         await alert.updateComplete
 
         expect(alert.skin).toBe(skin)
@@ -117,16 +118,12 @@ describe('PktAlert', () => {
 
         const alertDiv = alert.querySelector('.pkt-alert')
         expect(alertDiv).toHaveClass(`pkt-alert--${skin}`)
-
-        // Cleanup for next iteration
-        container.remove()
       }
     })
 
     test('applies compact property correctly', async () => {
-      const container = await createAlert('compact')
+      const { alert } = await createAlertTest({ compact: true })
 
-      const alert = container.querySelector('pkt-alert') as PktAlert
       await alert.updateComplete
 
       expect(alert.compact).toBe(true)
@@ -136,9 +133,8 @@ describe('PktAlert', () => {
     })
 
     test('handles title property', async () => {
-      const container = await createAlert('title="Alert Title"')
+      const { alert } = await createAlertTest({ title: 'Alert Title' })
 
-      const alert = container.querySelector('pkt-alert') as PktAlert
       await alert.updateComplete
 
       expect(alert.title).toBe('Alert Title')
@@ -156,9 +152,8 @@ describe('PktAlert', () => {
     })
 
     test('handles date property', async () => {
-      const container = await createAlert('date="2024-01-15"')
+      const { alert } = await createAlertTest({ date: '2024-01-15' })
 
-      const alert = container.querySelector('pkt-alert') as PktAlert
       await alert.updateComplete
 
       expect(alert.date).toBe('2024-01-15')
@@ -170,25 +165,22 @@ describe('PktAlert', () => {
     })
 
     test('handles aria-live property', async () => {
-      const container = await createAlert('aria-live="assertive"')
+      const { alert } = await createAlertTest({ ariaLive: 'assertive' })
 
-      const alert = container.querySelector('pkt-alert') as PktAlert
       await alert.updateComplete
 
-      // Note: The component sets aria-live to the ariaLive property value,
-      // which defaults to 'polite' from specs, not the attribute value
-      expect(alert['aria-live']).toBe('polite')
+      // The component uses the ariaLive property value that was set
+      expect(alert['aria-live']).toBe('assertive')
 
       const alertDiv = alert.querySelector('.pkt-alert')
-      expect(alertDiv?.getAttribute('aria-live')).toBe('polite')
+      expect(alertDiv?.getAttribute('aria-live')).toBe('assertive')
     })
   })
 
   describe('Close functionality', () => {
     test('renders close button when closeAlert is true', async () => {
-      const container = await createAlert('closealert')
+      const { alert } = await createAlertTest({ closeAlert: true })
 
-      const alert = container.querySelector('pkt-alert') as PktAlert
       await alert.updateComplete
 
       expect(alert.closeAlert).toBe(true)
@@ -204,9 +196,8 @@ describe('PktAlert', () => {
     })
 
     test('does not render close button when closeAlert is false', async () => {
-      const container = await createAlert()
+      const { alert } = await createAlertTest({ closeAlert: false })
 
-      const alert = container.querySelector('pkt-alert') as PktAlert
       await alert.updateComplete
 
       expect(alert.closeAlert).toBe(false)
@@ -219,9 +210,8 @@ describe('PktAlert', () => {
     })
 
     test('closes alert when close button is clicked', async () => {
-      const container = await createAlert('closealert')
+      const { alert } = await createAlertTest({ closeAlert: true })
 
-      const alert = container.querySelector('pkt-alert') as PktAlert
       await alert.updateComplete
 
       // Listen for close events
@@ -265,30 +255,23 @@ describe('PktAlert', () => {
   describe('Grid layout classes', () => {
     test('applies correct grid classes based on content', async () => {
       // Test with no title and no date
-      const container1 = await createAlert()
-      const alert1 = container1.querySelector('pkt-alert') as PktAlert
+      const { alert: alert1 } = await createAlertTest()
       await alert1.updateComplete
 
       const grid1 = alert1.querySelector('.pkt-alert__grid')
       expect(grid1).toHaveClass('pkt-alert__noTitle')
       expect(grid1).toHaveClass('pkt-alert__noDate')
 
-      container1.remove()
-
       // Test with title but no date
-      const container2 = await createAlert('title="Test Title"')
-      const alert2 = container2.querySelector('pkt-alert') as PktAlert
+      const { alert: alert2 } = await createAlertTest({ title: 'Test Title' })
       await alert2.updateComplete
 
       const grid2 = alert2.querySelector('.pkt-alert__grid')
       expect(grid2).not.toHaveClass('pkt-alert__noTitle')
       expect(grid2).toHaveClass('pkt-alert__noDate')
 
-      container2.remove()
-
       // Test with both title and date
-      const container3 = await createAlert('title="Test Title" date="2024-01-15"')
-      const alert3 = container3.querySelector('pkt-alert') as PktAlert
+      const { alert: alert3 } = await createAlertTest({ title: 'Test Title', date: '2024-01-15' })
       await alert3.updateComplete
 
       const grid3 = alert3.querySelector('.pkt-alert__grid')
@@ -299,47 +282,49 @@ describe('PktAlert', () => {
 
   describe('Accessibility', () => {
     test('has correct ARIA attributes', async () => {
-      const container = await createAlert('aria-live="polite" role="alert"')
+      const { alert } = await createAlertTest({ ariaLive: 'polite' })
 
-      const alert = container.querySelector('pkt-alert') as PktAlert
       await alert.updateComplete
 
       const alertDiv = alert.querySelector('.pkt-alert')
       const icon = alert.querySelector('pkt-icon')
 
       expect(alertDiv?.getAttribute('aria-live')).toBe('polite')
-      expect(alert.role).toBe('alert')
+      expect(alert.role).toBe('status')
       expect(icon?.getAttribute('aria-hidden')).toBe('true')
     })
 
     test('renders with no WCAG errors with axe - simple alert', async () => {
-      const container = await createAlert('title="Test Alert"', 'This is a test alert message.')
-
-      const alert = container.querySelector('pkt-alert') as PktAlert
-      await alert.updateComplete
+      const { container } = await createAlertTest({
+        title: 'Test Alert',
+        content: 'This is a test alert message.',
+      })
 
       const results = await axe(container)
       expect(results).toHaveNoViolations()
     })
 
     test('renders with no WCAG errors with axe - complex alert', async () => {
-      const container = await createAlert(
-        'skin="error" title="Error Alert" date="2024-01-15" close-alert aria-live="assertive"',
-        '<p>This is an error message with <a href="#">a link</a>.</p>',
-      )
-
-      const alert = container.querySelector('pkt-alert') as PktAlert
-      await alert.updateComplete
+      const { container } = await createAlertTest({
+        skin: 'error',
+        title: 'Error Alert',
+        date: '2024-01-15',
+        closeAlert: true,
+        ariaLive: 'assertive',
+        content: '<p>This is an error message with <a href="#">a link</a>.</p>',
+      })
 
       const results = await axe(container)
       expect(results).toHaveNoViolations()
     })
 
     test('renders with no WCAG errors with axe - compact alert', async () => {
-      const container = await createAlert('skin="success" compact close-alert', 'Success message')
-
-      const alert = container.querySelector('pkt-alert') as PktAlert
-      await alert.updateComplete
+      const { container } = await createAlertTest({
+        skin: 'success',
+        compact: true,
+        closeAlert: true,
+        content: 'Success message',
+      })
 
       const results = await axe(container)
       expect(results).toHaveNoViolations()

package/src/components/alert/alert.ts

@@ -109,6 +109,7 @@ export class PktAlert extends PktElement implements IPktAlert {
                     variant="icon-only"
                     @click=${this.close}
                   >
+                    <span class="sr-only">Lukk</span>
                   </pkt-button>
                 </div>
               `