@oslokommune/punkt-react 16.26.3 → 17.0.0

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

@@ -64,20 +64,56 @@ describe('PktAlert', () => {
     ${''}             | ${undefined}
     ${null}           | ${undefined}
     ${(
-    <span>
+  <span>
     Complex <strong>title</strong>
   </span>
-  )} | ${'<span>Complex <strong>title</strong></span>'}
-  `('support complex title %$', async ({title, expected}) => {
-    const { container } = render(
-      <PktAlert title={title}>
-        Alert text
-      </PktAlert>,
-    )
-    const titleElement = container.querySelector('.pkt-alert__title');
+)} | ${'<span>Complex <strong>title</strong></span>'}
+  `('support complex title %$', async ({ title, expected }) => {
+    const { container } = render(<PktAlert title={title}>Alert text</PktAlert>)
+    const titleElement = container.querySelector('.pkt-alert__title')
     expect(titleElement?.innerHTML).toEqual(expected)
   })
 
+  describe('size and compact', () => {
+    test('renders with pkt-alert--medium by default', async () => {
+      const { container } = render(<PktAlert>Alert text</PktAlert>)
+      const alert = container.querySelector('.pkt-alert')
+      expect(alert).toHaveClass('pkt-alert--medium')
+      expect(alert).not.toHaveClass('pkt-alert--compact')
+    })
+
+    test.each`
+      size        | expectedClass
+      ${'small'}  | ${'pkt-alert--small'}
+      ${'xsmall'} | ${'pkt-alert--xsmall'}
+    `('renders with $expectedClass when size is $size', async ({ size, expectedClass }) => {
+      const { container } = render(<PktAlert size={size}>Alert text</PktAlert>)
+      const alert = container.querySelector('.pkt-alert')
+      expect(alert).toHaveClass(expectedClass)
+      expect(alert).not.toHaveClass('pkt-alert--medium')
+    })
+
+    test('renders with pkt-alert--small when compact is set without size', async () => {
+      const { container } = render(<PktAlert compact>Alert text</PktAlert>)
+      const alert = container.querySelector('.pkt-alert')
+      expect(alert).toHaveClass('pkt-alert--small')
+      expect(alert).not.toHaveClass('pkt-alert--compact')
+      expect(alert).not.toHaveClass('pkt-alert--medium')
+    })
+
+    test('explicit size wins over compact', async () => {
+      const { container } = render(
+        <PktAlert compact size="xsmall">
+          Alert text
+        </PktAlert>,
+      )
+      const alert = container.querySelector('.pkt-alert')
+      expect(alert).toHaveClass('pkt-alert--xsmall')
+      expect(alert).not.toHaveClass('pkt-alert--compact')
+      expect(alert).not.toHaveClass('pkt-alert--small')
+    })
+  })
+
   describe('accessibility', () => {
     test('renders with no wcag errors with axe', async () => {
       const { container } = render(<PktAlert title="Error" skin="error"></PktAlert>)

package/src/components/alert/Alert.tsx

@@ -2,7 +2,7 @@
 
 import classNames from 'classnames'
 import { FC, HTMLAttributes, ReactElement, ReactNode, useCallback, useState } from 'react'
-import type { TAlertRole, TAlertSkin,TAriaLive } from 'shared-types'
+import type { TAlertRole, TAlertSkin, TAriaLive } from 'shared-types'
 
 import { PktButton } from '../button/Button'
 import { PktIcon } from '../icon/Icon'
@@ -13,8 +13,17 @@ export interface IPktAlert extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>
   title?: ReactNode
   date?: string
   ariaLive?: TAriaLive
+  /**
+   * @deprecated Bruk size i stedet. Uten eksplisitt size gir compact størrelsen 'small'.
+   */
   compact?: boolean
   role?: TAlertRole
+  /**
+   * Størrelse på varslingen.
+   *
+   * @default medium
+   */
+  size?: 'medium' | 'small' | 'xsmall'
   onClose?: (e: CustomEvent) => void
 }
 
@@ -24,6 +33,7 @@ export const PktAlert: FC<IPktAlert> = ({
   children,
   closeAlert,
   compact,
+  size = compact ? 'small' : 'medium',
   title,
   date,
   ariaLive: ariaLiveCamel,
@@ -37,7 +47,7 @@ export const PktAlert: FC<IPktAlert> = ({
 
   const classes = {
     'pkt-alert': true,
-    'pkt-alert--compact': compact,
+    [`pkt-alert--${size}`]: size,
     [`pkt-alert--${skin}`]: skin,
     'pkt-hide': isClosed,
   }
@@ -70,7 +80,7 @@ export const PktAlert: FC<IPktAlert> = ({
             <PktButton
               tabIndex={0}
               aria-label="close"
-              size={compact ? 'small' : 'medium'}
+              size={size}
               type="button"
               skin="tertiary"
               iconName="close"

package/src/components/button/Button.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { type ButtonHTMLAttributes,ForwardedRef, forwardRef } from 'react'
+import { type ButtonHTMLAttributes, ForwardedRef, forwardRef } from 'react'
 
 import { PktIcon } from '../icon/Icon'
 declare global {
@@ -19,7 +19,7 @@ export interface IPktButton extends ButtonHTMLAttributes<HTMLButtonElement> {
   iconPath?: string
   secondIconPath?: string
   mode?: 'light' | 'dark'
-  size?: 'small' | 'medium' | 'large'
+  size?: 'xsmall' | 'small' | 'medium' | 'large'
   fullWidth?: boolean
   fullWidthOnMobile?: boolean
   color?:

package/src/components/combobox/Combobox.core.test.tsx

@@ -107,6 +107,20 @@ describe('PktCombobox', () => {
       expect(inputDiv).toHaveClass('pkt-combobox__input--fullwidth')
     })
 
+    test('applies input size classes for small and xsmall', () => {
+      const { container: smallContainer } = createComboboxTest({ inputSize: 'small' })
+
+      const smallInput = smallContainer.querySelector('.pkt-combobox__input')
+      expect(smallInput).toHaveClass('pkt-combobox__input--small')
+      expect(smallInput).not.toHaveClass('pkt-combobox__input--xsmall')
+
+      const { container: xsmallContainer } = createComboboxTest({ inputSize: 'xsmall' })
+
+      const xsmallInput = xsmallContainer.querySelector('.pkt-combobox__input')
+      expect(xsmallInput).toHaveClass('pkt-combobox__input--xsmall')
+      expect(xsmallInput).not.toHaveClass('pkt-combobox__input--small')
+    })
+
     test('renders with custom className', () => {
       const { container } = createComboboxTest({ className: 'my-custom-class' })
 

package/src/components/combobox/Combobox.tsx

@@ -42,6 +42,7 @@ export const PktCombobox = forwardRef<HTMLDivElement, IPktCombobox>((props, ref)
         requiredText={state.requiredText}
         tagText={state.tagText}
         useWrapper={state.useWrapper}
+        size={props.inputSize ?? 'medium'}
         counter={state.hasCounter}
         counterCurrent={state.values.length}
         counterMaxLength={state.maxlength}

package/src/components/combobox/ComboboxInput.tsx

@@ -37,10 +37,12 @@ export const ComboboxInput = ({ state }: IComboboxInputProps) => {
     handlePlaceholderClick,
     handleSelectOnlyKeydown,
     name,
+    inputSize,
   } = state
 
   const inputClasses = [
     'pkt-combobox__input',
+    `pkt-combobox__input--${inputSize}`,
     fullwidth && 'pkt-combobox__input--fullwidth',
     isOpen && 'pkt-combobox__input--open',
     hasError && 'pkt-combobox__input--error',

package/src/components/combobox/types.ts

@@ -50,6 +50,7 @@ export interface IPktCombobox {
   optionalText?: string
   tagText?: string
   useWrapper?: boolean
+  inputSize?: 'small' | 'medium' | 'xsmall'
 
   // Events
   onChange?: ChangeEventHandler<HTMLInputElement>
@@ -109,6 +110,7 @@ export interface IComboboxState {
   requiredText?: string
   tagText?: string
   useWrapper: boolean
+  inputSize: 'small' | 'medium' | 'xsmall'
   name?: string
   className?: string
 

package/src/components/combobox/useComboboxState.ts

@@ -72,6 +72,7 @@ export function useComboboxState(props: IPktCombobox, ref: React.ForwardedRef<HT
     requiredText,
     tagText,
     useWrapper = true,
+    inputSize = 'medium',
     name,
     className,
     onChange,
@@ -1104,6 +1105,7 @@ export function useComboboxState(props: IPktCombobox, ref: React.ForwardedRef<HT
     requiredText,
     tagText,
     useWrapper,
+    inputSize,
     name,
     className,
 

package/src/components/consent/Consent.test.tsx

@@ -65,9 +65,7 @@ describe('PktConsent', () => {
     test('renders the default button trigger with the bokmål settings label', () => {
       render(<PktConsent />)
 
-      expect(
-        screen.getByRole('button', { name: 'Innstillinger for informasjonskapsler' }),
-      ).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'Innstillinger for informasjonskapsler' })).toBeInTheDocument()
     })
 
     test('uses the English settings label when i18nLanguage is "en"', () => {
@@ -91,14 +89,14 @@ describe('PktConsent', () => {
       expect(link).toHaveTextContent('Innstillinger')
     })
 
-    test('renders a footer link with chevron icon when triggerType="footerlink"', () => {
-      const { container } = render(
-        <PktConsent triggerType="footerlink" triggerText="Innstillinger" />,
-      )
+    test('renders a plain footer link when triggerType="footerlink"', () => {
+      const { container } = render(<PktConsent triggerType="footerlink" triggerText="Innstillinger" />)
 
       const link = container.querySelector('a.pkt-footer__link')
       expect(link).toBeInTheDocument()
-      expect(link?.querySelector('.pkt-icon')).toHaveAttribute('name', 'chevron-right')
+      expect(link).toHaveAttribute('aria-haspopup', 'dialog')
+      // Ny footer-stil: ren understreket lenke uten ikon.
+      expect(link?.querySelector('.pkt-icon')).toBeNull()
     })
 
     test('renders an icon-only button when triggerType="icon"', () => {
@@ -199,17 +197,13 @@ describe('PktConsent', () => {
     })
 
     test('link trigger has no axe violations', async () => {
-      const { container } = render(
-        <PktConsent triggerType="link" triggerText="Cookie settings" />,
-      )
+      const { container } = render(<PktConsent triggerType="link" triggerText="Cookie settings" />)
       const results = await axe(container)
       expect(results).toHaveNoViolations()
     })
 
     test('footer link trigger has no axe violations', async () => {
-      const { container } = render(
-        <PktConsent triggerType="footerlink" triggerText="Cookie settings" />,
-      )
+      const { container } = render(<PktConsent triggerType="footerlink" triggerText="Cookie settings" />)
       const results = await axe(container)
       expect(results).toHaveNoViolations()
     })

package/src/components/consent/Consent.tsx

@@ -1,16 +1,8 @@
 'use client'
 
-import {
-  forwardRef,
-  HTMLAttributes,
-  MouseEvent as ReactMouseEvent,
-  Ref,
-  useEffect,
-  useRef,
-} from 'react'
+import { forwardRef, HTMLAttributes, MouseEvent as ReactMouseEvent, Ref, useEffect, useRef } from 'react'
 
 import { PktButton } from '../button/Button'
-import { PktIcon } from '../icon/Icon'
 import { consentStrings } from './strings'
 
 interface ConsentItem {
@@ -154,11 +146,8 @@ export const PktConsent = forwardRef<HTMLElement, IPktConsent>(function PktConse
 
   const triggerInitRef = useRef<() => void>(() => {})
 
-  const language = (i18nLanguage in consentStrings.i18n
-    ? i18nLanguage
-    : 'nb') as keyof typeof consentStrings.i18n
-  const resolvedTriggerText =
-    triggerText ?? consentStrings.i18n[language].contentPresentation.buttons.settings
+  const language = (i18nLanguage in consentStrings.i18n ? i18nLanguage : 'nb') as keyof typeof consentStrings.i18n
+  const resolvedTriggerText = triggerText ?? consentStrings.i18n[language].contentPresentation.buttons.settings
 
   useEffect(() => {
     let cancelled = false
@@ -188,9 +177,7 @@ export const PktConsent = forwardRef<HTMLElement, IPktConsent>(function PktConse
     }
 
     triggerInitRef.current = () => {
-      window.document.dispatchEvent(
-        new Event('CookieBannerReady', { bubbles: true, cancelable: true }),
-      )
+      window.document.dispatchEvent(new Event('CookieBannerReady', { bubbles: true, cancelable: true }))
 
       const banner = window.cookieBanner
       const events = window.__cookieEvents
@@ -232,6 +219,7 @@ export const PktConsent = forwardRef<HTMLElement, IPktConsent>(function PktConse
     setTimeout(() => window.cookieBanner?.openCookieModal())
   }
 
+  // aria-haspopup: triggeren åpner consent-dialogen, den navigerer ikke
   if (triggerType === 'link') {
     return (
       <a
@@ -239,6 +227,7 @@ export const PktConsent = forwardRef<HTMLElement, IPktConsent>(function PktConse
         ref={ref as Ref<HTMLAnchorElement>}
         href="#"
         className="pkt-link"
+        aria-haspopup="dialog"
         onClick={openModal}
       >
         {resolvedTriggerText}
@@ -252,9 +241,9 @@ export const PktConsent = forwardRef<HTMLElement, IPktConsent>(function PktConse
         ref={ref as Ref<HTMLAnchorElement>}
         href="#"
         className="pkt-footer__link"
+        aria-haspopup="dialog"
         onClick={openModal}
       >
-        <PktIcon name="chevron-right" className="pkt-footer__link-icon" />
         {resolvedTriggerText}
       </a>
     )
@@ -266,6 +255,7 @@ export const PktConsent = forwardRef<HTMLElement, IPktConsent>(function PktConse
         skin="tertiary"
         variant="icon-only"
         iconName="cookie"
+        aria-haspopup="dialog"
         onClick={openModal}
       >
         {resolvedTriggerText}
@@ -273,7 +263,7 @@ export const PktConsent = forwardRef<HTMLElement, IPktConsent>(function PktConse
     )
   }
   return (
-    <PktButton ref={ref as Ref<HTMLButtonElement>} onClick={openModal}>
+    <PktButton ref={ref as Ref<HTMLButtonElement>} aria-haspopup="dialog" onClick={openModal}>
       {resolvedTriggerText}
     </PktButton>
   )

package/src/components/datepicker/Datepicker.core.test.tsx

@@ -49,6 +49,17 @@ describe('PktDatepicker', () => {
       expect(outer).toBeInTheDocument()
     })
 
+    test.each([
+      ['small', 'small'],
+      ['xsmall', 'xsmall'],
+    ] as const)('applies inputSize="%s" classes on root, input and calendar button', (size, sizeClass) => {
+      const { container } = createDatepickerTest({ inputSize: size })
+
+      expect(container.querySelector(`.pkt-datepicker--${sizeClass}`)).toBeTruthy()
+      expect(container.querySelector(`.pkt-input--${sizeClass}`)).toBeTruthy()
+      expect(container.querySelector(`.pkt-btn--${sizeClass}`)).toBeTruthy()
+    })
+
     test('renders datepicker inputs container', () => {
       const { container } = createDatepickerTest()
 

package/src/components/datepicker/Datepicker.tsx

@@ -12,7 +12,9 @@ export type { IPktDatepicker } from './types'
 export const PktDatepicker = forwardRef<HTMLDivElement, IPktDatepicker>((props, ref) => {
   const state = useDatepickerState(props, ref)
 
-  const outerClasses = ['pkt-datepicker', state.className].filter(Boolean).join(' ')
+  const outerClasses = ['pkt-datepicker', `pkt-datepicker--${state.inputSize}`, state.className]
+    .filter(Boolean)
+    .join(' ')
 
   return (
     <div className={outerClasses} id={state.id || undefined}>
@@ -34,6 +36,7 @@ export const PktDatepicker = forwardRef<HTMLDivElement, IPktDatepicker>((props,
         requiredText={state.requiredText}
         tagText={state.tagText}
         useWrapper={state.useWrapper}
+        size={state.inputSize}
         counter={state.hasCounter}
         counterCurrent={state.values.length}
         counterMaxLength={state.maxlength}

package/src/components/datepicker/DatepickerInputs.tsx

@@ -52,6 +52,11 @@ export const DatepickerInputs = ({ state }: { state: IDatepickerState }) => {
     toggleCalendar()
   }
 
+  const handleInputTouchEnd = (e: React.TouchEvent<HTMLInputElement>) => {
+    e.preventDefault()
+    toggleCalendar()
+  }
+
   const renderCalendarButton = () => (
     <button
       ref={btnRef}
@@ -69,7 +74,13 @@ export const DatepickerInputs = ({ state }: { state: IDatepickerState }) => {
   if (multiple) {
     return (
       <>
-        <DateTags dates={values} dateformat={dateformat} idBase={id} strings={strings} onDateRemoved={handleTagRemoved} />
+        <DateTags
+          dates={values}
+          dateformat={dateformat}
+          idBase={id}
+          strings={strings}
+          onDateRemoved={handleTagRemoved}
+        />
         <div className="pkt-datepicker__inputs">
           <div className="pkt-input__container">
             <input
@@ -86,6 +97,7 @@ export const DatepickerInputs = ({ state }: { state: IDatepickerState }) => {
               aria-invalid={hasError}
               aria-errormessage={hasError ? `${id}-error` : undefined}
               onClick={handleInputClick}
+              onTouchEnd={handleInputTouchEnd}
               onKeyDown={handleMultipleKeydown}
               onFocus={handleFocus}
               onBlur={handleMultipleBlur}
@@ -121,6 +133,7 @@ export const DatepickerInputs = ({ state }: { state: IDatepickerState }) => {
             aria-invalid={hasError}
             aria-errormessage={hasError ? `${id}-error` : undefined}
             onClick={handleInputClick}
+            onTouchEnd={handleInputTouchEnd}
             onKeyDown={handleRangeFromKeydown}
             onFocus={handleFocus}
             onBlur={handleRangeBlur}
@@ -144,6 +157,7 @@ export const DatepickerInputs = ({ state }: { state: IDatepickerState }) => {
             aria-label={`${label} ${strings.generic?.to ?? 'Til'}`}
             aria-invalid={hasError}
             onClick={handleInputClick}
+            onTouchEnd={handleInputTouchEnd}
             onKeyDown={handleRangeToKeydown}
             onFocus={handleFocus}
             onBlur={handleRangeBlur}
@@ -177,6 +191,7 @@ export const DatepickerInputs = ({ state }: { state: IDatepickerState }) => {
           aria-invalid={hasError}
           aria-errormessage={hasError ? `${id}-error` : undefined}
           onClick={handleInputClick}
+          onTouchEnd={handleInputTouchEnd}
           onKeyDown={handleSingleKeydown}
           onFocus={handleFocus}
           onBlur={undefined}

package/src/components/datepicker/types.ts

@@ -1,5 +1,6 @@
 import type { ChangeEvent, InputHTMLAttributes, ReactNode } from 'react'
 import type { IDatepickerStrings } from 'shared-types/datepicker'
+import type { TPktInputSize } from 'shared-types/size'
 
 export interface IPktDatepicker extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> {
   id: string
@@ -23,6 +24,7 @@ export interface IPktDatepicker extends Omit<InputHTMLAttributes<HTMLInputElemen
 
   // InputWrapper props
   fullwidth?: boolean
+  inputSize?: TPktInputSize
   hasFieldset?: boolean
   inline?: boolean
   helptext?: string | ReactNode
@@ -76,6 +78,7 @@ export interface IDatepickerState {
   name?: string
   placeholder?: string
   fullwidth: boolean
+  inputSize: TPktInputSize
   hasFieldset: boolean
   inline: boolean
   helptext?: string | ReactNode

package/src/components/datepicker/useDatepickerState.ts

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
 import { defaultSingleStrings, defaultRangeStrings } from 'shared-types/datepicker'
+import type { TPktInputSize } from 'shared-types/size'
 import { valueToArray } from 'shared-utils/value-utils'
 import { isIOS } from 'shared-utils/device-utils'
 import { newDate, filterSelectableDates } from 'shared-utils/date-utils'
@@ -35,6 +36,7 @@ export function useDatepickerState(props: IPktDatepicker, ref: React.ForwardedRe
     calendarOpen: calendarOpenProp,
     timezone,
     fullwidth = false,
+    inputSize = 'medium' as TPktInputSize,
     hasFieldset = false,
     inline = false,
     helptext,
@@ -110,20 +112,25 @@ export function useDatepickerState(props: IPktDatepicker, ref: React.ForwardedRe
   const maxStr = typeof max === 'string' ? max : max !== undefined ? String(max) : undefined
 
   const inputClasses = useMemo(() => {
-    const classMap = getDatepickerInputClasses(fullwidth, showRangeLabels, multiple, range, readOnly, inputType)
+    const classMap = getDatepickerInputClasses(
+      fullwidth,
+      showRangeLabels,
+      multiple,
+      range,
+      readOnly,
+      inputType,
+      inputSize,
+    )
     return Object.entries(classMap)
       .filter(([, v]) => v)
       .map(([k]) => k)
       .join(' ')
-  }, [fullwidth, showRangeLabels, multiple, range, readOnly, inputType])
+  }, [fullwidth, showRangeLabels, multiple, range, readOnly, inputType, inputSize])
 
-  const buttonClasses = useMemo(() => {
-    const classMap = getDatepickerButtonClasses()
-    return Object.entries(classMap)
-      .filter(([, v]) => v)
-      .map(([k]) => k)
-      .join(' ')
-  }, [])
+  const buttonClasses = Object.entries(getDatepickerButtonClasses(inputSize))
+    .filter(([, v]) => v)
+    .map(([k]) => k)
+    .join(' ')
 
   const rangeLabelClasses = useMemo(() => {
     const classMap = getRangeLabelClasses(showRangeLabels)
@@ -476,6 +483,7 @@ export function useDatepickerState(props: IPktDatepicker, ref: React.ForwardedRe
     name,
     placeholder,
     fullwidth,
+    inputSize,
     hasFieldset,
     inline,
     helptext,

package/src/components/fileupload/FileUpload.tsx

@@ -61,11 +61,10 @@ export { formatFileSize, parseFileSize } from 'shared-utils/fileupload'
 /**
  * Shared props for `PktFileUpload` (both `form` and `custom` strategies).
  */
-interface IBaseFileUploadProps
-  extends Omit<
-    InputHTMLAttributes<HTMLInputElement>,
-    'checked' | 'size' | 'type' | 'value' | 'onChange' | 'width' | 'defaultValue'
-  > {
+interface IBaseFileUploadProps extends Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  'checked' | 'size' | 'type' | 'value' | 'onChange' | 'width' | 'defaultValue'
+> {
   /** Called with the next file list when files are added/removed/updated. */
   onFilesChanged?: (files: TFileItemList) => void
   /** Allow selecting/dropping multiple files. */
@@ -120,10 +119,20 @@ interface IBaseFileUploadProps
   label?: string
   /** Help text under the label. */
   helptext?: string | ReactNode
-  /** Show "Valgfritt" tag in wrapper. */
+  /** Expandable help text (dropdown). */
+  helptextDropdown?: string | ReactNode
+  /** Button label for expandable help text. */
+  helptextDropdownButton?: string
+  /** Shows an "optional" tag. */
   optionalTag?: boolean
-  /** Show "Må fylles ut" tag in wrapper. */
+  /** Label text for the optional tag. */
+  optionalText?: string
+  /** Shows a "required" tag. */
   requiredTag?: boolean
+  /** Label text for the required tag. */
+  requiredText?: string
+  /** Extra tag next to the label. */
+  tagText?: string | null
   /** Marks the upload as required. Native validation is used in `form`; submit validation in `custom`. */
   required?: boolean
   /** Enable image preview modal (only applies to thumbnail renderer). */
@@ -131,8 +140,7 @@ interface IBaseFileUploadProps
 }
 
 interface IFileInputFileUploadProps
-  extends IBaseFileUploadProps,
-    Omit<HTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'defaultValue'> {
+  extends IBaseFileUploadProps, Omit<HTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'defaultValue'> {
   uploadStrategy?: 'form'
   onFileUploadRequested?: never
 }
@@ -174,8 +182,13 @@ export const PktFileUpload: FC<IPktFileUpload> = forwardRef<HTMLInputElement, IP
       disabled = false,
       label,
       helptext,
+      helptextDropdown,
+      helptextDropdownButton,
       optionalTag,
+      optionalText,
       requiredTag,
+      requiredText,
+      tagText,
       required = false,
       enableImagePreview = false,
       ['aria-describedby']: ariaDescribedByProp,
@@ -412,10 +425,15 @@ export const PktFileUpload: FC<IPktFileUpload> = forwardRef<HTMLInputElement, IP
           forId={id}
           label={label}
           helptext={helptext}
+          helptextDropdown={helptextDropdown}
+          helptextDropdownButton={helptextDropdownButton}
           disabled={disabled}
           hasError={hasError}
           optionalTag={optionalTag}
+          optionalText={optionalText}
           requiredTag={requiredTag}
+          requiredText={requiredText}
+          tagText={tagText}
           className={classNames('pkt-fileupload-wrapper', { 'pkt-fileupload-wrapper--full-width': fullwidth })}
         >
           {fileUploadContent}

package/src/components/footer/Footer.accessibility.test.tsx

@@ -0,0 +1,46 @@
+import '@testing-library/jest-dom'
+
+import { render } from '@testing-library/react'
+import { axe, toHaveNoViolations } from 'jest-axe'
+import { describe, expect, test } from 'vitest'
+
+import { EXAMPLE_HEADER_FOOTER_DATA } from 'shared-utils/header-footer'
+import type { IPktFooterColumn, IPktFooterLink } from 'shared-types'
+import { PktFooter } from './Footer'
+import { PktFooterSimple } from '../footerSimple/FooterSimple'
+
+expect.extend(toHaveNoViolations)
+
+const COLUMNS: IPktFooterColumn[] = [
+  {
+    title: 'Overskrift 1',
+    text: 'Beskrivende tekst om løsningen.',
+    links: [{ text: 'Lenke 1', href: 'https://example.test/lenke-1' }],
+  },
+  {
+    title: 'Overskrift 2',
+    links: [{ text: 'Lenke 2', href: 'https://example.test/lenke-2' }],
+  },
+]
+
+const LINKS: IPktFooterLink[] = [
+  { text: 'Lenke 1', href: 'https://example.test/lenke-1' },
+  { text: 'Lenke 2', href: 'https://example.test/lenke-2' },
+]
+
+describe('PktFooter tilgjengelighet', () => {
+  test('kun global footer har ingen a11y-avvik', async () => {
+    const { container } = render(<PktFooter data={EXAMPLE_HEADER_FOOTER_DATA} />)
+    expect(await axe(container)).toHaveNoViolations()
+  })
+
+  test('footer med custom kolonner har ingen a11y-avvik', async () => {
+    const { container } = render(<PktFooter columns={COLUMNS} data={EXAMPLE_HEADER_FOOTER_DATA} />)
+    expect(await axe(container)).toHaveNoViolations()
+  })
+
+  test('kompakt footer har ingen a11y-avvik', async () => {
+    const { container } = render(<PktFooterSimple links={LINKS} data={EXAMPLE_HEADER_FOOTER_DATA} />)
+    expect(await axe(container)).toHaveNoViolations()
+  })
+})