@oslokommune/punkt-elements 18.7.2 → 18.8.0

package/CHANGELOG.md

@@ -5,6 +5,28 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [18.8.0](https://github.com/oslokommune/punkt/compare/18.7.3...18.8.0) (2026-09-16)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+* Radio, check og switch: Klikkflate, aria-forbedring og testdekning (#3651). - Fikset klikkområdet til alle tre, slik at hele området er klikkbart både med og uten tile
+  - Forbedret UU-oppførsel for alle tre, med aria-label og aria-describedby på input som peker til label og hjelpetekst. Bedre enn at label skal inneholde hjelpetekst
+  - Oppdaterte alle demo-/testsider med inline-eksempler
+  - Betraktelig oppskalering av testdekning i enhetstester, e2e og conformance
+  - Endringer i skills som reflekterer alt dette
+
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
 ## [18.7.2](https://github.com/oslokommune/punkt/compare/18.7.1...18.7.2) (2026-09-14)
 
 ### ⚠ BREAKING CHANGES

package/dist/{checkbox-CddODhna.cjs → checkbox-CBZEGmqa.cjs}

@@ -1,16 +1,22 @@
 const e=require("./element-D_mCyFeX.cjs"),t=require("./class-map-DupQbnhE.cjs"),n=require("./ref-AuNEkS5a.cjs"),r=require("./input-element-DhIEFeuP.cjs");var i=class extends r.t{constructor(...e){super(...e),this.inputRef=n.t(),this.value=``,this.checkHelptext=null,this.defaultChecked=!1,this.hasTile=!1,this.isSwitch=!1,this.labelPosition=`right`,this.hideLabel=!1,this.checked=null,this.indeterminate=!1,this.type=`checkbox`,this.tagText=null,this.optionalTag=!1,this.requiredTag=!1}connectedCallback(){super.connectedCallback()}attributeChangedCallback(e,t,n){e===`defaultChecked`&&!this.checked&&(this.checked=this.defaultChecked),e===`checked`&&(this.checked=this.checked===``||this.checked===`true`||this.checked===!0,this.inputRef.value&&(this.inputRef.value.checked=this.checked)),e===`indeterminate`&&(this.indeterminate=this.indeterminate===``||this.indeterminate===`true`||this.indeterminate===!0,this.inputRef.value&&(this.inputRef.value.indeterminate=this.indeterminate)),super.attributeChangedCallback(e,t,n)}firstUpdated(e){this.inputRef.value&&(this.inputRef.value.indeterminate=this.indeterminate===``||this.indeterminate===`true`||this.indeterminate===!0),super.firstUpdated(e)}willUpdate(e){super.willUpdate(e),e.has(`defaultChecked`)&&!this.checked&&(this.checked=this.defaultChecked)}updated(e){e.has(`checked`)&&this.inputRef.value&&(this.inputRef.value.checked=this.checked===``||this.checked===`true`||this.checked===!0),e.has(`indeterminate`)&&this.inputRef.value&&(this.inputRef.value.indeterminate=this.indeterminate===``||this.indeterminate===`true`||this.indeterminate===!0),super.updated(e)}render(){let r=t.t({"pkt-input-check__input":!0,"pkt-input-check__input--tile":this.hasTile,"pkt-input-check__input--tile-disabled":this.disabled&&this.hasTile}),i=t.t({"pkt-input-check__input-checkbox":!0,"pkt-input-check__input-checkbox--error":this.hasError}),a=t.t({"pkt-input-check__input-label":!0,"pkt-input-check__input-label--disabled":this.disabled,"pkt-input-check__input-label--left":this.labelPosition===`left`,"pkt-input-check__input-label--right":this.labelPosition===`right`,"pkt-sr-only":this.hideLabel}),o=`pkt-tag pkt-tag--small pkt-tag--thin-text`,s=this.pktStrings.get(`forms`),c=()=>e._`
         ${this.tagText?e._`<span class=${o+` pkt-tag--gray`}>${this.tagText}</span>`:e.h}
-        ${this.optionalTag?e._`<span class=${o+` pkt-tag--blue-light`}>${this.optionalText??s.optional}</span>`:e.h}
-        ${this.requiredTag?e._`<span class=${o+` pkt-tag--beige`}>${this.requiredText??s.required}</span>`:e.h}
-      `,l=()=>e._`
+        ${this.optionalTag?e._`<span class=${o+` pkt-tag--blue-light`}
+                >${this.optionalText??s.optional}</span
+              >`:e.h}
+        ${this.requiredTag?e._`<span class=${o+` pkt-tag--beige`}
+                >${this.requiredText??s.required}</span
+              >`:e.h}
+      `,l=this.id+`-check-label`,u=this.id+`-check-helptext`,d=()=>e._`
         <label class=${a} for=${this.id+`-internal`}>
-          ${this.label} ${c()}
-          ${this.checkHelptext?e._`<div class="pkt-input-check__input-helptext">${this.checkHelptext}</div>`:e.h}
+          <span id=${l}>${this.label} ${c()}</span>
+          ${this.checkHelptext?e._`<div id=${u} class="pkt-input-check__input-helptext">
+                  ${this.checkHelptext}
+                </div>`:e.h}
         </label>
       `;return e._`
       <div class="pkt-input-check">
         <div class=${r}>
-          ${this.labelPosition===`left`?l():e.h}
+          ${this.labelPosition===`left`?d():e.h}
           <input
             id=${this.id+`-internal`}
             class=${i}
@@ -25,8 +31,10 @@ const e=require("./element-D_mCyFeX.cjs"),t=require("./class-map-DupQbnhE.cjs"),
             @focus=${this.onFocus}
             ?checked=${this.checked}
             role=${this.isSwitch?`switch`:`checkbox`}
+            aria-labelledby=${this.label?l:e.h}
+            aria-describedby=${this.checkHelptext?u:e.h}
           />
-          ${this.labelPosition===`right`?l():e.h}
+          ${this.labelPosition===`right`?d():e.h}
         </div>
       </div>
     `}handleInput(e){e.stopImmediatePropagation(),this.onInput()}handleClick(e){if(this.disabled)return e.preventDefault(),e.stopImmediatePropagation(),!1}handleChange(e){if(this.disabled)return e.preventDefault(),e.stopImmediatePropagation(),!1;this.toggleChecked(e)}toggleChecked(e){if(this.disabled){e.preventDefault(),e.stopImmediatePropagation();return}let t=e.target;if(t&&t.disabled){e.preventDefault(),e.stopImmediatePropagation();return}e.stopImmediatePropagation(),this.touched=!0,this.inputRef.value&&(this.checked=this.inputRef.value.matches(`:checked`),this.valueChecked(this.checked))}};e.n([e.u({type:String,reflect:!0})],i.prototype,`value`,void 0),e.n([e.u({type:String})],i.prototype,`checkHelptext`,void 0),e.n([e.u({type:Boolean})],i.prototype,`defaultChecked`,void 0),e.n([e.u({type:Boolean})],i.prototype,`hasTile`,void 0),e.n([e.u({type:Boolean})],i.prototype,`isSwitch`,void 0),e.n([e.u({type:String})],i.prototype,`labelPosition`,void 0),e.n([e.u({type:Boolean})],i.prototype,`hideLabel`,void 0),e.n([e.u({type:Boolean,reflect:!0})],i.prototype,`checked`,void 0),e.n([e.u({type:Boolean,reflect:!0})],i.prototype,`indeterminate`,void 0),e.n([e.u({type:String,reflect:!0})],i.prototype,`type`,void 0),e.n([e.u({type:String})],i.prototype,`tagText`,void 0),e.n([e.u({type:Boolean})],i.prototype,`optionalTag`,void 0),e.n([e.u({type:String})],i.prototype,`optionalText`,void 0),e.n([e.u({type:Boolean})],i.prototype,`requiredTag`,void 0),e.n([e.u({type:String})],i.prototype,`requiredText`,void 0);try{e.d(`pkt-checkbox`)(i)}catch{console.warn(`Forsøker å definere <pkt-checkbox>, men den er allerede definert`)}var a=i;Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return a}});

