@arbor-education/design-system.components 4.7.0-alpha.0 → 4.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arbor-education/design-system.components",
-  "version": "4.7.0-alpha.0",
+  "version": "4.7.0",
   "description": "The component library for the design system (the baby)",
   "main": "dist/index.js",
   "type": "module",

package/src/components/datePicker/DatePicker.stories.tsx

@@ -312,6 +312,20 @@ const meta = {
         type: { summary: 'string' },
       },
     },
+    'aria-label': {
+      control: 'text',
+      description: 'Accessible name for the input when used outside `<FormField>`. Use when there is no visible label.',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    'aria-labelledby': {
+      control: 'text',
+      description: 'ID of a visible element that names the input. Prefer this over `aria-label` when a visible label exists.',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
   },
 } satisfies Meta<typeof DatePicker>;
 
@@ -345,6 +359,7 @@ const ControlledWithDisplayTemplate = () => {
     <div style={{ maxWidth: '280px' }}>
       <DatePicker
         id="controlled-display"
+        aria-label="Event date"
         onChange={setSelectedDate}
       />
       <p style={{ margin: 'var(--spacing-small) 0 0', color: 'var(--color-grey-600)' }}>
@@ -385,6 +400,7 @@ const ControlledWithValidationTemplate = () => {
     <div style={{ maxWidth: '280px' }}>
       <DatePicker
         id="validated-date"
+        aria-label="Event date"
         onChange={handleChange}
         hasError={!!error}
         aria-invalid={error ? true : undefined}
@@ -468,7 +484,8 @@ const WithFormFieldAndErrorTemplate = () => {
 export const Default: Story = withDescription(
   {
     args: {
-      id: 'default-date',
+      'id': 'default-date',
+      'aria-label': 'Start date',
     },
     render: args => (
       <div style={{ maxWidth: '280px' }}>
@@ -486,8 +503,9 @@ export const Default: Story = withDescription(
 export const FriendlyFormat: Story = withDescription(
   {
     args: {
-      displayFormat: 'friendly',
-      id: 'friendly-date',
+      'displayFormat': 'friendly',
+      'id': 'friendly-date',
+      'aria-label': 'Event date',
     },
     render: args => (
       <div style={{ maxWidth: '280px' }}>
@@ -506,6 +524,7 @@ function FriendlyFormatExample() {
   return (
     <DatePicker
       id="event-date"
+      aria-label="Event date"
       displayFormat="friendly"
       onChange={(date) => {
         // date is Date | undefined — not a string
@@ -530,6 +549,7 @@ export const WithDefaultValue: Story = withDescription(
         {/* September 1 2024 — month is zero-indexed (Jan = 0, Sep = 8) */}
         <DatePicker
           id="default-value-date"
+          aria-label="Enrolment date"
           defaultValue={new Date(2024, 8, 1)}
         />
       </div>
@@ -549,6 +569,7 @@ function EditEnrollmentDate() {
   return (
     <DatePicker
       id="enrollment-date"
+      aria-label="Enrolment date"
       defaultValue={currentEnrollmentDate}
       onChange={(date) => {
         // date is Date | undefined — not a string
@@ -576,6 +597,7 @@ export const WithPlaceholder: Story = withDescription(
       <div style={{ maxWidth: '280px' }}>
         <DatePicker
           id="placeholder-date"
+          aria-label="Term start date"
           placeholder="Choose term start date"
         />
       </div>
@@ -592,6 +614,7 @@ function TermStartDatePicker() {
   return (
     <DatePicker
       id="term-start-date"
+      aria-label="Term start date"
       placeholder="Choose term start date"
       onChange={(date) => {
         console.log('Term start:', date?.toLocaleDateString('en-GB'));
@@ -618,6 +641,7 @@ export const ErrorState: Story = withDescription(
       <div style={{ maxWidth: '280px' }}>
         <DatePicker
           id="error-state-date"
+          aria-label="Enrolment date"
           hasError
           aria-invalid={true}
           aria-describedby="error-state-msg"
@@ -646,6 +670,7 @@ function EnrollmentDateWithError() {
     <>
       <DatePicker
         id="enrollment-date"
+        aria-label="Enrolment date"
         hasError
         aria-invalid={true}
         aria-describedby="enrollment-date-error"
@@ -688,6 +713,7 @@ function ControlledDatePickerExample() {
     <div>
       <DatePicker
         id="event-date"
+        aria-label="Event date"
         onChange={setSelectedDate}
       />
       <p>
@@ -749,6 +775,7 @@ function FutureDatePicker() {
     <div>
       <DatePicker
         id="event-date"
+        aria-label="Event date"
         onChange={handleChange}
         hasError={!!error}
         aria-invalid={error ? true : undefined}

package/src/components/datePicker/DatePicker.test.tsx

@@ -21,6 +21,21 @@ describe('DatePicker', () => {
     expect(screen.getByRole('button', { name: 'Open date picker' })).toBeInTheDocument();
   });
 
+  test('names the input with aria-label', () => {
+    const { container } = render(<DatePicker aria-label="Start date" />);
+    expect(screen.getByLabelText('Start date')).toBe(container.querySelector('input[type="date"]'));
+  });
+
+  test('names the input with aria-labelledby', () => {
+    const { container } = render(
+      <>
+        <span id="start-date-label">Start date</span>
+        <DatePicker aria-labelledby="start-date-label" />
+      </>,
+    );
+    expect(screen.getByLabelText('Start date')).toBe(container.querySelector('input[type="date"]'));
+  });
+
   test('day picker is hidden by default', () => {
     render(<DatePicker />);
     expect(screen.queryByRole('application')).not.toBeInTheDocument();

package/src/components/datePicker/DatePicker.tsx

@@ -37,6 +37,8 @@ export type DatePickerProps = {
   'value'?: Date;
   'defaultValue'?: Date;
   'autoFocus'?: boolean;
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
 };
 
 export const DatePicker = (props: DatePickerProps) => {
@@ -48,6 +50,8 @@ export const DatePicker = (props: DatePickerProps) => {
     hasError,
     'aria-describedby': ariaDescribedBy,
     'aria-invalid': ariaInvalid,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
     value,
     defaultValue,
     placeholder,
@@ -183,6 +187,8 @@ export const DatePicker = (props: DatePickerProps) => {
           hasError={hasError}
           aria-describedby={ariaDescribedBy}
           aria-invalid={ariaInvalid}
+          aria-label={ariaLabel}
+          aria-labelledby={ariaLabelledBy}
           className="ds-date-picker__input"
           autoFocus={autoFocus}
         />

package/src/components/dateTimePicker/DateTimePicker.stories.tsx

@@ -315,6 +315,20 @@ const meta = {
         type: { summary: 'string' },
       },
     },
+    'aria-label': {
+      control: 'text',
+      description: 'Accessible name for the input when used outside `<FormField>`. Use when there is no visible label.',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    'aria-labelledby': {
+      control: 'text',
+      description: 'ID of a visible element that names the input. Prefer this over `aria-label` when a visible label exists.',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
   },
 } satisfies Meta<typeof DateTimePicker>;
 
@@ -364,6 +378,7 @@ const DisplayFormatDefaultTemplate = () => {
         value={value}
         onChange={setValue}
         id="format-default"
+        aria-label="Event start date and time"
       />
       <p style={{ margin: 'var(--spacing-small) 0 0', color: 'var(--color-grey-600)' }}>
         Value:
@@ -387,6 +402,7 @@ const DisplayFormatFriendlyTemplate = () => {
         value={value}
         onChange={setValue}
         id="format-friendly"
+        aria-label="Event start date and time"
       />
       <p style={{ margin: 'var(--spacing-small) 0 0', color: 'var(--color-grey-600)' }}>
         Value:
@@ -410,6 +426,7 @@ const WithTimeOptionsTemplate = () => {
         value={value}
         onChange={setValue}
         id="time-options"
+        aria-label="Appointment date and time"
       />
       <p style={{ margin: 'var(--spacing-small) 0 0', color: 'var(--color-grey-600)' }}>
         Appointment:
@@ -433,6 +450,7 @@ const GranularitySecondTemplate = () => {
         value={value}
         onChange={setValue}
         id="granularity-second"
+        aria-label="Precise date and time"
       />
       <p style={{ margin: 'var(--spacing-small) 0 0', color: 'var(--color-grey-600)' }}>
         Value (with seconds):
@@ -453,6 +471,7 @@ const ControlledWithDisplayTemplate = () => {
     <div style={{ maxWidth: '280px' }}>
       <DateTimePicker
         id="controlled-display"
+        aria-label="Event date and time"
         onChange={setValue}
       />
       <p style={{ margin: 'var(--spacing-small) 0 0', color: 'var(--color-grey-600)' }}>
@@ -528,7 +547,8 @@ const WithFormFieldAndErrorTemplate = () => {
 export const Default: Story = withDescription(
   {
     args: {
-      id: 'default-datetime',
+      'id': 'default-datetime',
+      'aria-label': 'Event start date and time',
     },
     render: args => (
       <div style={{ maxWidth: '280px' }}>
@@ -551,6 +571,7 @@ export const WithDefaultValue: Story = withDescription(
         {/* 14 April 2026, 14:27 — month is zero-indexed (Apr = 3) */}
         <DateTimePicker
           id="default-value-datetime"
+          aria-label="Event start date and time"
           defaultValue={new Date(2026, 3, 14, 14, 27)}
         />
       </div>
@@ -570,6 +591,7 @@ function EditEventStart() {
   return (
     <DateTimePicker
       id="event-start"
+      aria-label="Event start date and time"
       defaultValue={eventStart}
       onChange={(date) => {
         // date is Date | undefined — not a string
@@ -611,6 +633,7 @@ function PreciseDateTimePickerExample() {
       value={value}
       onChange={setValue}
       id="precise-datetime"
+      aria-label="Precise date and time"
     />
   );
 }
@@ -648,6 +671,7 @@ function FormattedDateTimePickerExample() {
       value={value}
       onChange={setValue}
       id="event-datetime"
+      aria-label="Event start date and time"
     />
   );
 }
@@ -685,6 +709,7 @@ function FriendlyDateTimePickerExample() {
       value={value}
       onChange={setValue}
       id="event-datetime"
+      aria-label="Event start date and time"
     />
   );
 }
@@ -726,6 +751,7 @@ function AppointmentBookingExample() {
       value={value}
       onChange={setValue}
       id="appointment-datetime"
+      aria-label="Appointment date and time"
     />
   );
 }
@@ -748,6 +774,7 @@ export const WithPlaceholder: Story = withDescription(
       <div style={{ maxWidth: '280px' }}>
         <DateTimePicker
           id="placeholder-datetime"
+          aria-label="Event start date and time"
           placeholder="Choose event start"
         />
       </div>
@@ -764,6 +791,7 @@ function GuidedDateTimePickerExample() {
   return (
     <DateTimePicker
       id="event-start"
+      aria-label="Event start date and time"
       placeholder="Choose event start"
       onChange={(date) => {
         console.log('Event start:', date?.toLocaleString('en-GB'));
@@ -790,6 +818,7 @@ export const ErrorState: Story = withDescription(
       <div style={{ maxWidth: '280px' }}>
         <DateTimePicker
           id="error-state-datetime"
+          aria-label="Event start date and time"
           hasError
           aria-invalid={true}
           aria-describedby="error-state-datetime-msg"
@@ -818,6 +847,7 @@ function DateTimePickerWithError() {
     <>
       <DateTimePicker
         id="event-start"
+        aria-label="Event start date and time"
         hasError
         aria-invalid={true}
         aria-describedby="event-start-error"
@@ -860,6 +890,7 @@ function ControlledDateTimePickerExample() {
     <div>
       <DateTimePicker
         id="event-datetime"
+        aria-label="Event date and time"
         onChange={setValue}
       />
       <p>

package/src/components/dateTimePicker/DateTimePicker.test.tsx

@@ -27,6 +27,21 @@ describe('DateTimePicker', () => {
     expect(screen.getByRole('button', { name: 'Open date and time picker' })).toBeInTheDocument();
   });
 
+  test('names the input with aria-label', () => {
+    const { container } = render(<DateTimePicker aria-label="Start date" />);
+    expect(screen.getByLabelText('Start date')).toBe(container.querySelector('input[type="datetime-local"]'));
+  });
+
+  test('names the input with aria-labelledby', () => {
+    const { container } = render(
+      <>
+        <span id="start-date-label">Start date</span>
+        <DateTimePicker aria-labelledby="start-date-label" />
+      </>,
+    );
+    expect(screen.getByLabelText('Start date')).toBe(container.querySelector('input[type="datetime-local"]'));
+  });
+
   test('uses a native datetime-local input with minute stepping by default', () => {
     const { container } = render(<DateTimePicker />);
     const input = container.querySelector('input[type="datetime-local"]');

package/src/components/dateTimePicker/DateTimePicker.tsx

@@ -41,6 +41,8 @@ export type DateTimePickerProps = {
   'hasError'?: boolean;
   'aria-describedby'?: string;
   'aria-invalid'?: boolean;
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
   'value'?: Date;
   'defaultValue'?: Date;
   'granularity'?: TimeGranularity;
@@ -59,6 +61,8 @@ export const DateTimePicker = (props: DateTimePickerProps) => {
     hasError,
     'aria-describedby': ariaDescribedBy,
     'aria-invalid': ariaInvalid,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
     value,
     defaultValue,
     displayFormat = 'native',
@@ -258,6 +262,8 @@ export const DateTimePicker = (props: DateTimePickerProps) => {
           hasError={hasError}
           aria-describedby={ariaDescribedBy}
           aria-invalid={ariaInvalid}
+          aria-label={ariaLabel}
+          aria-labelledby={ariaLabelledBy}
           className="ds-date-time-picker__input"
         />
         {showFieldHint

package/src/components/fileUpload/FileUpload.stories.tsx

@@ -12,6 +12,7 @@ import { fn } from 'storybook/test';
 import { useEffect, useRef, useState } from 'react';
 import { Button } from 'Components/button/Button';
 import { FileUpload } from './FileUpload.js';
+import type { FileUploadLink } from './FileUpload.js';
 import type { FileUploadProps } from './FileUpload.js';
 
 // ─── Content strings ──────────────────────────────────────────────────────────
@@ -88,8 +89,12 @@ it is exported you can inline the shape or declare your own local type:
 type UploadedFile = {
   fileName: string;
   icon?: string;          // any IconName from the design system Icon component
-  fileType: string;       // e.g. 'PDF', 'XLSX', 'DOCX'
-  fileSize: string;       // human-readable, e.g. '1.2 MB'
+  fileType?: string;      // e.g. 'PDF', 'XLSX', 'DOCX'
+  fileSize?: string;      // human-readable, e.g. '1.2 MB'
+  href?: string;          // renders the row as a link; fileName becomes the link name
+  linkProps?: object;     // extra anchor attributes (target/rel default to new tab, noopener)
+  renderLink?: (args: WidgetRenderLinkArgs) => ReactElement; // e.g. router links
+  onEdit?: (link: { url: string; name: string }) => void;   // link rows only
   onDownload?: () => void;
   onDelete: () => void;
   progressPercentage?: number;  // 0–100; hidden at exactly 100
@@ -103,7 +108,7 @@ const RELATED_COMPONENTS = `
 
 - [Progress](?path=/docs/components-progress--docs) — the progress bar used
   inside each file row to indicate upload completion.
-- [Button](?path=/docs/components-button--docs) — the "click to upload",
+- [Button](?path=/docs/components-button--docs) — the "Browse files",
   download, and delete buttons inside the component.
 - [Card](?path=/docs/components-card--docs) — the visual wrapper for both the
   dropzone area and the file list.
@@ -174,13 +179,13 @@ const meta = {
     dropzoneContent: {
       description:
         'Custom content rendered inside the dropzone area. Defaults to a '
-        + '"Drag and drop, or click to upload" paragraph. Pass a `ReactNode` to '
+        + '"Drag and drop, add a link or" paragraph with a "Browse files" button. Pass a `ReactNode` to '
         + 'replace this with your own copy or layout.',
       control: false,
       table: {
         type: { summary: 'ReactNode' },
         defaultValue: {
-          summary: '<p>Drag and drop, or <Button variant="text-link">click to upload</Button></p>',
+          summary: '<p>Drag and drop, add a link or</p> + <Button variant="secondary">Browse files</Button>',
         },
       },
     },
@@ -325,6 +330,69 @@ export default UploadWithFilesExample;
 
 // ─────────────────────────────────────────────────────────────────────────────
 
+export const WithLinks: Story = withDescription(
+  {
+    render: () => {
+      const [links, setLinks] = useState<FileUploadLink[]>([
+        { name: 'Pastoral policy', url: 'https://example.com/pastoral-policy' },
+      ]);
+      return (
+        <div style={{ maxWidth: '560px', padding: 'var(--spacing-large)' }}>
+          <FileUpload
+            uploadFiles={noop}
+            onAddLink={link => setLinks(previous => [...previous, link])}
+            uploadedFiles={[
+              {
+                fileName: 'spring-term-report-2024.pdf',
+                fileType: 'PDF',
+                fileSize: '1.2 MB',
+                onDownload: noop,
+                onDelete: noop,
+              },
+              ...links.map((link, index) => ({
+                fileName: link.name,
+                href: link.url,
+                onEdit: (updated: FileUploadLink) =>
+                  setLinks(previous => previous.map((item, i) => (i === index ? updated : item))),
+                onDelete: () => setLinks(previous => previous.filter((_, i) => i !== index)),
+              })),
+            ]}
+          />
+        </div>
+      );
+    },
+    parameters: {
+      controls: { disable: true },
+      docs: {
+        source: {
+          language: 'tsx',
+          code: `
+<FileUpload
+  uploadFiles={(files) => { /* start upload */ }}
+  onAddLink={({ url, name }) => { /* save the new link */ }}
+  uploadedFiles={[
+    { fileName: 'report.pdf', fileType: 'PDF', fileSize: '1.2 MB', onDelete: () => {} },
+    {
+      fileName: 'Pastoral policy',
+      href: 'https://example.com/pastoral-policy',
+      onEdit: ({ url, name }) => { /* save the edited link */ },
+      onDelete: () => {},
+    },
+  ]}
+/>
+`.trim(),
+        },
+      },
+    },
+  },
+  'A mixed list of file rows and link rows. Passing `onAddLink` turns "add a link" into '
+  + 'a trigger for a modal form (name and URL). A row with `href` renders as a link that '
+  + 'opens in a new tab, with copy and delete actions; adding `onEdit` shows an edit action '
+  + 'that opens the same modal pre-filled.',
+);
+
+// ─────────────────────────────────────────────────────────────────────────────
+
 export const SingleFile: Story = withDescription(
   {
     render: () => (
@@ -721,7 +789,7 @@ export default CustomDropzoneExample;
     },
   },
   'Pass a `ReactNode` to `dropzoneContent` to replace the default '
-  + '"Drag and drop, or click to upload" copy. This is useful when you need '
+  + 'default "Drag and drop" copy. This is useful when you need '
   + 'context-specific instructions or a branded call-to-action button.',
 );
 

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

@@ -15,7 +15,13 @@ describe('FileUpload', () => {
   describe('dropzone', () => {
     test('renders default dropzone content', () => {
       render(<FileUpload uploadedFiles={[]} uploadFiles={vi.fn()} />);
-      expect(screen.getByText('click to upload')).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Browse files' })).toBeInTheDocument();
+      expect(screen.getByText('Drag and drop or')).toBeInTheDocument();
+    });
+
+    test('does not render the add a link trigger without onAddLink', () => {
+      render(<FileUpload uploadedFiles={[]} uploadFiles={vi.fn()} />);
+      expect(screen.queryByRole('button', { name: 'add a link' })).not.toBeInTheDocument();
     });
 
     test('renders custom dropzoneContent', () => {
@@ -169,4 +175,136 @@ describe('FileUpload', () => {
       expect(container.firstChild).toHaveClass('ds-file-upload', 'my-custom-class');
     });
   });
+  describe('link rows', () => {
+    const linkRow = {
+      fileName: 'Pastoral policy',
+      href: 'https://example.com/policy',
+      onDelete: vi.fn(),
+    };
+
+    test('renders a link row as an anchor opening in a new tab', () => {
+      render(<FileUpload uploadedFiles={[linkRow]} uploadFiles={vi.fn()} />);
+      const anchor = screen.getByRole('link', { name: 'Pastoral policy' });
+      expect(anchor).toHaveAttribute('href', 'https://example.com/policy');
+      expect(anchor).toHaveAttribute('target', '_blank');
+      expect(anchor).toHaveAttribute('rel', 'noopener noreferrer');
+      expect(screen.getByText('https://example.com/policy')).toBeInTheDocument();
+    });
+
+    test('merges linkProps onto the anchor', () => {
+      render(
+        <FileUpload
+          uploadedFiles={[{ ...linkRow, linkProps: { target: '_self' } }]}
+          uploadFiles={vi.fn()}
+        />,
+      );
+      expect(screen.getByRole('link', { name: 'Pastoral policy' })).toHaveAttribute('target', '_self');
+    });
+
+    test('uses renderLink when provided', () => {
+      render(
+        <FileUpload
+          uploadedFiles={[{
+            ...linkRow,
+            renderLink: ({ href, className, children }) => (
+              <a href={href} className={className} data-custom="true">{children}</a>
+            ),
+          }]}
+          uploadFiles={vi.fn()}
+        />,
+      );
+      expect(screen.getByRole('link', { name: 'Pastoral policy' })).toHaveAttribute('data-custom', 'true');
+    });
+
+    test('does not render a link for rows without href', () => {
+      render(<FileUpload uploadedFiles={[baseFile]} uploadFiles={vi.fn()} />);
+      expect(screen.queryByRole('link')).not.toBeInTheDocument();
+      expect(screen.queryByRole('button', { name: 'Edit link' })).not.toBeInTheDocument();
+    });
+
+    test('calls onDelete without triggering other actions', async () => {
+      const onDelete = vi.fn();
+      const onEdit = vi.fn();
+      render(
+        <FileUpload uploadedFiles={[{ ...linkRow, onDelete, onEdit }]} uploadFiles={vi.fn()} />,
+      );
+      await userEvent.click(screen.getByRole('button', { name: 'Delete link' }));
+      expect(onDelete).toHaveBeenCalledOnce();
+      expect(onEdit).not.toHaveBeenCalled();
+    });
+
+    test('copies the link to the clipboard', async () => {
+      const user = userEvent.setup();
+      render(<FileUpload uploadedFiles={[linkRow]} uploadFiles={vi.fn()} />);
+      await user.click(screen.getByRole('button', { name: 'Copy link' }));
+      expect(await navigator.clipboard.readText()).toBe('https://example.com/policy');
+    });
+  });
+
+  describe('adding a link', () => {
+    test('opens the form from the add a link trigger and submits trimmed values', async () => {
+      const onAddLink = vi.fn();
+      const uploadFiles = vi.fn();
+      render(<FileUpload uploadedFiles={[]} uploadFiles={uploadFiles} onAddLink={onAddLink} />);
+
+      await userEvent.click(screen.getByRole('button', { name: 'add a link' }));
+      expect(screen.getByRole('dialog', { name: 'Add URL attachment' })).toBeInTheDocument();
+      await userEvent.type(screen.getByLabelText('Name of link'), '  Policy ');
+      await userEvent.type(screen.getByLabelText('Paste your link URL here'), ' https://example.com ');
+      await userEvent.click(screen.getByRole('button', { name: 'Add' }));
+
+      expect(onAddLink).toHaveBeenCalledWith({ name: 'Policy', url: 'https://example.com' });
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    });
+
+    test('shows validation errors and does not submit invalid values', async () => {
+      const onAddLink = vi.fn();
+      render(<FileUpload uploadedFiles={[]} uploadFiles={vi.fn()} onAddLink={onAddLink} />);
+
+      await userEvent.click(screen.getByRole('button', { name: 'add a link' }));
+      await userEvent.click(screen.getByRole('button', { name: 'Add' }));
+      expect(screen.getByText('Name is required.')).toBeInTheDocument();
+      expect(screen.getByText('URL is required.')).toBeInTheDocument();
+
+      await userEvent.type(screen.getByLabelText('Name of link'), 'Policy');
+      await userEvent.type(screen.getByLabelText('Paste your link URL here'), 'ftp://example.com');
+      await userEvent.click(screen.getByRole('button', { name: 'Add' }));
+      expect(screen.getByText('Enter a valid URL starting with http:// or https://.')).toBeInTheDocument();
+      expect(onAddLink).not.toHaveBeenCalled();
+    });
+
+    test('closes the form on cancel', async () => {
+      render(<FileUpload uploadedFiles={[]} uploadFiles={vi.fn()} onAddLink={vi.fn()} />);
+      await userEvent.click(screen.getByRole('button', { name: 'add a link' }));
+      await userEvent.click(screen.getByRole('button', { name: 'Cancel' }));
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('editing a link', () => {
+    test('opens a pre-filled form and calls onEdit with the updated link', async () => {
+      const onEdit = vi.fn();
+      render(
+        <FileUpload
+          uploadFiles={vi.fn()}
+          uploadedFiles={[{
+            fileName: 'Policy',
+            href: 'https://example.com',
+            onEdit,
+            onDelete: vi.fn(),
+          }]}
+        />,
+      );
+
+      await userEvent.click(screen.getByRole('button', { name: 'Edit link' }));
+      expect(screen.getByLabelText('Name of link')).toHaveValue('Policy');
+      expect(screen.getByLabelText('Paste your link URL here')).toHaveValue('https://example.com');
+
+      await userEvent.clear(screen.getByLabelText('Name of link'));
+      await userEvent.type(screen.getByLabelText('Name of link'), 'Updated');
+      await userEvent.click(screen.getByRole('button', { name: 'Update' }));
+
+      expect(onEdit).toHaveBeenCalledWith({ name: 'Updated', url: 'https://example.com' });
+    });
+  });
 });