@morscherlab/mint-sdk 1.2.0-beta.8 → 1.2.0

package/src/__tests__/components/DatePicker.test.ts

@@ -42,4 +42,80 @@ describe('DatePicker', () => {
 
     wrapper.unmount()
   })
+
+  it('opens from the input with Enter, Space and ArrowDown', async () => {
+    const wrapper = mount(DatePicker, { attachTo: document.body })
+
+    for (const key of ['Enter', ' ', 'ArrowDown']) {
+      await wrapper.get('input').trigger('keydown', { key })
+      expect(dropdown()).not.toBeNull()
+
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
+      await nextTick()
+      expect(dropdown()).toBeNull()
+    }
+
+    wrapper.unmount()
+  })
+
+  it('moves focus into the calendar grid and back to the input on close', async () => {
+    const wrapper = mount(DatePicker, {
+      props: { modelValue: '2026-04-22' },
+      attachTo: document.body,
+    })
+    const input = wrapper.get<HTMLInputElement>('input').element
+
+    await wrapper.get('input').trigger('click')
+    await nextTick()
+    await nextTick()
+    await nextTick()
+
+    expect(document.activeElement).toBe(
+      document.body.querySelector('.mint-date-picker__day--selected'),
+    )
+
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
+    await nextTick()
+    await nextTick()
+
+    expect(document.activeElement).toBe(input)
+
+    wrapper.unmount()
+  })
+
+  it('marks the panel as a non-modal dialog', async () => {
+    const wrapper = mount(DatePicker, { attachTo: document.body })
+
+    await wrapper.get('input').trigger('click')
+
+    const panel = dropdown()
+    expect(panel?.getAttribute('role')).toBe('dialog')
+    expect(panel?.hasAttribute('aria-modal')).toBe(false)
+    expect(wrapper.get('input').attributes('aria-haspopup')).toBe('dialog')
+    expect(wrapper.get('input').attributes('aria-expanded')).toBe('true')
+
+    wrapper.unmount()
+  })
+
+  it('keeps the panel open while the page scrolls, repositioning instead', async () => {
+    const wrapper = mount(DatePicker, { attachTo: document.body })
+
+    await wrapper.get('input').trigger('click')
+    window.dispatchEvent(new Event('scroll'))
+    await nextTick()
+
+    expect(dropdown()).not.toBeNull()
+
+    wrapper.unmount()
+  })
+
+  it('does not open from the keyboard while disabled', async () => {
+    const wrapper = mount(DatePicker, { props: { disabled: true }, attachTo: document.body })
+
+    await wrapper.get('input').trigger('keydown', { key: 'Enter' })
+
+    expect(dropdown()).toBeNull()
+
+    wrapper.unmount()
+  })
 })

package/src/__tests__/components/DateTimePicker.test.ts

@@ -45,4 +45,40 @@ describe('DateTimePicker', () => {
 
     wrapper.unmount()
   })
+
+  it('opens from the keyboard, focuses the calendar, and restores focus on close', async () => {
+    const wrapper = mount(DateTimePicker, {
+      props: { modelValue: '2026-04-22T14:30' },
+      attachTo: document.body,
+    })
+    const input = wrapper.get<HTMLInputElement>('input').element
+
+    await wrapper.get('input').trigger('keydown', { key: 'ArrowDown' })
+    await nextTick()
+    await nextTick()
+    await nextTick()
+
+    expect(wrapper.find('.mint-datetime-picker__dropdown').exists()).toBe(true)
+    expect(document.activeElement).toBe(wrapper.get('.mint-date-picker__day--selected').element)
+
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
+    await nextTick()
+    await nextTick()
+
+    expect(document.activeElement).toBe(input)
+
+    wrapper.unmount()
+  })
+
+  it('marks the panel as a non-modal dialog', async () => {
+    const wrapper = mount(DateTimePicker, { attachTo: document.body })
+
+    await wrapper.get('input').trigger('click')
+
+    const panel = wrapper.get('.mint-datetime-picker__dropdown')
+    expect(panel.attributes('role')).toBe('dialog')
+    expect(panel.attributes('aria-modal')).toBeUndefined()
+
+    wrapper.unmount()
+  })
 })

