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

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/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.')
+  })
 })

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

@@ -6,9 +6,21 @@ const retiredSelectors: Record<string, readonly string[]> = {
   'app-plugin-switcher.css': [
     'mint-plugin-switcher__swatch',
   ],
+  'audit-trail.css': [
+    'mint-audit-trail__empty',
+  ],
+  'dataframe.css': [
+    'mint-dataframe__empty',
+    'mint-dataframe__empty-icon',
+    'mint-dataframe__empty-text',
+    'mint-dataframe__loading-spinner',
+  ],
   'dose-calculator.css': [
     'mint-dose-calculator__mw-input',
   ],
+  'experiment-data-viewer.css': [
+    'mint-data-viewer__empty',
+  ],
   'experiment-popover.css': [
     'mint-experiment-popover__check-icon',
     'mint-experiment-popover__divider',
@@ -24,13 +36,31 @@ const retiredSelectors: Record<string, readonly string[]> = {
     'mint-experiment-selector__filters',
     'mint-experiment-selector__status-filter',
   ],
+  'experiment-timeline.css': [
+    'mint-timeline__empty',
+    'mint-timeline__empty-btn',
+    'mint-timeline__empty-content',
+    'mint-timeline__empty-text',
+  ],
+  'lcms-sequence-table.css': [
+    'mint-lcms-sequence-table__empty',
+  ],
   'protocol-step-editor.css': [
     'mint-protocol-editor__field-row',
   ],
   'reagent-editor.css': [
     'mint-reagent-editor__row',
   ],
+  'reagent-list.css': [
+    'mint-reagent-list__empty',
+    'mint-reagent-list__empty-btn',
+    'mint-reagent-list__empty-icon',
+    'mint-reagent-list__empty-text',
+  ],
   'sample-hierarchy-tree.css': [
+    'mint-sample-tree__empty',
+    'mint-sample-tree__empty-icon',
+    'mint-sample-tree__empty-text',
     'mint-sample-tree__node--selected',
   ],
   'sample-selector.css': [
@@ -38,6 +68,7 @@ const retiredSelectors: Record<string, readonly string[]> = {
     'mint-popover-enter-from',
     'mint-popover-leave-active',
     'mint-popover-leave-to',
+    'mint-sample-selector__empty',
     'mint-sample-selector__level-badge',
     'mint-sample-selector__level-btn',
     'mint-sample-selector__level-desc',

package/src/__tests__/components/SampleSelector.drag.test.ts

@@ -1,4 +1,4 @@
-import { ref } from 'vue'
+import { nextTick, ref } from 'vue'
 import { describe, expect, it } from 'vitest'
 import type { SampleGroup } from '../../types'
 import { useSampleSelectorDrag } from '../../components/SampleSelector.drag'
@@ -9,6 +9,10 @@ type TestDragEvent = Omit<DragEvent, 'dataTransfer'> & {
   defaultPrevented: boolean
 }
 
+function keyboardEvent(key: string, altKey = true): KeyboardEvent {
+  return { key, altKey, preventDefault: () => {} } as unknown as KeyboardEvent
+}
+
 function createDragEvent(options: { clientY?: number; top?: number; height?: number } = {}) {
   const data: Record<string, string> = {}
   const transfer = {
@@ -123,4 +127,50 @@ describe('SampleSelector drag helpers', () => {
 
     expect(drag.reorderTarget.value).toBe('Liver / High / 10min')
   })
+
+  it('reorders sibling groups with Alt and the arrow keys', async () => {
+    const state = ref<SampleGroup[]>([
+      { name: 'Liver / High / 5min', color: '#111111', samples: ['L1'] },
+      { name: 'Liver / High / 10min', color: '#222222', samples: ['L2'] },
+      { name: 'Liver / High / 20min', color: '#333333', samples: ['L3'] },
+    ])
+    const drag = useSampleSelectorDrag(state)
+
+    drag.handleGroupReorderKeydown('Liver / High / 5min', 'sub', keyboardEvent('ArrowDown'))
+
+    expect(state.value.map(group => group.name)).toEqual([
+      'Liver / High / 10min',
+      'Liver / High / 5min',
+      'Liver / High / 20min',
+    ])
+
+    await nextTick()
+    expect(drag.announcement.value).toBe('Liver / High / 5min moved down to position 2 of 3.')
+  })
+
+  it('keeps a group inside its own family and ignores arrows without Alt', () => {
+    const state = ref<SampleGroup[]>([
+      { name: 'Liver / High / 5min', color: '#111111', samples: ['L1'] },
+      { name: 'Muscle / High / 5min', color: '#222222', samples: ['M1'] },
+    ])
+    const drag = useSampleSelectorDrag(state)
+    const before = state.value
+
+    drag.handleGroupReorderKeydown('Liver / High / 5min', 'sub', keyboardEvent('ArrowDown'))
+    drag.handleGroupReorderKeydown('Liver / High / 5min', 'sub', keyboardEvent('ArrowDown', false))
+
+    expect(state.value).toBe(before)
+  })
+
+  it('reorders whole major families with Alt and the arrow keys', () => {
+    const state = ref<SampleGroup[]>([
+      { name: 'Liver / High', color: '#111111', samples: ['L1'] },
+      { name: 'Muscle / High', color: '#222222', samples: ['M1'] },
+    ])
+    const drag = useSampleSelectorDrag(state)
+
+    drag.handleGroupReorderKeydown('Muscle', 'major', keyboardEvent('ArrowUp'))
+
+    expect(state.value.map(group => group.name)).toEqual(['Muscle / High', 'Liver / High'])
+  })
 })

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

@@ -41,4 +41,67 @@ describe('ScheduleCalendar', () => {
     expect(wrapper.findAll('.mint-schedule__month-cell')).toHaveLength(42)
     expect(wrapper.find('.mint-schedule__title').text()).toBe('May 2024')
   })
+
+  it('reschedules an event with Alt and the arrow keys', async () => {
+    const wrapper = mount(ScheduleCalendar, {
+      props: {
+        modelValue: new Date('2024-05-15T12:00:00'),
+        dayStartHour: 6,
+        dayEndHour: 10,
+        slotDuration: 30,
+        showNowIndicator: false,
+        events: [
+          {
+            id: 'run-1',
+            title: 'LCMS run',
+            start: '2024-05-15T07:00:00',
+            end: '2024-05-15T08:00:00',
+          },
+        ],
+      },
+    })
+
+    const event = wrapper.get('.mint-schedule__event')
+    expect(event.attributes('tabindex')).toBe('0')
+    expect(event.attributes('aria-label')).toContain('Press Alt with the up or down arrow keys')
+
+    await event.trigger('keydown', { key: 'ArrowDown', altKey: true })
+
+    const update = wrapper.emitted('event-update')?.[0]?.[0] as {
+      newStart: Date
+      newEnd: Date
+    }
+    expect(update.newStart.getHours()).toBe(7)
+    expect(update.newStart.getMinutes()).toBe(30)
+    expect(update.newEnd.getHours()).toBe(8)
+    expect(update.newEnd.getMinutes()).toBe(30)
+
+    await wrapper.vm.$nextTick()
+    expect(wrapper.get('[role="status"]').attributes('aria-live')).toBe('polite')
+  })
+
+  it('does not reschedule from the keyboard while readonly', async () => {
+    const wrapper = mount(ScheduleCalendar, {
+      props: {
+        modelValue: new Date('2024-05-15T12:00:00'),
+        dayStartHour: 6,
+        dayEndHour: 10,
+        slotDuration: 30,
+        showNowIndicator: false,
+        readonly: true,
+        events: [
+          {
+            id: 'run-1',
+            title: 'LCMS run',
+            start: '2024-05-15T07:00:00',
+            end: '2024-05-15T08:00:00',
+          },
+        ],
+      },
+    })
+
+    await wrapper.get('.mint-schedule__event').trigger('keydown', { key: 'ArrowDown', altKey: true })
+
+    expect(wrapper.emitted('event-update')).toBeUndefined()
+  })
 })