@nexxtmove/ui 2.5.0 → 2.7.0

package/src/components/editor/molecules/EditorAlignmentGrid/EditorAlignmentGrid.stories.ts

@@ -0,0 +1,309 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { expect, fn, userEvent, waitFor, within } from 'storybook/test'
+import { ref } from 'vue'
+import EditorAlignmentGrid from './EditorAlignmentGrid.vue'
+import type {
+  EditorAlignmentDirection,
+  EditorAlignmentMode,
+  EditorAlignmentValue,
+} from './EditorAlignmentGrid.vue'
+import NexxtToggleGroup from '../../../molecules/ToggleGroup/ToggleGroup.vue'
+
+export default {
+  title: 'Components/Editor Components/Molecules/Editor Alignment Grid',
+  component: EditorAlignmentGrid,
+  decorators: [() => ({ template: '<div class="w-100 mx-auto"><story /></div>' })],
+  parameters: {
+    // New and clean, so axe fails the run here instead of reporting.
+    a11y: { test: 'error' },
+  },
+  args: { onCommit: fn() },
+  argTypes: {
+    label: { control: 'text' },
+    direction: { control: 'inline-radio', options: ['row', 'column'] },
+    mode: { control: 'inline-radio', options: ['both', 'cross', 'main'] },
+    auto: { control: 'boolean' },
+    stretched: { control: 'boolean' },
+  },
+} satisfies Meta<typeof EditorAlignmentGrid>
+
+type Story = StoryObj<typeof EditorAlignmentGrid>
+
+/**
+ * Any computed CSS colour as sRGB channels. Tailwind v4 colours compute to
+ * `oklch()`, so the colour is painted on a 1px canvas and read back.
+ */
+const toRgb = (color: string) => {
+  const context = document.createElement('canvas').getContext('2d')!
+  context.fillStyle = color
+  context.fillRect(0, 0, 1, 1)
+  const [r, g, b] = context.getImageData(0, 0, 1, 1).data
+  return [r, g, b]
+}
+
+/** WCAG 2 contrast ratio of two CSS colours. */
+const contrast = (a: string, b: string) => {
+  const luminance = (color: string) => {
+    const [r, g, b] = toRgb(color).map((channel) => {
+      const c = channel / 255
+      return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4
+    })
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b
+  }
+  const [light, dark] = [luminance(a), luminance(b)].sort((x, y) => y - x)
+  return (light + 0.05) / (dark + 0.05)
+}
+
+const WHITE = 'rgb(255, 255, 255)'
+
+/** The grey tray around the radiogroup, which every mode shares. */
+const tray = (canvasElement: HTMLElement) =>
+  canvasElement.querySelector('[role="radiogroup"]')!.parentElement as HTMLElement
+
+/** The grid keeps its 112 px in every mode: no layout jump in the panel. */
+const expectFixedSize = async (canvasElement: HTMLElement) => {
+  const { width, height } = tray(canvasElement).getBoundingClientRect()
+  await expect([width, height]).toEqual([112, 112])
+}
+
+/** Renders the grid with its own model, starting at `initial`, and shows the value. */
+const withModel =
+  (initial: EditorAlignmentValue): Story['render'] =>
+  (args) => ({
+    components: { EditorAlignmentGrid },
+    setup() {
+      const value = ref<EditorAlignmentValue>(initial)
+      return { args, value }
+    },
+    template: `
+      <div class="flex flex-col gap-2">
+        <EditorAlignmentGrid v-bind="args" v-model="value" />
+        <p class="small-normal text-gray-700">x: {{ value.x ?? 'null' }}, y: {{ value.y ?? 'null' }}</p>
+      </div>
+    `,
+  })
+
+/** Nine cells in a row. The plays cover the keyboard, the commit, the ring and the contrast. */
+export const Row: Story = {
+  args: { direction: 'row' },
+  render: withModel({ x: 'start', y: 'start' }),
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement)
+    await expectFixedSize(canvasElement)
+
+    // One tab stop, on the chosen cell.
+    await userEvent.tab()
+    const first = canvas.getByRole('radio', { name: 'Linksboven' })
+    await expect(first).toHaveFocus()
+
+    // The ring is drawn outside the cell, so it lands on the grey tray, and on a
+    // white cell next to it: it needs 3:1 against both.
+    await expect(first.matches(':focus-visible')).toBe(true)
+    const ring = getComputedStyle(first)
+    await expect(ring.outlineStyle).not.toBe('none')
+    await expect(contrast(ring.outlineColor, WHITE)).toBeGreaterThanOrEqual(3)
+    await expect(
+      contrast(ring.outlineColor, getComputedStyle(tray(canvasElement)).backgroundColor),
+    ).toBeGreaterThanOrEqual(3)
+
+    // Measured before any arrow: a colour read mid-transition is no colour at all.
+    // Not by colour alone: the dot holds 3:1 on the tray, the glyph on white.
+    const dot = canvas.getByRole('radio', { name: 'Rechtsonder' }).querySelector('.rounded-full')!
+    await expect(
+      contrast(
+        getComputedStyle(dot).backgroundColor,
+        getComputedStyle(tray(canvasElement)).backgroundColor,
+      ),
+    ).toBeGreaterThanOrEqual(3)
+    // The hover preview of an unchosen cell: 3:1 on the tray, and on white for a
+    // cell inside a stretched band.
+    const preview = canvas
+      .getByRole('radio', { name: 'Rechtsonder' })
+      .querySelector('.text-gray-700')!
+    const previewColor = getComputedStyle(preview).color
+    await expect(
+      contrast(previewColor, getComputedStyle(tray(canvasElement)).backgroundColor),
+    ).toBeGreaterThanOrEqual(3)
+    await expect(contrast(previewColor, WHITE)).toBeGreaterThanOrEqual(3)
+    const glyph = first.querySelector('.text-cornflower-blue-600')!
+    await expect(
+      contrast(getComputedStyle(glyph).color, getComputedStyle(first).backgroundColor),
+    ).toBeGreaterThanOrEqual(3)
+
+    // Arrows choose at once and stop at the edge.
+    await userEvent.keyboard('{ArrowLeft}{ArrowRight}{ArrowDown}')
+    const middle = canvas.getByRole('radio', { name: 'Midden' })
+    await expect(middle).toHaveFocus()
+    await expect(middle).toHaveAttribute('aria-checked', 'true')
+    await expect(args.onCommit).not.toHaveBeenCalled()
+
+    // Leaving the grid ends the keyboard run: one commit.
+    await userEvent.tab()
+    await expect(args.onCommit).toHaveBeenCalledOnce()
+  },
+}
+
+/** Nine cells in a column: the glyph lies down. A click commits straight away. */
+export const Column: Story = {
+  args: { direction: 'column' },
+  render: withModel({ x: 'end', y: 'start' }),
+  play: async ({ canvasElement, args }) => {
+    await expectFixedSize(canvasElement)
+    await userEvent.click(within(canvasElement).getByRole('radio', { name: 'Midden onder' }))
+    await expect(args.onCommit).toHaveBeenCalledOnce()
+  },
+}
+
+/** Auto in a row: three horizontal bands, the bars spread out. */
+export const AutoRow: Story = {
+  args: { direction: 'row', mode: 'cross', auto: true },
+  render: withModel({ x: null, y: 'center' }),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    await expectFixedSize(canvasElement)
+
+    await userEvent.tab()
+    // Only the arrows along the bands do anything.
+    await userEvent.keyboard('{ArrowRight}')
+    await expect(canvas.getByRole('radio', { name: 'Midden' })).toHaveAttribute(
+      'aria-checked',
+      'true',
+    )
+    await userEvent.keyboard('{ArrowDown}')
+    await expect(canvas.getByRole('radio', { name: 'Onder' })).toHaveFocus()
+  },
+}
+
+/** Auto in a column: three vertical bands. */
+export const AutoColumn: Story = {
+  args: { direction: 'column', mode: 'cross', auto: true },
+  render: withModel({ x: 'end', y: null }),
+  play: async ({ canvasElement }) => expectFixedSize(canvasElement),
+}
+
+/** The main axis has no effect in a row: horizontal bands, the bars packed. */
+export const CrossOnlyRow: Story = {
+  args: { direction: 'row', mode: 'cross' },
+  render: withModel({ x: null, y: 'start' }),
+  play: async ({ canvasElement }) => expectFixedSize(canvasElement),
+}
+
+/** The cross axis has no effect in a row: vertical bands for the main-axis place. */
+export const MainOnlyRow: Story = {
+  args: { direction: 'row', mode: 'main' },
+  render: withModel({ x: 'center', y: null }),
+  play: async ({ canvasElement }) => expectFixedSize(canvasElement),
+}
+
+/** The cross axis has no effect in a column: horizontal bands for the main-axis place. */
+export const MainOnlyColumn: Story = {
+  args: { direction: 'column', mode: 'main' },
+  render: withModel({ x: null, y: 'end' }),
+  play: async ({ canvasElement }) => expectFixedSize(canvasElement),
+}
+
+/** Legacy stretch: no radio checked, a band with long bars at the main-axis place. */
+export const Stretched: Story = {
+  args: { direction: 'row', stretched: true },
+  render: withModel({ x: 'center', y: 'start' }),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    await expectFixedSize(canvasElement)
+
+    for (const radio of canvas.getAllByRole('radio')) {
+      await expect(radio).toHaveAttribute('aria-checked', 'false')
+    }
+    await userEvent.tab()
+    await expect(canvas.getByRole('radio', { name: 'Midden' })).toHaveFocus()
+  },
+}
+
+/** Legacy stretch with Auto: all three bands light up. */
+export const StretchedAuto: Story = {
+  args: { direction: 'row', mode: 'cross', auto: true, stretched: true },
+  render: withModel({ x: 'start', y: 'center' }),
+  play: async ({ canvasElement }) => expectFixedSize(canvasElement),
+}
+
+/** Switched from outside while the focus is in the grid, as the app does when Auto flips. */
+const switchedMode = ref<EditorAlignmentMode>('both')
+
+/**
+ * A mode switch while the focus is in the grid: the focus moves to the tab stop
+ * of the new layer instead of dropping to `body`, and the keyboard run goes on
+ * until the focus really leaves.
+ */
+export const SwitchWhileFocused: Story = {
+  render: (args) => ({
+    components: { EditorAlignmentGrid },
+    setup() {
+      switchedMode.value = 'both'
+      const value = ref<EditorAlignmentValue>({ x: 'start', y: 'start' })
+      return { args, value, mode: switchedMode }
+    },
+    template: `<EditorAlignmentGrid v-bind="args" v-model="value" :mode="mode" />`,
+  }),
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement)
+
+    await userEvent.tab()
+    await userEvent.keyboard('{ArrowDown}')
+    switchedMode.value = 'cross'
+
+    await waitFor(() => expect(canvas.getByRole('radio', { name: 'Midden' })).toHaveFocus())
+    await expect(document.activeElement).not.toBe(document.body)
+    await expect(args.onCommit).not.toHaveBeenCalled()
+
+    // Past the 150 ms crossfade: the old layer is gone and the focus held.
+    await new Promise((resolve) => setTimeout(resolve, 300))
+    await expect(canvas.getByRole('radio', { name: 'Midden' })).toHaveFocus()
+    await expect(args.onCommit).not.toHaveBeenCalled()
+
+    await userEvent.tab()
+    await expect(args.onCommit).toHaveBeenCalledOnce()
+  },
+}
+
+/**
+ * Switch mode and direction to see the crossfade. The size stays the same
+ * through every switch.
+ */
+export const Playground: Story = {
+  parameters: {
+    // The demo switches are labelled NexxtToggleGroups, whose chosen label fails
+    // color-contrast on its own (cornflower-600 text, 4.31:1). Not this grid.
+    a11y: { test: 'error', context: { exclude: ['[data-demo-controls]'] } },
+  },
+  render: (args) => ({
+    components: { EditorAlignmentGrid, NexxtToggleGroup },
+    setup() {
+      const value = ref<EditorAlignmentValue>({ x: 'start', y: 'start' })
+      const direction = ref<EditorAlignmentDirection>('row')
+      const mode = ref<EditorAlignmentMode>('both')
+      const auto = ref('off')
+      return { args, value, direction, mode, auto }
+    },
+    template: `
+      <div class="flex flex-col gap-3">
+        <div data-demo-controls class="flex flex-col gap-3">
+        <NexxtToggleGroup v-model="direction" aria-label="Richting" :options="[{ value: 'row', label: 'Rij' }, { value: 'column', label: 'Kolom' }]" />
+        <NexxtToggleGroup v-model="mode" aria-label="Modus" :options="[{ value: 'both', label: '9' }, { value: 'cross', label: 'Dwarsas' }, { value: 'main', label: 'Hoofdas' }]" />
+        <NexxtToggleGroup v-model="auto" aria-label="Auto" :options="[{ value: 'off', label: 'Vast' }, { value: 'on', label: 'Auto' }]" />
+        </div>
+        <EditorAlignmentGrid
+          v-bind="args"
+          v-model="value"
+          :direction="direction"
+          :mode="mode"
+          :auto="auto === 'on'"
+        />
+      </div>
+    `,
+  }),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    await userEvent.click(canvas.getByRole('button', { name: 'Dwarsas' }))
+    await userEvent.click(canvas.getByRole('button', { name: 'Kolom' }))
+    await expectFixedSize(canvasElement)
+  },
+}

