@nexxtmove/ui 2.6.0 → 2.7.0

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

@@ -0,0 +1,138 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { expect, userEvent, within } from 'storybook/test'
+import { ref } from 'vue'
+import EditorAnchor from './EditorAnchor.vue'
+import type { EditorAnchorValue } from './EditorAnchor.vue'
+
+export default {
+  title: 'Components/Editor Components/Molecules/Editor Anchor',
+  component: EditorAnchor,
+  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' },
+  },
+  argTypes: {
+    label: { control: 'text' },
+    showLabel: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+  },
+} satisfies Meta<typeof EditorAnchor>
+
+type Story = StoryObj<typeof EditorAnchor>
+
+/**
+ * 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)
+}
+
+/** Renders the anchor with its own model, starting at `initial`, and shows the value. */
+const withModel =
+  (initial: EditorAnchorValue | null): Story['render'] =>
+  (args) => ({
+    components: { EditorAnchor },
+    setup() {
+      const anchor = ref<EditorAnchorValue | null>(initial)
+      return { args, anchor }
+    },
+    template: `
+      <div class="flex flex-col gap-2">
+        <EditorAnchor v-bind="args" v-model="anchor" />
+        <p class="small-normal text-gray-700">{{ anchor ? anchor.y + ' ' + anchor.x : 'null' }}</p>
+      </div>
+    `,
+  })
+
+export const Default: Story = {
+  render: withModel({ x: 'center', y: 'center' }),
+  // A focus ring that never shows passes every other check, so the play
+  // reaches the chosen cell by Tab and reads the ring off the computed style.
+  play: async ({ canvasElement }) => {
+    const middle = within(canvasElement).getByRole('radio', { name: 'Midden' })
+
+    await userEvent.tab()
+
+    await expect(middle).toHaveFocus()
+    await expect(middle.matches(':focus-visible')).toBe(true)
+    await expect(getComputedStyle(middle).outlineStyle).not.toBe('none')
+    await expect(getComputedStyle(middle).outlineWidth).toBe('2px')
+    // The ring is a non-text indicator on white, so it needs 3:1 (WCAG 1.4.11).
+    await expect(
+      contrast(getComputedStyle(middle).outlineColor, 'rgb(255, 255, 255)'),
+    ).toBeGreaterThanOrEqual(3)
+  },
+}
+
+export const BottomRight: Story = {
+  render: withModel({ x: 'right', y: 'bottom' }),
+  // The chosen cell stands out by its fill and by a larger dot, not by colour
+  // alone: measured, so it holds whatever the tokens resolve to.
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const chosen = canvas.getByRole('radio', { name: 'Rechtsonder' })
+    const other = canvas.getByRole('radio', { name: 'Linksboven' })
+    const dotWidth = (cell: HTMLElement) =>
+      cell.querySelector('span')!.getBoundingClientRect().width
+
+    await expect(chosen).toHaveAttribute('aria-checked', 'true')
+    await expect(dotWidth(chosen)).toBeGreaterThan(dotWidth(other))
+    await expect(getComputedStyle(chosen).backgroundColor).not.toBe(
+      getComputedStyle(other).backgroundColor,
+    )
+    // The dot is a graphical object, so it needs 3:1 against the fill (WCAG 1.4.11).
+    await expect(
+      contrast(
+        getComputedStyle(chosen.querySelector('span')!).backgroundColor,
+        getComputedStyle(chosen).backgroundColor,
+      ),
+    ).toBeGreaterThanOrEqual(3)
+  },
+}
+
+/** A stored position that no cell stands for: nothing is checked, the middle takes the tab stop. */
+export const NoChoice: Story = {
+  render: withModel(null),
+  play: async ({ canvasElement }) => {
+    const radios = within(canvasElement).getAllByRole('radio')
+
+    radios.forEach((radio) => expect(radio).toHaveAttribute('aria-checked', 'false'))
+    await userEvent.tab()
+    await expect(within(canvasElement).getByRole('radio', { name: 'Midden' })).toHaveFocus()
+  },
+}
+
+export const Disabled: Story = {
+  args: { disabled: true },
+  render: withModel({ x: 'left', y: 'top' }),
+  // Every cell, the chosen one included, shows that it cannot be used.
+  play: async ({ canvasElement }) => {
+    const radios = within(canvasElement).getAllByRole('radio')
+
+    radios.forEach((radio) => expect(getComputedStyle(radio).cursor).toBe('not-allowed'))
+  },
+}
+
+export const WithLabel: Story = {
+  args: { showLabel: true },
+  render: withModel({ x: 'center', y: 'top' }),
+}

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

