@nexxtmove/ui 2.6.0 → 2.7.0

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

@@ -0,0 +1,206 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { expect, userEvent, waitFor, within } from 'storybook/test'
+import { computed, ref } from 'vue'
+import EditorOverrideStatus from './EditorOverrideStatus.vue'
+import EditorColor from '../EditorColor/EditorColor.vue'
+import type { EditorColorThemeRole, EditorColorValue } from '../EditorColor/EditorColor.vue'
+import EditorRadius from '../EditorRadius/EditorRadius.vue'
+import type { EditorRadiusValue } from '../EditorRadius/EditorRadius.vue'
+import Slider from '../../../atoms/Slider/Slider.vue'
+
+export default {
+  title: 'Components/Editor Components/Molecules/Editor Override Status',
+  component: EditorOverrideStatus,
+  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' },
+  },
+} satisfies Meta<typeof EditorOverrideStatus>
+
+type Story = StoryObj<typeof EditorOverrideStatus>
+
+const THEME_ROLES: EditorColorThemeRole[] = [
+  { role: 'main', label: 'Hoofdkleur', hex: '#1777EA' },
+  { role: 'accent', label: 'Accentkleur', hex: '#F59E0B' },
+]
+
+/**
+ * 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)
+}
+
+/**
+ * The house-style line under a colour: always a status, a reset while the
+ * colour is the customer's own. Starts changed, so the reset is there.
+ */
+export const Theme: Story = {
+  render: () => ({
+    components: { EditorOverrideStatus, EditorColor },
+    setup() {
+      const color = ref<EditorColorValue>('bg-[#E11D48]')
+      const overridden = computed(() => color.value !== 'bg-theme-main')
+      const reset = () => (color.value = 'bg-theme-main')
+      return { color, overridden, reset, THEME_ROLES }
+    },
+    template: `
+      <EditorOverrideStatus
+        :overridden="overridden"
+        label="Volgt huisstijl"
+        reset-label="Terug naar huisstijl"
+        @reset="reset"
+      >
+        <EditorColor v-model="color" label="Achtergrond" :theme-roles="THEME_ROLES" />
+      </EditorOverrideStatus>
+    `,
+  }),
+  // The ring is measured on the reset button, reached by keyboard: a ring that
+  // never shows, or one too faint on white, passes every other check.
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const reset = canvas.getByRole('button', { name: 'Terug naar huisstijl' })
+
+    await userEvent.tab()
+    await userEvent.tab()
+
+    await expect(reset).toHaveFocus()
+    await expect(reset.matches(':focus-visible')).toBe(true)
+    const style = getComputedStyle(reset)
+    await expect(style.outlineStyle).not.toBe('none')
+    await expect(contrast(style.outlineColor, 'rgb(255, 255, 255)')).toBeGreaterThanOrEqual(3)
+
+    await userEvent.keyboard('{Enter}')
+
+    await waitFor(() => expect(canvas.getByText('Volgt huisstijl')).toBeInTheDocument())
+    await expect(canvas.queryByRole('button', { name: 'Terug naar huisstijl' })).toBeNull()
+    await expect(document.activeElement).not.toBe(document.body)
+    await expect(document.activeElement).toHaveAttribute('aria-haspopup')
+  },
+}
+
+/** The same line for a fixed standard of the element itself, under a slider. */
+export const Standard: Story = {
+  render: () => ({
+    components: { EditorOverrideStatus, EditorRadius },
+    setup() {
+      const radius = ref<EditorRadiusValue>('rounded-2xl')
+      const overridden = computed(() => radius.value !== 'rounded-lg')
+      const reset = () => (radius.value = 'rounded-lg')
+      return { radius, overridden, reset }
+    },
+    template: `
+      <EditorOverrideStatus
+        :overridden="overridden"
+        label="Standaard"
+        reset-label="Terug naar standaard"
+        @reset="reset"
+      >
+        <EditorRadius v-model="radius" />
+      </EditorOverrideStatus>
+    `,
+  }),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+
+    await userEvent.click(canvas.getByRole('button', { name: 'Terug naar standaard' }))
+
+    await waitFor(() => expect(canvas.getByText('Standaard')).toBeInTheDocument())
+    await expect(canvas.getByRole('slider')).toHaveFocus()
+  },
+}
+
+/**
+ * The mobile marker: nothing while the phone follows the desktop, a line with a
+ * reset while it differs. After the reset the line goes, and the focus goes to
+ * the slider rather than to `body`.
+ */
+export const Mobile: Story = {
+  render: () => ({
+    components: { EditorOverrideStatus, EditorRadius },
+    setup() {
+      const desktop: EditorRadiusValue = 'rounded-lg'
+      const radius = ref<EditorRadiusValue>('rounded-none')
+      const overridden = computed(() => radius.value !== desktop)
+      const reset = () => (radius.value = desktop)
+      return { radius, overridden, reset }
+    },
+    template: `
+      <EditorOverrideStatus
+        :overridden="overridden"
+        hide-when-default
+        label="Gelijk aan desktop"
+        overridden-label="Aangepast voor mobiel"
+        reset-label="Terug naar desktop"
+        @reset="reset"
+      >
+        <EditorRadius v-model="radius" />
+      </EditorOverrideStatus>
+    `,
+  }),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+
+    await expect(canvas.getByText('Aangepast voor mobiel')).toBeInTheDocument()
+    await userEvent.click(canvas.getByRole('button', { name: 'Terug naar desktop' }))
+
+    await waitFor(() => expect(canvas.queryByText('Aangepast voor mobiel')).toBeNull())
+    await expect(canvas.queryByRole('button', { name: 'Terug naar desktop' })).toBeNull()
+    await expect(canvas.getByRole('slider')).toHaveFocus()
+  },
+}
+
+/**
+ * The size line of a background image: the zoom as a share of the image's own
+ * size, with the value in the overridden label.
+ */
+export const Size: Story = {
+  render: () => ({
+    components: { EditorOverrideStatus, Slider },
+    setup() {
+      const zoom = ref([150])
+      const overridden = computed(() => zoom.value[0] !== 100)
+      const reset = () => (zoom.value = [100])
+      return { zoom, overridden, reset }
+    },
+    template: `
+      <EditorOverrideStatus
+        :overridden="overridden"
+        label="Grootte 100% (origineel)"
+        :overridden-label="'Grootte ' + zoom[0] + '%'"
+        reset-label="Terug naar 100%"
+        @reset="reset"
+      >
+        <Slider v-model="zoom" aria-label="Grootte" :min="25" :max="300" :step="5" />
+      </EditorOverrideStatus>
+    `,
+  }),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+
+    await expect(canvas.getByText('Grootte 150%')).toBeInTheDocument()
+    await userEvent.click(canvas.getByRole('button', { name: 'Terug naar 100%' }))
+
+    await waitFor(() => expect(canvas.getByText('Grootte 100% (origineel)')).toBeInTheDocument())
+    await expect(canvas.getByRole('slider')).toHaveFocus()
+  },
+}

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

