@oslokommune/punkt-react 16.7.6 → 16.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "16.7.6",
+  "version": "16.8.0",
   "description": "React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -39,7 +39,7 @@
   "dependencies": {
     "@lit-labs/ssr-dom-shim": "^1.2.1",
     "@lit/react": "^1.0.7",
-    "@oslokommune/punkt-elements": "^16.7.4",
+    "@oslokommune/punkt-elements": "^16.7.7",
     "classnames": "^2.5.1",
     "prettier": "^3.3.3",
     "react-hook-form": "^7.53.0"
@@ -109,5 +109,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "208f11c3292166c3bbb6a40a1a1635a23e870b78"
+  "gitHead": "3e4333b4aec70ec35b49703dc70b5dd9f26ab384"
 }

package/src/components/fileupload/DropZone.tsx

@@ -53,6 +53,8 @@ interface IDropZoneProps
     uploaded: string
     errors: string
   }
+  /** Whether the file input already has an external visible label associated with it. */
+  hasVisibleLabel?: boolean
 }
 export const DropZone = forwardRef<HTMLInputElement, IDropZoneProps>(
   (
@@ -67,6 +69,7 @@ export const DropZone = forwardRef<HTMLInputElement, IDropZoneProps>(
       isThumbnailView = false,
       disabled = false,
       srAnnouncementIds,
+      hasVisibleLabel = false,
       ...inputProps
     }: IDropZoneProps,
     forwardedRef,
@@ -195,7 +198,7 @@ export const DropZone = forwardRef<HTMLInputElement, IDropZoneProps>(
           accept={resolvedAccept}
           disabled={disabled}
           name={(uploadStrategy === 'form' && name) || undefined} // Ikke sett name hvis uploadStrategy er 'custom' - ignorerer ved POST
-          aria-label={multiple ? 'Velg filer' : 'Velg fil'}
+          aria-label={hasVisibleLabel ? undefined : multiple ? 'Velg filer' : 'Velg fil'}
         />
         {uploadStrategy === 'custom' && (
           <>

package/src/components/fileupload/FileUpload.test.tsx

@@ -416,6 +416,74 @@ describe('PktFileUpload', () => {
   })
 
   describe('Accessibility', () => {
+    it('keeps label and input associations isolated across multiple instances without explicit ids', () => {
+      render(
+        <>
+          <PktFileUpload name="pktFileUploadA" label="Første vedlegg" helptext="Hjelpetekst A" />
+          <PktFileUpload name="pktFileUploadB" label="Andre vedlegg" helptext="Hjelpetekst B" />
+        </>,
+      )
+
+      const firstInput = screen.getByLabelText('Første vedlegg') as HTMLInputElement
+      const secondInput = screen.getByLabelText('Andre vedlegg') as HTMLInputElement
+
+      expect(firstInput.id).toBeTruthy()
+      expect(secondInput.id).toBeTruthy()
+      expect(firstInput.id).not.toBe(secondInput.id)
+      expect(firstInput).toHaveAttribute('aria-describedby', `${firstInput.id}-helptext`)
+      expect(secondInput).toHaveAttribute('aria-describedby', `${secondInput.id}-helptext`)
+      expect(document.getElementById(`${firstInput.id}-helptext`)).toHaveTextContent('Hjelpetekst A')
+      expect(document.getElementById(`${secondInput.id}-helptext`)).toHaveTextContent('Hjelpetekst B')
+    })
+
+    it('associates the label with the native file input and wires help text + error message ids', () => {
+      render(
+        <PktFileUpload
+          id="test-upload"
+          name="pktFileUpload"
+          label="Last opp vedlegg"
+          helptext="Last opp minst én fil."
+          onFileValidation={() => 'Ugyldig fil.'}
+        />,
+      )
+
+      const fileInput = screen.getByLabelText('Last opp vedlegg') as HTMLInputElement
+      const file = createMockFile('test.pdf')
+
+      fireEvent.change(fileInput, { target: { files: [file] } })
+
+      expect(fileInput).toHaveAttribute('id', 'test-upload')
+      expect(fileInput).toHaveAttribute('aria-invalid', 'true')
+      expect(fileInput).toHaveAttribute('aria-describedby', 'test-upload-helptext test-upload-error')
+      expect(screen.getByText('Ugyldig fil.')).toBeInTheDocument()
+    })
+
+    it('applies native required only for form strategy', () => {
+      const { rerender } = render(
+        <PktFileUpload id="required-upload" name="pktFileUpload" label="Vedlegg" required uploadStrategy="form" />,
+      )
+
+      let fileInput = screen.getByLabelText('Vedlegg') as HTMLInputElement
+      expect(fileInput).toHaveAttribute('required')
+      expect(fileInput).toHaveAttribute('aria-required', 'true')
+
+      rerender(
+        <PktFileUpload
+          id="required-upload"
+          name="pktFileUpload"
+          label="Vedlegg"
+          required
+          uploadStrategy="custom"
+          onFileUploadRequested={vi.fn()}
+          transfers={[]}
+        />,
+      )
+
+      fileInput = screen.getByLabelText('Vedlegg') as HTMLInputElement
+      expect(fileInput).not.toHaveAttribute('required')
+      expect(fileInput).toHaveAttribute('aria-required', 'true')
+    })
+
     it('should have no accessibility violations', async () => {
       const { container } = render(<PktFileUpload multiple name={'pktFileUpload'} />)
       // Note: The hidden file input doesn't have a label, but it's intentionally hidden
@@ -448,6 +516,36 @@ describe('PktFileUpload', () => {
   })
 
   describe('Form submission values', () => {
+    it('blocks custom strategy submit when required and no files are selected', () => {
+      const { container } = render(
+        <form>
+          <PktFileUpload
+            id="custom-required-upload"
+            name="pktFileUpload"
+            label="Last opp vedlegg"
+            required
+            uploadStrategy="custom"
+            onFileUploadRequested={vi.fn()}
+            transfers={[]}
+          />
+        </form>,
+      )
+
+      const form = container.querySelector('form') as HTMLFormElement
+      let submitWasPrevented = false
+      form.addEventListener('submit', (event) => {
+        submitWasPrevented = event.defaultPrevented
+      })
+
+      fireEvent.submit(form)
+
+      const fileInput = screen.getByLabelText('Last opp vedlegg') as HTMLInputElement
+      expect(submitWasPrevented).toBe(true)
+      expect(fileInput).toHaveAttribute('aria-invalid', 'true')
+      expect(fileInput).toHaveAttribute('aria-describedby', 'custom-required-upload-error')
+      expect(screen.getByText('Velg minst én fil før du sender inn skjemaet.')).toBeInTheDocument()
+    })
+
     it('should populate file input with selected files for form submission', () => {
       const TestFormComponent = () => {
         const [files, setFiles] = useState<TFileItemList>([])

package/src/components/fileupload/FileUpload.tsx

@@ -12,7 +12,20 @@ Prinsipper:
 - Støtte for tilpassede renderer-komponenter for visning av filer i køen.
  */
 import classNames from 'classnames'
-import { FC, forwardRef, HTMLAttributes, InputHTMLAttributes, ReactNode, useCallback, useMemo, useState } from 'react'
+import {
+  FC,
+  forwardRef,
+  HTMLAttributes,
+  InputHTMLAttributes,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useId,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
 
 import { PktAlert } from '../alert/Alert'
 import { PktInputWrapper } from '../inputwrapper/InputWrapper'
@@ -102,6 +115,8 @@ interface IBaseFileUploadProps
   optionalTag?: boolean
   /** Show "Må fylles ut" tag in wrapper. */
   requiredTag?: boolean
+  /** 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). */
   enableImagePreview?: boolean
 }
@@ -136,7 +151,7 @@ export const PktFileUpload: FC<IPktFileUpload> = forwardRef<HTMLInputElement, IP
     {
       value: valueProp,
       defaultValue,
-      id = 'fileupload-id',
+      id: idProp,
       multiple = false,
       uploadStrategy = 'form',
       addCommentsEnabled = false,
@@ -159,17 +174,29 @@ export const PktFileUpload: FC<IPktFileUpload> = forwardRef<HTMLInputElement, IP
       helptext,
       optionalTag,
       requiredTag,
+      required = false,
       enableImagePreview = false,
+      ['aria-describedby']: ariaDescribedByProp,
+      ['aria-invalid']: ariaInvalidProp,
       ...props
     }: IPktFileUpload,
     forwardedRef,
   ) => {
+    const generatedId = useId()
+    const id = idProp ?? `pkt-fileupload-${generatedId}`
+    const fileInputRef = useRef<HTMLInputElement>(null)
+    useImperativeHandle(forwardedRef, () => fileInputRef.current as HTMLInputElement, [])
+
     const transfers = 'transfers' in props ? props.transfers : undefined
     const [validationError, setValidationError] = useState<string | null>(null)
 
     // Combine external error with internal validation error
     const hasError = externalHasError || !!validationError
     const errorMessage = externalErrorMessage || validationError
+    const errorMessageId = errorMessage ? `${id}-error` : undefined
+    const helptextId = helptext ? `${id}-helptext` : undefined
+    const describedBy = [ariaDescribedByProp, helptextId, errorMessageId].filter(Boolean).join(' ') || undefined
+    const isAriaInvalid = hasError || ariaInvalidProp === true || ariaInvalidProp === 'true'
 
     // Parse maxFileSize once (supports "5MB" strings or raw bytes)
     const maxFileSizeBytes = maxFileSize ? parseFileSize(maxFileSize) : undefined
@@ -238,6 +265,24 @@ export const PktFileUpload: FC<IPktFileUpload> = forwardRef<HTMLInputElement, IP
     const isControlled = valueProp !== undefined
     const value = isControlled ? valueProp : defaultValue || []
 
+    useEffect(() => {
+      if (uploadStrategy !== 'custom' || !required) return
+      const input = fileInputRef.current
+      const form = input?.form
+      if (!form) return
+
+      const handleFormSubmit = (event: SubmitEvent) => {
+        if (value.length > 0) return
+        event.preventDefault()
+        setValidationError('Velg minst én fil før du sender inn skjemaet.')
+      }
+
+      form.addEventListener('submit', handleFormSubmit)
+      return () => {
+        form.removeEventListener('submit', handleFormSubmit)
+      }
+    }, [required, uploadStrategy, value.length])
+
     const itemRenderer = typeof itemRendererProp === 'string' ? ItemRenderers[itemRendererProp] : itemRendererProp
     const isThumbnailView = itemRendererProp === 'thumbnail'
     const explicitAccept = typeof props.accept === 'string' ? props.accept.trim() : undefined
@@ -389,14 +434,26 @@ export const PktFileUpload: FC<IPktFileUpload> = forwardRef<HTMLInputElement, IP
             onFilesAdded={onFilesAdded}
             multiple={multiple}
             uploadStrategy={uploadStrategy}
-            ref={forwardedRef}
+            ref={fileInputRef}
             accept={isThumbnailView ? '.jpeg, .jpg, .png, .gif, .webp, .heic' : resolvedAcceptForDropZone}
             isThumbnailView={isThumbnailView}
             disabled={disabled}
             srAnnouncementIds={srAnnouncementIds}
+            required={required && uploadStrategy === 'form'}
+            aria-required={required ? 'true' : undefined}
+            aria-invalid={isAriaInvalid ? 'true' : undefined}
+            aria-describedby={describedBy}
+            hasVisibleLabel={!!label}
           />
           {hasError && errorMessage && (
-            <PktAlert skin="error" aria-live="assertive" role="alert" compact>
+            <PktAlert
+              skin="error"
+              aria-live="assertive"
+              role="alert"
+              compact
+              id={errorMessageId}
+              className="pkt-fileupload__error-alert"
+            >
               {errorMessage}
             </PktAlert>
           )}