@oslokommune/punkt-elements 18.7.1 → 18.8.0

package/src/components/combobox/combobox.ts

@@ -15,7 +15,9 @@ import { getSingleValueForInput } from 'shared-utils/combobox/input-utils'
 import { slotUtils, optionStateUtils } from './combobox-utils'
 import { slotContent } from '@/directives/slot-content'
 import { ComboboxHandlers } from './combobox-handlers'
+import { formatString } from 'shared-strings'
 import type { IPktStringsProps } from 'shared-strings'
+import type { Booleanish } from 'shared-types'
 
 import '../input-wrapper'
 import '../icon'
@@ -50,13 +52,42 @@ export interface IPktCombobox extends IPktStringsProps<'combobox' | 'listbox'> {
   placeholder?: string | null
   requiredTag?: boolean
   requiredText?: string
-  searchPlaceholder?: string
+  searchPlaceholder?: string | null
   tagPlacement?: TPktComboboxTagPlacement | null
   tagText?: string | null
   value?: string | string[]
+  defaultValue?: string | string[] | null
+  hasFieldset?: boolean | null
+  useWrapper?: Booleanish
   isOpen?: boolean
 }
 
+/**
+ * Attribute spellings for template use. TypeScript cannot see the `attribute`
+ * option on Lit's @property decorator, so markup like `allow-user-input` is
+ * otherwise reported as unknown.
+ */
+export interface IPktComboboxAttributes {
+  'allow-user-input'?: boolean
+  'default-options'?: IPktComboboxOption[]
+  'display-value-as'?: string
+  'include-search'?: boolean
+  'search-placeholder'?: string | null
+  'tag-placement'?: TPktComboboxTagPlacement | null
+  defaultvalue?: string | string[] | null
+  errormessage?: string
+  haserror?: boolean
+  helptextdropdown?: string | null
+  helptextdropdownbutton?: string | null
+  optionaltag?: boolean
+  optionaltext?: string
+  requiredtag?: boolean
+  requiredtext?: string
+  tagtext?: string | null
+  hasfieldset?: boolean | null
+  usewrapper?: Booleanish
+}
+
 declare global {
   interface HTMLElementTagNameMap {
     'pkt-combobox': PktCombobox & HTMLSelectElement
@@ -84,7 +115,7 @@ export class PktCombobox extends ComboboxHandlers implements IPktCombobox {
     if (this.defaultOptions && this.defaultOptions.length) {
       const userAdded = this.options?.filter((opt) => opt.userAdded) || []
       this.options = [...userAdded, ...JSON.parse(JSON.stringify(this.defaultOptions))]
-      this._options = Array.isArray(this.options) ? [...this.options] : []
+      this._options = optionStateUtils.cloneOptions(this.options)
     }
 
     // If options are provided via the options slot, we need to extract them
@@ -99,22 +130,6 @@ export class PktCombobox extends ComboboxHandlers implements IPktCombobox {
     }
   }
 
-  protected willUpdate(changedProperties: Map<PropertyKey, unknown>): void {
-    // Re-parse slot options when the controller detects mutations.
-    // The controller increments its generation counter on each mutation, but
-    // doesn't set any reactive properties — so we detect the change here.
-    if (this._optionsFromSlot && this.optionsController) {
-      const currentGen = this.optionsController.generation
-      if (currentGen !== this._lastSlotGeneration) {
-        this._lastSlotGeneration = currentGen
-        const parsedOptions = slotUtils.parseOptionsFromSlot(this.optionsController.nodes)
-        const userAdded = this._options.filter((o) => o.userAdded)
-        this.options = [...userAdded, ...parsedOptions]
-      }
-    }
-    super.willUpdate(changedProperties)
-  }
-
   disconnectedCallback(): void {
     super.disconnectedCallback()
     document?.body.removeEventListener('click', this.handleBodyClick)
@@ -130,53 +145,71 @@ export class PktCombobox extends ComboboxHandlers implements IPktCombobox {
     super.firstUpdated(changedProperties)
   }
 
-  updated(changedProperties: PropertyValues): void {
+  protected willUpdate(changedProperties: PropertyValues): void {
+    // Re-parse slot options when the controller detects mutations.
+    // The controller increments its generation counter on each mutation, but
+    // doesn't set any reactive properties — so we detect the change here.
+    if (this._optionsFromSlot && this.optionsController) {
+      const currentGen = this.optionsController.generation
+      if (currentGen !== this._lastSlotGeneration) {
+        this._lastSlotGeneration = currentGen
+        const parsedOptions = slotUtils.parseOptionsFromSlot(this.optionsController.nodes)
+        const userAdded = this._options.filter((o) => o.userAdded)
+        this.options = [...userAdded, ...parsedOptions]
+      }
+    }
+
+    super.willUpdate(changedProperties)
+
     if (changedProperties.has('isOpen')) {
       this._isOptionsOpen = this.isOpen
     }
 
-    // Handle value and _value changes.
-    // Three cases:
-    // 1. value changed from our own syncValueAndDispatch (internal sync) — skip value handler,
-    //    but still process concurrent _value changes
-    // 2. value changed externally — sync _value from value, dispatch events
-    // 3. Only _value changed — sync value from _value, dispatch events
+    if (changedProperties.has('defaultOptions') && this.defaultOptions.length) {
+      const userAdded =
+        (Array.isArray(this.options) ? this.options : []).filter((opt) => opt.userAdded) || []
+      this.options = [...userAdded, ...JSON.parse(JSON.stringify(this.defaultOptions))]
+      this._options = optionStateUtils.cloneOptions(this.options)
+    }
+
+    // `value` is derived before options, so that options.selected can add to
+    // the result rather than being overwritten by an empty value attribute.
     const valueChanged = changedProperties.has('value')
     const internalChanged = changedProperties.has('_value')
-    const isInternalSync = valueChanged && this._internalValueSync
 
-    if (isInternalSync) {
-      this._internalValueSync = false
-      if (internalChanged) {
-        this.syncValueAndDispatch(changedProperties.get('_value') as string[])
-      }
-    } else if (valueChanged) {
+    if (valueChanged) {
       const oldInternal = [...this._value]
       const newInternal = this.parseValue()
       if (newInternal.join(',') !== this._value.join(',')) {
         this._value = newInternal
-        this.options.forEach((o) => (o.selected = newInternal.includes(o.value)))
         this._options.forEach((o) => (o.selected = newInternal.includes(o.value)))
         this._options = [...this._options]
       }
-      this.updateMaxReached()
-      this.syncValueAndDispatch(oldInternal)
+      this._pendingDispatchFrom ??= oldInternal
     } else if (internalChanged) {
-      this.syncValueAndDispatch(changedProperties.get('_value') as string[])
+      this._pendingDispatchFrom ??= (changedProperties.get('_value') as string[]) ?? []
     }
 
-    // If defaultOptions changed, update options (preserving userAdded)
-    if (changedProperties.has('defaultOptions') && this.defaultOptions.length) {
-      const userAdded =
-        (Array.isArray(this.options) ? this.options : []).filter((opt) => opt.userAdded) || []
-      this.options = [...userAdded, ...JSON.parse(JSON.stringify(this.defaultOptions))]
-      this._options = Array.isArray(this.options) ? [...this.options] : []
+    // The base class applies defaultValue through valueChanged(), which combobox
+    // overrides as a no-op, so it is seeded here instead.
+    if (changedProperties.has('defaultValue') && this.defaultValue != null && !this._value.length) {
+      const seeded = this.parseToValues(this.defaultValue)
+      if (seeded.length) {
+        this._pendingDispatchFrom ??= [...this._value]
+        this._value = seeded
+        this._options.forEach((o) => (o.selected = seeded.includes(o.value)))
+        this._options = [...this._options]
+      }
     }
 
     if (changedProperties.has('options')) {
       const prevOptions =
         (changedProperties.get('options') as IPktComboboxOption[]) || this._options || []
-      const mergedOptions = optionStateUtils.mergeWithUserAdded(this.options, prevOptions)
+      const mergedOptions = optionStateUtils.mergeWithUserAdded(
+        optionStateUtils.cloneOptions(this.options),
+        prevOptions,
+        this._value,
+      )
       this._options = mergedOptions
       if (mergedOptions.length > this.options.length) {
         this.options = mergedOptions
@@ -186,11 +219,32 @@ export class PktCombobox extends ComboboxHandlers implements IPktCombobox {
       this._options = syncResult.options
 
       if (syncResult.newValues.length > this._value.length) {
-        const oldValue = [...this._value]
+        this._pendingDispatchFrom ??= [...this._value]
         this._value = syncResult.newValues
-        this.syncValueAndDispatch(oldValue)
       }
     }
+
+    if (
+      valueChanged ||
+      internalChanged ||
+      changedProperties.has('options') ||
+      changedProperties.has('defaultValue')
+    ) {
+      this.updateMaxReached()
+    }
+
+    if (this._pendingDispatchFrom) {
+      this.syncPublicValue()
+    }
+  }
+
+  updated(changedProperties: PropertyValues): void {
+    if (this._pendingDispatchFrom) {
+      const from = this._pendingDispatchFrom
+      this._pendingDispatchFrom = null
+      this.dispatchValueChange(from)
+    }
+
     if (changedProperties.has('_search')) {
       this.dispatchEvent(
         new CustomEvent('search', {
@@ -264,9 +318,9 @@ export class PktCombobox extends ComboboxHandlers implements IPktCombobox {
 
   attributeChangedCallback(name: string, _old: string | null, value: string | null): void {
     // Don't set _value here for 'value' changes — this.value hasn't been updated yet
-    // (super.attributeChangedCallback does that). Let updated() handle the sync.
+    // (super.attributeChangedCallback does that). Let willUpdate() handle the sync.
     if (name === 'options') {
-      this._options = Array.isArray(this.options) ? [...this.options] : []
+      this._options = optionStateUtils.cloneOptions(this.options)
       const syncResult = optionStateUtils.syncOptionsWithValues(this._options, this._value)
       this._options = syncResult.options
       if (syncResult.newValues.length > this._value.length) {
@@ -330,6 +384,7 @@ export class PktCombobox extends ComboboxHandlers implements IPktCombobox {
             )}
             aria-activedescendant=${ifDefined(
               !this._hasTextInput &&
+                this._isOptionsOpen &&
                 this._value[0] &&
                 !!findOptionByValue(this.options, this._value[0])
                 ? `${this.id}-listbox-${findOptionIndex(this._options, this._value[0])}`
@@ -339,18 +394,21 @@ export class PktCombobox extends ComboboxHandlers implements IPktCombobox {
             tabindex=${!this._hasTextInput ? (this.disabled ? '-1' : '0') : '-1'}
             @click=${this.handleInputClick}
             @keydown=${!this._hasTextInput ? this.handleSelectOnlyKeydown : nothing}
+            @blur=${this.restoreInputTab}
             ${ref(this.triggerRef)}
           >
-            ${!this._hasTextInput &&
-            this.placeholder &&
-            (!this._value.length || (this.multiple && this.tagPlacement == 'outside')) &&
-            !this._inputFocus
-              ? html`<span class="pkt-combobox__placeholder" @click=${this.handlePlaceholderClick}
-                  >${this.placeholder}</span
-                >`
-              : this.tagPlacement !== 'outside'
-                ? this.renderSingleOrMultipleValues()
-                : nothing}
+            ${
+              !this._hasTextInput &&
+              this.placeholder &&
+              (!this._value.length || (this.multiple && this.tagPlacement == 'outside')) &&
+              !this._inputFocus
+                ? html`<span class="pkt-combobox__placeholder" @click=${this.handlePlaceholderClick}
+                    >${this.placeholder}</span
+                  >`
+                : this.tagPlacement !== 'outside'
+                  ? this.renderSingleOrMultipleValues()
+                  : nothing
+            }
             ${this.renderInputField()}
             <pkt-icon
               class=${classMap({
@@ -368,18 +426,23 @@ export class PktCombobox extends ComboboxHandlers implements IPktCombobox {
             .isOpen=${this._isOptionsOpen}
             .searchPlaceholder=${this.searchPlaceholder}
             .label="Liste: ${this.label || ''}"
+            ?disabled=${this.disabled}
             ?include-search=${this.includeSearch}
             ?is-multi-select=${this.multiple}
             ?allow-user-input=${this.allowUserInput && !this._maxIsReached}
             ?max-is-reached=${this._maxIsReached}
             .customUserInput=${ifDefined(this._addValueText)}
-            .userMessage=${this._userInfoMessage
-              ? this.pktStrings.get('combobox')[this._userInfoMessage]
-              : ''}
+            .userMessage=${
+              this._userInfoMessage
+                ? formatString(this.pktStrings.get('combobox')[this._userInfoMessage], {
+                    value: this._messageValue ?? '',
+                  })
+                : ''
+            }
             @search=${this.handleSearch}
             @option-toggle=${this.handleOptionToggled}
             @select-all=${this.addAllOptions}
-            @close-options=${() => (this._isOptionsOpen = false)}
+            @close-options=${this.handleCloseOptions}
             @tab-close=${() => this.closeAndProcessInput()}
             .searchValue=${this._search || null}
             .maxLength=${this.maxlength || 0}
@@ -387,11 +450,13 @@ export class PktCombobox extends ComboboxHandlers implements IPktCombobox {
           ></pkt-listbox>
         </div>
 
-        ${this.tagPlacement === 'outside' && this.multiple
-          ? html`<div class="pkt-combobox__tags-outside">
-              ${this.renderSingleOrMultipleValues()}
-            </div>`
-          : nothing}
+        ${
+          this.tagPlacement === 'outside' && this.multiple
+            ? html`<div class="pkt-combobox__tags-outside">
+                ${this.renderSingleOrMultipleValues()}
+              </div>`
+            : nothing
+        }
       </pkt-input-wrapper>
     `
   }
@@ -414,6 +479,7 @@ export class PktCombobox extends ComboboxHandlers implements IPktCombobox {
                 e.stopPropagation()
                 e.stopImmediatePropagation()
               }}
+              tabindex=${ifDefined(this._skipInputTab ? '-1' : undefined)}
               @keydown=${this.handleInputKeydown}
               @focus=${this.handleFocus}
               @blur=${this.handleBlur}
@@ -424,7 +490,9 @@ export class PktCombobox extends ComboboxHandlers implements IPktCombobox {
               aria-autocomplete=${this.typeahead ? 'both' : this.allowUserInput ? 'list' : 'none'}
               aria-controls="${this.id}-listbox"
               aria-activedescendant=${ifDefined(
-                this._value[0] && !!findOptionByValue(this.options, this._value[0])
+                this._isOptionsOpen &&
+                  this._value[0] &&
+                  !!findOptionByValue(this.options, this._value[0])
                   ? `${this.id}-listbox-${findOptionIndex(this._options, this._value[0])}`
                   : undefined,
               )}
@@ -474,9 +542,9 @@ export class PktCombobox extends ComboboxHandlers implements IPktCombobox {
                   ?closeTag=${!this.disabled}
                   .buttonTabindex=${isOutside ? undefined : -1}
                   @close=${() => this.handleTagRemove(value)}
-                  @keydown=${isOutside
-                    ? nothing
-                    : (e: KeyboardEvent) => this.handleTagKeydown(e, index)}
+                  @keydown=${
+                    isOutside ? nothing : (e: KeyboardEvent) => this.handleTagKeydown(e, index)
+                  }
                 >
                   ${this.renderValueTag(option)}
                 </pkt-tag>
@@ -487,6 +555,8 @@ export class PktCombobox extends ComboboxHandlers implements IPktCombobox {
       </ul>
     `
 
+    if (!isSingleValueDisplay && this._value.length === 0) return nothing
+
     return isSingleValueDisplay ? singleValueContent : multipleValuesContent
   }
 
@@ -495,18 +565,12 @@ export class PktCombobox extends ComboboxHandlers implements IPktCombobox {
     const displayAs = this.displayValueAs as TPktComboboxDisplayValue
     switch (displayAs) {
       case 'prefixAndValue':
-        return html`<span class="pkt-combobox__value" data-focusfix=${this.id}
-          >${option.prefix || ''} ${option.value}</span
-        >`
+        return html`<span class="pkt-combobox__value">${option.prefix || ''} ${option.value}</span>`
       case 'value':
-        return html`<span class="pkt-combobox__value" data-focusfix=${this.id}
-          >${option.value}</span
-        >`
+        return html`<span class="pkt-combobox__value">${option.value}</span>`
       case 'label':
       default:
-        return html`<span class="pkt-combobox__value" data-focusfix=${this.id}
-          >${option.label || option.value}</span
-        >`
+        return html`<span class="pkt-combobox__value">${option.label || option.value}</span>`
     }
   }
 }

package/src/components/combobox/index.ts

@@ -1,6 +1,11 @@
 import { PktCombobox } from './combobox'
 
-export type { IPktCombobox, IPktComboboxOption, TPktComboboxTagPlacement } from './combobox'
+export type {
+  IPktCombobox,
+  IPktComboboxAttributes,
+  IPktComboboxOption,
+  TPktComboboxTagPlacement,
+} from './combobox'
 
 export { PktCombobox }
 export default PktCombobox

package/src/components/index.ts

@@ -81,6 +81,7 @@ export type {
 
 export type {
   IPktCombobox,
+  IPktComboboxAttributes,
   IPktComboboxOption,
   TPktComboboxTagPlacement,
 } from '@/components/combobox'

package/src/components/listbox/listbox.ts

@@ -46,6 +46,8 @@ export interface IPktListbox extends IPktStringsProps<'listbox'> {
 
 export class PktListbox extends PktElement<IPktListbox> implements IPktListbox {
   @property({ type: String }) id: string = uuidish()
+
+  @state() private _listboxId: string = uuidish()
   @property({ type: String }) label: string | null = null
   @property({ type: Array }) options: IPktComboboxOption[] = []
   @property({ type: Boolean, reflect: true, attribute: 'is-open' }) isOpen: boolean = false
@@ -69,6 +71,12 @@ export class PktListbox extends PktElement<IPktListbox> implements IPktListbox {
   // Lifecycle methods
   connectedCallback(): void {
     super.connectedCallback()
+    const hostId = this.getAttribute('id')
+    if (hostId) {
+      this.adoptHostId(hostId)
+    } else if (this.id) {
+      this._listboxId = this.id
+    }
     if (this.includeSearch && !this.searchValue) {
       this.searchValue = ''
     }
@@ -84,18 +92,14 @@ export class PktListbox extends PktElement<IPktListbox> implements IPktListbox {
     this.typeahead.reset()
   }
 
-  updated(changedProperties: PropertyValues) {
-    if (changedProperties.has('options') || changedProperties.has('searchValue')) {
-      this.filterOptions()
-    }
-    super.updated(changedProperties)
-  }
-
   attributeChangedCallback(name: string, _old: string | null, value: string | null): void {
     if (name === 'options' || name === 'search-value') {
       this.filterOptions()
     }
     super.attributeChangedCallback(name, _old, value)
+    if (name === 'id' && value) {
+      this.adoptHostId(value)
+    }
   }
 
   // Render methods
@@ -103,9 +107,22 @@ export class PktListbox extends PktElement<IPktListbox> implements IPktListbox {
     return this._filteredOptions.length > 0 || this.options.length > 0
   }
 
+  private adoptHostId(hostId: string): void {
+    this._listboxId = hostId
+    this.removeAttribute('id')
+  }
+
+  protected willUpdate(changed: PropertyValues): void {
+    super.willUpdate(changed)
+    if (changed.has('options') || changed.has('searchValue')) {
+      this.filterOptions()
+    }
+  }
+
   render() {
     return html`
       <div
+        id=${this._listboxId}
         class=${classMap({
           'pkt-listbox': true,
           'pkt-listbox__open': this.isOpen,
@@ -129,20 +146,21 @@ export class PktListbox extends PktElement<IPktListbox> implements IPktListbox {
     `
   }
 
-  private renderCheckboxOrCheckIcon(option: IPktComboboxOption, index: number) {
+  private renderCheckboxOrCheckIcon(option: IPktComboboxOption) {
     return this.isMultiSelect
       ? html`
           <input
             class="pkt-input-check__input-checkbox"
             type="checkbox"
-            role="presentation"
+            inert
+            aria-hidden="true"
             tabindex="-1"
             value=${option.value}
             @change=${(e: Event) => {
               e.stopPropagation()
             }}
             .checked=${option.selected}
-            aria-labelledby=${this.id + '-option-label-' + index}
+            ?checked=${option.selected}
             ?disabled=${this.disabled || option.disabled || (this.maxIsReached && !option.selected)}
           />
         `
@@ -186,29 +204,38 @@ export class PktListbox extends PktElement<IPktListbox> implements IPktListbox {
             data-index=${index}
             data-value=${option.value}
             data-selected=${option.selected ? 'true' : 'false'}
-            ?data-disabled=${this.disabled ||
-            option.disabled ||
-            (this.maxIsReached && !option.selected)}
-            aria-disabled=${this.disabled ||
-            option.disabled ||
-            (this.maxIsReached && !option.selected)
-              ? 'true'
-              : 'false'}
+            data-disabled=${ifDefined(
+              this.disabled || option.disabled || (this.maxIsReached && !option.selected)
+                ? 'true'
+                : undefined,
+            )}
+            aria-disabled=${
+              this.disabled || option.disabled || (this.maxIsReached && !option.selected)
+                ? 'true'
+                : 'false'
+            }
             role="option"
-            id=${`${this.id}-${index}`}
+            id=${`${this._listboxId}-${index}`}
           >
-            ${this.renderCheckboxOrCheckIcon(option, index)}
-            <span class="pkt-listbox__option-label" id=${this.id + '-option-label-' + index}>
-              ${option.prefix
-                ? html`<span class="pkt-listbox__option-prefix">${option.prefix}</span>`
-                : nothing}
+            ${this.renderCheckboxOrCheckIcon(option)}
+            <span
+              class="pkt-listbox__option-label"
+              id=${this._listboxId + '-option-label-' + index}
+            >
+              ${
+                option.prefix
+                  ? html`<span class="pkt-listbox__option-prefix">${option.prefix}</span>`
+                  : nothing
+              }
               ${option.label || option.value}
             </span>
-            ${option.description
-              ? html`<span class="pkt-listbox__option-description pkt-txt-14-light"
-                  >${option.description}</span
-                >`
-              : nothing}
+            ${
+              option.description
+                ? html`<span class="pkt-listbox__option-description pkt-txt-14-light"
+                    >${option.description}</span
+                  >`
+                : nothing
+            }
           </li>
         `,
       )}

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>