package/dist/{checkbox-C6JdANel.js → checkbox-COw1Uwnm.js}

@@ -38,18 +38,24 @@ var l = class extends c {
 			"pkt-sr-only": this.hideLabel
 		}), s = "pkt-tag pkt-tag--small pkt-tag--thin-text", c = this.pktStrings.get("forms"), l = () => e`
         ${this.tagText ? e`<span class=${s + " pkt-tag--gray"}>${this.tagText}</span>` : n}
-        ${this.optionalTag ? e`<span class=${s + " pkt-tag--blue-light"}>${this.optionalText ?? c.optional}</span>` : n}
-        ${this.requiredTag ? e`<span class=${s + " pkt-tag--beige"}>${this.requiredText ?? c.required}</span>` : n}
-      `, u = () => e`
+        ${this.optionalTag ? e`<span class=${s + " pkt-tag--blue-light"}
+                >${this.optionalText ?? c.optional}</span
+              >` : n}
+        ${this.requiredTag ? e`<span class=${s + " pkt-tag--beige"}
+                >${this.requiredText ?? c.required}</span
+              >` : n}
+      `, u = this.id + "-check-label", d = this.id + "-check-helptext", f = () => e`
         <label class=${i} for=${this.id + "-internal"}>
-          ${this.label} ${l()}
-          ${this.checkHelptext ? e`<div class="pkt-input-check__input-helptext">${this.checkHelptext}</div>` : n}
+          <span id=${u}>${this.label} ${l()}</span>
+          ${this.checkHelptext ? e`<div id=${d} class="pkt-input-check__input-helptext">
+                  ${this.checkHelptext}
+                </div>` : n}
         </label>
       `;
 		return e`
       <div class="pkt-input-check">
         <div class=${t}>
-          ${this.labelPosition === "left" ? u() : n}
+          ${this.labelPosition === "left" ? f() : n}
           <input
             id=${this.id + "-internal"}
             class=${r}
@@ -64,8 +70,10 @@ var l = class extends c {
             @focus=${this.onFocus}
             ?checked=${this.checked}
             role=${this.isSwitch ? "switch" : "checkbox"}
+            aria-labelledby=${this.label ? u : n}
+            aria-describedby=${this.checkHelptext ? d : n}
           />
-          ${this.labelPosition === "right" ? u() : n}
+          ${this.labelPosition === "right" ? f() : n}
         </div>
       </div>
     `;