@@ -0,0 +1,332 @@
+import { describe, it, expect, afterEach, vi } from 'vitest'
+import { flushPromises, mount, type VueWrapper } from '@vue/test-utils'
+import { defineComponent, h, ref, nextTick } from 'vue'
+import EditorOverrideStatus from './EditorOverrideStatus.vue'
+
+const mounted: VueWrapper[] = []
+
+afterEach(() => {
+  mounted.splice(0).forEach((wrapper) => wrapper.unmount())
+  vi.useRealTimers()
+})
+
+const BASE = { label: 'Volgt huisstijl', resetLabel: 'Terug naar huisstijl' }
+
+const mountStatus = (props: Record<string, unknown> = {}, slot?: string) => {
+  const wrapper = mount(EditorOverrideStatus, {
+    props: { overridden: false, ...BASE, ...props },
+    slots: slot ? { default: slot } : {},
+    attachTo: document.body,
+  })
+  mounted.push(wrapper)
+  return wrapper
+}
+
+/**
+ * A parent that owns the override and clears it on reset, as a consumer does:
+ * the reset button then leaves the DOM in the same update.
+ */
+const mountWithParent = (
+  props: Record<string, unknown> = {},
+  slot = '<button>Kleur</button>',
+  errorHandler = vi.fn(),
+) => {
+  const overridden = ref(true)
+  const onReset = vi.fn(() => (overridden.value = false))
+  const Parent = defineComponent({
+    setup: () => () =>
+      h(
+        EditorOverrideStatus,
+        {
+          ...BASE,
+          ...props,
+          overridden: overridden.value,
+          onReset,
+        },
+        { default: () => h('div', { innerHTML: slot }) },
+      ),
+  })
+  // Vue routes a rejected async handler to the app's errorHandler, so a spy
+  // there is where an error thrown during the reset would surface.
+  const wrapper = mount(Parent, { attachTo: document.body, global: { config: { errorHandler } } })
+  mounted.push(wrapper)
+  return { wrapper, overridden, onReset, errorHandler }
+}
+
+const resetButton = (wrapper: VueWrapper) =>
+  wrapper.findAll('button').find((button) => button.text() === BASE.resetLabel)
+
+const pressReset = async (wrapper: VueWrapper) => {
+  const button = resetButton(wrapper)
+  if (!button) throw new Error('No reset button')
+  ;(button.element as HTMLElement).focus()
+  await button.trigger('click')
+  await nextTick()
+}
+
+describe('EditorOverrideStatus', () => {
+  describe('not overridden', () => {
+    it('shows the label and no reset button', () => {
+      const wrapper = mountStatus()
+
+      expect(wrapper.text()).toContain('Volgt huisstijl')
+      expect(wrapper.text()).not.toContain('Aangepast')
+      expect(resetButton(wrapper)).toBeUndefined()
+    })
+
+    it('renders the slot above the status line', () => {
+      const wrapper = mountStatus({}, '<input aria-label="Waarde" />')
+
+      expect(wrapper.element.firstElementChild?.tagName).toBe('INPUT')
+    })
+  })
+
+  describe('overridden', () => {
+    it('shows the Dutch default status and the reset button', () => {
+      const wrapper = mountStatus({ overridden: true })
+
+      expect(wrapper.text()).toContain('Aangepast')
+      expect(wrapper.text()).not.toContain('Volgt huisstijl')
+      expect(resetButton(wrapper)?.attributes('type')).toBe('button')
+    })
+
+    it('shows a custom overridden label', () => {
+      const wrapper = mountStatus({ overridden: true, overriddenLabel: 'Grootte 150%' })
+
+      expect(wrapper.text()).toContain('Grootte 150%')
+    })
+
+    it('hides the dot from assistive technology', () => {
+      const wrapper = mountStatus({ overridden: true })
+      const dot = wrapper.find('span[aria-hidden="true"]')
+
+      expect(dot.exists()).toBe(true)
+      expect(dot.text()).toBe('')
+    })
+
+    it('emits reset when the button is pressed', async () => {
+      const wrapper = mountStatus({ overridden: true })
+
+      await resetButton(wrapper)!.trigger('click')
+
+      expect(wrapper.emitted('reset')).toEqual([[]])
+    })
+  })
+
+  describe('hideWhenDefault', () => {
+    it('renders no status line while not overridden', () => {
+      const wrapper = mountStatus({ hideWhenDefault: true }, '<input aria-label="Waarde" />')
+
+      expect(wrapper.text()).toBe('')
+      expect(wrapper.findAll('button')).toHaveLength(0)
+      expect(wrapper.find('input').exists()).toBe(true)
+    })
+
+    it('renders the line while overridden', () => {
+      const wrapper = mountStatus({ hideWhenDefault: true, overridden: true })
+
+      expect(wrapper.text()).toContain('Aangepast')
+      expect(resetButton(wrapper)).toBeDefined()
+    })
+  })
+
+  describe('focus after a reset', () => {
+    it('goes to the first focusable element in the slot', async () => {
+      const { wrapper } = mountWithParent(
+        {},
+        '<span>Kleur</span><button disabled>Uit</button><button id="first">Kleur kiezen</button><button>Tweede</button>',
+      )
+
+      await pressReset(wrapper)
+
+      expect(resetButton(wrapper)).toBeUndefined()
+      expect(document.activeElement?.id).toBe('first')
+    })
+
+    it('skips the cells a roving tabindex takes out of the tab order', async () => {
+      const { wrapper } = mountWithParent(
+        {},
+        '<button tabindex="-1">A</button><button id="stop" tabindex="0">B</button>',
+      )
+
+      await pressReset(wrapper)
+
+      expect(document.activeElement?.id).toBe('stop')
+    })
+
+    it('goes to the focusTarget when it is given', async () => {
+      const { wrapper } = mountWithParent(
+        { focusTarget: '[role="slider"]' },
+        '<button>Eerst</button><span id="thumb" role="slider" tabindex="0" aria-label="Dikte" aria-valuenow="2"></span>',
+      )
+
+      await pressReset(wrapper)
+
+      expect(document.activeElement?.id).toBe('thumb')
+    })
+
+    it('falls back to the first focusable element when the focusTarget matches nothing', async () => {
+      const { wrapper } = mountWithParent(
+        { focusTarget: '[role="slider"]' },
+        '<button id="first">Kleur kiezen</button>',
+      )
+
+      await pressReset(wrapper)
+
+      expect(document.activeElement?.id).toBe('first')
+    })
+
+    it('falls back to the component itself when the slot has nothing focusable', async () => {
+      const { wrapper } = mountWithParent({ hideWhenDefault: true }, '<span>Alleen tekst</span>')
+      const root = wrapper.findComponent(EditorOverrideStatus).element as HTMLElement
+
+      await pressReset(wrapper)
+
+      expect(document.activeElement).toBe(root)
+      expect(root.getAttribute('tabindex')).toBe('-1')
+
+      root.blur()
+      expect(root.hasAttribute('tabindex')).toBe(false)
+    })
+
+    // `'[role=slider'` is no test case: CSS closes an open bracket at the end, so
+    // both Chromium and jsdom accept it. A dangling colon does throw.
+    it('still emits and falls back when the focusTarget is not a valid selector', async () => {
+      const warn = vi.spyOn(console, 'warn').mockImplementation(() => {})
+      const { wrapper, onReset, errorHandler } = mountWithParent(
+        { focusTarget: 'button:' },
+        '<button id="first">Kleur kiezen</button>',
+      )
+
+      await pressReset(wrapper)
+      await flushPromises()
+
+      expect(onReset).toHaveBeenCalledOnce()
+      expect(document.activeElement?.id).toBe('first')
+      expect(errorHandler).not.toHaveBeenCalled()
+      expect(warn).toHaveBeenCalledWith(expect.stringContaining('"button:"'))
+      warn.mockRestore()
+    })
+
+    it('takes the temporary tabindex off again when the root cannot take the focus', async () => {
+      const { wrapper } = mountWithParent({ hideWhenDefault: true }, '<span>Alleen tekst</span>')
+      const root = wrapper.findComponent(EditorOverrideStatus).element as HTMLElement
+      // A root that refuses the focus, as a hidden one would.
+      root.focus = () => {}
+
+      await pressReset(wrapper)
+
+      expect(document.activeElement).not.toBe(root)
+      expect(root.hasAttribute('tabindex')).toBe(false)
+    })
+
+    it('never leaves the focus on body, in any variant', async () => {
+      const variants = [
+        [{}, '<button>Kleur</button>'],
+        [{ hideWhenDefault: true }, '<button>Kleur</button>'],
+        [{ focusTarget: '.missing' }, '<span>Tekst</span>'],
+        [{ hideWhenDefault: true }, ''],
+      ] as const
+
+      for (const [props, slot] of variants) {
+        const { wrapper } = mountWithParent(props, slot)
+
+        await pressReset(wrapper)
+
+        expect(document.activeElement).not.toBe(document.body)
+        expect(wrapper.element.contains(document.activeElement)).toBe(true)
+      }
+    })
+
+    // A control that the reset re-renders loses the focus a second time; the
+    // check after the update catches that.
+    it('refocuses when the reset replaces the control', async () => {
+      const overridden = ref(true)
+      const Parent = defineComponent({
+        setup: () => () =>
+          h(
+            EditorOverrideStatus,
+            {
+              ...BASE,
+              overridden: overridden.value,
+              onReset: () => (overridden.value = false),
+            },
+            {
+              default: () => h('button', { key: String(overridden.value), id: 'control' }, 'Kleur'),
+            },
+          ),
+      })
+      const wrapper = mount(Parent, { attachTo: document.body })
+      mounted.push(wrapper)
+
+      await pressReset(wrapper)
+
+      expect(document.activeElement?.id).toBe('control')
+      expect(document.activeElement?.isConnected).toBe(true)
+    })
+  })
+
+  describe('announcements', () => {
+    const region = (wrapper: VueWrapper) => wrapper.get('[role="status"]')
+
+    it('announces the new status after a reset, then clears it', async () => {
+      vi.useFakeTimers()
+      const { wrapper } = mountWithParent()
+
+      await pressReset(wrapper)
+
+      expect(region(wrapper).text()).toBe('Volgt huisstijl')
+
+      vi.advanceTimersByTime(1000)
+      await nextTick()
+      expect(region(wrapper).text()).toBe('')
+    })
+
+    it('announces a change made in the control', async () => {
+      const wrapper = mountStatus({}, '<input aria-label="Waarde" />')
+      ;(wrapper.get('input').element as HTMLElement).focus()
+
+      await wrapper.setProps({ overridden: true })
+
+      expect(region(wrapper).text()).toBe('Aangepast')
+    })
+
+    // The control announces its own value; "Grootte 110%" on every arrow key
+    // would only repeat it.
+    it('stays silent when only the overridden label changes', async () => {
+      const wrapper = mountStatus(
+        { overridden: true, overriddenLabel: 'Grootte 105%' },
+        '<input aria-label="Grootte" />',
+      )
+      ;(wrapper.get('input').element as HTMLElement).focus()
+
+      await wrapper.setProps({ overriddenLabel: 'Grootte 110%' })
+
+      expect(region(wrapper).text()).toBe('')
+    })
+
+    it('announces the label that belongs to the new state on a reset', async () => {
+      const wrapper = mountStatus(
+        {
+          overridden: true,
+          overriddenLabel: 'Grootte 110%',
+          label: 'Grootte 100% (origineel)',
+        },
+        '<input aria-label="Grootte" />',
+      )
+      ;(wrapper.get('input').element as HTMLElement).focus()
+
+      await wrapper.setProps({ overridden: false })
+
+      expect(region(wrapper).text()).toBe('Grootte 100% (origineel)')
+    })
+
+    it('stays silent when the status changes while the focus is elsewhere', async () => {
+      const wrapper = mountStatus({}, '<input aria-label="Waarde" />')
+
+      await wrapper.setProps({ overridden: true })
+
+      expect(region(wrapper).text()).toBe('')
+    })
+  })
+})