@morscherlab/mint-sdk 1.2.0-beta.2 → 1.2.0-beta.20

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

@@ -0,0 +1,305 @@
+import { enableAutoUnmount, flushPromises, mount } from '@vue/test-utils'
+import { reactive } from 'vue'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import PlotlyChart from '../../components/PlotlyChart.vue'
+
+const plotly = vi.hoisted(() => ({
+  Plots: { resize: vi.fn() },
+  purge: vi.fn(),
+  react: vi.fn(),
+}))
+
+vi.mock('plotly.js-dist-min', () => ({ default: plotly }))
+enableAutoUnmount(afterEach)
+
+describe('PlotlyChart', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    plotly.react.mockReset().mockResolvedValue(undefined)
+    plotly.Plots.resize.mockReset().mockResolvedValue(undefined)
+    document.documentElement.classList.remove('dark')
+  })
+
+  afterEach(() => {
+    vi.unstubAllGlobals()
+    document.documentElement.classList.remove('dark')
+    document.documentElement.removeAttribute('style')
+  })
+
+  it('should merge MINT defaults with native Plotly props', async () => {
+    const trace = { type: 'scatter' as const, x: [1], y: [2] }
+    mount(PlotlyChart, {
+      props: {
+        data: [trace],
+        layout: { title: { text: 'QC' } },
+        config: { toImageButtonOptions: { filename: 'qc-export' } },
+      },
+    })
+    await flushPromises()
+
+    expect(plotly.react).toHaveBeenCalledWith(
+      expect.any(HTMLElement),
+      [trace],
+      expect.objectContaining({
+        autosize: true,
+        title: { text: 'QC' },
+        paper_bgcolor: 'rgba(0,0,0,0)',
+        plot_bgcolor: 'rgba(0,0,0,0)',
+      }),
+      expect.objectContaining({
+        responsive: true,
+        displaylogo: false,
+        toImageButtonOptions: { filename: 'qc-export' },
+      }),
+    )
+  })
+
+  it('should render the shared chart empty state when explicitly empty', async () => {
+    const wrapper = mount(PlotlyChart, {
+      props: { data: [], empty: true, emptyMessage: 'No peaks found' },
+    })
+    await flushPromises()
+
+    expect(wrapper.text()).toContain('No peaks found')
+  })
+
+  it('should show a safe error when Plotly rejects rendering', async () => {
+    plotly.react.mockRejectedValue(new Error('<script>unsafe details</script>'))
+    const wrapper = mount(PlotlyChart, { props: { data: [] } })
+    await flushPromises()
+
+    expect(wrapper.get('[role="alert"]').text()).toBe('Unable to display this chart.')
+  })
+
+  it('should rerender when immutable native props change', async () => {
+    const wrapper = mount(PlotlyChart, { props: { data: [{ x: [1], y: [2] }] } })
+    await flushPromises()
+
+    await wrapper.setProps({ data: [{ x: [3], y: [4] }] })
+    await flushPromises()
+
+    expect(plotly.react).toHaveBeenCalledTimes(2)
+  })
+
+  it('should rerender when the MINT dark theme changes', async () => {
+    let themeChanged: MutationCallback | undefined
+    vi.stubGlobal('MutationObserver', class {
+      constructor(callback: MutationCallback) {
+        themeChanged = callback
+      }
+
+      observe(): void {}
+      disconnect(): void {}
+      takeRecords(): MutationRecord[] { return [] }
+    })
+    mount(PlotlyChart, { props: { data: [{ x: [1], y: [2] }] } })
+    await flushPromises()
+
+    document.documentElement.classList.add('dark')
+    themeChanged?.([], {} as MutationObserver)
+    await flushPromises()
+
+    expect(plotly.react).toHaveBeenCalledTimes(2)
+  })
+
+  it('should resize the Plotly canvas when its container changes size', async () => {
+    let resize: ResizeObserverCallback | undefined
+    vi.stubGlobal('ResizeObserver', class {
+      constructor(callback: ResizeObserverCallback) {
+        resize = callback
+      }
+
+      observe(): void {}
+      disconnect(): void {}
+    })
+    mount(PlotlyChart, { props: { data: [{ x: [1], y: [2] }] } })
+    await flushPromises()
+
+    resize?.([], {} as ResizeObserver)
+
+    expect(plotly.Plots.resize).toHaveBeenCalledTimes(1)
+  })
+
+  it('should observe the Plotly canvas after leaving the empty state', async () => {
+    const observe = vi.fn()
+    vi.stubGlobal('ResizeObserver', class {
+      observe = observe
+      disconnect(): void {}
+    })
+    const wrapper = mount(PlotlyChart, {
+      props: { data: [], empty: true },
+    })
+    await flushPromises()
+
+    await wrapper.setProps({ empty: false })
+    await flushPromises()
+
+    expect(observe).toHaveBeenCalledWith(expect.any(HTMLElement))
+  })
+
+  it('should render once when data arrives as loading completes', async () => {
+    const wrapper = mount(PlotlyChart, {
+      props: { data: [], loading: true },
+    })
+    await flushPromises()
+
+    await wrapper.setProps({ data: [{ x: [1], y: [2] }], loading: false })
+    await flushPromises()
+
+    expect(plotly.react).toHaveBeenCalledTimes(1)
+  })
+
+  it('should serialize renders and use the latest props after an in-flight render', async () => {
+    let finish!: () => void
+    plotly.react.mockImplementationOnce(() => new Promise<void>((resolve) => { finish = resolve }))
+    const wrapper = mount(PlotlyChart, { props: { data: [{ x: [1] }] } })
+    await flushPromises()
+    await wrapper.setProps({ data: [{ x: [2] }] })
+    await wrapper.setProps({ data: [{ x: [3] }] })
+    await flushPromises()
+    expect(plotly.react).toHaveBeenCalledTimes(1)
+
+    finish()
+    await flushPromises()
+    expect(plotly.react).toHaveBeenCalledTimes(2)
+    expect(plotly.react.mock.lastCall?.[1]).toEqual([{ x: [3] }])
+  })
+
+  it('should skip rendering when unmounted before the initial DOM update', async () => {
+    const wrapper = mount(PlotlyChart, { props: { data: [] } })
+    wrapper.unmount()
+    await flushPromises()
+    expect(plotly.react).not.toHaveBeenCalled()
+  })
+
+  it('should recover from a stale failure without overwriting the newer render', async () => {
+    let reject!: (error: Error) => void
+    plotly.react.mockImplementationOnce(() => new Promise<void>((_resolve, fail) => { reject = fail }))
+    const wrapper = mount(PlotlyChart, { props: { data: [{ x: [1] }] } })
+    await flushPromises()
+    await wrapper.setProps({ data: [{ x: [2] }] })
+    reject(new Error('Old render failed'))
+    await flushPromises()
+    expect(plotly.react).toHaveBeenCalledTimes(2)
+    expect(plotly.react.mock.lastCall?.[1]).toEqual([{ x: [2] }])
+    expect(wrapper.find('[role="alert"]').exists()).toBe(false)
+  })
+
+  it('should purge an in-flight canvas removed by loading and then render its replacement', async () => {
+    let finish!: () => void
+    plotly.react.mockImplementationOnce(() => new Promise<void>((resolve) => { finish = resolve }))
+    const wrapper = mount(PlotlyChart, { props: { data: [] } })
+    await flushPromises()
+    const element = wrapper.get('.mint-plotly-chart__plot').element
+    await wrapper.setProps({ loading: true })
+    await wrapper.setProps({ loading: false, data: [{ x: [3] }] })
+    finish()
+    await flushPromises()
+    expect(plotly.purge).toHaveBeenCalledWith(element)
+    expect(plotly.react).toHaveBeenCalledTimes(2)
+    expect(plotly.react.mock.lastCall?.[0]).toBe(wrapper.get('.mint-plotly-chart__plot').element)
+    expect(plotly.react.mock.lastCall?.[0]).not.toBe(element)
+  })
+
+  it('should clean up a render that completes after unmount', async () => {
+    let finish!: () => void
+    plotly.react.mockImplementationOnce(() => new Promise<void>((resolve) => { finish = resolve }))
+    const wrapper = mount(PlotlyChart, { props: { data: [] } })
+    await flushPromises()
+    const element = wrapper.get('.mint-plotly-chart__plot').element
+    wrapper.unmount()
+    plotly.purge.mockClear()
+    finish()
+    await flushPromises()
+    expect(plotly.purge).toHaveBeenCalledWith(element)
+    expect(plotly.react).toHaveBeenCalledTimes(1)
+  })
+
+  it('should purge the removed canvas and render new data after loading or empty states', async () => {
+    const disconnect = vi.fn()
+    vi.stubGlobal('ResizeObserver', class {
+      observe = vi.fn()
+      unobserve = vi.fn()
+      disconnect = disconnect
+    })
+    const wrapper = mount(PlotlyChart, { props: { data: [{ x: [1] }] } })
+    await flushPromises()
+    for (const state of ['loading', 'empty'] as const) {
+      const element = wrapper.get('.mint-plotly-chart__plot').element
+      await wrapper.setProps({ [state]: true })
+      await flushPromises()
+      expect(plotly.purge).toHaveBeenCalledWith(element)
+      expect(disconnect).toHaveBeenCalled()
+      await wrapper.setProps({ [state]: false, data: [{ x: [2] }] })
+      await flushPromises()
+      expect(wrapper.get('.mint-plotly-chart__plot').element).not.toBe(element)
+    }
+    expect(plotly.react).toHaveBeenCalledTimes(3)
+  })
+
+  it('should use MINT colors and protect reactive native data and nested layout from Plotly mutations', async () => {
+    document.documentElement.style.setProperty('--text-primary', '#f8fafc')
+    document.documentElement.style.setProperty('--border-color', '#334155')
+    const data = reactive([{ x: [1], y: [2] }])
+    const layout = reactive({ title: { text: 'Original' }, xaxis: { title: { text: 'Sample' } } })
+    plotly.react.mockImplementationOnce((_element, traces, options) => {
+      traces[0].x.push(9)
+      options.title.text = 'Changed'
+      options.xaxis.title.text = 'Changed'
+      return Promise.resolve()
+    })
+    mount(PlotlyChart, { attachTo: document.body, props: { data, layout } })
+    await flushPromises()
+    expect(plotly.react.mock.lastCall?.[2].font.color).toBe('#f8fafc')
+    expect(plotly.react.mock.lastCall?.[2].xaxis.gridcolor).toBe('#334155')
+    expect(data[0].x).toEqual([1])
+    expect(layout.title.text).toBe('Original')
+    expect(layout.xaxis.title.text).toBe('Sample')
+  })
+
+  it('should accept nested reactive arrays, typed arrays, dates, and native export callbacks', async () => {
+    const x = reactive([new Date('2026-01-01')])
+    const y = new Float64Array([2])
+    const click = vi.fn()
+    mount(PlotlyChart, {
+      props: {
+        data: [{ x, y }],
+        config: { modeBarButtonsToAdd: [{ name: 'Export', title: 'Export', icon: 'camera', click }] },
+      },
+    })
+    await flushPromises()
+    expect(plotly.react).toHaveBeenCalledOnce()
+    const [, traces, , config] = plotly.react.mock.lastCall!
+    expect(traces[0].x).toEqual(x)
+    expect(traces[0].x).not.toBe(x)
+    expect(traces[0].x[0]).toBeInstanceOf(Date)
+    expect(traces[0].y).toEqual(y)
+    expect(traces[0].y).not.toBe(y)
+    expect(config.modeBarButtonsToAdd[0].click).toBe(click)
+  })
+
+  it('should ignore resize rejection when the canvas becomes hidden', async () => {
+    let resize!: ResizeObserverCallback
+    vi.stubGlobal('ResizeObserver', class {
+      constructor(callback: ResizeObserverCallback) { resize = callback }
+      observe(): void {}
+      disconnect(): void {}
+    })
+    plotly.Plots.resize.mockRejectedValueOnce(new Error('Resize must be passed a displayed plot div'))
+    const wrapper = mount(PlotlyChart, { props: { data: [] } })
+    await flushPromises()
+    resize([], {} as ResizeObserver)
+    await flushPromises()
+    expect(wrapper.find('[role="alert"]').exists()).toBe(false)
+  })
+
+  it('should purge the Plotly canvas when unmounted', async () => {
+    const wrapper = mount(PlotlyChart, { props: { data: [] } })
+    await flushPromises()
+
+    wrapper.unmount()
+
+    expect(plotly.purge).toHaveBeenCalledTimes(1)
+  })
+})