package/dist/docs/components/switch.d.ts

@@ -0,0 +1,4 @@
+import { PktElement } from '../../base-elements/element';
+export declare class Switch extends PktElement {
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/pkt-checkbox.cjs

@@ -1 +1 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("./checkbox-CddODhna.cjs");exports.PktCheckbox=e.n,exports.default=e.t;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("./checkbox-CBZEGmqa.cjs");exports.PktCheckbox=e.n,exports.default=e.t;

package/dist/pkt-checkbox.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "./checkbox-C6JdANel.js";
+import { n as e, t } from "./checkbox-COw1Uwnm.js";
 export { e as PktCheckbox, t as default };

package/dist/pkt-index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./element-D_mCyFeX.cjs"),t=require("./consent-DnE6IPEj.cjs"),n=require("./alert-DH3VqNqh.cjs"),r=require("./icon-BzxBkRyE.cjs"),i=require("./button-Cx6Xdp6t.cjs"),a=require("./accordion-CsrLQXEA.cjs"),o=require("./backlink-CDH824db.cjs"),s=require("./breadcrumbs-B37tsIoh.cjs"),c=require("./calendar-CAwIY7x_.cjs"),l=require("./tag-CGlxtBOH.cjs"),u=require("./header-D2SD2JLt.cjs"),d=require("./card-CB72gwBC.cjs"),f=require("./combobox-N3NP77le.cjs"),p=require("./input-wrapper-D64Qn-QH.cjs"),m=require("./helptext-6HsH-I6a.cjs"),h=require("./checkbox-CddODhna.cjs"),g=require("./fileupload-3OtW4Xlo.cjs"),_=require("./modal-DZm_fn3K.cjs"),v=require("./progressbar-DsE4-qaW.cjs"),y=require("./datepicker-BzRhOIkG.cjs"),b=require("./footer-Ca3DM544.cjs"),x=require("./link-Bk7aDZCC.cjs"),S=require("./textinput-Cv4tal5W.cjs"),C=require("./searchinput-vi7twt5b.cjs"),w=require("./header-menu-B9ABa0WW.cjs"),T=require("./heading-4ZHACOeL.cjs"),E=require("./linkcard-rZpQuO1Z.cjs"),D=require("./loader-BAn68gBb.cjs"),O=require("./messagebox-WH2HjT5I.cjs"),k=require("./radiobutton-CdwYbHnx.cjs"),A=require("./tabs-hiTrWsXq.cjs"),j=require("./textarea-BHGZhMN4.cjs"),M=require("./select-TAwBNhhf.cjs"),N=require("./timepicker-BBUYnYzM.cjs");exports.PktAccordion=a.r,exports.PktAccordionItem=a.n,exports.PktAlert=n.n,exports.PktBackLink=o.n,exports.PktBreadcrumbs=s.t,exports.PktButton=i.n,exports.PktCalendar=c.n,exports.PktCard=d.n,exports.PktCheckbox=h.n,exports.PktCombobox=f.n,exports.PktConsent=t.n,exports.PktDateTags=y.a,exports.PktDatepicker=y.t,Object.defineProperty(exports,"PktFileUpload",{enumerable:!0,get:function(){return g.n}}),exports.PktFooter=b.n,exports.PktFooterSimple=b.t,exports.PktHeader=u.t,exports.PktHeaderGlobal=u.n,exports.PktHeaderMenu=w.n,exports.PktHeaderService=u.r,exports.PktHeaderUserMenu=u.i,exports.PktHeading=T.n,exports.PktHelptext=m.n,exports.PktIcon=r.n,exports.PktInputWrapper=p.n,exports.PktLink=x.n,exports.PktLinkCard=E.n,exports.PktLoader=D.n,exports.PktMessagebox=O.n,exports.PktModal=_.n,exports.PktProgressbar=v.n,exports.PktRadioButton=k.n,exports.PktRadiobutton=k.n,exports.PktSearchInput=C.n,exports.PktSelect=M.n,exports.PktTabItem=A.n,exports.PktTabs=A.r,exports.PktTag=l.n,exports.PktTextarea=j.n,exports.PktTextinput=S.n,exports.PktTimepicker=N.t,exports.getPktStrings=e.r,exports.pktStringsNb=e.s,exports.resetPktStrings=e.i,exports.setPktStrings=e.a,exports.subscribePktStrings=e.o;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./element-D_mCyFeX.cjs"),t=require("./consent-DnE6IPEj.cjs"),n=require("./alert-DH3VqNqh.cjs"),r=require("./icon-BzxBkRyE.cjs"),i=require("./button-Cx6Xdp6t.cjs"),a=require("./accordion-CsrLQXEA.cjs"),o=require("./backlink-CDH824db.cjs"),s=require("./breadcrumbs-B37tsIoh.cjs"),c=require("./calendar-CAwIY7x_.cjs"),l=require("./tag-CGlxtBOH.cjs"),u=require("./header-D2SD2JLt.cjs"),d=require("./card-CB72gwBC.cjs"),f=require("./combobox-N3NP77le.cjs"),p=require("./input-wrapper-D64Qn-QH.cjs"),m=require("./helptext-6HsH-I6a.cjs"),h=require("./checkbox-CBZEGmqa.cjs"),g=require("./fileupload-3OtW4Xlo.cjs"),_=require("./modal-DZm_fn3K.cjs"),v=require("./progressbar-DsE4-qaW.cjs"),y=require("./datepicker-BzRhOIkG.cjs"),b=require("./footer-Ca3DM544.cjs"),x=require("./link-Bk7aDZCC.cjs"),S=require("./textinput-Cv4tal5W.cjs"),C=require("./searchinput-vi7twt5b.cjs"),w=require("./header-menu-B9ABa0WW.cjs"),T=require("./heading-4ZHACOeL.cjs"),E=require("./linkcard-rZpQuO1Z.cjs"),D=require("./loader-BAn68gBb.cjs"),O=require("./messagebox-WH2HjT5I.cjs"),k=require("./radiobutton-BEzjKx1J.cjs"),A=require("./tabs-hiTrWsXq.cjs"),j=require("./textarea-BHGZhMN4.cjs"),M=require("./select-TAwBNhhf.cjs"),N=require("./timepicker-BBUYnYzM.cjs");exports.PktAccordion=a.r,exports.PktAccordionItem=a.n,exports.PktAlert=n.n,exports.PktBackLink=o.n,exports.PktBreadcrumbs=s.t,exports.PktButton=i.n,exports.PktCalendar=c.n,exports.PktCard=d.n,exports.PktCheckbox=h.n,exports.PktCombobox=f.n,exports.PktConsent=t.n,exports.PktDateTags=y.a,exports.PktDatepicker=y.t,Object.defineProperty(exports,"PktFileUpload",{enumerable:!0,get:function(){return g.n}}),exports.PktFooter=b.n,exports.PktFooterSimple=b.t,exports.PktHeader=u.t,exports.PktHeaderGlobal=u.n,exports.PktHeaderMenu=w.n,exports.PktHeaderService=u.r,exports.PktHeaderUserMenu=u.i,exports.PktHeading=T.n,exports.PktHelptext=m.n,exports.PktIcon=r.n,exports.PktInputWrapper=p.n,exports.PktLink=x.n,exports.PktLinkCard=E.n,exports.PktLoader=D.n,exports.PktMessagebox=O.n,exports.PktModal=_.n,exports.PktProgressbar=v.n,exports.PktRadioButton=k.n,exports.PktRadiobutton=k.n,exports.PktSearchInput=C.n,exports.PktSelect=M.n,exports.PktTabItem=A.n,exports.PktTabs=A.r,exports.PktTag=l.n,exports.PktTextarea=j.n,exports.PktTextinput=S.n,exports.PktTimepicker=N.t,exports.getPktStrings=e.r,exports.pktStringsNb=e.s,exports.resetPktStrings=e.i,exports.setPktStrings=e.a,exports.subscribePktStrings=e.o;