package/src/__tests__/components/ExperimentPopover.test.ts

@@ -21,6 +21,36 @@ describe('ExperimentPopover', () => {
     document.body.innerHTML = ''
   })
 
+  it('requests experiment selection on the first click when no experiment is selected', async () => {
+    const wrapper = mountPopover()
+
+    await wrapper.find('.mint-experiment-popover__trigger').trigger('click')
+
+    expect(wrapper.emitted('select')).toHaveLength(1)
+    expect(wrapper.find('.mint-experiment-popover__panel').exists()).toBe(false)
+
+    wrapper.unmount()
+  })
+
+  it.each([
+    { experimentName: 'Dose response run' },
+    { experimentCode: 'EXP-001' },
+    { isResolving: true },
+    { error: 'Experiment not found' },
+  ])('keeps the popover interaction for bound experiment state %o', async (props) => {
+    const wrapper = mountPopover(props)
+
+    await wrapper.find('.mint-experiment-popover__trigger').trigger('click')
+
+    expect(wrapper.emitted('select')).toBeUndefined()
+    expect(wrapper.find('.mint-experiment-popover__panel').exists()).toBe(true)
+
+    await wrapper.find('.mint-experiment-popover__trigger').trigger('click')
+    expect(wrapper.find('.mint-experiment-popover__panel').exists()).toBe(false)
+
+    wrapper.unmount()
+  })
+
   it('prefers the experiment name in the trigger when both name and code are available', () => {
     const wrapper = mountPopover({
       experimentName: 'Dose response run',

package/src/__tests__/components/ExperimentTimeline.test.ts

@@ -0,0 +1,63 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import ExperimentTimeline from '../../components/ExperimentTimeline.vue'
+import type { ProtocolStep } from '../../types'
+
+function makeSteps(): ProtocolStep[] {
+  return [
+    { id: 's1', name: 'Thaw', type: 'incubation', status: 'pending', order: 0 },
+    { id: 's2', name: 'Quench', type: 'incubation', status: 'pending', order: 1 },
+    { id: 's3', name: 'Extract', type: 'incubation', status: 'pending', order: 2 },
+  ]
+}
+
+describe('ExperimentTimeline', () => {
+  it('renders steps in order', () => {
+    const wrapper = mount(ExperimentTimeline, { props: { modelValue: makeSteps() } })
+
+    expect(wrapper.findAll('.mint-timeline__title').map(title => title.text()))
+      .toEqual(['Thaw', 'Quench', 'Extract'])
+  })
+
+  it('reorders a step with Alt and the arrow keys while editable', async () => {
+    const wrapper = mount(ExperimentTimeline, {
+      props: { modelValue: makeSteps(), editable: true },
+    })
+
+    const first = wrapper.findAll('.mint-timeline__step')[0]
+    expect(first.attributes('tabindex')).toBe('0')
+    expect(first.attributes('aria-label')).toContain('Press Alt with the arrow keys')
+
+    await first.trigger('keydown', { key: 'ArrowDown', altKey: true })
+
+    expect(wrapper.emitted('step-reorder')?.[0]).toEqual(['s1', 1])
+    const steps = wrapper.emitted('update:modelValue')?.[0]?.[0] as ProtocolStep[]
+    expect(steps.map(step => step.id)).toEqual(['s2', 's1', 's3'])
+    expect(steps.map(step => step.order)).toEqual([0, 1, 2])
+  })
+
+  it('announces the move politely', async () => {
+    const wrapper = mount(ExperimentTimeline, {
+      props: { modelValue: makeSteps(), editable: true },
+    })
+
+    await wrapper.findAll('.mint-timeline__step')[2]
+      .trigger('keydown', { key: 'ArrowUp', altKey: true })
+    await wrapper.vm.$nextTick()
+
+    const liveRegion = wrapper.get('[role="status"]')
+    expect(liveRegion.attributes('aria-live')).toBe('polite')
+    expect(liveRegion.text()).toBe('Extract moved to position 2 of 3.')
+  })
+
+  it('is not keyboard reorderable when not editable', async () => {
+    const wrapper = mount(ExperimentTimeline, { props: { modelValue: makeSteps() } })
+
+    const first = wrapper.findAll('.mint-timeline__step')[0]
+    expect(first.attributes('tabindex')).toBeUndefined()
+
+    await first.trigger('keydown', { key: 'ArrowDown', altKey: true })
+
+    expect(wrapper.emitted('step-reorder')).toBeUndefined()
+  })
+})

package/src/__tests__/components/FileBrowserModal.test.ts

@@ -0,0 +1,460 @@
+import { enableAutoUnmount, mount } from '@vue/test-utils'
+import { afterEach, describe, expect, it } from 'vitest'
+import { nextTick } from 'vue'
+
+enableAutoUnmount(afterEach)
+
+import FileBrowserModal from '../../components/FileBrowserModal.vue'
+import type { FileEntry, ServerMount } from '../../types/fileBrowserTypes'
+
+const MOUNTS: ServerMount[] = [
+  {
+    id: 'qe',
+    label: '/mnt/instrument-qe',
+    count: 4,
+    children: [{ id: 'qe:2026-07', label: '2026-07', count: 12 }],
+  },
+  { id: 'nas', label: '/mnt/nas-shared', count: 18 },
+  { id: 'seq', label: '/mnt/sequencer-01', available: false },
+]
+
+const ENTRIES: FileEntry[] = [
+  { name: 'calibration', path: 'raw/calibration', kind: 'directory', child_count: 2 },
+  { name: 'blanks', path: 'raw/blanks', kind: 'directory', child_count: 6 },
+  {
+    name: 'HeLa_norm_0h_r1.raw',
+    path: 'raw/HeLa_norm_0h_r1.raw',
+    kind: 'file',
+    size_bytes: 1_900_000_000,
+    extension: '.raw',
+  },
+  {
+    name: 'acquisition_log.txt',
+    path: 'raw/acquisition_log.txt',
+    kind: 'file',
+    size_bytes: 48_000,
+    extension: '.txt',
+    matches_type_rules: false,
+  },
+]
+
+function mountBrowser(props: Record<string, unknown> = {}) {
+  return mount(FileBrowserModal, {
+    props: {
+      modelValue: true,
+      mounts: MOUNTS,
+      mountId: 'qe',
+      path: 'raw',
+      entries: ENTRIES,
+      breadcrumbs: [
+        { label: '/mnt/instrument-qe', path: '' },
+        { label: 'raw', path: 'raw' },
+      ],
+      ...props,
+    },
+    global: { stubs: { teleport: true } },
+  })
+}
+
+function rowAt(wrapper: ReturnType<typeof mountBrowser>, index: number) {
+  return wrapper.findAll('.mint-file-browser__row')[index]
+}
+
+describe('FileBrowserModal', () => {
+  it('should render one row per entry', () => {
+    expect(mountBrowser().findAll('.mint-file-browser__row')).toHaveLength(ENTRIES.length)
+  })
+
+  it('should render a row per configured mount', () => {
+    expect(mountBrowser().findAll('.mint-file-browser__mount')).toHaveLength(4)
+  })
+
+  it('should mark an unavailable mount as offline', () => {
+    expect(mountBrowser().text()).toContain('offline')
+  })
+
+  // The listing never lies about what is there: non-matching entries dim.
+  it('should keep a non-matching entry in the listing', () => {
+    expect(mountBrowser().text()).toContain('acquisition_log.txt')
+  })
+
+  it('should dim a non-matching entry when dimNonMatching is set', () => {
+    expect(rowAt(mountBrowser(), 3).classes()).toContain('mint-file-browser__row--dimmed')
+  })
+
+  it('should not dim a non-matching entry when dimNonMatching is false', () => {
+    const wrapper = mountBrowser({ dimNonMatching: false })
+
+    expect(rowAt(wrapper, 3).classes()).not.toContain('mint-file-browser__row--dimmed')
+  })
+
+  it('should not dim a matching entry', () => {
+    expect(rowAt(mountBrowser(), 2).classes()).not.toContain('mint-file-browser__row--dimmed')
+  })
+
+  // Ticking a folder takes the whole directory; clicking the row opens it.
+  it('should emit navigate when a directory row is clicked', async () => {
+    const wrapper = mountBrowser()
+    await rowAt(wrapper, 0).trigger('click')
+
+    expect(wrapper.emitted('navigate')?.[0]?.[0]).toMatchObject({ path: 'raw/calibration' })
+  })
+
+  it('should not emit navigate when a file row is clicked', async () => {
+    const wrapper = mountBrowser()
+    await rowAt(wrapper, 2).trigger('click')
+
+    expect(wrapper.emitted('navigate')).toBeUndefined()
+  })
+
+  it('should select the whole folder when a directory checkbox is ticked', async () => {
+    const wrapper = mountBrowser()
+    await rowAt(wrapper, 0).find('.mint-file-browser__checkbox').setValue(true)
+
+    expect(wrapper.emitted('update:selected')?.[0]?.[0]).toMatchObject([
+      { path: 'raw/calibration', kind: 'directory' },
+    ])
+  })
+
+  // setValue only dispatches `change`; a real user also clicks, and it is the
+  // @click.stop that keeps the tick from bubbling into a navigation.
+  it('should not navigate when a directory checkbox is clicked', async () => {
+    const wrapper = mountBrowser()
+    const checkbox = rowAt(wrapper, 0).find('.mint-file-browser__checkbox')
+    await checkbox.trigger('click')
+    await checkbox.setValue(true)
+
+    expect(wrapper.emitted('navigate')).toBeUndefined()
+  })
+
+  // The row is a div, so this button is the only thing Tab can reach.
+  it('should expose a focusable open button on a directory row', () => {
+    expect(rowAt(mountBrowser(), 0).find('button.mint-file-browser__open').exists()).toBe(true)
+  })
+
+  it('should not expose an open button on a file row', () => {
+    expect(rowAt(mountBrowser(), 2).find('button.mint-file-browser__open').exists()).toBe(false)
+  })
+
+  it('should navigate when the open button is activated', async () => {
+    const wrapper = mountBrowser()
+    await rowAt(wrapper, 0).find('button.mint-file-browser__open').trigger('click')
+
+    expect(wrapper.emitted('navigate')?.[0]?.[0]).toMatchObject({ path: 'raw/calibration' })
+  })
+
+  it('should not select when the open button is activated', async () => {
+    const wrapper = mountBrowser()
+    await rowAt(wrapper, 0).find('button.mint-file-browser__open').trigger('click')
+
+    expect(wrapper.emitted('update:selected')).toBeUndefined()
+  })
+
+  it('should label the open button with the folder name', () => {
+    const button = rowAt(mountBrowser(), 0).find('button.mint-file-browser__open')
+
+    expect(button.attributes('aria-label')).toBe('Open calibration')
+  })
+
+  it('should describe a ticked folder by its child count', async () => {
+    const wrapper = mountBrowser({
+      selected: [
+        { mount_id: 'qe', path: 'raw/blanks', name: 'blanks', kind: 'directory', child_count: 6 },
+      ],
+    })
+
+    // "items", not "files": the server counts every visible entry, subdirectories included.
+    expect(wrapper.text()).toContain('whole folder, 6 items')
+  })
+
+  it('should emit selectFolder for the directory being viewed', async () => {
+    const wrapper = mountBrowser()
+    await wrapper.find('.mint-file-browser__select-folder').trigger('click')
+
+    expect(wrapper.emitted('selectFolder')?.[0]?.[0]).toMatchObject({ mount_id: 'qe', path: 'raw' })
+  })
+
+  it('should show the local picker button by default', () => {
+    expect(mountBrowser().find('.mint-file-browser__local').exists()).toBe(true)
+  })
+
+  it('should hide the local picker when showLocalPicker is false', () => {
+    expect(
+      mountBrowser({ showLocalPicker: false }).find('.mint-file-browser__local').exists(),
+    ).toBe(false)
+  })
+
+  it('should emit chooseLocal when the local picker is clicked', async () => {
+    const wrapper = mountBrowser()
+    await wrapper.find('.mint-file-browser__local').trigger('click')
+
+    expect(wrapper.emitted('chooseLocal')).toHaveLength(1)
+  })
+
+  it('should render the type rules', () => {
+    expect(mountBrowser({ typeRules: ['.raw', '.mzML'] }).text()).toContain('.raw .mzML')
+  })
+
+  it('should report how many entries match the type rules', () => {
+    expect(mountBrowser({ totalCount: 1284, matchCount: 9 }).text()).toContain(
+      '9 match the type rules',
+    )
+  })
+
+  it('should summarise the selection count', () => {
+    const wrapper = mountBrowser({
+      selected: [
+        { mount_id: 'qe', path: 'raw/blanks', name: 'blanks', kind: 'directory' },
+        { mount_id: 'qe', path: 'raw/a.raw', name: 'a.raw', kind: 'file' },
+      ],
+    })
+
+    expect(wrapper.text()).toContain('2 selected')
+  })
+
+  it('should render a chip per selected item', () => {
+    const wrapper = mountBrowser({
+      selected: [
+        { mount_id: 'qe', path: 'raw/blanks', name: 'blanks', kind: 'directory' },
+        { mount_id: 'qe', path: 'raw/a.raw', name: 'a.raw', kind: 'file' },
+      ],
+    })
+
+    expect(wrapper.findAll('.mint-file-browser__chip')).toHaveLength(2)
+  })
+
+  it('should clear the selection', async () => {
+    const wrapper = mountBrowser({
+      selected: [{ mount_id: 'qe', path: 'raw/a.raw', name: 'a.raw', kind: 'file' }],
+    })
+    await wrapper.find('.mint-file-browser__clear').trigger('click')
+
+    expect(wrapper.emitted('update:selected')?.[0]?.[0]).toEqual([])
+  })
+
+  it('should remove one item from the selection via its chip', async () => {
+    const wrapper = mountBrowser({
+      selected: [
+        { mount_id: 'qe', path: 'raw/blanks', name: 'blanks', kind: 'directory' },
+        { mount_id: 'qe', path: 'raw/a.raw', name: 'a.raw', kind: 'file' },
+      ],
+    })
+    await wrapper.findAll('.mint-file-browser__chip-remove')[0].trigger('click')
+
+    expect(wrapper.emitted('update:selected')?.[0]?.[0]).toMatchObject([{ path: 'raw/a.raw' }])
+  })
+
+  it('should confirm with the current selection', async () => {
+    const wrapper = mountBrowser({
+      selected: [{ mount_id: 'qe', path: 'raw/a.raw', name: 'a.raw', kind: 'file' }],
+    })
+    await wrapper.find('.mint-file-browser__confirm').trigger('click')
+
+    expect(wrapper.emitted('confirm')?.[0]?.[0]).toMatchObject([{ path: 'raw/a.raw' }])
+  })
+
+  it('should disable confirming an empty selection', () => {
+    expect(mountBrowser().find('.mint-file-browser__confirm').attributes('disabled')).toBeDefined()
+  })
+
+  it('should emit navigate for the parent when the back button is used', async () => {
+    const wrapper = mountBrowser({ parent: '' })
+    await wrapper.find('.mint-file-browser__back').trigger('click')
+
+    expect(wrapper.emitted('navigate')?.[0]?.[0]).toMatchObject({ mount_id: 'qe', path: '' })
+  })
+
+  it('should disable the back button at a mount root', () => {
+    const wrapper = mountBrowser({ path: '', parent: null })
+
+    expect(wrapper.find('.mint-file-browser__back').attributes('disabled')).toBeDefined()
+  })
+
+  it('should emit navigate when a mount is chosen', async () => {
+    const wrapper = mountBrowser()
+    await wrapper.findAll('.mint-file-browser__mount')[1].trigger('click')
+
+    expect(wrapper.emitted('navigate')?.[0]?.[0]).toMatchObject({
+      mount_id: 'qe:2026-07',
+      path: '',
+    })
+  })
+
+  it('should not navigate to an unavailable mount', async () => {
+    const wrapper = mountBrowser()
+    await wrapper.findAll('.mint-file-browser__mount')[3].trigger('click')
+
+    expect(wrapper.emitted('navigate')).toBeUndefined()
+  })
+
+  it('should emit search updates', async () => {
+    const wrapper = mountBrowser()
+    await wrapper.find('input[aria-label="Search this folder"]').setValue('hela')
+
+    expect(wrapper.emitted('update:search')?.[0]?.[0]).toBe('hela')
+  })
+
+  it('should show an empty state when the directory has no entries', () => {
+    expect(mountBrowser({ entries: [] }).text()).toContain('This folder is empty')
+  })
+
+  it('should show a loading skeleton while listing', () => {
+    expect(mountBrowser({ loading: true }).find('.mint-file-browser__skeleton').exists()).toBe(true)
+  })
+
+  it('should surface a listing error', () => {
+    expect(mountBrowser({ error: 'Mount is offline' }).text()).toContain('Mount is offline')
+  })
+
+  it('should state that mounts are read-only', () => {
+    expect(mountBrowser().text()).toContain('Read-only · Select paths, not copies')
+  })
+})
+
+describe('FileBrowserModal review fixes', () => {
+  // A search filters server-side while totalCount stays the whole directory.
+  it('should say how many rows are shown when a search narrows the listing', () => {
+    const wrapper = mount(FileBrowserModal, {
+      props: {
+        modelValue: true,
+        mounts: MOUNTS,
+        mountId: 'qe',
+        path: 'raw',
+        entries: ENTRIES,
+        totalCount: 1284,
+      },
+      global: { stubs: { teleport: true } },
+    })
+
+    expect(wrapper.text()).toContain('4 shown')
+  })
+
+  it('should not claim rows are hidden when nothing is filtered', () => {
+    const wrapper = mount(FileBrowserModal, {
+      props: {
+        modelValue: true,
+        mounts: MOUNTS,
+        mountId: 'qe',
+        path: 'raw',
+        entries: ENTRIES,
+        totalCount: 4,
+      },
+      global: { stubs: { teleport: true } },
+    })
+
+    expect(wrapper.text()).not.toContain('shown')
+  })
+
+  it('should report a capped listing', () => {
+    const wrapper = mount(FileBrowserModal, {
+      props: {
+        modelValue: true,
+        mounts: MOUNTS,
+        mountId: 'qe',
+        path: 'raw',
+        entries: ENTRIES,
+        totalCount: 4,
+        truncated: true,
+      },
+      global: { stubs: { teleport: true } },
+    })
+
+    expect(wrapper.text()).toContain('listing capped')
+  })
+
+  it('should label a folder count as items rather than files', () => {
+    const wrapper = mount(FileBrowserModal, {
+      props: { modelValue: true, mounts: MOUNTS, mountId: 'qe', path: 'raw', entries: ENTRIES },
+      global: { stubs: { teleport: true } },
+    })
+
+    expect(wrapper.text()).toContain('2 items')
+  })
+})
+
+describe('FileBrowserModal polish', () => {
+  it.each([{ loading: true }, { error: 'Offline' }, { mountId: '' }])(
+    'disables current-folder selection without a ready listing: %o',
+    (props) => {
+      const wrapper = mountBrowser(props)
+      const button = wrapper.get('.mint-file-browser__select-folder')
+      expect(button.attributes('disabled')).toBeDefined()
+    },
+  )
+
+  it('distinguishes no configured mounts from an empty folder', () => {
+    const wrapper = mountBrowser({ mounts: [], mountId: '', entries: [] })
+    expect(wrapper.text()).toContain('No server mounts configured')
+  })
+
+  it('offers a retry after a browse failure', async () => {
+    const wrapper = mountBrowser({ error: 'NAS offline' })
+    await wrapper.get('button[aria-label="Retry folder listing"]').trigger('click')
+    expect(wrapper.emitted('refresh')).toHaveLength(1)
+  })
+
+  it('keeps selections with separator characters in their mount IDs distinct', async () => {
+    const wrapper = mountBrowser({
+      mountId: 'a',
+      entries: [{ name: 'x', path: 'b::c', kind: 'file' }],
+      selected: [{ mount_id: 'a::b', path: 'c', name: 'c', kind: 'file' }],
+    })
+    await wrapper.get('input[type="checkbox"]').setValue(true)
+    expect(wrapper.emitted('update:selected')?.[0]?.[0]).toHaveLength(2)
+  })
+})
+
+describe('FileBrowserModal dialog workspace', () => {
+  it('uses SDK actions and an accessible independently labelled dialog', () => {
+    const wrapper = mountBrowser({ title: 'Choose instrument files' })
+    expect(wrapper.get('[role="dialog"]').attributes('aria-label')).toBe('Choose instrument files')
+    expect(wrapper.get('.mint-file-browser__confirm').classes()).toContain('mint-button--primary')
+    expect(wrapper.get('.mint-file-browser__cancel').classes()).toContain('mint-button--secondary')
+    expect(wrapper.get('[aria-label="Go to parent folder"]').classes()).toContain(
+      'mint-icon-button',
+    )
+    expect(wrapper.get('[aria-label="Search this folder"]').classes()).toContain('mint-input')
+  })
+
+  it('focuses an initially open dialog, traps Tab and restores focus and scroll on close', async () => {
+    const launcher = document.createElement('button')
+    document.body.append(launcher)
+    launcher.focus()
+    document.body.style.overflow = 'scroll'
+    const wrapper = mount(FileBrowserModal, {
+      attachTo: document.body,
+      props: { modelValue: true, showLocalPicker: false },
+      global: { stubs: { teleport: true } },
+    })
+    try {
+      await nextTick()
+      const close = wrapper.get('[aria-label="Close modal"]')
+      expect(document.activeElement).toBe(close.element)
+      expect(document.body.style.overflow).toBe('hidden')
+      await close.trigger('keydown', { key: 'Tab', shiftKey: true })
+      expect(document.activeElement).toBe(wrapper.get('.mint-file-browser__cancel').element)
+      await wrapper.get('.mint-file-browser__cancel').trigger('keydown', { key: 'Tab' })
+      expect(document.activeElement).toBe(close.element)
+      await close.trigger('keydown', { key: 'Escape' })
+      expect(wrapper.emitted('cancel')).toHaveLength(1)
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false])
+      await wrapper.setProps({ modelValue: false })
+      expect(document.activeElement).toBe(launcher)
+      expect(document.body.style.overflow).toBe('scroll')
+    } finally {
+      wrapper.unmount()
+      launcher.remove()
+      document.body.style.overflow = ''
+    }
+  })
+
+  it('restores the existing scroll setting when unmounted while open', async () => {
+    document.body.style.overflow = 'auto'
+    const wrapper = mountBrowser()
+    await nextTick()
+    expect(document.body.style.overflow).toBe('hidden')
+    wrapper.unmount()
+    expect(document.body.style.overflow).toBe('auto')
+    document.body.style.overflow = ''
+  })
+})