@@ -0,0 +1,344 @@
+import { describe, it, expect, afterEach } from 'vitest'
+import { mount, type VueWrapper } from '@vue/test-utils'
+import EditorAnchor, { EDITOR_ANCHOR_OPTIONS, type EditorAnchorValue } from './EditorAnchor.vue'
+
+const DUTCH_NAMES = [
+  'Linksboven',
+  'Boven',
+  'Rechtsboven',
+  'Links',
+  'Midden',
+  'Rechts',
+  'Linksonder',
+  'Onder',
+  'Rechtsonder',
+]
+
+const mounted: VueWrapper[] = []
+
+/**
+ * Mounts with a parent that owns the model, so a chosen cell flows back in as
+ * the new value, like `v-model` does. Attached to the document, so focus moves
+ * can be read from `document.activeElement`.
+ */
+const mountAnchor = (
+  modelValue: EditorAnchorValue | null,
+  props: Record<string, unknown> = {},
+  attrs: Record<string, unknown> = {},
+) => {
+  const wrapper = mount(EditorAnchor, {
+    props: {
+      modelValue,
+      'onUpdate:modelValue': (value: EditorAnchorValue | null) =>
+        wrapper.setProps({ modelValue: value }),
+      ...props,
+    },
+    attrs,
+    attachTo: document.body,
+  })
+  mounted.push(wrapper)
+  return wrapper
+}
+
+afterEach(() => {
+  mounted.splice(0).forEach((wrapper) => wrapper.unmount())
+})
+
+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).findIndex((radio) => radio.attributes('aria-checked') === 'true')
+
+const tabStops = (wrapper: VueWrapper) =>
+  radios(wrapper)
+    .map((radio, index) => (radio.attributes('tabindex') === '0' ? index : null))
+    .filter((index) => index !== null)
+
+const press = async (wrapper: VueWrapper, key: string) => {
+  const focused = radios(wrapper).find((radio) => radio.element === document.activeElement)
+  if (!focused) throw new Error('No cell has focus')
+  await focused.trigger('keydown', { key })
+}
+
+const MIDDLE = { x: 'center', y: 'center' } as const
+
+describe('EditorAnchor', () => {
+  it('renders a radiogroup of nine radios named with the Dutch defaults', () => {
+    const wrapper = mountAnchor(MIDDLE)
+
+    expect(wrapper.get('[role="radiogroup"]').attributes('aria-label')).toBe(
+      'Plek van de afbeelding',
+    )
+    expect(names(wrapper)).toEqual(DUTCH_NAMES)
+  })
+
+  it('names the radiogroup with a custom label', () => {
+    const wrapper = mountAnchor(MIDDLE, { label: 'Anchor' })
+
+    expect(wrapper.get('[role="radiogroup"]').attributes('aria-label')).toBe('Anchor')
+  })
+
+  it('shows no header by default', () => {
+    const wrapper = mountAnchor(MIDDLE)
+
+    expect(wrapper.find('p').exists()).toBe(false)
+  })
+
+  it('names the radiogroup by the visible header when showLabel is set', () => {
+    const wrapper = mountAnchor(MIDDLE, { showLabel: true })
+    const header = wrapper.get('p')
+    const group = wrapper.get('[role="radiogroup"]')
+
+    expect(header.text()).toBe('Plek van de afbeelding')
+    expect(group.attributes('aria-labelledby')).toBe(header.attributes('id'))
+    expect(group.attributes('aria-label')).toBeUndefined()
+  })
+
+  it('replaces only the overridden message keys', () => {
+    const wrapper = mountAnchor(MIDDLE, { messages: { center: 'Centre', bottomRight: 'BR' } })
+
+    expect(names(wrapper)).toEqual([
+      ...DUTCH_NAMES.slice(0, 4),
+      'Centre',
+      ...DUTCH_NAMES.slice(5, 8),
+      'BR',
+    ])
+  })
+
+  it('puts attrs on the radiogroup', () => {
+    const wrapper = mountAnchor(MIDDLE, {}, { 'aria-describedby': 'hint', class: 'shrink-0' })
+    const group = wrapper.get('[role="radiogroup"]')
+
+    expect(group.attributes('aria-describedby')).toBe('hint')
+    expect(group.classes()).toContain('shrink-0')
+  })
+
+  it('checks the cell of the model value', () => {
+    const wrapper = mountAnchor({ x: 'right', y: 'bottom' })
+
+    expect(checked(wrapper)).toBe(8)
+    expect(
+      radios(wrapper).filter((radio) => radio.attributes('aria-checked') === 'true'),
+    ).toHaveLength(1)
+  })
+
+  it('checks no cell for null', () => {
+    const wrapper = mountAnchor(null)
+
+    expect(checked(wrapper)).toBe(-1)
+  })
+
+  describe('roving tabindex', () => {
+    it('has exactly one tab stop, on the chosen cell', () => {
+      const wrapper = mountAnchor({ x: 'left', y: 'top' })
+
+      expect(tabStops(wrapper)).toEqual([0])
+    })
+
+    it('puts the tab stop on the middle while no cell is chosen', () => {
+      const wrapper = mountAnchor(null)
+
+      expect(tabStops(wrapper)).toEqual([4])
+    })
+
+    it('moves the tab stop along with the choice', async () => {
+      const wrapper = mountAnchor(MIDDLE)
+
+      await radios(wrapper)[2].trigger('click')
+
+      expect(tabStops(wrapper)).toEqual([2])
+    })
+  })
+
+  describe('click', () => {
+    it('emits the clicked cell', async () => {
+      const wrapper = mountAnchor(MIDDLE)
+
+      await radios(wrapper)[6].trigger('click')
+
+      expect(wrapper.emitted('update:modelValue')).toEqual([[{ x: 'left', y: 'bottom' }]])
+    })
+
+    it('emits a cell when none was chosen', async () => {
+      const wrapper = mountAnchor(null)
+
+      await radios(wrapper)[4].trigger('click')
+
+      expect(wrapper.emitted('update:modelValue')).toEqual([[MIDDLE]])
+    })
+
+    it('emits nothing for the cell that is already chosen', async () => {
+      const wrapper = mountAnchor({ x: 'right', y: 'top' })
+
+      await radios(wrapper)[2].trigger('click')
+
+      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    })
+  })
+
+  describe('keyboard', () => {
+    it('moves and chooses in two dimensions', async () => {
+      const wrapper = mountAnchor(MIDDLE)
+      ;(radios(wrapper)[4].element as HTMLElement).focus()
+
+      await press(wrapper, 'ArrowUp')
+      expect(checked(wrapper)).toBe(1)
+      await press(wrapper, 'ArrowRight')
+      expect(checked(wrapper)).toBe(2)
+      await press(wrapper, 'ArrowDown')
+      expect(checked(wrapper)).toBe(5)
+      await press(wrapper, 'ArrowLeft')
+      expect(checked(wrapper)).toBe(4)
+
+      expect(document.activeElement).toBe(radios(wrapper)[4].element)
+      expect(wrapper.emitted('update:modelValue')).toEqual([
+        [{ x: 'center', y: 'top' }],
+        [{ x: 'right', y: 'top' }],
+        [{ x: 'right', y: 'center' }],
+        [MIDDLE],
+      ])
+    })
+
+    it('stops at the edge instead of wrapping, and emits nothing there', async () => {
+      const wrapper = mountAnchor({ x: 'left', y: 'top' })
+      ;(radios(wrapper)[0].element as HTMLElement).focus()
+
+      await press(wrapper, 'ArrowLeft')
+      await press(wrapper, 'ArrowUp')
+
+      expect(checked(wrapper)).toBe(0)
+      expect(document.activeElement).toBe(radios(wrapper)[0].element)
+      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+
+      await press(wrapper, 'End')
+      await press(wrapper, 'ArrowRight')
+      await press(wrapper, 'ArrowDown')
+
+      expect(checked(wrapper)).toBe(8)
+      expect(wrapper.emitted('update:modelValue')).toHaveLength(1)
+    })
+
+    it('jumps to top left on Home and to bottom right on End', async () => {
+      const wrapper = mountAnchor(MIDDLE)
+      ;(radios(wrapper)[4].element as HTMLElement).focus()
+
+      await press(wrapper, 'Home')
+      expect(checked(wrapper)).toBe(0)
+      expect(document.activeElement).toBe(radios(wrapper)[0].element)
+
+      await press(wrapper, 'End')
+      expect(checked(wrapper)).toBe(8)
+      expect(document.activeElement).toBe(radios(wrapper)[8].element)
+    })
+
+    it('chooses from the middle when no cell was chosen', async () => {
+      const wrapper = mountAnchor(null)
+      ;(radios(wrapper)[4].element as HTMLElement).focus()
+
+      await press(wrapper, 'ArrowDown')
+
+      expect(wrapper.emitted('update:modelValue')).toEqual([[{ x: 'center', y: 'bottom' }]])
+    })
+
+    // A real, cancelable event: VTU's trigger hides the event it dispatches, so
+    // defaultPrevented could not be read from it.
+    const dispatch = (wrapper: VueWrapper, init: KeyboardEventInit) => {
+      const event = new KeyboardEvent('keydown', { bubbles: true, cancelable: true, ...init })
+      radios(wrapper)[4].element.dispatchEvent(event)
+      return event
+    }
+
+    it('prevents the default of a plain arrow it handles', () => {
+      const wrapper = mountAnchor(MIDDLE)
+
+      expect(dispatch(wrapper, { key: 'ArrowLeft' }).defaultPrevented).toBe(true)
+    })
+
+    it.each([
+      ['Alt+ArrowLeft', { key: 'ArrowLeft', altKey: true }],
+      ['Meta+ArrowRight', { key: 'ArrowRight', metaKey: true }],
+      ['Ctrl+Home', { key: 'Home', ctrlKey: true }],
+      ['Shift+End', { key: 'End', shiftKey: true }],
+    ])('leaves %s to the browser', (_, init) => {
+      const wrapper = mountAnchor(MIDDLE)
+
+      const event = dispatch(wrapper, init)
+
+      expect(event.defaultPrevented).toBe(false)
+      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+      expect(checked(wrapper)).toBe(4)
+    })
+
+    it('leaves other keys alone', async () => {
+      const wrapper = mountAnchor(MIDDLE)
+      ;(radios(wrapper)[4].element as HTMLElement).focus()
+
+      await press(wrapper, 'a')
+
+      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    })
+  })
+
+  describe('disabled', () => {
+    it('disables every cell and marks the group', () => {
+      const wrapper = mountAnchor(MIDDLE, { disabled: true })
+
+      radios(wrapper).forEach((radio) => expect(radio.attributes('disabled')).toBeDefined())
+      expect(wrapper.get('[role="radiogroup"]').attributes('aria-disabled')).toBe('true')
+    })
+
+    it('emits nothing on click or on the keyboard', async () => {
+      const wrapper = mountAnchor(MIDDLE, { disabled: true })
+
+      await radios(wrapper)[0].trigger('click')
+      await radios(wrapper)[4].trigger('keydown', { key: 'End' })
+
+      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    })
+
+    it('leaves aria-disabled off when enabled', () => {
+      const wrapper = mountAnchor(MIDDLE)
+
+      expect(wrapper.get('[role="radiogroup"]').attributes('aria-disabled')).toBeUndefined()
+    })
+  })
+})
+
+// The consumer maps its stored positions onto these cells, so the list is a
+// contract: any change here changes what the app recognises.
+describe('EDITOR_ANCHOR_OPTIONS', () => {
+  it('lists the nine cells in reading order', () => {
+    expect(EDITOR_ANCHOR_OPTIONS).toEqual([
+      { x: 'left', y: 'top' },
+      { x: 'center', y: 'top' },
+      { x: 'right', y: 'top' },
+      { x: 'left', y: 'center' },
+      { x: 'center', y: 'center' },
+      { x: 'right', y: 'center' },
+      { x: 'left', y: 'bottom' },
+      { x: 'center', y: 'bottom' },
+      { x: 'right', y: 'bottom' },
+    ])
+  })
+})
+
+// Recorded before the keyboard moved to the shared useRadioGrid composable: the
+// markup in every state has to stay what it was.
+describe('EditorAnchor markup', () => {
+  it.each<
+    [string, { modelValue: EditorAnchorValue | null; disabled?: boolean; showLabel?: boolean }]
+  >([
+    ['a chosen cell', { modelValue: { x: 'right', y: 'bottom' } }],
+    ['no choice', { modelValue: null }],
+    ['disabled', { modelValue: { x: 'left', y: 'top' }, disabled: true }],
+    ['a visible label', { modelValue: { x: 'center', y: 'center' }, showLabel: true }],
+  ])('renders unchanged with %s', (_, props) => {
+    const wrapper = mount(EditorAnchor, { props, attrs: { 'aria-describedby': 'hint' } })
+
+    expect(wrapper.html()).toMatchSnapshot()
+    wrapper.unmount()
+  })
+})

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