package/dist/pkt-index.js

@@ -13,7 +13,7 @@ import { n as y } from "./card-cyZE94EO.js";
 import { n as b } from "./combobox-Cqqokx73.js";
 import { n as x } from "./input-wrapper-Bg06k-cj.js";
 import { n as S } from "./helptext-BESB9Vlq.js";
-import { n as C } from "./checkbox-C6JdANel.js";
+import { n as C } from "./checkbox-COw1Uwnm.js";
 import { n as w } from "./fileupload-PJWEBD88.js";
 import { n as T } from "./modal-DdC1_qT3.js";
 import { n as E } from "./progressbar-D1x6MwdY.js";
@@ -27,7 +27,7 @@ import { n as F } from "./heading-BHWdVbvN.js";
 import { n as I } from "./linkcard-Bguo9oCv.js";
 import { n as L } from "./loader-C3gwO0i3.js";
 import { n as R } from "./messagebox-DAE59dMX.js";
-import { n as z } from "./radiobutton-B2P48MMf.js";
+import { n as z } from "./radiobutton-Cpwa5ezn.js";
 import { n as B, r as V } from "./tabs-kxsX1ZEf.js";
 import { n as H } from "./textarea-BPQVrOp9.js";
 import { n as U } from "./select-c15YAQbr.js";