package/src/__tests__/components/PluginWorkspaceView.internal.test.ts

@@ -0,0 +1,230 @@
+import { mount } from '@vue/test-utils'
+import { computed, h, nextTick } from 'vue'
+import { createPinia } from 'pinia'
+import { describe, expect, it, vi } from 'vitest'
+import AppLayout from '../../components/AppLayout.vue'
+import AppSidebar from '../../components/AppSidebar.vue'
+import AppTopBar from '../../components/AppTopBar.vue'
+import PluginWorkspaceView from '../../components/PluginWorkspaceView.vue'
+import WorkspaceControlsInternal from '../../components/internal/WorkspaceControlsInternal.vue'
+import WorkspaceShellInternal from '../../components/internal/WorkspaceShellInternal.vue'
+import WorkspaceSidebarInternal from '../../components/internal/WorkspaceSidebarInternal.vue'
+import type { PillNavItem, SidebarToolSection } from '../../types'
+
+vi.mock('../../composables/usePlatformContext', () => ({
+  usePlatformContext: vi.fn(() => ({
+    isIntegrated: computed(() => false),
+    context: { value: { isIntegrated: false, theme: 'system' } },
+    plugin: computed(() => undefined),
+    user: computed(() => undefined),
+    theme: computed(() => 'system' as const),
+    features: computed(() => undefined),
+    navigate: vi.fn(),
+    notify: vi.fn(),
+    sendToPlatform: vi.fn(),
+  })),
+}))
+
+vi.mock('../../composables/useTheme', () => ({
+  useTheme: vi.fn(() => ({
+    isDark: computed(() => false),
+    theme: computed(() => 'light'),
+    toggleTheme: vi.fn(),
+  })),
+}))
+
+const pillNav: PillNavItem[] = [
+  { id: 'data', label: 'Data' },
+  { id: 'results', label: 'Results' },
+]
+
+const panels: Record<string, SidebarToolSection[]> = {
+  data: [
+    { id: 'import', label: 'Import', defaultOpen: true },
+  ],
+  results: [
+    { id: 'display', label: 'Display', defaultOpen: true },
+  ],
+}
+
+interface WorkspaceSlotProps {
+  activeView: string
+  setActiveView: (viewId: string) => void
+}
+
+const globalOptions = {
+  plugins: [createPinia()],
+  stubs: {
+    'router-link': {
+      props: ['to', 'custom'],
+      template: `
+        <slot
+          v-if="custom"
+          :href="typeof to === 'string' ? to : '#'"
+          :navigate="() => {}"
+        />
+        <a v-else :href="typeof to === 'string' ? to : '#'"><slot /></a>
+      `,
+    },
+    BaseModal: {
+      template: '<div><slot /></div>',
+    },
+  },
+}
+
+describe('PluginWorkspaceView internal split', () => {
+  it('renders through WorkspaceShellInternal, WorkspaceSidebarInternal and WorkspaceControlsInternal', () => {
+    const wrapper = mount(PluginWorkspaceView, {
+      props: {
+        title: 'MS Uploader',
+        subtitle: 'Import and visualize',
+        pillNav,
+        panels,
+        sidebarTitle: 'Tools',
+        sidebarSubtitle: 'Current file',
+      },
+      slots: {
+        actions: () => h('button', { 'data-test': 'topbar-action' }, 'Run'),
+        'section-import': () => h('button', { 'data-test': 'import-action' }, 'Upload'),
+        default: ({ activeView }: WorkspaceSlotProps) => h('main', { 'data-test': 'content' }, activeView),
+      },
+      global: globalOptions,
+    })
+
+    // The public adapter renders its three internal pieces...
+    expect(wrapper.findComponent(WorkspaceShellInternal).exists()).toBe(true)
+    expect(wrapper.findComponent(WorkspaceSidebarInternal).exists()).toBe(true)
+    expect(wrapper.findComponent(WorkspaceControlsInternal).exists()).toBe(true)
+
+    // ...each of which wraps the same underlying SDK components with the same DOM output
+    // the pre-split component produced.
+    expect(wrapper.findComponent(AppLayout).props()).toMatchObject({
+      floating: true,
+      responsiveSidebar: true,
+      sidebarPosition: 'left',
+    })
+    expect(wrapper.findComponent(AppTopBar).props()).toMatchObject({
+      title: 'MS Uploader',
+      subtitle: 'Import and visualize',
+      pillNav,
+      currentPillId: 'data',
+    })
+    expect(wrapper.findComponent(AppSidebar).props()).toMatchObject({
+      panels,
+      activeView: 'data',
+      title: 'Tools',
+      subtitle: 'Current file',
+      variant: 'analysis',
+      floating: false,
+      dense: true,
+    })
+    expect(wrapper.get('[data-test="topbar-action"]').text()).toBe('Run')
+    expect(wrapper.get('[data-test="import-action"]').text()).toBe('Upload')
+    expect(wrapper.get('[data-test="content"]').text()).toBe('data')
+
+    // WorkspaceControlsInternal receives exactly the scoped-slot payload the default slot sees.
+    expect(wrapper.findComponent(WorkspaceControlsInternal).props('controls')).toMatchObject({
+      activeView: 'data',
+      values: {},
+    })
+  })
+
+  it('keeps topbar navigation and sidebar panels synchronized through the internal split', async () => {
+    const wrapper = mount(PluginWorkspaceView, {
+      props: {
+        title: 'Analysis',
+        pillNav,
+        panels,
+      },
+      slots: {
+        default: ({ activeView }: WorkspaceSlotProps) => h('main', { 'data-test': 'content' }, activeView),
+      },
+      global: globalOptions,
+    })
+
+    wrapper.findComponent(AppTopBar).vm.$emit('pill-select', { id: 'results', label: 'Results' })
+    await nextTick()
+
+    expect(wrapper.findComponent(AppTopBar).props('currentPillId')).toBe('results')
+    expect(wrapper.findComponent(AppSidebar).props('activeView')).toBe('results')
+    expect(wrapper.findComponent(WorkspaceSidebarInternal).props('sidebar')).toMatchObject({ activeView: 'results' })
+    expect(wrapper.get('[data-test="content"]').text()).toBe('results')
+    expect(wrapper.emitted('update:activeView')).toEqual([['results']])
+    expect(wrapper.emitted('pill-select')).toEqual([[{ id: 'results', label: 'Results' }]])
+  })
+
+  it('relays sidebar collapse, toggle, and form events unchanged through WorkspaceSidebarInternal', async () => {
+    const wrapper = mount(PluginWorkspaceView, {
+      props: {
+        title: 'Analysis',
+        panels,
+        forms: {
+          data: { sections: [] },
+        },
+      },
+      global: globalOptions,
+    })
+
+    const sidebar = wrapper.findComponent(AppSidebar)
+    sidebar.vm.$emit('update:collapsed', true)
+    sidebar.vm.$emit('update:toggle', 'import', false)
+    sidebar.vm.$emit('section-action', 'import', 'refresh')
+    sidebar.vm.$emit('form-submit', 'data', { value: 1 })
+    sidebar.vm.$emit('form-cancel', 'data')
+    await nextTick()
+
+    expect(wrapper.emitted('update:sidebarCollapsed')).toEqual([[true]])
+    expect(wrapper.emitted('update:toggle')).toEqual([['import', false]])
+    expect(wrapper.emitted('section-action')).toEqual([['import', 'refresh']])
+    expect(wrapper.emitted('form-submit')).toEqual([['data', { value: 1 }]])
+    expect(wrapper.emitted('form-cancel')).toEqual([['data']])
+  })
+
+  it('can render without a sidebar surface, omitting WorkspaceSidebarInternal entirely', () => {
+    const wrapper = mount(PluginWorkspaceView, {
+      props: {
+        title: 'Simple Plugin',
+        showSidebar: false,
+      },
+      slots: {
+        default: () => h('main', { 'data-test': 'content' }, 'Ready'),
+      },
+      global: globalOptions,
+    })
+
+    expect(wrapper.findComponent(WorkspaceSidebarInternal).exists()).toBe(false)
+    expect(wrapper.findComponent(AppSidebar).exists()).toBe(false)
+    expect(wrapper.findComponent(AppTopBar).props('title')).toBe('Simple Plugin')
+    expect(wrapper.get('[data-test="content"]').text()).toBe('Ready')
+  })
+
+  it('lets a consumer-supplied sidebar slot override WorkspaceSidebarInternal', () => {
+    const wrapper = mount(PluginWorkspaceView, {
+      props: {
+        title: 'Custom Sidebar',
+        panels,
+      },
+      slots: {
+        sidebar: () => h('aside', { 'data-test': 'custom-sidebar' }, 'Custom'),
+      },
+      global: globalOptions,
+    })
+
+    expect(wrapper.findComponent(WorkspaceSidebarInternal).exists()).toBe(false)
+    expect(wrapper.findComponent(AppSidebar).exists()).toBe(false)
+    expect(wrapper.get('[data-test="custom-sidebar"]').text()).toBe('Custom')
+  })
+
+  it('lets a consumer-supplied topbar slot override WorkspaceShellInternal default AppTopBar rendering', () => {
+    const wrapper = mount(PluginWorkspaceView, {
+      props: { title: 'Custom Top Bar' },
+      slots: {
+        topbar: () => h('header', { 'data-test': 'custom-topbar' }, 'Custom'),
+      },
+      global: globalOptions,
+    })
+
+    expect(wrapper.findComponent(AppTopBar).exists()).toBe(false)
+    expect(wrapper.get('[data-test="custom-topbar"]').text()).toBe('Custom')
+  })
+})

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

