@nexxtmove/ui 2.6.0 → 2.7.0

package/src/components/molecules/PickerList/PickerList.test.ts

@@ -0,0 +1,870 @@
+import { afterEach, beforeEach, describe, it, expect, vi } from 'vitest'
+import { nextTick } from 'vue'
+import { mount, type ComponentMountingOptions, type VueWrapper } from '@vue/test-utils'
+import PickerList, { type NexxtPickerGroupData, type NexxtPickerItemData } from './PickerList.vue'
+
+const GROUPS: NexxtPickerGroupData[] = [
+  { id: 'basis', label: 'Basis' },
+  { id: 'media', label: 'Media' },
+]
+
+const ITEMS: NexxtPickerItemData[] = [
+  { id: 'intro', label: 'Introductie', icon: 'sparkles' },
+  { id: 'title', label: 'Titel', icon: 'heading', group: 'basis', keywords: ['kop'] },
+  { id: 'text', label: 'Tekst', icon: 'font', group: 'basis', keywords: ['alinea'] },
+  {
+    id: 'table',
+    label: 'Tabel',
+    icon: 'table',
+    group: 'basis',
+    disabled: true,
+    description: 'Nog niet beschikbaar',
+  },
+  { id: 'image', label: 'Afbeelding', icon: 'image', group: 'media', keywords: ['foto'] },
+  { id: 'video', label: 'Video', icon: 'video', group: 'media' },
+]
+
+/** 3 groups × 11 items, for paging and the ends of the list. */
+const MANY_GROUPS: NexxtPickerGroupData[] = ['a', 'b', 'c'].map((id) => ({
+  id,
+  label: `Groep ${id}`,
+}))
+const MANY_ITEMS: NexxtPickerItemData[] = MANY_GROUPS.flatMap((group) =>
+  Array.from({ length: 11 }, (_, index) => ({
+    id: `${group.id}${index}`,
+    label: `Item ${group.id}${index}`,
+    icon: 'square' as const,
+    group: group.id,
+  })),
+)
+
+type Props = Partial<InstanceType<typeof PickerList>['$props']>
+/** Everything but the props, which `mountList` builds from its first argument. */
+type Options = Omit<ComponentMountingOptions<typeof PickerList>, 'props' | 'propsData'>
+
+const mountList = (props: Props = {}, options: Options = {}) =>
+  mount(PickerList, {
+    props: {
+      items: ITEMS,
+      groups: GROUPS,
+      ariaLabel: 'Onderdelen',
+      // keeps the model in step with the component, as `v-model:highlighted` would
+      'onUpdate:highlighted': (value: string | null) => {
+        void wrapperRef.current?.setProps({ highlighted: value })
+      },
+      ...props,
+    },
+    ...options,
+  })
+
+const wrapperRef: { current: VueWrapper | null } = { current: null }
+
+const mountBound = (props: Props = {}, options: Options = {}) => {
+  const wrapper = mountList(props, options)
+  wrapperRef.current = wrapper
+  return wrapper
+}
+
+const listboxOf = (wrapper: VueWrapper) => wrapper.find('[role="listbox"]')
+
+const optionLabels = (wrapper: VueWrapper) =>
+  wrapper
+    .findAll('[role="option"]')
+    .map((option) => option.findAll('span:not([hidden])').at(-1)!.text())
+
+const activeId = (wrapper: VueWrapper) => {
+  const id = listboxOf(wrapper).attributes('aria-activedescendant')
+  return id ? decodeURIComponent(id.split('-opt-')[1]) : null
+}
+
+const press = async (wrapper: VueWrapper, key: string, init: KeyboardEventInit = {}) => {
+  const event = new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true, ...init })
+  listboxOf(wrapper).element.dispatchEvent(event)
+  await nextTick()
+  await nextTick()
+  return event
+}
+
+const pointerMove = async (element: Element, x: number, y: number) => {
+  const event = new MouseEvent('pointermove', { bubbles: true, clientX: x, clientY: y })
+  element.dispatchEvent(event)
+  await nextTick()
+  await nextTick()
+}
+
+describe('PickerList', () => {
+  afterEach(() => {
+    wrapperRef.current = null
+    vi.useRealTimers()
+  })
+
+  describe('structure', () => {
+    it('is a named listbox and the only tab stop', () => {
+      const wrapper = mountBound()
+      const listbox = listboxOf(wrapper)
+
+      expect(listbox.attributes('aria-label')).toBe('Onderdelen')
+      expect(listbox.attributes('tabindex')).toBe('0')
+      expect(wrapper.findAll('[tabindex]')).toHaveLength(1)
+    })
+
+    it('renders ungrouped items first, then the groups in order', () => {
+      const wrapper = mountBound()
+
+      expect(optionLabels(wrapper)).toEqual([
+        'Introductie',
+        'Titel',
+        'Tekst',
+        'Tabel',
+        'Afbeelding',
+        'Video',
+      ])
+      expect(wrapper.findAll('[role="group"]')).toHaveLength(2)
+    })
+
+    it('treats an item whose group is unknown as ungrouped', () => {
+      const wrapper = mountBound({
+        items: [...ITEMS, { id: 'lost', label: 'Verdwaald', icon: 'ghost', group: 'nope' }],
+      })
+
+      expect(optionLabels(wrapper).slice(0, 2)).toEqual(['Introductie', 'Verdwaald'])
+    })
+
+    it('gives options ids that are stable across filtering', async () => {
+      const wrapper = mountBound()
+      const before = wrapper.find('[role="option"][id$="-opt-video"]').attributes('id')
+
+      await wrapper.setProps({ search: 'vid' })
+
+      expect(wrapper.find('[role="option"]').attributes('id')).toBe(before)
+    })
+
+    it('encodes item ids into the option id', () => {
+      const wrapper = mountBound({
+        items: [{ id: 'met spatie', label: 'Met spatie', icon: 'square' }],
+      })
+
+      expect(wrapper.find('[role="option"]').attributes('id')).toMatch(/-opt-met%20spatie$/)
+    })
+  })
+
+  describe('highlight model', () => {
+    it('highlights the first enabled visible item and points aria-activedescendant at it', () => {
+      const wrapper = mountBound()
+      const id = listboxOf(wrapper).attributes('aria-activedescendant')!
+
+      expect(wrapper.emitted('update:highlighted')![0]).toEqual(['intro'])
+      expect(wrapper.find(`[id="${id}"]`).attributes('aria-selected')).toBe('true')
+      expect(wrapper.findAll('[aria-selected="true"]')).toHaveLength(1)
+    })
+
+    it('skips a disabled first item for the fallback', () => {
+      const wrapper = mountBound({
+        items: ITEMS.filter((item) => item.group === 'basis').reverse(),
+      })
+
+      expect(activeId(wrapper)).toBe('text')
+    })
+
+    it('emits highlight with the item', () => {
+      const wrapper = mountBound()
+
+      expect(wrapper.emitted('highlight')![0]).toEqual([ITEMS[0]])
+    })
+
+    it('replaces null with the fallback on a non-empty list', async () => {
+      const wrapper = mountBound({ highlighted: 'video' })
+
+      await wrapper.setProps({ highlighted: null })
+
+      expect(wrapper.emitted('update:highlighted')!.at(-1)).toEqual(['intro'])
+    })
+
+    it('falls back when the highlighted item is filtered away', async () => {
+      const wrapper = mountBound({ highlighted: 'video' })
+
+      await wrapper.setProps({ search: 'foto' })
+      await nextTick()
+
+      expect(activeId(wrapper)).toBe('image')
+      expect(wrapper.emitted('update:highlighted')!.at(-1)).toEqual(['image'])
+    })
+
+    it('is null with every group folded and no ungrouped items', () => {
+      const wrapper = mountBound({
+        items: ITEMS.filter((item) => item.group),
+        groups: GROUPS.map((group) => ({ ...group, defaultOpen: false })),
+        highlighted: 'title',
+      })
+
+      expect(activeId(wrapper)).toBeNull()
+      expect(wrapper.emitted('update:highlighted')!.at(-1)).toEqual([null])
+      expect(wrapper.emitted('highlight')!.at(-1)).toEqual([null])
+      expect(listboxOf(wrapper).attributes('tabindex')).toBe('0')
+    })
+  })
+
+  describe('keyboard', () => {
+    it('moves across group boundaries without wrapping', async () => {
+      const wrapper = mountBound()
+
+      await press(wrapper, 'ArrowUp')
+      expect(activeId(wrapper)).toBe('intro')
+
+      for (let step = 0; step < 4; step++) await press(wrapper, 'ArrowDown')
+      expect(activeId(wrapper)).toBe('image')
+
+      await press(wrapper, 'ArrowDown')
+      await press(wrapper, 'ArrowDown')
+      expect(activeId(wrapper)).toBe('video')
+    })
+
+    it('reaches disabled items with the arrows', async () => {
+      const wrapper = mountBound({ highlighted: 'text' })
+
+      await press(wrapper, 'ArrowDown')
+
+      expect(activeId(wrapper)).toBe('table')
+    })
+
+    it('jumps to the ends with Home and End', async () => {
+      const wrapper = mountBound()
+
+      await press(wrapper, 'End')
+      expect(activeId(wrapper)).toBe('video')
+
+      await press(wrapper, 'Home')
+      expect(activeId(wrapper)).toBe('intro')
+    })
+
+    it('pages by 8 and clamps at the ends', async () => {
+      const wrapper = mountBound({ items: MANY_ITEMS, groups: MANY_GROUPS })
+
+      await press(wrapper, 'PageDown')
+      expect(activeId(wrapper)).toBe('a8')
+
+      await press(wrapper, 'PageDown')
+      expect(activeId(wrapper)).toBe('b5')
+
+      await press(wrapper, 'PageUp')
+      await press(wrapper, 'PageUp')
+      expect(activeId(wrapper)).toBe('a0')
+
+      await press(wrapper, 'End')
+      await press(wrapper, 'PageDown')
+      expect(activeId(wrapper)).toBe('c10')
+    })
+
+    it('prevents the default of every key it handles, and not of others', async () => {
+      const wrapper = mountBound()
+
+      for (const key of ['ArrowDown', 'PageDown', 'Home', 'End', 'Enter', ' ', 'Escape', 'v']) {
+        expect((await press(wrapper, key)).defaultPrevented, key).toBe(true)
+      }
+      expect((await press(wrapper, 'Tab')).defaultPrevented).toBe(false)
+      expect((await press(wrapper, 'c', { ctrlKey: true })).defaultPrevented).toBe(false)
+    })
+
+    it('ignores keys while composing', async () => {
+      const wrapper = mountBound()
+
+      const event = await press(wrapper, 'ArrowDown', { isComposing: true })
+
+      expect(event.defaultPrevented).toBe(false)
+      expect(activeId(wrapper)).toBe('intro')
+    })
+
+    it('selects the highlighted item with Enter and Space', async () => {
+      const wrapper = mountBound({ highlighted: 'image' })
+
+      await press(wrapper, 'Enter')
+      await press(wrapper, ' ')
+
+      expect(wrapper.emitted('select')).toEqual([[ITEMS[4]], [ITEMS[4]]])
+    })
+
+    it('never selects a disabled item', async () => {
+      const wrapper = mountBound({ highlighted: 'table' })
+
+      await press(wrapper, 'Enter')
+      await press(wrapper, ' ')
+      await wrapper.find('[id$="-opt-table"]').trigger('click')
+
+      expect(wrapper.emitted('select')).toBeUndefined()
+    })
+
+    it('selects on click', async () => {
+      const wrapper = mountBound()
+
+      await wrapper.find('[id$="-opt-video"]').trigger('click')
+
+      expect(wrapper.emitted('select')).toEqual([[ITEMS[5]]])
+    })
+
+    it('emits close on Escape', async () => {
+      const wrapper = mountBound()
+
+      await press(wrapper, 'Escape')
+
+      expect(wrapper.emitted('close')).toEqual([[]])
+    })
+
+    describe('type-ahead', () => {
+      beforeEach(() => {
+        vi.useFakeTimers()
+      })
+
+      it('jumps to the first visible label starting with the buffer', async () => {
+        const wrapper = mountBound()
+
+        await press(wrapper, 't')
+        expect(activeId(wrapper)).toBe('title')
+
+        await press(wrapper, 'e')
+        expect(activeId(wrapper)).toBe('text')
+      })
+
+      it('includes disabled items and matches without diacritics', async () => {
+        const wrapper = mountBound()
+
+        await press(wrapper, 't')
+        await press(wrapper, 'á')
+
+        expect(activeId(wrapper)).toBe('table')
+      })
+
+      it('resets the buffer after 800ms', async () => {
+        const wrapper = mountBound()
+
+        await press(wrapper, 'v')
+        expect(activeId(wrapper)).toBe('video')
+
+        vi.advanceTimersByTime(799)
+        await press(wrapper, 'i')
+        // "vi" still matches Video
+        expect(activeId(wrapper)).toBe('video')
+
+        vi.advanceTimersByTime(800)
+        await press(wrapper, 'i')
+        expect(activeId(wrapper)).toBe('intro')
+      })
+    })
+
+    describe('folding', () => {
+      it('folds the group of the highlighted item with ← and moves the highlight on', async () => {
+        const wrapper = mountBound({ highlighted: 'text' })
+
+        await press(wrapper, 'ArrowLeft')
+
+        expect(optionLabels(wrapper)).not.toContain('Tekst')
+        expect(activeId(wrapper)).toBe('image')
+        expect(wrapper.findAll('[role="group"]')[0].attributes('aria-expanded')).toBe('false')
+      })
+
+      it('moves the highlight to the last item before when nothing follows', async () => {
+        const wrapper = mountBound({ highlighted: 'video' })
+
+        await press(wrapper, 'ArrowLeft')
+
+        expect(activeId(wrapper)).toBe('table')
+      })
+
+      it('does nothing with ← on an ungrouped item', async () => {
+        const wrapper = mountBound()
+
+        const event = await press(wrapper, 'ArrowLeft')
+
+        expect(event.defaultPrevented).toBe(false)
+        expect(wrapper.findAll('[aria-expanded="false"]')).toHaveLength(0)
+      })
+
+      it('opens the next folded group with → and highlights its first item', async () => {
+        const wrapper = mountBound({
+          groups: [GROUPS[0], { ...GROUPS[1], defaultOpen: false }],
+          highlighted: 'title',
+        })
+
+        await press(wrapper, 'ArrowRight')
+
+        expect(optionLabels(wrapper)).toContain('Video')
+        expect(activeId(wrapper)).toBe('image')
+      })
+
+      it('opens a folded group before the highlight when none follows', async () => {
+        const wrapper = mountBound({
+          groups: [{ ...GROUPS[0], defaultOpen: false }, GROUPS[1]],
+          highlighted: 'video',
+        })
+
+        await press(wrapper, 'ArrowRight')
+
+        expect(activeId(wrapper)).toBe('title')
+      })
+
+      it('opens the first group with ↓ or → when every group is folded', async () => {
+        for (const key of ['ArrowDown', 'ArrowRight']) {
+          const wrapper = mountBound({
+            items: ITEMS.filter((item) => item.group),
+            groups: GROUPS.map((group) => ({ ...group, defaultOpen: false })),
+          })
+
+          await press(wrapper, key)
+
+          expect(activeId(wrapper), key).toBe('title')
+        }
+      })
+
+      it('folds from a click on the heading without jumping the highlight to the top', async () => {
+        const wrapper = mountBound({ highlighted: 'text' })
+
+        await wrapper.findAll('[role="presentation"]')[0].trigger('click')
+
+        expect(activeId(wrapper)).toBe('image')
+      })
+
+      it('keeps the folded state of other groups when groups are added', async () => {
+        const wrapper = mountBound()
+
+        await wrapper.findAll('[role="presentation"]')[1].trigger('click')
+        await wrapper.setProps({
+          groups: [...GROUPS, { id: 'extra', label: 'Extra', defaultOpen: false }],
+          items: [...ITEMS, { id: 'more', label: 'Meer', icon: 'plus', group: 'extra' }],
+        })
+
+        const expanded = wrapper.findAll('[role="group"]').map((g) => g.attributes('aria-expanded'))
+        expect(expanded).toEqual(['true', 'false', 'false'])
+      })
+
+      it('falls back to the last ungrouped item when no other group is open', async () => {
+        const wrapper = mountBound({
+          items: [ITEMS[0], ITEMS[1]],
+          groups: [GROUPS[0]],
+          highlighted: 'title',
+        })
+
+        await press(wrapper, 'ArrowLeft')
+
+        expect(activeId(wrapper)).toBe('intro')
+        expect(wrapper.emitted('update:highlighted')!.at(-1)).toEqual(['intro'])
+        expect(optionLabels(wrapper)).toEqual(['Introductie'])
+      })
+
+      it('does not fold while not collapsible', async () => {
+        const wrapper = mountBound({ collapsible: false, highlighted: 'text' })
+
+        await press(wrapper, 'ArrowLeft')
+
+        expect(optionLabels(wrapper)).toContain('Tekst')
+        expect(wrapper.find('[aria-expanded]').exists()).toBe(false)
+      })
+    })
+  })
+
+  describe('pointer', () => {
+    it('highlights on a real pointer movement', async () => {
+      const wrapper = mountBound()
+      const video = wrapper.find('[id$="-opt-video"]').element
+
+      await pointerMove(video, 10, 10)
+      await pointerMove(video, 10, 14)
+
+      expect(activeId(wrapper)).toBe('video')
+    })
+
+    it('ignores a pointermove that did not move, like the one after a scroll', async () => {
+      const wrapper = mountBound()
+      const image = wrapper.find('[id$="-opt-image"]').element
+      const video = wrapper.find('[id$="-opt-video"]').element
+
+      await pointerMove(image, 10, 10)
+      await press(wrapper, 'End')
+      await pointerMove(video, 10, 10)
+
+      expect(activeId(wrapper)).toBe('video')
+
+      await press(wrapper, 'Home')
+      await pointerMove(video, 10, 10)
+
+      expect(activeId(wrapper)).toBe('intro')
+    })
+  })
+
+  describe('filtering', () => {
+    it('matches labels and keywords, case- and diacritic-insensitive', async () => {
+      const wrapper = mountBound()
+
+      await wrapper.setProps({ search: '  FOTO ' })
+      expect(optionLabels(wrapper)).toEqual(['Afbeelding'])
+
+      await wrapper.setProps({ search: 'afbeeldíng' })
+      expect(optionLabels(wrapper)).toEqual(['Afbeelding'])
+    })
+
+    it('hides groups without matches and forces the others open', async () => {
+      const wrapper = mountBound({
+        groups: GROUPS.map((group) => ({ ...group, defaultOpen: false })),
+      })
+
+      await wrapper.setProps({ search: 'e' })
+
+      const groups = wrapper.findAll('[role="group"]')
+      expect(groups).toHaveLength(2)
+      expect(groups.every((group) => group.attributes('aria-expanded') === undefined)).toBe(true)
+      expect(optionLabels(wrapper)).toContain('Video')
+
+      await wrapper.setProps({ search: 'vid' })
+      expect(wrapper.findAll('[role="group"]')).toHaveLength(1)
+    })
+
+    it('opens and closes groups for a search without animating them', async () => {
+      vi.stubGlobal('matchMedia', (query: string) => ({
+        matches: query.length < 0,
+        addEventListener: () => {},
+        removeEventListener: () => {},
+      }))
+      const wrapper = mountBound(
+        { groups: [GROUPS[0], { ...GROUPS[1], defaultOpen: false }] },
+        { global: { stubs: { transition: false } } },
+      )
+      const wrappers = () => wrapper.findAll('[role="group"] > .grid')
+
+      await wrapper.setProps({ search: 'vid' })
+      // the folded group is open at once, without enter classes
+      expect(optionLabels(wrapper)).toEqual(['Video'])
+      expect(
+        wrappers()
+          .map((el) => el.classes().join(' '))
+          .join(' '),
+      ).not.toMatch(/duration-|0fr/)
+
+      await wrapper.setProps({ search: '' })
+      // and folded again at once: no leaving, inert wrapper lingers
+      expect(optionLabels(wrapper)).not.toContain('Video')
+      expect(wrapper.find('[role="group"] > [inert]').exists()).toBe(false)
+      vi.unstubAllGlobals()
+    })
+
+    it('still animates a fold from the keyboard', async () => {
+      vi.stubGlobal('matchMedia', () => ({
+        matches: false,
+        addEventListener: () => {},
+        removeEventListener: () => {},
+      }))
+      const wrapper = mountBound(
+        { highlighted: 'image' },
+        { global: { stubs: { transition: false } } },
+      )
+
+      await press(wrapper, 'ArrowLeft')
+
+      expect(wrapper.find('[role="group"] > [inert]').classes()).toContain('duration-120')
+      vi.unstubAllGlobals()
+    })
+
+    it('restores the folded state once the search is cleared', async () => {
+      const wrapper = mountBound()
+
+      await wrapper.findAll('[role="presentation"]')[1].trigger('click')
+      await wrapper.setProps({ search: 'vid' })
+      await wrapper.setProps({ search: '' })
+
+      expect(wrapper.findAll('[role="group"]')[1].attributes('aria-expanded')).toBe('false')
+    })
+
+    it('treats a blank search as no search', async () => {
+      const wrapper = mountBound()
+
+      await wrapper.setProps({ search: '   ' })
+
+      expect(optionLabels(wrapper)).toHaveLength(6)
+      expect(wrapper.text()).not.toContain('Niets')
+    })
+  })
+
+  describe('empty state', () => {
+    const copy = {
+      emptyTitle: 'Niets gevonden',
+      emptyDescription: (search: string) => `Geen resultaat voor '${search}'.`,
+      clearLabel: 'Wis zoekopdracht',
+    }
+
+    it('shows the copy with the trimmed term and drops the listbox from the tab order', () => {
+      const wrapper = mountBound({ ...copy, search: ' xyz ' })
+
+      expect(wrapper.text()).toContain('Niets gevonden')
+      expect(wrapper.text()).toContain("Geen resultaat voor 'xyz'.")
+      expect(listboxOf(wrapper).attributes('tabindex')).toBe('-1')
+      expect(listboxOf(wrapper).attributes('aria-activedescendant')).toBeUndefined()
+      expect(wrapper.find('i[aria-hidden="true"]').exists()).toBe(true)
+    })
+
+    it('renders a string description as is', () => {
+      const wrapper = mountBound({ ...copy, emptyDescription: 'Probeer iets anders', search: 'x1' })
+
+      expect(wrapper.text()).toContain('Probeer iets anders')
+    })
+
+    it('emits clear from the button', async () => {
+      const wrapper = mountBound({ ...copy, search: 'xyz' })
+
+      await wrapper.find('button').trigger('click')
+
+      expect(wrapper.emitted('clear')).toEqual([[]])
+    })
+
+    it('renders no button without a clear label, and no missing copy', () => {
+      const wrapper = mountBound({ search: 'xyz' })
+
+      expect(wrapper.find('button').exists()).toBe(false)
+      expect(wrapper.findAll('p')).toHaveLength(0)
+    })
+
+    it('lets the empty slot replace the content, with the term and a clear function', async () => {
+      const wrapper = mountBound(
+        { ...copy, search: ' xyz ' },
+        {
+          slots: {
+            empty: `<template #empty="{ search, clear }">
+              <button type="button" @click="clear">Leeg {{ search }}</button>
+            </template>`,
+          },
+        },
+      )
+
+      expect(wrapper.text()).not.toContain('Niets gevonden')
+      await wrapper.find('button').trigger('click')
+
+      expect(wrapper.find('button').text()).toBe('Leeg xyz')
+      expect(wrapper.emitted('clear')).toEqual([[]])
+    })
+
+    it('shows no empty state without a search', () => {
+      const wrapper = mountBound({ ...copy, items: [] })
+
+      expect(wrapper.text()).not.toContain('Niets gevonden')
+    })
+  })
+
+  describe('announcement', () => {
+    beforeEach(() => {
+      vi.useFakeTimers()
+    })
+
+    it('has exactly one live region, empty on mount', () => {
+      const wrapper = mountBound({ resultsAnnouncement: (n) => `${n} resultaten` })
+
+      const regions = wrapper.findAll('[aria-live]')
+      expect(regions).toHaveLength(1)
+      expect(regions[0].attributes('role')).toBe('status')
+
+      vi.advanceTimersByTime(1000)
+      expect(regions[0].text()).toBe('')
+    })
+
+    it('announces the count 500ms after the last search change', async () => {
+      const wrapper = mountBound({ resultsAnnouncement: (n) => `${n} resultaten` })
+      const region = () => wrapper.find('[aria-live]').text()
+
+      await wrapper.setProps({ search: 'v' })
+      vi.advanceTimersByTime(300)
+      await wrapper.setProps({ search: 'vi' })
+      vi.advanceTimersByTime(499)
+      await nextTick()
+      expect(region()).toBe('')
+
+      vi.advanceTimersByTime(1)
+      await nextTick()
+      expect(region()).toBe('1 resultaten')
+
+      await wrapper.setProps({ search: 'xyz' })
+      vi.advanceTimersByTime(500)
+      await nextTick()
+      expect(region()).toBe('0 resultaten')
+    })
+
+    describe('while busy', () => {
+      const announce = (n: number) => `${n} resultaten`
+
+      it('holds the count back, also past the delay', async () => {
+        const wrapper = mountBound({ busy: true, resultsAnnouncement: announce })
+
+        await wrapper.setProps({ search: 'xyz' })
+        vi.advanceTimersByTime(2000)
+        await nextTick()
+
+        expect(wrapper.find('[aria-live]').text()).toBe('')
+      })
+
+      it('announces the final count 500ms after busy ends, without a new search', async () => {
+        const wrapper = mountBound({ busy: true, items: [], resultsAnnouncement: announce })
+        const region = () => wrapper.find('[aria-live]').text()
+
+        await wrapper.setProps({ search: 'vid' })
+        vi.advanceTimersByTime(1000)
+        // the items arrive with the end of busy, as a catalogue fetch would deliver them
+        await wrapper.setProps({ busy: false, items: ITEMS })
+        vi.advanceTimersByTime(499)
+        await nextTick()
+        expect(region()).toBe('')
+
+        vi.advanceTimersByTime(1)
+        await nextTick()
+        expect(region()).toBe('1 resultaten')
+      })
+
+      it('holds back an announcement that was already on its way when busy starts', async () => {
+        const wrapper = mountBound({ resultsAnnouncement: announce })
+        const region = () => wrapper.find('[aria-live]').text()
+
+        await wrapper.setProps({ search: 'xyz' })
+        vi.advanceTimersByTime(300)
+        await wrapper.setProps({ busy: true })
+        vi.advanceTimersByTime(1000)
+        await nextTick()
+        expect(region()).toBe('')
+
+        await wrapper.setProps({ busy: false })
+        vi.advanceTimersByTime(500)
+        await nextTick()
+        expect(region()).toBe('0 resultaten')
+      })
+
+      // Nothing was searched, so there is nothing owed: the end of busy alone stays silent
+      it('stays silent when busy ends without a search', async () => {
+        const wrapper = mountBound({ busy: true, resultsAnnouncement: announce })
+
+        await wrapper.setProps({ busy: false })
+        vi.advanceTimersByTime(1000)
+        await nextTick()
+
+        expect(wrapper.find('[aria-live]').text()).toBe('')
+      })
+
+      it('announces once per search, not again on a later busy cycle', async () => {
+        const wrapper = mountBound({ resultsAnnouncement: announce })
+        const region = () => wrapper.find('[aria-live]').text()
+
+        await wrapper.setProps({ search: 'vi' })
+        vi.advanceTimersByTime(500)
+        await nextTick()
+        expect(region()).toBe('1 resultaten')
+
+        await wrapper.setProps({ busy: true, items: [] })
+        await wrapper.setProps({ busy: false, items: ITEMS })
+        vi.advanceTimersByTime(1000)
+        await nextTick()
+        expect(region()).toBe('1 resultaten')
+      })
+    })
+
+    it('does not announce on folding', async () => {
+      const wrapper = mountBound({ resultsAnnouncement: (n) => `${n} resultaten` })
+
+      await wrapper.findAll('[role="presentation"]')[1].trigger('click')
+      vi.advanceTimersByTime(1000)
+      await nextTick()
+
+      expect(wrapper.find('[aria-live]').text()).toBe('')
+    })
+  })
+
+  describe('expose', () => {
+    it('drives the list from outside', async () => {
+      const wrapper = mountBound()
+      const vm = wrapper.vm
+
+      vm.move(2)
+      await nextTick()
+      expect(activeId(wrapper)).toBe('text')
+
+      vm.highlightLast()
+      await nextTick()
+      expect(activeId(wrapper)).toBe('video')
+
+      vm.selectHighlighted()
+      expect(wrapper.emitted('select')).toEqual([[ITEMS[5]]])
+
+      vm.highlightFirst()
+      await nextTick()
+      expect(activeId(wrapper)).toBe('intro')
+    })
+
+    it('exposes the listbox id and the active option id', async () => {
+      const wrapper = mountBound()
+
+      expect(wrapper.vm.listboxId).toBe(listboxOf(wrapper).attributes('id'))
+      expect(wrapper.vm.activeDescendantId).toBe(
+        listboxOf(wrapper).attributes('aria-activedescendant'),
+      )
+    })
+
+    it('focuses the listbox', () => {
+      const wrapper = mountBound({}, { attachTo: document.body })
+
+      wrapper.vm.focus()
+
+      expect(document.activeElement).toBe(listboxOf(wrapper).element)
+      wrapper.unmount()
+    })
+  })
+
+  it('renders a row without an icon when the item has none', () => {
+    const wrapper = mountBound({ items: [{ id: 'plain', label: 'Zonder icoon' }], groups: [] })
+    const option = wrapper.find('[role="option"]')
+
+    expect(option.find('i').exists()).toBe(false)
+    expect(option.text()).toBe('Zonder icoon')
+  })
+
+  describe('busy', () => {
+    it('is not busy by default', () => {
+      expect(listboxOf(mountBound()).attributes('aria-busy')).toBeUndefined()
+    })
+
+    it('marks the listbox busy', () => {
+      expect(listboxOf(mountBound({ busy: true })).attributes('aria-busy')).toBe('true')
+    })
+
+    // More items may still arrive, so "nothing found" would be a claim the list cannot make yet
+    it('holds back the empty state while busy', async () => {
+      const wrapper = mountBound({ busy: true, search: 'zwembad', emptyTitle: 'Niets' })
+      await nextTick()
+
+      expect(wrapper.text()).not.toContain('Niets')
+
+      await wrapper.setProps({ busy: false })
+      expect(wrapper.text()).toContain('Niets')
+    })
+
+    it('renders the append slot inside the listbox, after the last group', () => {
+      const wrapper = mountBound(
+        { busy: true, search: 'zwembad' },
+        { slots: { append: '<div aria-hidden="true" data-test="placeholder">…</div>' } },
+      )
+      const listbox = listboxOf(wrapper)
+
+      expect(listbox.element.lastElementChild?.getAttribute('data-test')).toBe('placeholder')
+      // still laid out as a filled list, although no option matches
+      expect(listbox.classes()).toContain('p-2')
+      // no option to walk through, so no tab stop
+      expect(listbox.attributes('tabindex')).toBe('-1')
+    })
+  })
+
+  it('renders the item slot inside the option', () => {
+    const wrapper = mountBound(
+      {},
+      {
+        slots: {
+          item: `<template #item="{ item, highlighted }">
+            <b>{{ item.label }}{{ highlighted ? '*' : '' }}</b>
+          </template>`,
+        },
+      },
+    )
+
+    const first = wrapper.find('[role="option"]')
+    expect(first.find('b').text()).toBe('Introductie*')
+    expect(first.attributes('aria-selected')).toBe('true')
+  })
+})