package/dist/pkt-radiobutton.cjs

@@ -1 +1 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("./radiobutton-CdwYbHnx.cjs");exports.PktRadioButton=e.n,exports.default=e.t;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("./radiobutton-BEzjKx1J.cjs");exports.PktRadioButton=e.n,exports.default=e.t;

package/dist/pkt-radiobutton.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "./radiobutton-B2P48MMf.js";
+import { n as e, t } from "./radiobutton-Cpwa5ezn.js";
 export { e as PktRadioButton, t as default };

package/dist/{radiobutton-CdwYbHnx.cjs → radiobutton-BEzjKx1J.cjs}

@@ -1,4 +1,12 @@
-const e=require("./element-D_mCyFeX.cjs"),t=require("./class-map-DupQbnhE.cjs"),n=require("./ref-AuNEkS5a.cjs"),r=require("./input-element-DhIEFeuP.cjs");var i=class extends r.t{constructor(...e){super(...e),this.inputRef=n.t(),this.value=``,this.checkHelptext=null,this.defaultChecked=!1,this.hasTile=!1,this.checked=null,this.type=`radio`,this.tagText=null,this.optionalTag=!1,this.requiredTag=!1,this._checked=!1}connectedCallback(){super.connectedCallback()}attributeChangedCallback(e,t,n){e===`defaultChecked`&&(this._checked=this.defaultChecked),e===`checked`&&(this._checked=this.checked===``||this.checked===`true`||this.checked===!0),super.attributeChangedCallback(e,t,n)}render(){let r=t.t({"pkt-input-check__input":!0,"pkt-input-check__input--tile":this.hasTile,"pkt-input-check__input--tile-disabled":this.disabled&&this.hasTile}),i=t.t({"pkt-input-check__input-checkbox":!0,"pkt-input-check__input-checkbox--error":this.hasError}),a=t.t({"pkt-input-check__input-label":!0,"pkt-input-check__input-label--disabled":this.disabled,"pkt-sr-only":this.hideLabel}),o=`pkt-tag pkt-tag--small pkt-tag--thin-text`,s=this.pktStrings.get(`forms`);return e._`
+const e=require("./element-D_mCyFeX.cjs"),t=require("./class-map-DupQbnhE.cjs"),n=require("./ref-AuNEkS5a.cjs"),r=require("./input-element-DhIEFeuP.cjs");var i=class extends r.t{constructor(...e){super(...e),this.inputRef=n.t(),this.value=``,this.checkHelptext=null,this.defaultChecked=!1,this.hasTile=!1,this.checked=null,this.type=`radio`,this.tagText=null,this.optionalTag=!1,this.requiredTag=!1,this._checked=!1}connectedCallback(){super.connectedCallback()}attributeChangedCallback(e,t,n){e===`defaultChecked`&&(this._checked=this.defaultChecked),e===`checked`&&(this._checked=this.checked===``||this.checked===`true`||this.checked===!0),super.attributeChangedCallback(e,t,n)}render(){let r=t.t({"pkt-input-check__input":!0,"pkt-input-check__input--tile":this.hasTile,"pkt-input-check__input--tile-disabled":this.disabled&&this.hasTile}),i=t.t({"pkt-input-check__input-checkbox":!0,"pkt-input-check__input-checkbox--error":this.hasError}),a=t.t({"pkt-input-check__input-label":!0,"pkt-input-check__input-label--disabled":this.disabled,"pkt-sr-only":this.hideLabel}),o=`pkt-tag pkt-tag--small pkt-tag--thin-text`,s=this.pktStrings.get(`forms`),c=()=>e._`
+        ${this.tagText?e._`<span class=${o+` pkt-tag--gray`}>${this.tagText}</span>`:e.h}
+        ${this.optionalTag?e._`<span class=${o+` pkt-tag--blue-light`}
+                >${this.optionalText??s.optional}</span
+              >`:e.h}
+        ${this.requiredTag?e._`<span class=${o+` pkt-tag--beige`}
+                >${this.requiredText??s.required}</span
+              >`:e.h}
+      `,l=this.id+`-check-label`,u=this.id+`-check-helptext`;return e._`
       <div class="pkt-input-check">
         <div class=${r}>
           <input
@@ -14,15 +22,15 @@ const e=require("./element-D_mCyFeX.cjs"),t=require("./class-map-DupQbnhE.cjs"),
             @blur=${this.onBlur}
             @focus=${this.onFocus}
             ?checked=${this.checked}
+            aria-labelledby=${this.label?l:e.h}
+            aria-describedby=${this.checkHelptext?u:e.h}
           />
           ${e._`
         <label class=${a} for=${this.id+`-internal`}>
-          ${this.label} ${e._`
-        ${this.tagText?e._`<span class=${o+` pkt-tag--gray`}>${this.tagText}</span>`:e.h}
-        ${this.optionalTag?e._`<span class=${o+` pkt-tag--blue-light`}>${this.optionalText??s.optional}</span>`:e.h}
-        ${this.requiredTag?e._`<span class=${o+` pkt-tag--beige`}>${this.requiredText??s.required}</span>`:e.h}
-      `}
-          ${this.checkHelptext?e._`<div class="pkt-input-check__input-helptext">${this.checkHelptext}</div>`:e.h}
+          <span id=${l}>${this.label} ${c()}</span>
+          ${this.checkHelptext?e._`<div id=${u} class="pkt-input-check__input-helptext">
+                  ${this.checkHelptext}
+                </div>`:e.h}
         </label>
       `}
         </div>

package/dist/{radiobutton-B2P48MMf.js → radiobutton-Cpwa5ezn.js}

@@ -25,7 +25,15 @@ var u = class extends l {
 			"pkt-input-check__input-label": !0,
 			"pkt-input-check__input-label--disabled": this.disabled,
 			"pkt-sr-only": this.hideLabel
-		}), a = "pkt-tag pkt-tag--small pkt-tag--thin-text", c = this.pktStrings.get("forms");
+		}), a = "pkt-tag pkt-tag--small pkt-tag--thin-text", c = this.pktStrings.get("forms"), l = () => e`
+        ${this.tagText ? e`<span class=${a + " pkt-tag--gray"}>${this.tagText}</span>` : n}
+        ${this.optionalTag ? e`<span class=${a + " pkt-tag--blue-light"}
+                >${this.optionalText ?? c.optional}</span
+              >` : n}
+        ${this.requiredTag ? e`<span class=${a + " pkt-tag--beige"}
+                >${this.requiredText ?? c.required}</span
+              >` : n}
+      `, u = this.id + "-check-label", d = this.id + "-check-helptext";
 		return e`
       <div class="pkt-input-check">
         <div class=${t}>
@@ -42,15 +50,15 @@ var u = class extends l {
             @blur=${this.onBlur}
             @focus=${this.onFocus}
             ?checked=${this.checked}
+            aria-labelledby=${this.label ? u : n}
+            aria-describedby=${this.checkHelptext ? d : n}
           />
           ${e`
         <label class=${i} for=${this.id + "-internal"}>