@@ -122,4 +122,39 @@ describe('RackEditor', () => {
       }),
     ])
   })
+
+  it('reorders rack tabs with Alt and the arrow keys', async () => {
+    const racks = makeRacks()
+    racks.push({ ...racks[0], id: 'rack-2', name: 'Rack 2', slot: 'G', wells: {} })
+
+    const wrapper = mount(RackEditor, { props: { modelValue: racks } })
+
+    await wrapper.findAll('.mint-rack-editor__tab')[0].trigger('keydown', {
+      key: 'ArrowRight',
+      altKey: true,
+    })
+    await nextTick()
+
+    expect(wrapper.emitted('rack-reorder')?.at(-1)?.[0]).toEqual(['rack-2', 'rack-1'])
+    expect(wrapper.findAll('.mint-rack-editor__tab').map(tab => tab.text()))
+      .toEqual([expect.stringContaining('Rack 2'), expect.stringContaining('Rack 1')])
+    expect(wrapper.get('[role="status"]').attributes('aria-live')).toBe('polite')
+  })
+
+  it('does not reorder rack tabs from the keyboard when reordering is off', async () => {
+    const racks = makeRacks()
+    racks.push({ ...racks[0], id: 'rack-2', name: 'Rack 2', slot: 'G', wells: {} })
+
+    const wrapper = mount(RackEditor, {
+      props: { modelValue: racks, allowReorder: false },
+    })
+
+    await wrapper.findAll('.mint-rack-editor__tab')[0].trigger('keydown', {
+      key: 'ArrowRight',
+      altKey: true,
+    })
+    await nextTick()
+
+    expect(wrapper.emitted('rack-reorder')).toBeUndefined()
+  })
 })

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