package/src/components/editor/molecules/EditorAlignmentGrid/EditorAlignmentGrid.test.ts

@@ -0,0 +1,359 @@
+import { describe, it, expect, afterEach } from 'vitest'
+import { mount, type VueWrapper } from '@vue/test-utils'
+import { nextTick } from 'vue'
+import EditorAlignmentGrid, {
+  EDITOR_ALIGNMENT_POSITIONS,
+  type EditorAlignmentValue,
+} from './EditorAlignmentGrid.vue'
+
+const CELL_NAMES = [
+  'Linksboven',
+  'Midden boven',
+  'Rechtsboven',
+  'Links midden',
+  'Midden',
+  'Rechts midden',
+  'Linksonder',
+  'Midden onder',
+  'Rechtsonder',
+]
+
+const mounted: VueWrapper[] = []
+
+afterEach(() => {
+  mounted.splice(0).forEach((wrapper) => wrapper.unmount())
+})
+
+/** A parent that owns the model, as `v-model` does. Attached, so focus can be read. */
+const mountGrid = (
+  modelValue: EditorAlignmentValue,
+  props: Record<string, unknown> = {},
+  attrs: Record<string, unknown> = {},
+) => {
+  const wrapper = mount(EditorAlignmentGrid, {
+    props: {
+      modelValue,
+      'onUpdate:modelValue': (value: EditorAlignmentValue) =>
+        wrapper.setProps({ modelValue: value }),
+      ...props,
+    },
+    attrs,
+    attachTo: document.body,
+  })
+  mounted.push(wrapper)
+  return wrapper
+}
+
+const radios = (wrapper: VueWrapper) => wrapper.findAll('[role="radio"]')
+const names = (wrapper: VueWrapper) =>
+  radios(wrapper).map((radio) => radio.attributes('aria-label'))
+const checked = (wrapper: VueWrapper) =>
+  radios(wrapper)
+    .filter((radio) => radio.attributes('aria-checked') === 'true')
+    .map((radio) => radio.attributes('aria-label'))
+const tabStops = (wrapper: VueWrapper) =>
+  radios(wrapper)
+    .filter((radio) => radio.attributes('tabindex') === '0')
+    .map((radio) => radio.attributes('aria-label'))
+
+/** The readout is the last hidden span: it follows the grid. */
+const readout = (wrapper: VueWrapper) => wrapper.findAll('span[aria-hidden="true"]').at(-1)!.text()
+
+const radio = (wrapper: VueWrapper, name: string) => {
+  const found = radios(wrapper).find((candidate) => candidate.attributes('aria-label') === name)
+  if (!found) throw new Error(`No radio "${name}"`)
+  return found
+}
+
+const press = async (wrapper: VueWrapper, key: string) => {
+  const focused = radios(wrapper).find((candidate) => candidate.element === document.activeElement)
+  if (!focused) throw new Error('No radio has focus')
+  await focused.trigger('keydown', { key })
+}
+
+const focusedName = () => (document.activeElement as HTMLElement).getAttribute('aria-label')
+
+const TOP_LEFT = { x: 'start', y: 'start' } as const
+
+describe('EditorAlignmentGrid', () => {
+  describe('nine cells', () => {
+    it('renders a radiogroup named by the block label, with nine named radios', () => {
+      const wrapper = mountGrid(TOP_LEFT)
+
+      expect(wrapper.find('p').text()).toBe('Uitlijning')
+      expect(wrapper.get('[role="radiogroup"]').attributes('aria-label')).toBe('Uitlijning')
+      expect(names(wrapper)).toEqual(CELL_NAMES)
+    })
+
+    it('puts attrs on the radiogroup', () => {
+      const wrapper = mountGrid(TOP_LEFT, {}, { 'aria-describedby': 'hint' })
+
+      expect(wrapper.get('[role="radiogroup"]').attributes('aria-describedby')).toBe('hint')
+    })
+
+    it('checks the cell of the model and puts the only tab stop there', () => {
+      const wrapper = mountGrid({ x: 'end', y: 'center' })
+
+      expect(checked(wrapper)).toEqual(['Rechts midden'])
+      expect(tabStops(wrapper)).toEqual(['Rechts midden'])
+      expect(readout(wrapper)).toBe('Rechts midden')
+    })
+
+    it('emits the visual place of every cell on click, and commits', async () => {
+      for (const [index, name] of CELL_NAMES.entries()) {
+        const wrapper = mountGrid({ x: null, y: null })
+
+        await radio(wrapper, name).trigger('click')
+
+        expect(wrapper.emitted('update:modelValue')).toEqual([
+          [
+            {
+              x: EDITOR_ALIGNMENT_POSITIONS[index % 3],
+              y: EDITOR_ALIGNMENT_POSITIONS[Math.floor(index / 3)],
+            },
+          ],
+        ])
+        expect(wrapper.emitted('commit')).toHaveLength(1)
+      }
+    })
+
+    it('emits and commits nothing for the cell that is already chosen', async () => {
+      const wrapper = mountGrid({ x: 'center', y: 'center' })
+
+      await radio(wrapper, 'Midden').trigger('click')
+
+      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+      expect(wrapper.emitted('commit')).toBeUndefined()
+    })
+
+    // The glyph is the drawing of the content: standing bars side by side in a
+    // row, lying bars stacked in a column, lined up on the cross-axis place.
+    it('draws standing bars on the vertical place in a row', () => {
+      const wrapper = mountGrid({ x: 'center', y: 'end' }, { direction: 'row' })
+      const glyph = radio(wrapper, 'Midden onder').get('.gap-0\\.5')
+
+      expect(glyph.classes()).toContain('items-end')
+      expect(glyph.findAll('span').every((bar) => bar.classes().includes('w-1'))).toBe(true)
+    })
+
+    it('draws lying bars on the horizontal place in a column', () => {
+      const wrapper = mountGrid({ x: 'end', y: 'start' }, { direction: 'column' })
+      const glyph = radio(wrapper, 'Rechtsboven').get('.gap-0\\.5')
+
+      expect(glyph.classes()).toEqual(expect.arrayContaining(['flex-col', 'items-end']))
+      expect(glyph.findAll('span').every((bar) => bar.classes().includes('h-1'))).toBe(true)
+    })
+
+    it('replaces only the overridden message keys', () => {
+      const wrapper = mountGrid(TOP_LEFT, { messages: { center: 'Centre', topLeft: 'TL' } })
+
+      expect(names(wrapper)).toEqual([
+        'TL',
+        ...CELL_NAMES.slice(1, 4),
+        'Centre',
+        ...CELL_NAMES.slice(5),
+      ])
+      expect(readout(wrapper)).toBe('TL')
+    })
+  })
+
+  describe('bands', () => {
+    it.each([
+      ['row', 'cross', ['Boven', 'Midden', 'Onder'], { x: null, y: 'end' }],
+      ['row', 'main', ['Links', 'Midden', 'Rechts'], { x: 'end', y: null }],
+      ['column', 'cross', ['Links', 'Midden', 'Rechts'], { x: 'end', y: null }],
+      ['column', 'main', ['Boven', 'Midden', 'Onder'], { x: null, y: 'end' }],
+    ] as const)(
+      '%s with %s: three named bands, the other axis null',
+      async (direction, mode, bands, emitted) => {
+        const wrapper = mountGrid({ x: 'center', y: 'center' }, { direction, mode })
+
+        expect(names(wrapper)).toEqual(bands)
+        expect(checked(wrapper)).toEqual(['Midden'])
+
+        await radio(wrapper, bands[2]).trigger('click')
+
+        expect(wrapper.emitted('update:modelValue')).toEqual([[emitted]])
+        expect(wrapper.emitted('commit')).toHaveLength(1)
+      },
+    )
+
+    it('spans each band over three cells, along the main axis in cross mode', () => {
+      const row = mountGrid(TOP_LEFT, { direction: 'row', mode: 'cross' })
+      const column = mountGrid(TOP_LEFT, { direction: 'column', mode: 'cross' })
+
+      radios(row).forEach((band) => expect(band.classes()).toContain('col-span-3'))
+      radios(column).forEach((band) => expect(band.classes()).toContain('row-span-3'))
+    })
+
+    it('reads out the band, with Auto when the main axis distributes', () => {
+      const plain = mountGrid({ x: null, y: 'center' }, { mode: 'cross' })
+      const auto = mountGrid({ x: null, y: 'center' }, { mode: 'cross', auto: true })
+
+      expect(readout(plain)).toBe('Midden')
+      expect(readout(auto)).toBe('Auto · Midden')
+    })
+
+    it('spreads the bars of the chosen band with Auto, packs them without', () => {
+      const packed = mountGrid({ x: null, y: 'start' }, { mode: 'cross' })
+      const spread = mountGrid({ x: null, y: 'start' }, { mode: 'cross', auto: true })
+
+      expect(radio(packed, 'Boven').get('.gap-0\\.5').classes()).not.toContain('justify-between')
+      expect(radio(spread, 'Boven').get('.gap-0\\.5').classes()).toContain('justify-between')
+    })
+
+    it('draws three spread dots on an unchosen band with Auto, one without', () => {
+      const packed = mountGrid({ x: null, y: 'start' }, { mode: 'cross' })
+      const spread = mountGrid({ x: null, y: 'start' }, { mode: 'cross', auto: true })
+      const dots = (wrapper: VueWrapper) => radio(wrapper, 'Onder').findAll('.bg-gray-700').length
+
+      expect(dots(packed)).toBe(1)
+      expect(dots(spread)).toBe(3)
+    })
+  })
+
+  describe('stretched', () => {
+    it('checks nothing and reads out the main-axis place', () => {
+      const wrapper = mountGrid({ x: 'end', y: 'start' }, { stretched: true })
+
+      expect(checked(wrapper)).toEqual([])
+      expect(readout(wrapper)).toBe('Uitgerekt · Rechts')
+    })
+
+    it('puts the tab stop on the main-axis place × the middle', () => {
+      const row = mountGrid({ x: 'end', y: 'start' }, { stretched: true, direction: 'row' })
+      const column = mountGrid({ x: 'start', y: 'end' }, { stretched: true, direction: 'column' })
+
+      expect(tabStops(row)).toEqual(['Rechts midden'])
+      expect(tabStops(column)).toEqual(['Midden onder'])
+    })
+
+    it('reads out Auto as the place with Auto, and lights all three bands', () => {
+      const wrapper = mountGrid(
+        { x: 'start', y: 'center' },
+        { stretched: true, mode: 'cross', auto: true },
+      )
+      const layer = wrapper.get('[aria-hidden="true"].pointer-events-none')
+
+      expect(readout(wrapper)).toBe('Uitgerekt · Auto')
+      expect(layer.findAll('.bg-white')).toHaveLength(3)
+      expect(tabStops(wrapper)).toEqual(['Midden'])
+    })
+
+    it('draws one hidden band in nine cells, and the cells stay clickable', async () => {
+      const wrapper = mountGrid({ x: 'center', y: 'start' }, { stretched: true })
+      const layer = wrapper.get('[aria-hidden="true"].pointer-events-none')
+
+      expect(layer.findAll('.bg-white')).toHaveLength(1)
+
+      await radio(wrapper, 'Midden boven').trigger('click')
+
+      expect(wrapper.emitted('update:modelValue')).toEqual([[{ x: 'center', y: 'start' }]])
+      expect(wrapper.emitted('commit')).toHaveLength(1)
+    })
+  })
+
+  describe('keyboard', () => {
+    it('moves and chooses in two dimensions without wrapping', async () => {
+      const wrapper = mountGrid(TOP_LEFT)
+      ;(radio(wrapper, 'Linksboven').element as HTMLElement).focus()
+
+      await press(wrapper, 'ArrowLeft')
+      await press(wrapper, 'ArrowUp')
+      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+
+      await press(wrapper, 'ArrowRight')
+      await press(wrapper, 'ArrowDown')
+
+      expect(checked(wrapper)).toEqual(['Midden'])
+      expect(focusedName()).toBe('Midden')
+    })
+
+    it('jumps to the first and last cell of the row on Home and End', async () => {
+      const wrapper = mountGrid({ x: 'center', y: 'center' })
+      ;(radio(wrapper, 'Midden').element as HTMLElement).focus()
+
+      await press(wrapper, 'End')
+      expect(focusedName()).toBe('Rechts midden')
+      await press(wrapper, 'Home')
+      expect(focusedName()).toBe('Links midden')
+    })
+
+    it('only moves along the bands in a band mode', async () => {
+      const wrapper = mountGrid({ x: null, y: 'start' }, { mode: 'cross', direction: 'row' })
+      ;(radio(wrapper, 'Boven').element as HTMLElement).focus()
+
+      await press(wrapper, 'ArrowRight')
+      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+
+      await press(wrapper, 'ArrowDown')
+      expect(checked(wrapper)).toEqual(['Midden'])
+      expect(focusedName()).toBe('Midden')
+    })
+
+    it('commits once for arrows followed by a click, not again on leaving', async () => {
+      const wrapper = mountGrid(TOP_LEFT)
+      const outside = document.createElement('button')
+      document.body.append(outside)
+      ;(radio(wrapper, 'Linksboven').element as HTMLElement).focus()
+
+      await press(wrapper, 'ArrowRight')
+      await radio(wrapper, 'Rechtsonder').trigger('click')
+      outside.focus()
+
+      expect(wrapper.emitted('commit')).toHaveLength(1)
+      outside.remove()
+    })
+
+    it('commits nothing when the focus passes through without a key', () => {
+      const wrapper = mountGrid(TOP_LEFT)
+      const outside = document.createElement('button')
+      document.body.append(outside)
+
+      ;(radio(wrapper, 'Linksboven').element as HTMLElement).focus()
+      outside.focus()
+
+      expect(wrapper.emitted('commit')).toBeUndefined()
+      outside.remove()
+    })
+
+    // The app switches the mode while the user is in the grid (a direction
+    // change elsewhere, Auto through the keyboard in a test): the focus moves to
+    // the new layer, and the run only ends when the focus really leaves.
+    it('keeps the focus in the grid across a mode switch, and commits only on leaving', async () => {
+      const wrapper = mountGrid({ x: 'start', y: 'start' })
+      const outside = document.createElement('button')
+      document.body.append(outside)
+      ;(radio(wrapper, 'Linksboven').element as HTMLElement).focus()
+
+      await press(wrapper, 'ArrowDown')
+      await wrapper.setProps({ mode: 'cross' })
+      await nextTick()
+
+      expect(document.activeElement).not.toBe(document.body)
+      expect(document.activeElement?.getAttribute('role')).toBe('radio')
+      expect(focusedName()).toBe('Midden')
+      expect(wrapper.emitted('commit')).toBeUndefined()
+
+      outside.focus()
+      expect(wrapper.emitted('commit')).toHaveLength(1)
+      outside.remove()
+    })
+
+    it('commits once, when the focus leaves after a run of arrows', async () => {
+      const wrapper = mountGrid(TOP_LEFT)
+      const outside = document.createElement('button')
+      document.body.append(outside)
+      ;(radio(wrapper, 'Linksboven').element as HTMLElement).focus()
+
+      await press(wrapper, 'ArrowRight')
+      await press(wrapper, 'ArrowRight')
+      expect(wrapper.emitted('update:modelValue')).toHaveLength(2)
+      expect(wrapper.emitted('commit')).toBeUndefined()
+
+      outside.focus()
+      expect(wrapper.emitted('commit')).toHaveLength(1)
+      outside.remove()
+    })
+  })
+})