-          ${this.label} ${e`
-        ${this.tagText ? e`<span class=${a + " pkt-tag--gray"}>${this.tagText}</span>` : n}
-        ${this.optionalTag ? e`<span class=${a + " pkt-tag--blue-light"}>${this.optionalText ?? c.optional}</span>` : n}
-        ${this.requiredTag ? e`<span class=${a + " pkt-tag--beige"}>${this.requiredText ?? c.required}</span>` : n}
-      `}
-          ${this.checkHelptext ? e`<div class="pkt-input-check__input-helptext">${this.checkHelptext}</div>` : n}
+          <span id=${u}>${this.label} ${l()}</span>
+          ${this.checkHelptext ? e`<div id=${d} class="pkt-input-check__input-helptext">
+                  ${this.checkHelptext}
+                </div>` : n}
         </label>
       `}
         </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "18.7.2",
+  "version": "18.8.0",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -83,5 +83,5 @@
   "engines": {
     "node": "^22.19.0 || ^24.0.0 || ^26.0.0"
   },
-  "gitHead": "f590a9e5e76fbb4ebf2cf93322937f023ae3160d"
+  "gitHead": "30be2be7365f440b93da5bad8ca3e883255d647a"
 }

package/src/components/checkbox/checkbox.test.ts

@@ -363,7 +363,7 @@ describe('PktCheckbox', () => {
 
       const helptext = checkbox.querySelector('.pkt-input-check__input-helptext')
       expect(helptext).toBeInTheDocument()
-      expect(helptext?.textContent).toBe('This is help text')
+      expect(helptext?.textContent?.trim()).toBe('This is help text')
     })
 
     test('does not render helptext when not provided', async () => {

package/src/components/checkbox/checkbox.ts

@@ -115,25 +115,42 @@ export class PktCheckbox extends PktInputElement<Props> {
 
     const tags = () => {
       return html`