@@ -63,7 +63,7 @@ describe('ReagentList', () => {
       },
     })
 
-    await wrapper.findAll('th')[1].trigger('click')
+    await wrapper.findAll('th')[1].get('.mint-reagent-list__sort-btn').trigger('click')
 
     const rows = wrapper.findAll('tbody tr')
     expect(rows.map(row => row.text())).toEqual([
@@ -72,11 +72,73 @@ describe('ReagentList', () => {
       expect.stringContaining('Pyruvate'),
     ])
 
-    await wrapper.findAll('th')[1].trigger('click')
+    await wrapper.findAll('th')[1].get('.mint-reagent-list__sort-btn').trigger('click')
     expect(wrapper.findAll('tbody tr').map(row => row.text())).toEqual([
       expect.stringContaining('Lactate'),
       expect.stringContaining('Glucose'),
       expect.stringContaining('Pyruvate'),
     ])
   })
+
+  it('exposes sortable headers as buttons that sort from the keyboard', async () => {
+    const wrapper = mount(ReagentList, {
+      props: { modelValue: reagents, readonly: true, columns: ['name', 'catalog'] },
+    })
+
+    const nameHeader = () => wrapper.findAll('th')[0]
+    expect(nameHeader().attributes('aria-sort')).toBe('none')
+    expect(nameHeader().get('.mint-reagent-list__sort-btn').element.tagName).toBe('BUTTON')
+
+    await nameHeader().get('.mint-reagent-list__sort-btn').trigger('keydown', { key: 'Enter' })
+    expect(nameHeader().attributes('aria-sort')).toBe('ascending')
+
+    await nameHeader().get('.mint-reagent-list__sort-btn').trigger('keydown', { key: ' ' })
+    expect(nameHeader().attributes('aria-sort')).toBe('descending')
+  })
+
+  it('omits aria-sort when sorting is disabled', () => {
+    const wrapper = mount(ReagentList, {
+      props: { modelValue: reagents, readonly: true, sortable: false, columns: ['name'] },
+    })
+
+    expect(wrapper.findAll('th')[0].attributes('aria-sort')).toBeUndefined()
+  })
+
+  it('reorders reagents from the drag handle with Alt and the arrow keys', async () => {
+    const wrapper = mount(ReagentList, {
+      props: { modelValue: reagents, columns: ['name'] },
+    })
+
+    const handle = wrapper.findAll('.mint-reagent-list__drag-handle-btn')[0]
+    expect(handle.attributes('aria-label')).toContain('Reorder Glucose')
+
+    await handle.trigger('keydown', { key: 'ArrowDown', altKey: true })
+
+    expect(wrapper.emitted('reorder')?.[0]).toEqual(['reagent-1', 0, 1])
+    expect(
+      (wrapper.emitted('update:modelValue')?.[0]?.[0] as Reagent[]).map(reagent => reagent.id),
+    ).toEqual(['reagent-2', 'reagent-1'])
+  })
+
+  it('does not reorder from the keyboard while readonly', async () => {
+    const wrapper = mount(ReagentList, {
+      props: { modelValue: reagents, readonly: true, columns: ['name'] },
+    })
+
+    expect(wrapper.find('.mint-reagent-list__drag-handle-btn').exists()).toBe(false)
+  })
+
+  it('announces a keyboard reorder in a polite live region', async () => {
+    const wrapper = mount(ReagentList, {
+      props: { modelValue: reagents, columns: ['name'] },
+    })
+
+    await wrapper.findAll('.mint-reagent-list__drag-handle-btn')[0]
+      .trigger('keydown', { key: 'ArrowDown', altKey: true })
+    await wrapper.vm.$nextTick()
+
+    const liveRegion = wrapper.get('[role="status"]')
+    expect(liveRegion.attributes('aria-live')).toBe('polite')
+    expect(liveRegion.text()).toBe('Glucose moved to position 2 of 2.')
+  })
 })