@oslokommune/punkt-elements 17.0.9 → 17.1.2

package/src/components/helptext/helptext.ts

@@ -47,6 +47,8 @@ export class PktHelptext extends PktElementWithSlot {
           <button
             class="pkt-link pkt-link--icon-right pkt-btn pkt-btn--small pkt-btn--tertiary pkt-btn--icon-right"
             type="button"
+            aria-expanded=${this.isHelpTextOpen ? 'true' : 'false'}
+            aria-controls="${this.forId}-helptext-expandable"
             @click=${toggleDropdown}
           >
             <pkt-icon
@@ -56,6 +58,7 @@ export class PktHelptext extends PktElementWithSlot {
             <span class="pkt-btn__text">${unsafeHTML(this.helptextDropdownButton)}</span>
           </button>
           <div
+            id="${this.forId}-helptext-expandable"
             class="${classMap({
               'pkt-inputwrapper__helptext': true,
               'pkt-inputwrapper__helptext-expandable-open': this.isHelpTextOpen,

package/src/components/input-wrapper/input-wrapper.test.ts

@@ -322,7 +322,7 @@ describe('PktInputWrapper', () => {
 
       expect(wrapper.hasError).toBe(true)
       // Check for error-related classes based on actual component implementation
-      const inputWrapper = wrapper.querySelector('.pkt-inputwrapper')
+      const inputWrapper = wrapper
       expect(inputWrapper?.classList.contains('pkt-inputwrapper--error')).toBe(true)
     })
 
@@ -333,7 +333,7 @@ describe('PktInputWrapper', () => {
       wrapper.size = 'small'
       await wrapper.updateComplete
 
-      const inputWrapper = wrapper.querySelector('.pkt-inputwrapper')
+      const inputWrapper = wrapper
       expect(inputWrapper?.classList.contains('pkt-inputwrapper--small')).toBe(true)
     })
 
@@ -344,7 +344,7 @@ describe('PktInputWrapper', () => {
       wrapper.size = 'xsmall'
       await wrapper.updateComplete
 
-      const inputWrapper = wrapper.querySelector('.pkt-inputwrapper')
+      const inputWrapper = wrapper
       expect(inputWrapper?.classList.contains('pkt-inputwrapper--xsmall')).toBe(true)
       expect(inputWrapper?.classList.contains('pkt-inputwrapper--small')).toBe(false)
     })

package/src/components/input-wrapper/input-wrapper.ts

@@ -1,9 +1,10 @@
 import { PktElementWithSlot } from '@/base-elements/element-with-slot'
 import { slotContent } from '@/directives/slot-content'
+import { counterStatusId, isCounterExceeded } from 'shared-utils/forms/described-by'
+import strings from '@/translations/no.json'
 import { ifDefined } from 'lit/directives/if-defined.js'
 import { html, nothing, PropertyValues } from 'lit'
 import { unsafeHTML } from 'lit/directives/unsafe-html.js'
-import { classMap } from 'lit/directives/class-map.js'
 import { customElement, property } from 'lit/decorators.js'
 import { ElementProps } from '@/types/typeUtils'
 import { uuidish } from 'shared-utils/utils'
@@ -67,7 +68,7 @@ export class PktInputWrapper extends PktElementWithSlot<Props> {
   @property({ type: Boolean }) inline: boolean = specs.props.inline.default
   @property({ type: String }) ariaDescribedby: string | undefined = undefined
   @property({ type: Boolean }) hasFieldset: boolean = specs.props.hasFieldset.default
-  @property({ type: String, reflect: true }) role: string | null = 'group'
+  @property({ type: String, reflect: true }) role: string | null = null
   @property({ type: Boolean, reflect: true, converter: booleanishConverter })
   useWrapper: Booleanish = specs.props.useWrapper.default
   @property({ type: String, attribute: 'input-wrapper-size' })
@@ -75,24 +76,24 @@ export class PktInputWrapper extends PktElementWithSlot<Props> {
 
   protected updated(changedProperties: PropertyValues): void {
     super.updated(changedProperties)
+    this.classList.add('pkt-inputwrapper')
+    this.classList.toggle('pkt-inputwrapper--error', this.hasError)
+    this.classList.toggle('pkt-inputwrapper--disabled', this.disabled)
+    this.classList.toggle('pkt-inputwrapper--inline', this.inline)
+    this.classList.toggle('pkt-inputwrapper--medium', this.size === 'medium')
+    this.classList.toggle('pkt-inputwrapper--small', this.size === 'small')
+    this.classList.toggle('pkt-inputwrapper--xsmall', this.size === 'xsmall')
+    if (this.role) this.setAttribute('aria-labelledby', `${this.forId}-label`)
+    else this.removeAttribute('aria-labelledby')
   }
 
-  // Speiler navigeringsmodus til den interne pkt-inputwrapper-div-en som
-  // data-navtype="pointer" (eller fjerner attributtet) så CSS kan skille
-  // dempet fokus (klikk) fra kraftig fokus (tab). Controlleren registrerer
-  // seg selv på hosten i konstruktøren, så vi trenger ikke beholde referansen.
-  focusModality = new FocusModalityController(this, '.pkt-inputwrapper')
+  // Speiler navigeringsmodus til verten som data-navtype="pointer" (eller
+  // fjerner attributtet) så CSS kan skille dempet fokus (klikk) fra kraftig
+  // fokus (tab). Controlleren registrerer seg selv på hosten i konstruktøren,
+  // så vi trenger ikke beholde referansen.
+  focusModality = new FocusModalityController(this)
 
   render() {
-    const classes = {
-      'pkt-inputwrapper': true,
-      'pkt-inputwrapper--error': this.hasError,
-      'pkt-inputwrapper--disabled': this.disabled,
-      'pkt-inputwrapper--inline': this.inline,
-      'pkt-inputwrapper--small': this.size === 'small',
-      'pkt-inputwrapper--xsmall': this.size === 'xsmall',
-    }
-
     const tagClasses = 'pkt-tag pkt-tag--small pkt-tag--thin-text'
 
     const describedBy = this.ariaDescribedby
@@ -129,19 +130,13 @@ export class PktInputWrapper extends PktElementWithSlot<Props> {
           return html`<label
             class="pkt-inputwrapper__label"
             for="${this.forId}"
-            aria-describedby="${describedBy}"
             id="${this.forId}-label"
             @click=${this.handleLabelClick}
             >${this.label}${tagElement()}</label
           >`
         }
       } else {
-        return html`<label
-          for="${this.forId}"
-          class="pkt-sr-only"
-          aria-describedby="${describedBy}"
-          id="${this.forId}-label"
-        >
+        return html`<label for="${this.forId}" class="pkt-sr-only" id="${this.forId}-label">
           ${this.label}
         </label>`
       }
@@ -165,14 +160,21 @@ export class PktInputWrapper extends PktElementWithSlot<Props> {
     }
 
     const counterElement = () => {
-      if (this.counter) {
-        return html`<div class="pkt-input__counter" aria-live="polite" aria-atomic="true">
+      if (!this.counter) return nothing
+      // Den synlige telleren er aria-hidden. Statusregionen under holdes tom
+      // til grensa er brutt, så skjermlesere bare varsler når det faktisk er noe å si.
+      const exceeded = isCounterExceeded(this.counterCurrent, this.counterMaxLength)
+      return html`<div class="pkt-input__counter" aria-hidden="true">
           ${this.counterError ? this.counterError : nothing} ${this.counterCurrent || 0}
           ${this.counterMaxLength ? `/${this.counterMaxLength}` : nothing}
+        </div>
+        <div class="pkt-sr-only" id=${counterStatusId(this.forId)} aria-live="polite">
+          ${exceeded
+            ? strings.forms.messages.counterExceeded
+                .replace('{current}', String(this.counterCurrent ?? 0))
+                .replace('{max}', String(this.counterMaxLength))
+            : ''}
         </div>`
-      } else {
-        return nothing
-      }
     }
 
     const errorElement = () => {
@@ -214,7 +216,7 @@ export class PktInputWrapper extends PktElementWithSlot<Props> {
         : html`<div class="pkt-inputwrapper__fieldset">${inputContent()}</div>`
     }
 
-    return html`<div class=${classMap(classes)}>${wrapperElement()}</div> `
+    return wrapperElement()
   }
 
   private toggleDropdown(e: CustomEvent) {

package/src/components/input-wrapper/tri-state.test.ts

@@ -0,0 +1,91 @@
+import '@testing-library/jest-dom'
+import { describe, expect, test } from 'vitest'
+import { createElementTest } from '../../tests/test-framework'
+import { CustomElementFor } from '../../tests/component-registry'
+import '../textinput'
+import '../combobox'
+import '../timepicker'
+
+const make = async (tag: any, config: Record<string, unknown>) => {
+  const { element } = await createElementTest<CustomElementFor<'pkt-textinput'>, never>(
+    tag,
+
+    config as any,
+  )
+  return element
+}
+
+const counterOf = (el: Element) => el.querySelector('.pkt-input__counter')
+const legendOf = (el: Element) => el.querySelector('.pkt-inputwrapper__legend')
+const labelOf = (el: Element) => el.querySelector('.pkt-inputwrapper__label')
+
+describe('counter: tri-state', () => {
+  test('vises av seg selv når det finnes en grense å telle mot', async () => {
+    const el = await make('pkt-textinput', { label: 'Etikett', counterMaxLength: 20 })
+    expect(counterOf(el)).not.toBeNull()
+  })
+
+  test('vises ikke uten grense', async () => {
+    const el = await make('pkt-textinput', { label: 'Etikett' })
+    expect(counterOf(el)).toBeNull()
+  })
+
+  test('kan slås av eksplisitt selv om det finnes en grense', async () => {
+    const el = await make('pkt-textinput', {
+      label: 'Etikett',
+      counterMaxLength: 20,
+      counter: 'false',
+    })
+    expect(counterOf(el)).toBeNull()
+  })
+
+  test('kan slås på eksplisitt', async () => {
+    const el = await make('pkt-textinput', { label: 'Etikett', counter: '' })
+    expect(counterOf(el)).not.toBeNull()
+  })
+
+  test('combobox: utledes fra multiple + maxlength', async () => {
+    const auto = await make('pkt-combobox', { label: 'Etikett', multiple: '', maxlength: 3 })
+    expect(counterOf(auto)).not.toBeNull()
+
+    const off = await make('pkt-combobox', {
+      label: 'Etikett',
+      multiple: '',
+      maxlength: 3,
+      counter: 'false',
+    })
+    expect(counterOf(off)).toBeNull()
+  })
+})
+
+describe('hasFieldset: tri-state', () => {
+  test('label som standard', async () => {
+    const el = await make('pkt-textinput', { label: 'Etikett' })
+    expect(labelOf(el)).not.toBeNull()
+    expect(legendOf(el)).toBeNull()
+  })
+
+  test('legend når den settes eksplisitt', async () => {
+    const el = await make('pkt-textinput', { label: 'Etikett', hasFieldset: '' })
+    expect(legendOf(el)).not.toBeNull()
+  })
+
+  test('combobox uten tekstfelt utleder fieldset', async () => {
+    const el = await make('pkt-combobox', { label: 'Etikett' })
+    expect(legendOf(el)).not.toBeNull()
+  })
+
+  test('timepicker: label som standard, legend når satt', async () => {
+    const standard = await make('pkt-timepicker', { label: 'Etikett' })
+    expect(legendOf(standard)).toBeNull()
+
+    const medFieldset = await make('pkt-timepicker', { label: 'Etikett', hasFieldset: '' })
+    expect(legendOf(medFieldset)).not.toBeNull()
+  })
+
+  test('combobox kan overstyre utledningen til label', async () => {
+    const el = await make('pkt-combobox', { label: 'Etikett', hasFieldset: 'false' })
+    expect(legendOf(el)).toBeNull()
+    expect(labelOf(el)).not.toBeNull()
+  })
+})

package/src/components/input-wrapper/wrapper-parity.test.ts

@@ -0,0 +1,141 @@
+import { readFileSync } from 'node:fs'
+import { join } from 'node:path'
+import { describe, expect, test } from 'vitest'
+import wrapperSpec from 'componentSpecs/input-wrapper.json'
+
+const ROOT = join(__dirname, '../../../../..')
+
+// OBS! Denne testen sjekker også React-komponentene.
+
+const COMPONENTS = {
+  textinput: {
+    elements: 'packages/elements/src/components/textinput/textinput.ts',
+    react: 'packages/react/src/components/textinput/Textinput.tsx',
+  },
+  textarea: {
+    elements: 'packages/elements/src/components/textarea/textarea.ts',
+    react: 'packages/react/src/components/textarea/Textarea.tsx',
+  },
+  select: {
+    elements: 'packages/elements/src/components/select/select.ts',
+    react: 'packages/react/src/components/select/Select.tsx',
+  },
+  combobox: {
+    elements: 'packages/elements/src/components/combobox/combobox.ts',
+    react: 'packages/react/src/components/combobox/Combobox.tsx',
+  },
+  datepicker: {
+    elements: 'packages/elements/src/components/datepicker/datepicker.ts',
+    react: 'packages/react/src/components/datepicker/Datepicker.tsx',
+  },
+  timepicker: {
+    elements: 'packages/elements/src/components/timepicker/timepicker.ts',
+    react: 'packages/react/src/components/timepicker/Timepicker.tsx',
+  },
+  fileupload: {
+    elements: 'packages/elements/src/components/fileupload/fileupload.ts',
+    react: 'packages/react/src/components/fileupload/FileUpload.tsx',
+  },
+} as const
+
+// Props som med vilje ikke videresendes, med begrunnelse.
+const OMITTED: Record<string, Partial<Record<keyof typeof COMPONENTS, string>>> = {
+  counter: {
+    select: 'ingenting å telle i en select',
+    timepicker: 'ingenting å telle',
+    fileupload: 'ingenting å telle',
+  },
+  counterCurrent: {
+    select: 'se counter',
+    timepicker: 'se counter',
+    fileupload: 'se counter',
+  },
+  counterMaxLength: {
+    select: 'se counter',
+    timepicker: 'se counter',
+    fileupload: 'se counter',
+  },
+  counterPosition: {
+    textinput: 'teller over feltet er aldri støttet',
+    textarea: 'teller over feltet er aldri støttet',
+    select: 'teller over feltet er aldri støttet',
+    combobox: 'teller over feltet er aldri støttet',
+    datepicker: 'teller over feltet er aldri støttet',
+    timepicker: 'teller over feltet er aldri støttet',
+    fileupload: 'teller over feltet er aldri støttet',
+  },
+  hasFieldset: {
+    fileupload: 'ikke støttet',
+  },
+  inline: { fileupload: 'ikke et enkelt felt på en linje' },
+  useWrapper: { fileupload: 'wrapperen rendres bare når label er satt' },
+  ariaDescribedby: { combobox: 'ikke implementert ennå', fileupload: 'ikke implementert ennå' },
+  errorMessage: { fileupload: 'egen feilvisning' },
+  size: { fileupload: 'har ikke størrelsesvarianter' },
+  role: {},
+  forId: {},
+}
+
+// Navn som ikke er egne props på wrapper-kallet, men beregnes eller heter noe annet.
+const NOT_A_FORWARDED_PROP = new Set(['forId', 'role'])
+
+const read = (rel: string) => readFileSync(join(ROOT, rel), 'utf8')
+
+/** Henter ut wrapper-kallet fra kildekoden, der propsene videresendes. */
+const wrapperCall = (source: string, framework: 'elements' | 'react') => {
+  const open = framework === 'elements' ? '<pkt-input-wrapper' : '<PktInputWrapper'
+  const start = source.indexOf(open)
+  if (start < 0) return ''
+  // Kallet slutter ved første '>' som avslutter åpningstaggen
+  const rest = source.slice(start)
+  const end = rest.search(/\n\s*>/)
+  return end < 0 ? rest.slice(0, 4000) : rest.slice(0, end)
+}
+
+const forwards = (block: string, prop: string) =>
+  new RegExp(`[.?]?${prop}\\s*=`).test(block) || new RegExp(`\\b${prop}\\b`).test(block)
+
+const wrapperProps = Object.keys(wrapperSpec.props).filter((p) => !NOT_A_FORWARDED_PROP.has(p))
+
+describe('input-wrapper: paritet mellom rammeverk', () => {
+  for (const [name, paths] of Object.entries(COMPONENTS)) {
+    describe(name, () => {
+      const elements = wrapperCall(read(paths.elements), 'elements')
+      const react = wrapperCall(read(paths.react), 'react')
+
+      test('begge rammeverk kaller input-wrapper', () => {
+        expect(elements, `${paths.elements} mangler <pkt-input-wrapper`).not.toBe('')
+        expect(react, `${paths.react} mangler <PktInputWrapper`).not.toBe('')
+      })
+
+      for (const prop of wrapperProps) {
+        const omitted = OMITTED[prop]?.[name as keyof typeof COMPONENTS]
+
+        test(`${prop}${omitted ? ' (utelatt med vilje)' : ''}`, () => {
+          const inElements = forwards(elements, prop)
+          const inReact = forwards(react, prop)
+
+          if (omitted) {
+            expect(
+              inElements || inReact,
+              `${prop} er listet som utelatt for ${name} (${omitted}), men videresendes likevel i ` +
+                `${inElements ? 'Elements' : 'React'}. Fjern den fra OMITTED hvis den skal støttes.`,
+            ).toBe(false)
+            return
+          }
+
+          expect(
+            inElements,
+            `Elements' ${name} videresender ikke ${prop} til input-wrapper. Legg den til, eller ` +
+              `dokumentér utelatelsen i OMITTED.`,
+          ).toBe(true)
+          expect(
+            inReact,
+            `React-versjonen av ${name} videresender ikke ${prop} til input-wrapper. Legg den til, ` +
+              `eller dokumentér utelatelsen i OMITTED.`,
+          ).toBe(true)
+        })
+      }
+    })
+  }
+})

package/src/components/select/select.test.ts

@@ -5,6 +5,7 @@ import { createElementTest, BaseTestConfig } from '../../tests/test-framework'
 import { CustomElementFor } from '../../tests/component-registry'
 import { type IPktSelect, type TSelectOption } from './select'
 import './select'
+import { PktInputWrapper } from '@/components/input-wrapper/input-wrapper'
 
 export interface SelectTestConfig extends Partial<IPktSelect>, BaseTestConfig {
   id?: string
@@ -15,8 +16,8 @@ export interface SelectTestConfig extends Partial<IPktSelect>, BaseTestConfig {
   errorMessage?: string
   helptext?: string
   fullwidth?: boolean
-  ariaLabelledby?: string | null
-  ariaDescribedBy?: string | null
+  'aria-labelledby'?: string | null
+  'aria-describedby'?: string | null
   counter?: boolean
   inline?: boolean
   useWrapper?: boolean | string
@@ -202,15 +203,15 @@ describe('pkt-select', () => {
 
   test('passes through accessibility attributes', async () => {
     const { select } = await createSelectTest({
-      ariaLabelledby: 'external-label',
-      ariaDescribedBy: 'external-description',
+      'aria-labelledby': 'external-label',
+      'aria-describedby': 'external-description',
     })
 
     const selectElement = select.querySelector('select')
     expect(selectElement?.getAttribute('aria-labelledby')).toBe('external-label')
 
-    const inputWrapper = select.querySelector('pkt-input-wrapper')
-    expect(inputWrapper?.getAttribute('ariaDescribedBy')).toBe('external-description')
+    const inputWrapper = select.querySelector('pkt-input-wrapper') as PktInputWrapper | null
+    expect(inputWrapper?.ariaDescribedby).toBe('external-description')
   })
 
   test('handles input wrapper properties', async () => {
@@ -220,8 +221,8 @@ describe('pkt-select', () => {
     })
 
     const inputWrapper = select.querySelector('pkt-input-wrapper')
-    expect(inputWrapper?.hasAttribute('counter')).toBe(true)
     expect(inputWrapper?.hasAttribute('inline')).toBe(true)
+    expect(inputWrapper?.hasAttribute('counter')).toBe(false)
   })
 
   test('handles useWrapper false', async () => {

package/src/components/select/select.ts

@@ -7,6 +7,7 @@ import { PktOptionsSlotController } from '@/controllers/pkt-options-controller'
 import { slotContent } from '@/directives/slot-content'
 import type { TSelectOption } from 'shared-types/select'
 import '@/components/input-wrapper'
+import { describedByIds } from 'shared-utils/forms/described-by'
 
 export type { TSelectOption } from 'shared-types/select'
 
@@ -162,6 +163,7 @@ export class PktSelect extends PktOptionsInputElement<{}, TSelectOption> impleme
 
   protected firstUpdated(_changedProperties: PropertyValues): void {
     super.firstUpdated(_changedProperties)
+    this.classList.add('pkt-select')
     if (this._optionsProp.length) {
       this._options = this._optionsProp
     }
@@ -181,16 +183,14 @@ export class PktSelect extends PktOptionsInputElement<{}, TSelectOption> impleme
     return html`
       <pkt-input-wrapper
         .size=${this.inputSize}
-        ?counter=${this.counter}
         ?disabled=${this.disabled}
         ?hasError=${this.hasError}
-        ?hasFieldset=${this.hasFieldset}
+        ?hasFieldset=${this.effectiveHasFieldset(false)}
         ?inline=${this.inline}
         ?optionalTag=${this.optionalTag}
         ?requiredTag=${this.requiredTag}
         useWrapper=${this.useWrapper}
-        ariaDescribedBy=${ifDefined(this.ariaDescribedBy)}
-        class="pkt-select"
+        .ariaDescribedby=${this.ariaDescribedby}
         errorMessage=${ifDefined(this.errorMessage)}
         forId=${this.id + '-input'}
         helptext=${ifDefined(this.helptext)}
@@ -204,7 +204,15 @@ export class PktSelect extends PktOptionsInputElement<{}, TSelectOption> impleme
         <select
           class=${inputClass}
           aria-invalid=${this.hasError}
-          aria-errormessage=${`${this.id}-error`}
+          aria-errormessage=${ifDefined(this.hasError ? `${this.id}-input-error` : undefined)}
+          aria-describedby=${ifDefined(
+            describedByIds({
+              id: this.id + '-input',
+              hasHelptext: !!this.helptext,
+              hasCounter: false,
+              ariaDescribedby: this.ariaDescribedby,
+            }),
+          )}
           aria-labelledby=${ifDefined(this.ariaLabelledby)}
           ?disabled=${this.disabled}
           id=${this.id + '-input'}

package/src/components/textarea/textarea.test.ts

@@ -28,8 +28,8 @@ export interface TextareaTestConfig extends BaseTestConfig {
   fullwidth?: boolean
   counter?: boolean
   inline?: boolean
-  ariaLabelledby?: string | null
-  ariaDescribedBy?: string | null
+  'aria-labelledby'?: string | null
+  'aria-describedby'?: string | null
   inputSize?: TPktInputSize
 }
 
@@ -246,15 +246,15 @@ describe('PktTextarea', () => {
   describe('Accessibility', () => {
     test('passes through accessibility attributes', async () => {
       const { textarea } = await createTextareaTest({
-        ariaLabelledby: 'external-label',
-        ariaDescribedBy: 'external-description',
+        'aria-labelledby': 'external-label',
+        'aria-describedby': 'external-description',
       })
 
       const textareaElement = textarea.querySelector('textarea')
       expect(textareaElement?.getAttribute('aria-labelledby')).toBe('external-label')
 
-      // ariaDescribedBy is passed as property to input-wrapper
-      expect(textarea.ariaDescribedBy).toBe('external-description')
+      // ariaDescribedby videresendes som property til input-wrapper
+      expect(textarea.ariaDescribedby).toBe('external-description')
     })
 
     test('textarea is accessible', async () => {

package/src/components/textarea/textarea.ts

@@ -10,8 +10,9 @@ import { slotContent } from '@/directives/slot-content'
 import '@/components/input-wrapper'
 import '@/components/icon'
 import { ElementProps } from '@/types/typeUtils'
+import { describedByIds } from 'shared-utils/forms/described-by'
 
-type Props = ElementProps<PktTextarea, 'autocomplete' | 'rows'>
+type Props = ElementProps<PktTextarea, 'autocomplete' | 'rows' | 'cols'>
 
 export class PktTextarea extends PktInputElement<Props> {
   inputRef: Ref<HTMLTextAreaElement> = createRef()
@@ -19,11 +20,11 @@ export class PktTextarea extends PktInputElement<Props> {
   @property({ type: String, reflect: true }) value: string = ''
   @property({ type: String }) autocomplete: string = 'off'
   @property({ type: Number }) rows: number | null = null
+  @property({ type: Number }) cols: number | null = null
 
   @state() counterCurrent = 0
 
   attributeChangedCallback(name: string, _old: string | null, value: string | null): void {
-    // Only sync the counter here.
     if (name === 'value' && this.value !== _old) {
       this.counterCurrent = value ? value.length : 0
     }
@@ -32,6 +33,7 @@ export class PktTextarea extends PktInputElement<Props> {
 
   updated(changedProperties: PropertyValues) {
     super.updated(changedProperties)
+    this.classList.add('pkt-textinput', 'pkt-textarea')
     if (changedProperties.has('value')) {
       this.counterCurrent = this.value?.length || 0
       this.valueChanged(this.value, changedProperties.get('value'))
@@ -42,21 +44,20 @@ export class PktTextarea extends PktInputElement<Props> {
   }
 
   render() {
+    const showCounter = this.effectiveCounter(this.counterMaxLength > 0)
     const inputClasses = classMap({
       'pkt-input': true,
       [`pkt-input--${this.inputSize}`]: true,
       'pkt-input--fullwidth': this.fullwidth,
       'pkt-input--counter-error':
-        this.counter &&
-        this.counterMaxLength &&
-        this.value.length &&
-        this.value.length > this.counterMaxLength,
+        showCounter && this.counterMaxLength > 0 && this.value.length > this.counterMaxLength,
     })
     const labelledBy = this.ariaLabelledby || `${this.id}-input-label`
 
     return html`<pkt-input-wrapper
       label=${this.label}
-      ?counter=${this.counter}
+      ?counter=${showCounter}
+      ?hasFieldset=${this.effectiveHasFieldset(false)}
       ?disabled=${this.disabled}
       ?hasError=${this.hasError}
       ?inline=${this.inline}
@@ -64,8 +65,8 @@ export class PktTextarea extends PktInputElement<Props> {
       ?required=${this.required}
       ?requiredTag=${this.requiredTag}
       useWrapper=${this.useWrapper}
-      .ariaDescribedBy=${this.ariaDescribedBy}
-      .counterCurrent=${this.counterCurrent}
+      .ariaDescribedby=${this.ariaDescribedby}
+      .counterCurrent=${this.value?.length ?? 0}
       .counterMaxLength=${this.counterMaxLength}
       .errorMessage=${this.errorMessage}
       .forId="${this.id + '-input'}"
@@ -76,7 +77,6 @@ export class PktTextarea extends PktInputElement<Props> {
       .requiredText=${this.requiredText}
       .tagText=${this.tagText}
       .size=${this.inputSize}
-      class="pkt-textarea"
     >
       <div class="pkt-contents" slot="helptext">${slotContent(this, 'helptext')}</div>
       <textarea
@@ -92,8 +92,17 @@ export class PktTextarea extends PktInputElement<Props> {
         autocomplete=${this.autocomplete}
         aria-labelledby=${labelledBy}
         aria-invalid=${this.hasError}
-        aria-errormessage=${`${this.id}-error`}
+        aria-errormessage=${ifDefined(this.hasError ? `${this.id}-input-error` : undefined)}
+        aria-describedby=${ifDefined(
+          describedByIds({
+            id: this.id + '-input',
+            hasHelptext: !!this.helptext,
+            hasCounter: showCounter,
+            ariaDescribedby: this.ariaDescribedby,
+          }),
+        )}
         rows=${ifDefined(this.rows ?? undefined)}
+        cols=${ifDefined(this.cols ?? undefined)}
         ?disabled=${this.disabled}
         @input=${(e: InputEvent) => {
           this.value = (e.target as HTMLInputElement).value

package/src/components/textinput/textinput.test.ts

@@ -33,8 +33,8 @@ export interface TextinputTestConfig extends BaseTestConfig {
   fullwidth?: boolean
   counter?: boolean
   inline?: boolean
-  ariaLabelledby?: string | null
-  ariaDescribedBy?: string | null
+  'aria-labelledby'?: string | null
+  'aria-describedby'?: string | null
 }
 
 // Use shared framework
@@ -387,15 +387,15 @@ describe('PktTextinput', () => {
   describe('Accessibility', () => {
     test('passes through accessibility attributes', async () => {
       const { textinput } = await createTextinputTest({
-        ariaLabelledby: 'external-label',
-        ariaDescribedBy: 'external-description',
+        'aria-labelledby': 'external-label',
+        'aria-describedby': 'external-description',
       })
 
       const inputElement = textinput.querySelector('input')
       expect(inputElement?.getAttribute('aria-labelledby')).toBe('external-label')
 
-      // ariaDescribedBy is passed as property to input-wrapper
-      expect(textinput.ariaDescribedBy).toBe('external-description')
+      // ariaDescribedby videresendes som property til input-wrapper
+      expect(textinput.ariaDescribedby).toBe('external-description')
     })
 
     test('textinput is accessible', async () => {