-        ${this.tagText
-          ? html`<span class=${tagClasses + ' pkt-tag--gray'}>${this.tagText}</span>`
-          : nothing}
-        ${this.optionalTag
-          ? html`<span class=${tagClasses + ' pkt-tag--blue-light'}>${this.optionalText ?? formStrings.optional}</span>`
-          : nothing}
-        ${this.requiredTag
-          ? html`<span class=${tagClasses + ' pkt-tag--beige'}>${this.requiredText ?? formStrings.required}</span>`
-          : nothing}
+        ${
+          this.tagText
+            ? html`<span class=${tagClasses + ' pkt-tag--gray'}>${this.tagText}</span>`
+            : nothing
+        }
+        ${
+          this.optionalTag
+            ? html`<span class=${tagClasses + ' pkt-tag--blue-light'}
+                >${this.optionalText ?? formStrings.optional}</span
+              >`
+            : nothing
+        }
+        ${
+          this.requiredTag
+            ? html`<span class=${tagClasses + ' pkt-tag--beige'}
+                >${this.requiredText ?? formStrings.required}</span
+              >`
+            : nothing
+        }
       `
     }
 
+    const labelId = this.id + '-check-label'
+    const helptextId = this.id + '-check-helptext'
+
     const labelAndHelptext = () => {
       return html`
         <label class=${labelClasses} for=${this.id + '-internal'}>