@@ -0,0 +1,87 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+import EditorBackgroundSize from './EditorBackgroundSize.vue'
+import type { EditorBackgroundSizeValue } from './EditorBackgroundSize.vue'
+
+export default {
+  title: 'Components/Editor Components/Molecules/Editor Background Size',
+  component: EditorBackgroundSize,
+  decorators: [() => ({ template: '<div class="w-100 mx-auto"><story /></div>' })],
+  argTypes: {
+    label: { control: 'text' },
+    bare: { control: 'boolean' },
+  },
+} satisfies Meta<typeof EditorBackgroundSize>
+
+type Story = StoryObj<typeof EditorBackgroundSize>
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { EditorBackgroundSize },
+    setup() {
+      const size = ref<EditorBackgroundSizeValue>('bg-cover')
+      return { args, size }
+    },
+    // The value is shown as-is: it is the Tailwind class the editor applies.
+    template: `
+      <div>
+        <EditorBackgroundSize v-bind="args" v-model="size" />
+        <p class="small-normal text-gray-700">{{ size }}</p>
+      </div>
+    `,
+  }),
+}
+
+export const CustomMessages: Story = {
+  args: {
+    label: 'Fit',
+    messages: { cover: 'Cover', contain: 'Contain', auto: 'Original' },
+  },
+  render: (args) => ({
+    components: { EditorBackgroundSize },
+    setup() {
+      const size = ref<EditorBackgroundSizeValue>('bg-cover')
+      return { args, size }
+    },
+    template: `<EditorBackgroundSize v-bind="args" v-model="size" />`,
+  }),
+}
+
+/**
+ * A subset: the editor offers only these two here. Passed as contain, cover, and
+ * still shown in the canonical order, cover first.
+ */
+export const Subset: Story = {
+  args: { options: ['bg-contain', 'bg-cover'] },
+  render: (args) => ({
+    components: { EditorBackgroundSize },
+    setup() {
+      const size = ref<EditorBackgroundSizeValue>('bg-cover')
+      return { args, size }
+    },
+    template: `<EditorBackgroundSize v-bind="args" v-model="size" />`,
+  }),
+}
+
+/**
+ * Only the options, for a consumer that renders its own block around them. The
+ * header and explanation here are the consumer's; the label still names the
+ * toolbar for assistive technology.
+ */
+export const Bare: Story = {
+  args: { bare: true, label: 'Weergave' },
+  render: (args) => ({
+    components: { EditorBackgroundSize },
+    setup() {
+      const size = ref<EditorBackgroundSizeValue>('bg-auto')
+      return { args, size }
+    },
+    template: `
+      <div>
+        <p class="small-normal mb-1 text-gray-900">Weergave</p>
+        <p class="extra-small-normal mb-2 text-gray-700">Hoe de afbeelding het blok vult.</p>
+        <EditorBackgroundSize v-bind="args" v-model="size" />
+      </div>
+    `,
+  }),
+}