@nexxtmove/ui 2.5.0 → 2.7.0

package/src/components/organisms/IconPicker/IconPicker.test.ts

@@ -0,0 +1,669 @@
+import { afterEach, beforeAll, afterAll, describe, it, expect, vi } from 'vitest'
+import { ref } from 'vue'
+import { flushPromises, mount, type VueWrapper } from '@vue/test-utils'
+import IconPicker, {
+  type NexxtIconPickerCategory,
+  type NexxtIconPickerIcon,
+  type NexxtIconPickerStyle,
+  type NexxtIconPickerValue,
+} from './IconPicker.vue'
+import {
+  iconLabelFromName,
+  iconSearchIndex,
+  iconStyleFor,
+  searchIcons,
+  sortIconsByLabel,
+} from './iconPickerHelpers'
+
+// Positioning is FloatingPanel's concern and has its own tests; here the panel is simply placed
+vi.mock('@floating-ui/vue', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@floating-ui/vue')>()
+  return {
+    ...actual,
+    useFloating: () => ({
+      floatingStyles: ref({}),
+      placement: ref('bottom-start'),
+      isPositioned: ref(true),
+    }),
+    autoUpdate: () => () => {},
+  }
+})
+
+// jsdom lays nothing out: the grid gets the height of about five rows of the fallback 63px, so the
+// virtual list renders a window and not the whole catalogue
+const GRID_HEIGHT = 320
+beforeAll(() => {
+  Object.defineProperty(HTMLElement.prototype, 'clientHeight', {
+    configurable: true,
+    get(this: HTMLElement) {
+      return this.getAttribute('role') === 'grid' ? GRID_HEIGHT : 0
+    },
+  })
+})
+afterAll(() => {
+  // back to Element.prototype's own getter
+  delete (HTMLElement.prototype as { clientHeight?: number }).clientHeight
+})
+
+const ALL = ['light', 'regular', 'solid']
+
+const STYLES: NexxtIconPickerStyle[] = [
+  { id: 'light', label: 'Light', classes: ['style-light'] },
+  { id: 'regular', label: 'Regular', classes: ['style-regular'] },
+  { id: 'solid', label: 'Solid', classes: ['style-solid'] },
+  { id: 'brands', label: 'Merk', classes: ['style-brands'] },
+]
+
+const icon = (name: string, label: string, terms: string[] = [], styles = ALL) => ({
+  name,
+  label,
+  terms,
+  styles,
+})
+
+const ICONS: NexxtIconPickerIcon[] = [
+  icon('house', 'House', ['home', 'building']),
+  icon('house-chimney', 'House chimney', ['home']),
+  icon('house-user', 'House user', ['home']),
+  icon('warehouse', 'Warehouse'),
+  icon('building', 'Building', ['apartment']),
+  icon('star', 'Star', ['favorite']),
+  icon('heart', 'Heart', ['love']),
+  icon('bell', 'Bell'),
+  icon('tree', 'Tree'),
+  icon('sun', 'Sun'),
+  icon('moon', 'Moon'),
+  icon('kitchen-set', 'Kitchen set', [], ['solid', 'regular']),
+  icon('linkedin', 'LinkedIn', ['social'], ['brands']),
+]
+
+const CATEGORIES: NexxtIconPickerCategory[] = [
+  { id: 'nature', label: 'Natuur', icons: ['tree', 'sun', 'moon'] },
+  { id: 'buildings', label: 'Gebouwen', icons: ['house', 'building', 'warehouse', 'unknown'] },
+]
+
+const iconClass = (name: string) => `glyph-${name}`
+
+type Props = Partial<InstanceType<typeof IconPicker>['$props']>
+
+const mounted: VueWrapper[] = []
+
+const mountPicker = (props: Props = {}) => {
+  const holder: { wrapper?: VueWrapper } = {}
+  const wrapper = mount(IconPicker, {
+    props: {
+      icons: ICONS,
+      categories: CATEGORIES,
+      styles: STYLES,
+      iconClass,
+      ariaLabel: 'Symbool',
+      'onUpdate:modelValue': (value: NexxtIconPickerValue | null) =>
+        holder.wrapper?.setProps({ modelValue: value }),
+      ...props,
+    },
+    attachTo: document.body,
+  })
+  holder.wrapper = wrapper
+  mounted.push(wrapper)
+  return wrapper
+}
+
+afterEach(() => {
+  mounted.splice(0).forEach((wrapper) => wrapper.unmount())
+  document.body.innerHTML = ''
+  vi.useRealTimers()
+})
+
+const triggerOf = (wrapper: VueWrapper) =>
+  wrapper.find<HTMLButtonElement>('button[aria-haspopup="grid"]').element
+// The panel is teleported to <body>
+const inputOf = () => document.querySelector<HTMLInputElement>('input')!
+const gridOf = () => document.querySelector<HTMLElement>('[role="grid"]')
+const cells = () => Array.from(document.querySelectorAll<HTMLElement>('[role="gridcell"]'))
+const names = () => cells().map((cell) => cell.getAttribute('aria-label'))
+const tabs = () => Array.from(document.querySelectorAll<HTMLElement>('[role="tab"]'))
+const tab = (name: string) => tabs().find((element) => element.textContent?.trim() === name)!
+const activeCell = () => {
+  const id = gridOf()?.getAttribute('aria-activedescendant')
+  return id ? document.getElementById(id) : null
+}
+
+const open = async (wrapper: VueWrapper) => {
+  triggerOf(wrapper).click()
+  await flushPromises()
+}
+
+const keydown = async (target: Element, key: string, init: KeyboardEventInit = {}) => {
+  target.dispatchEvent(
+    new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true, ...init }),
+  )
+  await flushPromises()
+}
+
+const type = async (value: string) => {
+  const input = inputOf()
+  input.value = value
+  input.dispatchEvent(new Event('input'))
+  await flushPromises()
+}
+
+const focusGrid = async () => {
+  gridOf()!.focus()
+  await flushPromises()
+}
+
+describe('icon picker helpers', () => {
+  it('derives a label from a name', () => {
+    expect(iconLabelFromName('house-chimney')).toBe('House chimney')
+    expect(iconLabelFromName('star')).toBe('Star')
+  })
+
+  it('ranks the exact name first, then starts-with, then a word that starts, then the rest', () => {
+    const index = iconSearchIndex([
+      icon('house-user', 'House user'),
+      icon('warehouse', 'Warehouse'),
+      icon('user-house', 'User house'),
+      icon('house', 'House'),
+      icon('home-alt', 'Alternative', ['house']),
+    ])
+    expect(searchIcons(index, 'house').map(({ name }) => name)).toEqual([
+      'house',
+      'house-user',
+      'user-house',
+      'home-alt',
+      'warehouse',
+    ])
+  })
+
+  it('matches every word in any case on name, label and terms, and finds nothing for an empty search', () => {
+    const index = iconSearchIndex(ICONS)
+    expect(searchIcons(index, 'home').map(({ name }) => name)).toEqual([
+      'house',
+      'house-chimney',
+      'house-user',
+    ])
+    expect(searchIcons(index, 'HOUSE chim').map(({ name }) => name)).toEqual(['house-chimney'])
+    expect(searchIcons(index, 'house love')).toEqual([])
+    expect(searchIcons(index, '   ')).toEqual([])
+  })
+
+  it('sorts in the given locale', () => {
+    const list = [icon('z', 'Zebra'), icon('a', 'Ärger'), icon('b', 'Apen')]
+    expect(sortIconsByLabel(list).map(({ label }) => label)).toEqual(['Apen', 'Ärger', 'Zebra'])
+    expect(sortIconsByLabel(list, 'sv').map(({ label }) => label)).toEqual([
+      'Apen',
+      'Zebra',
+      'Ärger',
+    ])
+  })
+
+  it('keeps the preferred style when the icon has it, the first of the order otherwise', () => {
+    const order = ['light', 'regular', 'solid', 'brands']
+    expect(iconStyleFor(['light', 'solid'], 'solid', order)).toBe('solid')
+    expect(iconStyleFor(['solid', 'regular'], 'light', order)).toBe('regular')
+    expect(iconStyleFor(['brands'], 'light', order)).toBe('brands')
+    expect(iconStyleFor(['duotone'], 'light', order)).toBeNull()
+  })
+})
+
+describe('IconPicker', () => {
+  describe('trigger', () => {
+    it('reads the name, the icon and its style, and promises a grid', () => {
+      const wrapper = mountPicker({ modelValue: { icon: 'star', style: 'light' } })
+      const trigger = triggerOf(wrapper)
+      expect(trigger.getAttribute('aria-label')).toBe('Symbool, Star, Light')
+      expect(trigger.getAttribute('aria-haspopup')).toBe('grid')
+      expect(trigger.getAttribute('aria-expanded')).toBe('false')
+      expect(trigger.querySelector('i')!.className).toContain('style-light glyph-star')
+    })
+
+    it('shows the placeholder without a value, and names an icon outside the catalogue', () => {
+      const empty = mountPicker()
+      expect(triggerOf(empty).textContent).toContain('Kies een icoon')
+      const unknown = mountPicker({ modelValue: { icon: 'paper-plane', style: 'solid' } })
+      expect(triggerOf(unknown).getAttribute('aria-label')).toBe('Symbool, Paper plane, Solid')
+    })
+
+    it('is labelled by a visible label and the value', () => {
+      const wrapper = mountPicker({ label: 'Icoon', ariaLabel: undefined })
+      const trigger = triggerOf(wrapper)
+      const [labelId, valueId] = trigger.getAttribute('aria-labelledby')!.split(' ')
+      expect(document.getElementById(labelId!)!.textContent?.trim()).toBe('Icoon')
+      expect(document.getElementById(valueId!)!.textContent?.trim()).toBe('Kies een icoon')
+      expect(trigger.hasAttribute('aria-label')).toBe(false)
+    })
+
+    it('warns in development without a label or an accessible name', () => {
+      const warn = vi.spyOn(console, 'warn').mockImplementation(() => {})
+      mountPicker({ ariaLabel: undefined })
+      expect(warn).toHaveBeenCalledWith(expect.stringContaining('[NexxtIconPicker]'))
+      warn.mockRestore()
+    })
+
+    it('opens on ArrowDown with focus in the search field', async () => {
+      const wrapper = mountPicker()
+      await keydown(triggerOf(wrapper), 'ArrowDown')
+      expect(wrapper.emitted('open')).toHaveLength(1)
+      expect(document.activeElement).toBe(inputOf())
+    })
+  })
+
+  describe('panel', () => {
+    it('lists "Alle iconen" first, then the categories sorted in Dutch', async () => {
+      const wrapper = mountPicker()
+      await open(wrapper)
+      expect(tabs().map((element) => element.textContent?.trim())).toEqual([
+        'Alle iconen',
+        'Gebouwen',
+        'Natuur',
+      ])
+      expect(tab('Alle iconen').getAttribute('aria-selected')).toBe('true')
+      expect(tab('Natuur').getAttribute('title')).toBe('Natuur')
+    })
+
+    it('leaves out a category without a single icon the catalogue knows', async () => {
+      const wrapper = mountPicker({
+        categories: [...CATEGORIES, { id: 'ghost', label: 'Spoken', icons: ['nope', 'gone'] }],
+      })
+      await open(wrapper)
+      expect(tabs().map((element) => element.textContent?.trim())).toEqual([
+        'Alle iconen',
+        'Gebouwen',
+        'Natuur',
+      ])
+    })
+
+    it('falls back to "Alle iconen" when the chosen category empties', async () => {
+      const wrapper = mountPicker()
+      await open(wrapper)
+      tab('Natuur').click()
+      await flushPromises()
+      expect(names()).toEqual(['Moon', 'Sun', 'Tree'])
+
+      // a reloaded catalogue without any icon of the category
+      const without = ICONS.filter(({ name }) => !['tree', 'sun', 'moon'].includes(name))
+      await wrapper.setProps({ icons: without })
+      await flushPromises()
+      expect(tabs().map((element) => element.textContent?.trim())).toEqual([
+        'Alle iconen',
+        'Gebouwen',
+      ])
+      expect(tab('Alle iconen').getAttribute('aria-selected')).toBe('true')
+      expect(document.querySelector('[role="tabpanel"]')!.getAttribute('aria-labelledby')).toBe(
+        tab('Alle iconen').id,
+      )
+      expect(names()).toHaveLength(without.length)
+
+      // and to it again when the category disappears from the props
+      tab('Gebouwen').click()
+      await flushPromises()
+      await wrapper.setProps({ categories: [CATEGORIES[0]!] })
+      await flushPromises()
+      expect(tab('Alle iconen').getAttribute('aria-selected')).toBe('true')
+      expect(names()).toHaveLength(without.length)
+    })
+
+    it('keeps one tab stop and moves over the shown tabs only', async () => {
+      const wrapper = mountPicker({
+        categories: [{ id: 'ghost', label: 'Aaa leeg', icons: ['nope'] }, ...CATEGORIES],
+      })
+      await open(wrapper)
+      expect(tabs().filter((element) => element.tabIndex === 0)).toHaveLength(1)
+      await keydown(tab('Alle iconen'), 'ArrowDown')
+      expect(document.activeElement).toBe(tab('Gebouwen'))
+      await keydown(tab('Gebouwen'), 'End')
+      expect(document.activeElement).toBe(tab('Natuur'))
+      expect(tabs().filter((element) => element.tabIndex === 0)).toEqual([tab('Natuur')])
+    })
+
+    it('sorts rail and grid in `sortLocale`', async () => {
+      const list = [icon('z', 'Zebra'), icon('a', 'Ärger'), icon('b', 'Apen')]
+      const categories = [
+        { id: 'z', label: 'Zon', icons: ['z'] },
+        { id: 'a', label: 'Äpfel', icons: ['a'] },
+      ]
+      const wrapper = mountPicker({ icons: list, categories, sortLocale: 'sv' })
+      await open(wrapper)
+      expect(names()).toEqual(['Apen', 'Zebra', 'Ärger'])
+      expect(tabs().map((element) => element.textContent?.trim())).toEqual([
+        'Alle iconen',
+        'Zon',
+        'Äpfel',
+      ])
+    })
+
+    it('points the search field at the grid, and nowhere when there is no grid', async () => {
+      const wrapper = mountPicker()
+      await open(wrapper)
+      expect(inputOf().getAttribute('aria-controls')).toBe(gridOf()!.id)
+      await type('zzz')
+      expect(gridOf()).toBeNull()
+      expect(inputOf().hasAttribute('aria-controls')).toBe(false)
+      expect(document.body.textContent).toContain(
+        'Niets voor ‘zzz’. Zoeken werkt alleen met Engelse woorden.',
+      )
+    })
+
+    it('selects exactly one cell: the first place of the current icon, in the pinned section', async () => {
+      const wrapper = mountPicker({
+        modelValue: { icon: 'star', style: 'light' },
+        pinned: { label: 'Op deze pagina', icons: ['bell', 'star', 'heart'] },
+      })
+      await open(wrapper)
+      const headers = Array.from(document.querySelectorAll('[role="rowheader"]'))
+      expect(headers.map((header) => header.textContent)).toEqual(['Op deze pagina', 'Alle iconen'])
+      expect(names().slice(0, 3)).toEqual(['Star', 'Bell', 'Heart'])
+      const selected = document.querySelectorAll('[aria-selected="true"][role="gridcell"]')
+      expect(selected).toHaveLength(1)
+      expect(selected[0]!.getAttribute('aria-label')).toBe('Star')
+      expect(selected[0]!.closest('[role="row"]')!.getAttribute('aria-rowindex')).toBe('2')
+      const description = document.getElementById(selected[0]!.getAttribute('aria-describedby')!)
+      expect(description!.textContent).toBe('Huidige keuze')
+    })
+
+    it('limits the pinned section to two rows', async () => {
+      const wrapper = mountPicker({
+        pinned: { label: 'Op deze pagina', icons: ICONS.map(({ name }) => name) },
+      })
+      await open(wrapper)
+      const rows = Array.from(document.querySelectorAll('[role="row"]'))
+      const all = rows.findIndex((row) => row.textContent === 'Alle iconen')
+      expect(rows.slice(1, all)).toHaveLength(2)
+    })
+
+    it('draws each cell in the current style when the icon has it, its first otherwise', async () => {
+      const wrapper = mountPicker({ modelValue: { icon: 'star', style: 'light' } })
+      await open(wrapper)
+      // the style's classes and the glyph class, whatever else the cell adds for layout
+      const glyph = (name: string) =>
+        Array.from(
+          cells()
+            .find((cell) => cell.getAttribute('aria-label') === name)!
+            .querySelector('i')!.classList,
+        ).filter((value) => /^(style|glyph)-/.test(value))
+      expect(glyph('Heart')).toEqual(['style-light', 'glyph-heart'])
+      expect(glyph('Kitchen set')).toEqual(['style-regular', 'glyph-kitchen-set'])
+      expect(glyph('LinkedIn')).toEqual(['style-brands', 'glyph-linkedin'])
+    })
+
+    it('merges messages per key with the Dutch defaults', async () => {
+      const wrapper = mountPicker({ messages: { searchLabel: 'Search icons' } })
+      await open(wrapper)
+      expect(inputOf().getAttribute('aria-label')).toBe('Search icons')
+      expect(inputOf().getAttribute('placeholder')).toBe('Zoek in het Engels, bijv. house')
+    })
+
+    it('announces the first search after reopening on a search of only spaces', async () => {
+      vi.useFakeTimers({ toFake: ['setTimeout', 'clearTimeout'] })
+      const wrapper = mountPicker()
+      await open(wrapper)
+      await type(' ')
+      await keydown(inputOf(), 'Escape')
+      expect(gridOf()).toBeNull()
+
+      await open(wrapper)
+      await type('a')
+      vi.advanceTimersByTime(500)
+      await flushPromises()
+      const count = searchIcons(iconSearchIndex(ICONS), 'a').length
+      expect(document.querySelector('[aria-live="polite"]')!.textContent?.trim()).toBe(
+        `${count} iconen`,
+      )
+    })
+
+    it('announces the count 500ms after a search or a category change, not on opening', async () => {
+      vi.useFakeTimers({ toFake: ['setTimeout', 'clearTimeout'] })
+      const wrapper = mountPicker()
+      await open(wrapper)
+      const live = document.querySelector('[aria-live="polite"]')!
+      tab('Natuur').click()
+      await flushPromises()
+      vi.advanceTimersByTime(499)
+      await flushPromises()
+      expect(live.textContent?.trim()).toBe('')
+      vi.advanceTimersByTime(1)
+      await flushPromises()
+      expect(live.textContent?.trim()).toBe('3 iconen')
+
+      await type('heart')
+      vi.advanceTimersByTime(500)
+      await flushPromises()
+      expect(live.textContent?.trim()).toBe('1 icoon')
+
+      // closing and opening again resets search and category; that is no change to announce
+      wrapper.findComponent({ name: 'NexxtFloatingPanel' }).vm.close()
+      await flushPromises()
+      await open(wrapper)
+      vi.advanceTimersByTime(1000)
+      await flushPromises()
+      expect(document.querySelector('[aria-live="polite"]')!.textContent?.trim()).toBe('')
+    })
+
+    it('searches the whole catalogue and a category clears the search', async () => {
+      const wrapper = mountPicker()
+      await open(wrapper)
+      tab('Natuur').click()
+      await flushPromises()
+      expect(names()).toEqual(['Moon', 'Sun', 'Tree'])
+      await type('house')
+      expect(tab('Alle iconen').getAttribute('aria-selected')).toBe('true')
+      expect(names()).toEqual(['House', 'House chimney', 'House user', 'Warehouse'])
+      tab('Gebouwen').click()
+      await flushPromises()
+      expect(inputOf().value).toBe('')
+      // a name the catalogue does not know is skipped
+      expect(names()).toEqual(['Building', 'House', 'Warehouse'])
+    })
+  })
+
+  describe('keyboard', () => {
+    it('moves from the field into the grid onto the current icon', async () => {
+      const wrapper = mountPicker({ modelValue: { icon: 'heart', style: 'light' } })
+      await open(wrapper)
+      await keydown(inputOf(), 'ArrowDown')
+      expect(document.activeElement).toBe(gridOf())
+      expect(activeCell()!.getAttribute('aria-label')).toBe('Heart')
+    })
+
+    it('walks the grid with arrows, Home/End and Ctrl+Home/End', async () => {
+      const wrapper = mountPicker()
+      await open(wrapper)
+      await focusGrid()
+      const grid = gridOf()!
+      // sorted: Bell, Building, Heart, House, House chimney, House user | Kitchen set, LinkedIn, Moon, ...
+      expect(activeCell()!.getAttribute('aria-label')).toBe('Bell')
+      await keydown(grid, 'ArrowRight')
+      expect(activeCell()!.getAttribute('aria-label')).toBe('Building')
+      await keydown(grid, 'End')
+      expect(activeCell()!.getAttribute('aria-label')).toBe('House user')
+      await keydown(grid, 'ArrowRight')
+      expect(activeCell()!.getAttribute('aria-label')).toBe('Kitchen set')
+      await keydown(grid, 'ArrowLeft')
+      expect(activeCell()!.getAttribute('aria-label')).toBe('House user')
+      await keydown(grid, 'Home')
+      expect(activeCell()!.getAttribute('aria-label')).toBe('Bell')
+      await keydown(grid, 'ArrowDown')
+      expect(activeCell()!.getAttribute('aria-label')).toBe('Kitchen set')
+      await keydown(grid, 'End', { ctrlKey: true })
+      expect(activeCell()!.getAttribute('aria-label')).toBe('Warehouse')
+      await keydown(grid, 'Home', { ctrlKey: true })
+      expect(activeCell()!.getAttribute('aria-label')).toBe('Bell')
+      await keydown(grid, 'ArrowUp')
+      expect(document.activeElement).toBe(inputOf())
+    })
+
+    it('pages by the rows in view, less one', async () => {
+      const many = Array.from({ length: 120 }, (_, index) =>
+        icon(`icon-${index}`, `Icon ${String(index).padStart(3, '0')}`),
+      )
+      const wrapper = mountPicker({ icons: many })
+      await open(wrapper)
+      await focusGrid()
+      const rowOf = () => activeCell()!.closest('[role="row"]')!.getAttribute('aria-rowindex')
+      // 320px over rows of 63px: five rows, so a page is four
+      await keydown(gridOf()!, 'PageDown')
+      expect(rowOf()).toBe('5')
+      await keydown(gridOf()!, 'PageUp')
+      expect(rowOf()).toBe('1')
+    })
+
+    it('types a letter from the grid into the search field', async () => {
+      const wrapper = mountPicker()
+      await open(wrapper)
+      await focusGrid()
+      await keydown(gridOf()!, 's')
+      expect(document.activeElement).toBe(inputOf())
+      expect(inputOf().value).toBe('s')
+    })
+
+    it('chooses with Enter, closes and puts focus on the trigger', async () => {
+      const wrapper = mountPicker({ modelValue: { icon: 'star', style: 'light' } })
+      await open(wrapper)
+      await type('kitchen')
+      await keydown(inputOf(), 'ArrowDown')
+      await keydown(gridOf()!, 'Enter')
+      expect(wrapper.emitted('update:modelValue')!.at(-1)).toEqual([
+        { icon: 'kitchen-set', style: 'regular' },
+      ])
+      expect(gridOf()).toBeNull()
+      expect(document.activeElement).toBe(triggerOf(wrapper))
+      expect(wrapper.emitted('close')).toHaveLength(1)
+    })
+
+    it('chooses the first result with Enter in the field, only with a search', async () => {
+      const wrapper = mountPicker({ modelValue: { icon: 'star', style: 'solid' } })
+      await open(wrapper)
+      await keydown(inputOf(), 'Enter')
+      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+      await type('linked')
+      await keydown(inputOf(), 'Enter')
+      expect(wrapper.emitted('update:modelValue')!.at(-1)).toEqual([
+        { icon: 'linkedin', style: 'brands' },
+      ])
+    })
+
+    it('closes with Escape without a change and highlights the current icon on reopening', async () => {
+      const wrapper = mountPicker({ modelValue: { icon: 'sun', style: 'light' } })
+      await open(wrapper)
+      tab('Gebouwen').click()
+      await flushPromises()
+      await keydown(document.activeElement ?? document.body, 'Escape')
+      expect(gridOf()).toBeNull()
+      expect(document.activeElement).toBe(triggerOf(wrapper))
+      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+
+      await open(wrapper)
+      expect(tab('Alle iconen').getAttribute('aria-selected')).toBe('true')
+      await focusGrid()
+      expect(activeCell()!.getAttribute('aria-label')).toBe('Sun')
+    })
+
+    it('moves and chooses in the rail with the arrow keys', async () => {
+      const wrapper = mountPicker()
+      await open(wrapper)
+      const all = tab('Alle iconen')
+      expect(all.tabIndex).toBe(0)
+      expect(tab('Gebouwen').tabIndex).toBe(-1)
+      await keydown(all, 'ArrowDown')
+      expect(tab('Gebouwen').getAttribute('aria-selected')).toBe('true')
+      expect(document.activeElement).toBe(tab('Gebouwen'))
+      await keydown(tab('Gebouwen'), 'End')
+      expect(tab('Natuur').getAttribute('aria-selected')).toBe('true')
+      expect(document.querySelector('[role="tabpanel"]')!.getAttribute('aria-labelledby')).toBe(
+        tab('Natuur').id,
+      )
+    })
+
+    it('closes when focus leaves the panel and the trigger', async () => {
+      const outside = document.createElement('button')
+      document.body.append(outside)
+      const wrapper = mountPicker()
+      await open(wrapper)
+      gridOf()!.dispatchEvent(new FocusEvent('focusout', { bubbles: true, relatedTarget: outside }))
+      await flushPromises()
+      expect(gridOf()).toBeNull()
+    })
+  })
+
+  describe('virtual grid', () => {
+    const LARGE = Array.from({ length: 4317 }, (_, index) =>
+      icon(`icon-${index}`, `Icon ${String(index).padStart(4, '0')}`),
+    )
+
+    it('renders a window of rows, never the whole catalogue', async () => {
+      const wrapper = mountPicker({ icons: LARGE, categories: [] })
+      await open(wrapper)
+      expect(gridOf()!.getAttribute('aria-rowcount')).toBe(String(Math.ceil(4317 / 6)))
+      expect(cells().length).toBeGreaterThan(0)
+      expect(cells().length).toBeLessThanOrEqual(150)
+    })
+
+    it('points aria-activedescendant only at a rendered cell', async () => {
+      const wrapper = mountPicker({ icons: LARGE, categories: [] })
+      await open(wrapper)
+      await focusGrid()
+      const grid = gridOf()!
+      for (const [key, init] of [
+        ['End', { ctrlKey: true }],
+        ['ArrowLeft', {}],
+        ['PageUp', {}],
+        ['Home', { ctrlKey: true }],
+        ['PageDown', {}],
+      ] as const) {
+        await keydown(grid, key, init)
+        const id = grid.getAttribute('aria-activedescendant')
+        expect(id).toBeTruthy()
+        expect(document.getElementById(id!)).not.toBeNull()
+        expect(cells().length).toBeLessThanOrEqual(150)
+      }
+      await keydown(grid, 'End', { ctrlKey: true })
+      expect(activeCell()!.getAttribute('aria-label')).toBe('Icon 4316')
+    })
+  })
+
+  describe('catalogue status', () => {
+    it('shows skeletons while loading, and applies a typed search once the catalogue is in', async () => {
+      const wrapper = mountPicker({
+        icons: [],
+        catalogueStatus: 'loading',
+        modelValue: { icon: 'star', style: 'light' },
+      })
+      await open(wrapper)
+      const grid = gridOf()!
+      expect(grid.getAttribute('aria-busy')).toBe('true')
+      expect(grid.querySelectorAll('.animate-pulse')).toHaveLength(36)
+      expect(
+        document.querySelector('[role="tablist"]')!.querySelectorAll('.animate-pulse'),
+      ).toHaveLength(8)
+      // no real categories next to the skeletons: without a catalogue they are all empty
+      expect(tabs().map((element) => element.textContent?.trim())).toEqual(['Alle iconen'])
+
+      await type('house')
+      await wrapper.setProps({ icons: ICONS, catalogueStatus: 'ready' })
+      await flushPromises()
+      expect(names()).toEqual(['House', 'House chimney', 'House user', 'Warehouse'])
+    })
+
+    it('keeps the current icon choosable on an error, with a retry', async () => {
+      const wrapper = mountPicker({
+        icons: [],
+        catalogueStatus: 'error',
+        modelValue: { icon: 'house-chimney', style: 'solid' },
+      })
+      await open(wrapper)
+      expect(names()).toEqual(['House chimney'])
+      expect(cells()[0]!.getAttribute('aria-selected')).toBe('true')
+      const status = document.querySelector('[role="status"]')!
+      expect(status.textContent).toContain('De iconen konden niet worden geladen.')
+      status.querySelector('button')!.click()
+      expect(wrapper.emitted('retry')).toHaveLength(1)
+    })
+
+    it('renders no grid and no aria-controls on an error without a current icon', async () => {
+      const wrapper = mountPicker({ icons: [], catalogueStatus: 'error' })
+      await open(wrapper)
+      expect(gridOf()).toBeNull()
+      expect(inputOf().hasAttribute('aria-controls')).toBe(false)
+    })
+  })
+})