-          ${this.label} ${tags()}
-          ${this.checkHelptext
-            ? html`<div class="pkt-input-check__input-helptext">${this.checkHelptext}</div>`
-            : nothing}
+          <span id=${labelId}>${this.label} ${tags()}</span>
+          ${
+            this.checkHelptext
+              ? html`<div id=${helptextId} class="pkt-input-check__input-helptext">
+                  ${this.checkHelptext}
+                </div>`
+              : nothing
+          }
         </label>
       `
     }
@@ -156,6 +173,8 @@ export class PktCheckbox extends PktInputElement<Props> {
             @focus=${this.onFocus}
             ?checked=${this.checked}
             role=${this.isSwitch ? 'switch' : 'checkbox'}
+            aria-labelledby=${this.label ? labelId : nothing}
+            aria-describedby=${this.checkHelptext ? helptextId : nothing}
           />
           ${this.labelPosition === 'right' ? labelAndHelptext() : nothing}
         </div>

package/src/components/radiobutton/radiobutton.test.ts

@@ -159,7 +159,7 @@ describe('pkt-radiobutton', () => {
 
     const helptext = radiobutton.querySelector('.pkt-input-check__input-helptext')
     expect(helptext).toBeInTheDocument()
-    expect(helptext?.textContent).toBe('This is helpful information')
+    expect(helptext?.textContent?.trim()).toBe('This is helpful information')
   })
 
   test('handles error state correctly', async () => {

package/src/components/radiobutton/radiobutton.ts

@@ -75,25 +75,42 @@ export class PktRadioButton extends PktInputElement<Props> {
 
     const tags = () => {
       return html`
-        ${this.tagText
-          ? html`<span class=${tagClasses + ' pkt-tag--gray'}>${this.tagText}</span>`
-          : nothing}
-        ${this.optionalTag
-          ? html`<span class=${tagClasses + ' pkt-tag--blue-light'}>${this.optionalText ?? formStrings.optional}</span>`
-          : nothing}
-        ${this.requiredTag
-          ? html`<span class=${tagClasses + ' pkt-tag--beige'}>${this.requiredText ?? formStrings.required}</span>`
-          : nothing}
+        ${
+          this.tagText
+            ? html`<span class=${tagClasses + ' pkt-tag--gray'}>${this.tagText}</span>`
+            : nothing
+        }
+        ${
+          this.optionalTag
+            ? html`<span class=${tagClasses + ' pkt-tag--blue-light'}
+                >${this.optionalText ?? formStrings.optional}</span
+              >`
+            : nothing
+        }
+        ${
+          this.requiredTag
+            ? html`<span class=${tagClasses + ' pkt-tag--beige'}
+                >${this.requiredText ?? formStrings.required}</span
+              >`
+            : nothing
+        }
       `
     }
 
+    const labelId = this.id + '-check-label'
+    const helptextId = this.id + '-check-helptext'
+
     const labelAndHelptext = () => {
       return html`
         <label class=${labelClasses} for=${this.id + '-internal'}>
-          ${this.label} ${tags()}
-          ${this.checkHelptext
-            ? html`<div class="pkt-input-check__input-helptext">${this.checkHelptext}</div>`
-            : nothing}
+          <span id=${labelId}>${this.label} ${tags()}</span>
+          ${
+            this.checkHelptext
+              ? html`<div id=${helptextId} class="pkt-input-check__input-helptext">
+                  ${this.checkHelptext}
+                </div>`
+              : nothing
+          }
         </label>
       `
     }
@@ -114,6 +131,8 @@ export class PktRadioButton extends PktInputElement<Props> {
             @blur=${this.onBlur}
             @focus=${this.onFocus}
             ?checked=${this.checked}
+            aria-labelledby=${this.label ? labelId : nothing}
+            aria-describedby=${this.checkHelptext ? helptextId : nothing}
           />
           ${labelAndHelptext()}
         </div>