From 4421fce7ca3be5ab9aef619593f73643f8764132 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:23:45 +0200
Subject: [PATCH 1/8] feat: move a block one step and read out where it went

A question steps into a group next to it and out at its ends; a group
steps over a whole block. A polite live region says the new position.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Factory/Document/FormDocument.test.ts     |  17 +++
 .../Factory/Document/FormDocument.vue         |   2 +
 .../Factory/Document/blockMove.test.ts        | 106 ++++++++++++++
 .../components/Factory/Document/blockMove.ts  | 130 ++++++++++++++++++
 4 files changed, 255 insertions(+)
 create mode 100644 resources/js/components/Factory/Document/blockMove.test.ts
 create mode 100644 resources/js/components/Factory/Document/blockMove.ts

diff --git a/resources/js/components/Factory/Document/FormDocument.test.ts b/resources/js/components/Factory/Document/FormDocument.test.ts
index 072f8a9f..847160e0 100644
--- a/resources/js/components/Factory/Document/FormDocument.test.ts
+++ b/resources/js/components/Factory/Document/FormDocument.test.ts
@@ -2,6 +2,7 @@ import { flushPromises, mount, VueWrapper } from "@vue/test-utils";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { useForm, useWorkbench } from "@/stores";
 import FormDocument from "./FormDocument.vue";
+import { moveNote } from "./blockMove";
 
 const blocks = [
     { id: 1, uuid: "b1", type: "none", message: "<p>Welcome</p>" },
@@ -63,4 +64,20 @@ describe("the form document", () => {
         expect(useWorkbench().putOnWorkbench).toHaveBeenCalledWith(blocks[1]);
         expect(scrolled).toHaveBeenCalledWith("row-b2", "start");
     });
+
+    it("reads out where a moved question went", async () => {
+        useForm().blocks = blocks;
+        wrapper = mount(FormDocument, {
+            props: { status: "loaded" },
+            global: { stubs },
+            attachTo: document.body,
+        });
+
+        moveNote.value = "Moved to position 2 of 2";
+        await wrapper.vm.$nextTick();
+
+        expect(
+            document.querySelector("[aria-live=polite]")?.textContent,
+        ).toBe("Moved to position 2 of 2");
+    });
 });
diff --git a/resources/js/components/Factory/Document/FormDocument.vue b/resources/js/components/Factory/Document/FormDocument.vue
index 1348e8b5..360e887a 100644
--- a/resources/js/components/Factory/Document/FormDocument.vue
+++ b/resources/js/components/Factory/Document/FormDocument.vue
@@ -95,6 +95,7 @@
     </DialogPanel>
   </Dialog>
   <BlockLogicEditor />
+  <p class="sr-only" aria-live="polite">{{ moveNote }}</p>
 </template>
 
 <script setup lang="ts">
@@ -108,6 +109,7 @@ import BlockLogicEditor from "@/components/Factory/Sidebar/BlockLogicEditor.vue"
 import DocumentList from "./DocumentList.vue";
 import DocumentOutline from "./DocumentOutline.vue";
 import { questionNumbers } from "./questionSummary";
+import { moveNote } from "./blockMove";
 import {
   cursorFor,
   focusBlock,
diff --git a/resources/js/components/Factory/Document/blockMove.test.ts b/resources/js/components/Factory/Document/blockMove.test.ts
new file mode 100644
index 00000000..f6dfe996
--- /dev/null
+++ b/resources/js/components/Factory/Document/blockMove.test.ts
@@ -0,0 +1,106 @@
+import { createPinia, setActivePinia } from "pinia";
+import { nextTick } from "vue";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { useForm } from "@/stores";
+import { moveNote, useMoveBlock } from "./blockMove";
+
+vi.mock("@/api/blocks", async (original) => ({
+    ...(await original<object>()),
+    callUpdateBlockSequence: vi.fn().mockResolvedValue({ status: 204 }),
+}));
+
+const make = () =>
+    [
+        { id: 1, uuid: "q1", type: "radio" },
+        { id: 2, uuid: "q2", type: "radio" },
+        { id: 3, uuid: "g1", type: "group", title: "Food" },
+        { id: 4, uuid: "c1", type: "radio", parent_block: "g1" },
+        { id: 5, uuid: "c2", type: "radio", parent_block: "g1" },
+        { id: 6, uuid: "q3", type: "radio" },
+    ] as FormBlockModel[];
+
+// the document's order: top-level blocks, a group's questions after it
+const order = () => {
+    const blocks = useForm().blocks ?? [];
+
+    return blocks
+        .filter((block) => !block.parent_block)
+        .map((block) =>
+            block.type === "group"
+                ? `${block.uuid}[${blocks
+                      .filter((child) => child.parent_block === block.uuid)
+                      .map((child) => child.uuid)
+                      .join(" ")}]`
+                : block.uuid,
+        )
+        .join(" ");
+};
+
+const move = async (uuid: string, step: -1 | 1) => {
+    const block = useForm().blocks!.find((item) => item.uuid === uuid)!;
+    const moved = await useMoveBlock().moveBlock(block, step);
+    await nextTick();
+
+    return moved;
+};
+
+describe("moving a block one step", () => {
+    beforeEach(() => {
+        setActivePinia(createPinia());
+        useForm().form = { uuid: "f1" } as FormModel;
+        useForm().blocks = make();
+    });
+
+    it("swaps a question with its neighbour and says where it went", async () => {
+        expect(await move("q1", 1)).toBe(true);
+
+        expect(order()).toBe("q2 q1 g1[c1 c2] q3");
+        expect(moveNote.value).toBe("Moved to position 2 of 5");
+    });
+
+    it("steps a question into a group next to it", async () => {
+        await move("q2", 1);
+        expect(order()).toBe("q1 g1[q2 c1 c2] q3");
+        expect(moveNote.value).toBe("Moved into group Food, to position 2 of 5");
+
+        await move("q3", -1);
+        expect(order()).toBe("q1 g1[q2 c1 c2 q3]");
+        expect(moveNote.value).toBe("Moved into group Food, to position 5 of 5");
+    });
+
+    it("steps a question out at the ends of its group", async () => {
+        await move("c1", -1);
+        expect(order()).toBe("q1 q2 c1 g1[c2] q3");
+        expect(moveNote.value).toBe(
+            "Moved out of group Food, to position 3 of 5",
+        );
+
+        await move("c2", 1);
+        expect(order()).toBe("q1 q2 c1 g1[] c2 q3");
+        expect(moveNote.value).toBe(
+            "Moved out of group Food, to position 4 of 5",
+        );
+    });
+
+    it("moves a group over a whole block, with its questions", async () => {
+        await move("g1", -1);
+
+        expect(order()).toBe("q1 g1[c1 c2] q2 q3");
+        expect(moveNote.value).toBe("Moved group Food to position 2 of 4");
+    });
+
+    it("stays put at the top and the bottom, and says so", async () => {
+        const { canMove } = useMoveBlock();
+        const [first, , , , , last] = useForm().blocks!;
+
+        expect(canMove(first, -1)).toBe(false);
+        expect(canMove(last, 1)).toBe(false);
+        expect(canMove(first, 1)).toBe(true);
+
+        expect(await move("q1", -1)).toBe(false);
+        expect(moveNote.value).toBe("Already at the top");
+        expect(await move("q3", 1)).toBe(false);
+        expect(moveNote.value).toBe("Already at the bottom");
+        expect(order()).toBe("q1 q2 g1[c1 c2] q3");
+    });
+});
diff --git a/resources/js/components/Factory/Document/blockMove.ts b/resources/js/components/Factory/Document/blockMove.ts
new file mode 100644
index 00000000..009451e4
--- /dev/null
+++ b/resources/js/components/Factory/Document/blockMove.ts
@@ -0,0 +1,130 @@
+import { nextTick, ref } from "vue";
+import { useForm, useWorkbench } from "@/stores";
+import { questionNumbers } from "./questionSummary";
+import { cursorFor } from "./blockFocus";
+
+// what the document's live region says after a move
+export const moveNote = ref("");
+
+type Step = -1 | 1;
+
+// where one step takes a block: a question steps into a group next to it and
+// out at its ends, a group steps over a whole block
+function stepTarget(
+    blocks: FormBlockModel[],
+    block: FormBlockModel,
+    step: Step,
+): { scope: string | null; index: number } | null {
+    const inScope = (parent: string | null) =>
+        blocks.filter((item) => (item.parent_block ?? null) === parent);
+    const parent = block.parent_block ?? null;
+    const siblings = inScope(parent);
+    const index = siblings.findIndex((item) => item.id === block.id) + step;
+    const next = siblings[index];
+
+    if (block.type !== "group") {
+        if (parent && !next) {
+            const group = inScope(null).findIndex(
+                (item) => item.uuid === parent,
+            );
+
+            return { scope: null, index: group + (step > 0 ? 1 : 0) };
+        }
+
+        if (!parent && next?.type === "group") {
+            return {
+                scope: next.uuid,
+                index: step > 0 ? 0 : inScope(next.uuid).length,
+            };
+        }
+    }
+
+    return next ? { scope: parent, index } : null;
+}
+
+export function useMoveBlock() {
+    const store = useForm();
+    const workbench = useWorkbench();
+
+    const canMove = (block: FormBlockModel, step: Step) =>
+        stepTarget(store.blocks ?? [], block, step) !== null;
+
+    const say = async (text: string) => {
+        // a repeated text is only read out again after a change
+        moveNote.value = "";
+        await nextTick();
+        moveNote.value = text;
+    };
+
+    const moveBlock = async (block: FormBlockModel, step: Step) => {
+        const target = stepTarget(store.blocks ?? [], block, step);
+
+        if (!target) {
+            await say(step < 0 ? "Already at the top" : "Already at the bottom");
+            return false;
+        }
+
+        const from = block.parent_block ?? null;
+        const focused = document.activeElement as HTMLElement | null;
+
+        store.changeBlockSequence(target.scope ?? false, target.index, block);
+        await nextTick();
+
+        // a moved element loses focus; one in another list is a new element
+        if (focused?.isConnected) {
+            focused.focus();
+        } else if (workbench.block?.id === block.id) {
+            cursorFor.value = block.uuid;
+        } else {
+            document
+                .getElementById(`row-${block.uuid}`)
+                ?.querySelector<HTMLElement>(":scope > button")
+                ?.focus();
+        }
+
+        const blocks = store.blocks ?? [];
+        const numbers = questionNumbers(blocks);
+        const top = blocks.filter((item) => !item.parent_block);
+        const groupName = (uuid: string | null) =>
+            blocks.find((item) => item.uuid === uuid)?.title || "Group";
+
+        if (block.type === "group") {
+            await say(
+                `Moved group ${groupName(block.uuid)} to position ${top.findIndex((item) => item.id === block.id) + 1} of ${top.length}`,
+            );
+            return true;
+        }
+
+        const to = `to position ${numbers[block.uuid]} of ${Object.keys(numbers).length}`;
+
+        if (target.scope === from) {
+            await say(`Moved ${to}`);
+        } else if (target.scope) {
+            await say(`Moved into group ${groupName(target.scope)}, ${to}`);
+        } else {
+            await say(`Moved out of group ${groupName(from)}, ${to}`);
+        }
+
+        return true;
+    };
+
+    // Alt+Up/Down moves a block
+    const onMoveKey = (event: KeyboardEvent, block: FormBlockModel) => {
+        const step = { ArrowUp: -1, ArrowDown: 1 }[event.key] as Step;
+
+        if (
+            !step ||
+            !event.altKey ||
+            event.shiftKey ||
+            event.ctrlKey ||
+            event.metaKey
+        ) {
+            return;
+        }
+
+        event.preventDefault();
+        moveBlock(block, step);
+    };
+
+    return { canMove, moveBlock, onMoveKey };
+}

From 51aee378fbdb8a9708dadc87999afef400d0bcc0 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:23:49 +0200
Subject: [PATCH 2/8] feat: move a question or group with Alt+Up/Down, close a
 question with Escape

Escape gives focus back to the question's row. A key a select or menu
inside the card already handled stays theirs.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Factory/Document/DocumentGroup.vue        |  3 +
 .../Factory/Document/DocumentQuestion.test.ts | 96 ++++++++++++++++++-
 .../Factory/Document/DocumentQuestion.vue     | 24 ++++-
 3 files changed, 117 insertions(+), 6 deletions(-)

diff --git a/resources/js/components/Factory/Document/DocumentGroup.vue b/resources/js/components/Factory/Document/DocumentGroup.vue
index 715801ff..36a11dd4 100644
--- a/resources/js/components/Factory/Document/DocumentGroup.vue
+++ b/resources/js/components/Factory/Document/DocumentGroup.vue
@@ -7,6 +7,7 @@
   >
     <div
       class="group/header flex flex-wrap items-center gap-x-2 gap-y-1 pb-2 pl-3 sm:pl-1"
+      @keydown="!$event.defaultPrevented && onMoveKey($event, group)"
     >
       <span
         aria-hidden="true"
@@ -76,6 +77,7 @@ import { useForm, useLogic, useWorkbench } from "@/stores";
 import BlockMenu from "./BlockMenu.vue";
 import DocumentList from "./DocumentList.vue";
 import { useAddBlock } from "./blockFocus";
+import { useMoveBlock } from "./blockMove";
 
 const props = defineProps<{
   group: FormBlockModel;
@@ -86,6 +88,7 @@ const store = useForm();
 const workbench = useWorkbench();
 const logic = useLogic();
 const { addBlock } = useAddBlock();
+const { onMoveKey } = useMoveBlock();
 
 const id = computed(() => `group-${props.group.uuid}`);
 const isOpen = computed(() => workbench.block?.id === props.group.id);
diff --git a/resources/js/components/Factory/Document/DocumentQuestion.test.ts b/resources/js/components/Factory/Document/DocumentQuestion.test.ts
index 2d94d4ff..94ae68c5 100644
--- a/resources/js/components/Factory/Document/DocumentQuestion.test.ts
+++ b/resources/js/components/Factory/Document/DocumentQuestion.test.ts
@@ -1,6 +1,6 @@
-import { mount } from "@vue/test-utils";
-import { beforeEach, describe, expect, it } from "vitest";
-import { useWorkbench } from "@/stores";
+import { flushPromises, mount } from "@vue/test-utils";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { useForm, useWorkbench } from "@/stores";
 import DocumentQuestion from "./DocumentQuestion.vue";
 
 const question = {
@@ -22,11 +22,27 @@ const question = {
 const mountQuestion = (block = question) =>
     mount(DocumentQuestion, {
         props: { block, number: 3 },
-        global: { stubs: { QuestionCard: { template: "<div>card</div>" } } },
+        global: {
+            stubs: {
+                QuestionCard: {
+                    template: `<div tabindex="-1" class="card">card</div>`,
+                },
+            },
+        },
+        attachTo: document.body,
     });
 
 describe("a closed question in the document", () => {
-    beforeEach(() => useWorkbench().$reset());
+    beforeEach(() => {
+        // the shared test store keeps its spies' calls
+        vi.clearAllMocks();
+        useWorkbench().$reset();
+        useForm().$reset();
+    });
+
+    afterEach(() => {
+        document.body.innerHTML = "";
+    });
 
     it("shows its number, text and a meta line, never its random id", () => {
         const text = mountQuestion().find("button").text();
@@ -62,4 +78,74 @@ describe("a closed question in the document", () => {
         expect(wrapper.text()).toContain("card");
         expect(wrapper.find("button").exists()).toBe(false);
     });
+
+    it("moves with Alt+Up/Down, closed or open", async () => {
+        const store = useForm();
+        const workbench = useWorkbench();
+        const next = { id: 8, uuid: "next", type: "radio" } as FormBlockModel;
+        store.blocks = [question, next];
+        const wrapper = mountQuestion();
+
+        await wrapper.find("button").trigger("keydown", {
+            key: "ArrowDown",
+            altKey: true,
+        });
+        expect(store.changeBlockSequence).toHaveBeenCalledWith(
+            false,
+            1,
+            question,
+        );
+
+        workbench.block = question;
+        await wrapper.vm.$nextTick();
+        await wrapper.find(".card").trigger("keydown", {
+            key: "ArrowUp",
+            altKey: true,
+        });
+        // already first: nothing moves
+        expect(store.changeBlockSequence).toHaveBeenCalledTimes(1);
+
+        // a plain arrow or one with Shift is the text field's
+        await wrapper.find(".card").trigger("keydown", { key: "ArrowDown" });
+        await wrapper.find(".card").trigger("keydown", {
+            key: "ArrowDown",
+            altKey: true,
+            shiftKey: true,
+        });
+        expect(store.changeBlockSequence).toHaveBeenCalledTimes(1);
+    });
+
+    it("closes with Escape and gives focus back to its row", async () => {
+        const workbench = useWorkbench();
+        vi.mocked(workbench.clearWorkbench).mockImplementation(() => {
+            workbench.block = null;
+        });
+        workbench.block = question;
+        const wrapper = mountQuestion();
+
+        await wrapper.find(".card").trigger("keydown", { key: "Escape" });
+        await flushPromises();
+
+        expect(workbench.clearWorkbench).toHaveBeenCalled();
+        expect(document.activeElement?.tagName).toBe("BUTTON");
+        expect(document.activeElement?.textContent).toContain(
+            "Which days can you help?",
+        );
+    });
+
+    it("leaves Escape to a select or menu inside the card", async () => {
+        const workbench = useWorkbench();
+        workbench.block = question;
+        const wrapper = mountQuestion();
+        const card = wrapper.find(".card");
+        // like a listbox that closes on Escape
+        card.element.addEventListener("keydown", (event) =>
+            event.preventDefault(),
+        );
+
+        await card.trigger("keydown", { key: "Escape" });
+        await flushPromises();
+
+        expect(workbench.clearWorkbench).not.toHaveBeenCalled();
+    });
 });
diff --git a/resources/js/components/Factory/Document/DocumentQuestion.vue b/resources/js/components/Factory/Document/DocumentQuestion.vue
index 70333659..de5a2090 100644
--- a/resources/js/components/Factory/Document/DocumentQuestion.vue
+++ b/resources/js/components/Factory/Document/DocumentQuestion.vue
@@ -2,6 +2,7 @@
   <div
     :id="`row-${block.uuid}`"
     class="group/question flex scroll-mt-4 items-start"
+    @keydown="onKeydown"
   >
     <div class="flex w-8 shrink-0 flex-col sm:w-12 items-end gap-1 pr-2 pt-3">
       <span
@@ -21,6 +22,7 @@
     <QuestionCard v-if="isOpen" :block="block" :number="number" />
     <button
       v-else
+      ref="row"
       type="button"
       class="min-h-14 min-w-0 flex-1 rounded-lg px-3 py-2.5 text-left hover:bg-grey-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
       @click="open"
@@ -64,13 +66,14 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, nextTick, ref } from "vue";
 import { D9Icon } from "@deck9/ui";
 import { useWorkbench } from "@/stores";
 import { useBlockTypes } from "@/components/Factory/utils/useBlockTypes";
 import { plainText } from "./questionSummary";
 import QuestionCard from "./QuestionCard.vue";
 import { cursorFor } from "./blockFocus";
+import { useMoveBlock } from "./blockMove";
 
 const props = defineProps<{
   block: FormBlockModel;
@@ -95,6 +98,25 @@ const choiceCount = computed(() =>
 );
 const ruleCount = computed(() => props.block.logics?.length ?? 0);
 
+const { onMoveKey } = useMoveBlock();
+const row = ref<HTMLButtonElement | null>(null);
+
+// Alt+Up/Down moves the question, open or not; Escape closes it
+const onKeydown = async (event: KeyboardEvent) => {
+  // a select or menu inside the card handled the key already
+  if (event.defaultPrevented) {
+    return;
+  }
+
+  onMoveKey(event, props.block);
+
+  if (event.key === "Escape" && isOpen.value) {
+    workbench.clearWorkbench();
+    await nextTick();
+    row.value?.focus();
+  }
+};
+
 const open = () => {
   cursorFor.value = props.block.uuid;
   workbench.putOnWorkbench(props.block);

From 652a9ced931013ffadeea7e1c34c24ac286cef8c Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:26:13 +0200
Subject: [PATCH 3/8] feat: Move up and Move down in a question's and a group's
 menu

The way to move on a phone, where there is no grip, and for anyone who
can't drag.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Factory/Document/BlockMenu.test.ts        | 65 +++++++++++++++++++
 .../components/Factory/Document/BlockMenu.vue | 16 +++++
 2 files changed, 81 insertions(+)
 create mode 100644 resources/js/components/Factory/Document/BlockMenu.test.ts

diff --git a/resources/js/components/Factory/Document/BlockMenu.test.ts b/resources/js/components/Factory/Document/BlockMenu.test.ts
new file mode 100644
index 00000000..df16bedb
--- /dev/null
+++ b/resources/js/components/Factory/Document/BlockMenu.test.ts
@@ -0,0 +1,65 @@
+import { flushPromises, mount, VueWrapper } from "@vue/test-utils";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { useForm, useWorkbench } from "@/stores";
+import BlockMenu from "./BlockMenu.vue";
+
+const blocks = [
+    { id: 1, uuid: "q1", type: "radio" },
+    { id: 2, uuid: "q2", type: "radio" },
+] as FormBlockModel[];
+
+let wrapper: VueWrapper | undefined;
+
+const openMenu = async (block: FormBlockModel) => {
+    wrapper = mount(BlockMenu, {
+        props: { block, label: "Options for question 1" },
+        attachTo: document.body,
+    });
+    await wrapper.find("button").trigger("click");
+    await flushPromises();
+};
+
+// the menu opens in a portal
+const item = (label: string) =>
+    [...document.querySelectorAll<HTMLElement>("[role=menuitem]")].find(
+        (element) => element.textContent?.trim() === label,
+    );
+
+describe("a block's menu", () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+        useWorkbench().$reset();
+        useForm().$reset();
+        useForm().blocks = blocks;
+    });
+
+    afterEach(() => {
+        wrapper?.unmount();
+        document.body.innerHTML = "";
+    });
+
+    it("moves a question down, for touch and pointer users", async () => {
+        await openMenu(blocks[0]);
+
+        item("Move down")!.click();
+        await flushPromises();
+
+        expect(useForm().changeBlockSequence).toHaveBeenCalledWith(
+            false,
+            1,
+            blocks[0],
+        );
+    });
+
+    it("can't move the first block up or the last one down", async () => {
+        await openMenu(blocks[0]);
+        expect(item("Move up")?.getAttribute("aria-disabled")).toBe("true");
+        expect(item("Move down")?.getAttribute("aria-disabled")).toBeNull();
+        wrapper!.unmount();
+        document.body.innerHTML = "";
+
+        await openMenu(blocks[1]);
+        expect(item("Move up")?.getAttribute("aria-disabled")).toBeNull();
+        expect(item("Move down")?.getAttribute("aria-disabled")).toBe("true");
+    });
+});
diff --git a/resources/js/components/Factory/Document/BlockMenu.vue b/resources/js/components/Factory/Document/BlockMenu.vue
index 6bfb93ec..230b0bfe 100644
--- a/resources/js/components/Factory/Document/BlockMenu.vue
+++ b/resources/js/components/Factory/Document/BlockMenu.vue
@@ -34,6 +34,20 @@
       :label="block.is_disabled ? 'Show group' : 'Hide group'"
       @click="toggleHidden"
     />
+    <D9MenuLink
+      as="button"
+      :class="item"
+      label="Move up"
+      :disabled="!canMove(block, -1)"
+      @click="moveBlock(block, -1)"
+    />
+    <D9MenuLink
+      as="button"
+      :class="item"
+      label="Move down"
+      :disabled="!canMove(block, 1)"
+      @click="moveBlock(block, 1)"
+    />
     <D9MenuLink
       as="button"
       :class="item"
@@ -55,6 +69,7 @@ import { D9Icon, D9Menu, D9MenuLink } from "@deck9/ui";
 import copy from "copy-text-to-clipboard";
 import { useForm, useWorkbench } from "@/stores";
 import { useAddBlock } from "./blockFocus";
+import { useMoveBlock } from "./blockMove";
 
 const props = defineProps<{
   block: FormBlockModel;
@@ -66,6 +81,7 @@ const emit = defineEmits<{ addToGroup: [] }>();
 const store = useForm();
 const workbench = useWorkbench();
 const { addBlock } = useAddBlock();
+const { canMove, moveBlock } = useMoveBlock();
 
 const item = "w-full min-h-11 text-left text-sm lg:min-h-0";
 const isGroup = computed(() => props.block.type === "group");

From 2a4f4c5149e7183038f8c93afb87a00017293ef6 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:26:56 +0200
Subject: [PATCH 4/8] feat: the outline scrolls to the open question

Also when the outline opens as a panel on a tablet or phone.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Factory/Document/DocumentOutline.test.ts  | 27 ++++++++++++++++++-
 .../Factory/Document/DocumentOutline.vue      | 15 +++++++++--
 2 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/resources/js/components/Factory/Document/DocumentOutline.test.ts b/resources/js/components/Factory/Document/DocumentOutline.test.ts
index 20a8cf47..98f1b267 100644
--- a/resources/js/components/Factory/Document/DocumentOutline.test.ts
+++ b/resources/js/components/Factory/Document/DocumentOutline.test.ts
@@ -1,5 +1,5 @@
 import { mount } from "@vue/test-utils";
-import { beforeEach, describe, expect, it } from "vitest";
+import { beforeEach, describe, expect, it, vi } from "vitest";
 import { useForm, useWorkbench } from "@/stores";
 import DocumentOutline from "./DocumentOutline.vue";
 
@@ -12,8 +12,17 @@ const blocks = [
 
 const numbers = { q1: 1, q2: 2, q3: 3 };
 
+const scrolled = vi.fn();
+
 describe("the outline", () => {
     beforeEach(() => {
+        // jsdom has no scrollIntoView
+        Element.prototype.scrollIntoView = function (
+            this: Element,
+            options?: boolean | ScrollIntoViewOptions,
+        ) {
+            scrolled(this.textContent, (options as ScrollIntoViewOptions)?.block);
+        };
         useForm().$reset();
         useWorkbench().$reset();
         useForm().blocks = blocks;
@@ -41,4 +50,20 @@ describe("the outline", () => {
         await wrapper.findAll("button")[0].trigger("click");
         expect(wrapper.emitted("pick")?.[0]).toEqual([blocks[0]]);
     });
+
+    it("keeps the open question in view, also when it opens as a panel", async () => {
+        useWorkbench().block = blocks[3];
+        const wrapper = mount(DocumentOutline, {
+            props: { numbers },
+            attachTo: document.body,
+        });
+        await wrapper.vm.$nextTick();
+        expect(scrolled).toHaveBeenLastCalledWith("3Name?", "nearest");
+
+        useWorkbench().block = blocks[0];
+        await wrapper.vm.$nextTick();
+        expect(scrolled).toHaveBeenLastCalledWith("1Welcome", "nearest");
+
+        wrapper.unmount();
+    });
 });
diff --git a/resources/js/components/Factory/Document/DocumentOutline.vue b/resources/js/components/Factory/Document/DocumentOutline.vue
index 693fa1bf..8b871d39 100644
--- a/resources/js/components/Factory/Document/DocumentOutline.vue
+++ b/resources/js/components/Factory/Document/DocumentOutline.vue
@@ -1,5 +1,5 @@
 <template>
-  <nav :aria-labelledby="`${id}-title`" class="px-2 py-3">
+  <nav ref="nav" :aria-labelledby="`${id}-title`" class="px-2 py-3">
     <div class="flex h-11 items-center justify-between pl-2 lg:h-8">
       <h2 :id="`${id}-title`" class="text-xs font-semibold text-grey-600">
         Outline
@@ -43,7 +43,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, useId } from "vue";
+import { computed, onMounted, ref, useId, watch } from "vue";
 import { D9Icon } from "@deck9/ui";
 import { useForm, useWorkbench } from "@/stores";
 import { plainText } from "./questionSummary";
@@ -75,4 +75,15 @@ const items = computed(() => {
 
 const isCurrent = (block: FormBlockModel) =>
   workbench.block?.uuid === block.uuid;
+
+const nav = ref<HTMLElement | null>(null);
+
+// keeps the open question in view, also when the outline opens as a panel
+const showCurrent = () =>
+  nav.value
+    ?.querySelector("[aria-current=true]")
+    ?.scrollIntoView({ block: "nearest" });
+
+onMounted(showCurrent);
+watch(() => workbench.block?.uuid, showCurrent, { flush: "post" });
 </script>

From 7f73be236f8ebdeb7da0d091247ca570f6f8b342 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:28:25 +0200
Subject: [PATCH 5/8] feat: move a choice with Alt+Up/Down

Focus stays on the moved choice and the live region says its new place.
The question around it doesn't move as well.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../components/Factory/Document/blockMove.ts  | 27 +++++-----
 .../Factory/Main/ConfigureClicks.test.ts      | 52 +++++++++++++++++++
 .../Factory/Main/ConfigureClicks.vue          | 23 ++++++++
 .../Main/Interactions/ClickInteraction.vue    |  8 ++-
 .../Factory/utils/useKeyboardNavigation.ts    |  5 ++
 5 files changed, 100 insertions(+), 15 deletions(-)

diff --git a/resources/js/components/Factory/Document/blockMove.ts b/resources/js/components/Factory/Document/blockMove.ts
index 009451e4..807ea456 100644
--- a/resources/js/components/Factory/Document/blockMove.ts
+++ b/resources/js/components/Factory/Document/blockMove.ts
@@ -6,7 +6,15 @@ import { cursorFor } from "./blockFocus";
 // what the document's live region says after a move
 export const moveNote = ref("");
 
-type Step = -1 | 1;
+export type Step = -1 | 1;
+
+// reads a short text out in the document's live region
+export async function announce(text: string) {
+    // a repeated text is only read out again after a change
+    moveNote.value = "";
+    await nextTick();
+    moveNote.value = text;
+}
 
 // where one step takes a block: a question steps into a group next to it and
 // out at its ends, a group steps over a whole block
@@ -49,18 +57,11 @@ export function useMoveBlock() {
     const canMove = (block: FormBlockModel, step: Step) =>
         stepTarget(store.blocks ?? [], block, step) !== null;
 
-    const say = async (text: string) => {
-        // a repeated text is only read out again after a change
-        moveNote.value = "";
-        await nextTick();
-        moveNote.value = text;
-    };
-
     const moveBlock = async (block: FormBlockModel, step: Step) => {
         const target = stepTarget(store.blocks ?? [], block, step);
 
         if (!target) {
-            await say(step < 0 ? "Already at the top" : "Already at the bottom");
+            await announce(step < 0 ? "Already at the top" : "Already at the bottom");
             return false;
         }
 
@@ -89,7 +90,7 @@ export function useMoveBlock() {
             blocks.find((item) => item.uuid === uuid)?.title || "Group";
 
         if (block.type === "group") {
-            await say(
+            await announce(
                 `Moved group ${groupName(block.uuid)} to position ${top.findIndex((item) => item.id === block.id) + 1} of ${top.length}`,
             );
             return true;
@@ -98,11 +99,11 @@ export function useMoveBlock() {
         const to = `to position ${numbers[block.uuid]} of ${Object.keys(numbers).length}`;
 
         if (target.scope === from) {
-            await say(`Moved ${to}`);
+            await announce(`Moved ${to}`);
         } else if (target.scope) {
-            await say(`Moved into group ${groupName(target.scope)}, ${to}`);
+            await announce(`Moved into group ${groupName(target.scope)}, ${to}`);
         } else {
-            await say(`Moved out of group ${groupName(from)}, ${to}`);
+            await announce(`Moved out of group ${groupName(from)}, ${to}`);
         }
 
         return true;
diff --git a/resources/js/components/Factory/Main/ConfigureClicks.test.ts b/resources/js/components/Factory/Main/ConfigureClicks.test.ts
index f8c9bbd7..402385c2 100644
--- a/resources/js/components/Factory/Main/ConfigureClicks.test.ts
+++ b/resources/js/components/Factory/Main/ConfigureClicks.test.ts
@@ -2,6 +2,7 @@ import { flushPromises, mount, VueWrapper } from "@vue/test-utils";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { useForm, useWorkbench } from "@/stores";
 import ConfigureClicks from "./ConfigureClicks.vue";
+import { moveNote } from "@/components/Factory/Document/blockMove";
 
 const choice = (id: number, label: string) =>
     ({
@@ -124,3 +125,54 @@ describe("Enter on the last choice", () => {
         expect(useWorkbench().createInteraction).toHaveBeenCalledWith("button");
     });
 });
+
+describe("moving a choice with Alt+Up/Down", () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+        useWorkbench().$reset();
+        useForm().$reset();
+    });
+
+    afterEach(() => wrapper?.unmount());
+
+    const label = (id: number) =>
+        wrapper!.find<HTMLInputElement>(`[id='${id}_label']`);
+
+    it("moves the choice, keeps focus on it and says where it went", async () => {
+        const workbench = useWorkbench();
+        mountChoices("Yes", "No", "Maybe");
+        vi.mocked(workbench.changeInteractionSequence).mockImplementation(
+            async (from, to) => {
+                const list = [...workbench.block!.interactions!].sort(
+                    (a, b) => a.sequence - b.sequence,
+                );
+                list.splice(to, 0, list.splice(from, 1)[0]);
+                list.forEach((item, index) => (item.sequence = index));
+            },
+        );
+        // the question around it must not move as well
+        const outside = vi.fn();
+        document.body.addEventListener("keydown", outside);
+
+        label(2).element.focus();
+        await label(2).trigger("keydown", { key: "ArrowUp", altKey: true });
+        await label(2).trigger("keyup", { key: "ArrowUp", altKey: true });
+        await flushPromises();
+
+        expect(workbench.changeInteractionSequence).toHaveBeenCalledWith(1, 0);
+        expect((document.activeElement as HTMLInputElement).value).toBe("No");
+        expect(moveNote.value).toBe("Moved choice to position 1 of 3");
+        expect(outside).not.toHaveBeenCalled();
+        document.body.removeEventListener("keydown", outside);
+    });
+
+    it("stays put at the top and says so", async () => {
+        mountChoices("Yes", "No");
+
+        await label(1).trigger("keydown", { key: "ArrowUp", altKey: true });
+        await flushPromises();
+
+        expect(useWorkbench().changeInteractionSequence).not.toHaveBeenCalled();
+        expect(moveNote.value).toBe("Already at the top");
+    });
+});
diff --git a/resources/js/components/Factory/Main/ConfigureClicks.vue b/resources/js/components/Factory/Main/ConfigureClicks.vue
index f7119135..ffa52296 100644
--- a/resources/js/components/Factory/Main/ConfigureClicks.vue
+++ b/resources/js/components/Factory/Main/ConfigureClicks.vue
@@ -22,6 +22,7 @@
           @nextSoft="focusNextItemSoft"
           @previous="focusPreviousItem"
           @onDelete="deleteItem"
+          @move="moveItem"
         />
       </Draggable>
     </Container>
@@ -55,6 +56,10 @@ import { Container, Draggable } from "vue3-smooth-dnd";
 import EmptyState from "@/components/EmptyState.vue";
 import { useKeyboardNavigation } from "@/components/Factory/utils/useKeyboardNavigation";
 import useActiveInteractions from "../Shared/useActiveInteractions";
+import {
+  announce,
+  type Step,
+} from "@/components/Factory/Document/blockMove";
 
 const workbench = useWorkbench();
 const { editableInteractions } = useActiveInteractions(workbench.block);
@@ -105,6 +110,23 @@ const deleteItem = async (index: number) => {
   }
 };
 
+// Alt+Up/Down moves a choice; focus stays on it
+const moveItem = async (index: number, step: Step) => {
+  const choices = editableInteractions.value ?? [];
+  const item = choices[index];
+  const to = index + step;
+
+  if (!item || !choices[to]) {
+    announce(step < 0 ? "Already at the top" : "Already at the bottom");
+    return;
+  }
+
+  workbench.changeInteractionSequence(index, to);
+  await nextTick();
+  focusItem(item);
+  announce(`Moved choice to position ${to + 1} of ${choices.length}`);
+};
+
 const {
   bindTemplateRefsForTraversables,
   focusNextItem,
@@ -112,6 +134,7 @@ const {
   focusPreviousItem,
   focusLastItem,
   focusNeighborItem,
+  focusItem,
 } = useKeyboardNavigation(editableInteractions, async () => {
   await createClickInteraction();
 });
diff --git a/resources/js/components/Factory/Main/Interactions/ClickInteraction.vue b/resources/js/components/Factory/Main/Interactions/ClickInteraction.vue
index 65ad14dc..bc8a408e 100644
--- a/resources/js/components/Factory/Main/Interactions/ClickInteraction.vue
+++ b/resources/js/components/Factory/Main/Interactions/ClickInteraction.vue
@@ -16,8 +16,10 @@
           block
           placeholder="Label"
           @keyup.enter="keyboardCommands"
-          @keyup.up="keyboardCommands"
-          @keyup.down="keyboardCommands"
+          @keyup.up.exact="keyboardCommands"
+          @keyup.down.exact="keyboardCommands"
+          @keydown.alt.up.exact.prevent.stop="emit('move', index, -1)"
+          @keydown.alt.down.exact.prevent.stop="emit('move', index, 1)"
           @keydown.meta.delete.prevent="keyboardCommands"
         />
         <D9Input
@@ -47,6 +49,7 @@ import ChoiceRowActions from "@/components/Factory/Main/ChoiceRowActions.vue";
 import IndexItem from "@/components/Factory/Shared/IndexItem.vue";
 import { useWorkbench } from "@/stores";
 import { Ref, ref, watch } from "vue";
+import type { Step } from "@/components/Factory/Document/blockMove";
 
 const workbench = useWorkbench();
 
@@ -66,6 +69,7 @@ const emit = defineEmits<{
   (e: "nextSoft", index: number): void;
   (e: "previous", index: number): void;
   (e: "onDelete", index: number): void;
+  (e: "move", index: number, step: Step): void;
 }>();
 
 // the row draws the border, so its fields are bare
diff --git a/resources/js/components/Factory/utils/useKeyboardNavigation.ts b/resources/js/components/Factory/utils/useKeyboardNavigation.ts
index 3ce87fa2..0e600b3b 100644
--- a/resources/js/components/Factory/utils/useKeyboardNavigation.ts
+++ b/resources/js/components/Factory/utils/useKeyboardNavigation.ts
@@ -61,6 +61,10 @@ export function useKeyboardNavigation(
         traversables.value[destination.id].focus();
     };
 
+    const focusItem = (item: { id: number }) => {
+        traversables.value[item.id]?.focus();
+    };
+
     const focusLastItem = async () => {
         if (!currentInteractions.value) {
             return;
@@ -80,5 +84,6 @@ export function useKeyboardNavigation(
         focusNextItem,
         focusPreviousItem,
         focusLastItem,
+        focusItem,
     };
 }

From 986acfbcae983be05909ac98a329d7d705eb3847 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:34:14 +0200
Subject: [PATCH 6/8] fix: a tooltip no longer takes the keyboard focus

floating-vue focuses every popper it shows. A card that opens under the
mouse showed a toolbar tooltip, which took the cursor out of the
question text.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/js/app.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/resources/js/app.ts b/resources/js/app.ts
index 4fcc4e6a..29da4271 100644
--- a/resources/js/app.ts
+++ b/resources/js/app.ts
@@ -178,6 +178,8 @@ createInertiaApp({
                         autoHide: true,
                         placement: "auto",
                         html: true,
+                        // a tooltip shown on hover must not take the focus, e.g. from the question text
+                        noAutoFocus: true,
                     },
                 },
             })

From b9b36dec5a98f3ee872b09ad3faadb64267a4118 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:34:14 +0200
Subject: [PATCH 7/8] fix: Escape in the question text closes the question

ProseMirror cancels every Escape, so the card took it as handled.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Factory/Document/DocumentQuestion.test.ts   | 17 ++++++++++++++++-
 .../Factory/Document/DocumentQuestion.vue       |  9 +++++++--
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/resources/js/components/Factory/Document/DocumentQuestion.test.ts b/resources/js/components/Factory/Document/DocumentQuestion.test.ts
index 94ae68c5..f1a53f17 100644
--- a/resources/js/components/Factory/Document/DocumentQuestion.test.ts
+++ b/resources/js/components/Factory/Document/DocumentQuestion.test.ts
@@ -25,7 +25,7 @@ const mountQuestion = (block = question) =>
         global: {
             stubs: {
                 QuestionCard: {
-                    template: `<div tabindex="-1" class="card">card</div>`,
+                    template: `<div tabindex="-1" class="card">card<div contenteditable="true" class="text" /></div>`,
                 },
             },
         },
@@ -133,6 +133,21 @@ describe("a closed question in the document", () => {
         );
     });
 
+    it("closes with Escape from the question text, which cancels every Escape", async () => {
+        const workbench = useWorkbench();
+        workbench.block = question;
+        const wrapper = mountQuestion();
+        const text = wrapper.find(".text");
+        text.element.addEventListener("keydown", (event) =>
+            event.preventDefault(),
+        );
+
+        await text.trigger("keydown", { key: "Escape" });
+        await flushPromises();
+
+        expect(workbench.clearWorkbench).toHaveBeenCalled();
+    });
+
     it("leaves Escape to a select or menu inside the card", async () => {
         const workbench = useWorkbench();
         workbench.block = question;
diff --git a/resources/js/components/Factory/Document/DocumentQuestion.vue b/resources/js/components/Factory/Document/DocumentQuestion.vue
index de5a2090..df54b1a7 100644
--- a/resources/js/components/Factory/Document/DocumentQuestion.vue
+++ b/resources/js/components/Factory/Document/DocumentQuestion.vue
@@ -103,8 +103,13 @@ const row = ref<HTMLButtonElement | null>(null);
 
 // Alt+Up/Down moves the question, open or not; Escape closes it
 const onKeydown = async (event: KeyboardEvent) => {
-  // a select or menu inside the card handled the key already
-  if (event.defaultPrevented) {
+  // a select or menu inside the card handled the key already; the question
+  // text cancels every key it takes, also an Escape it doesn't use
+  const inText = (event.target as HTMLElement).closest?.(
+    "[contenteditable=true]",
+  );
+
+  if (event.defaultPrevented && !inText) {
     return;
   }
 

From c4578461b6398a97af42f28aef1a3f10f6de5329 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:40:24 +0200
Subject: [PATCH 8/8] docs: add moving questions to the changelog line (#275)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1ba371a3..2e754187 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -23,7 +23,7 @@ Lines marked **Upgrade step** need you to act after updating.
 -   The form list loads faster when a team has many forms. It now needs the same few database queries for one form or a hundred. Before, every form added 3 queries. (#256)
 -   On screens narrower than 1280 px, a form's editor bar now sits in two rows under the app header: the form with Dashboard and Preview, then Editor, Settings, Integrations and Submissions as tabs. Nothing in it scrolls sideways any more, and the header keeps the logo and your team name. On every screen, keyboard focus in the editor bar and the account menu now shows a blue ring. (#257)
 -   A form's pages have one top bar instead of two: the form's name with its menu, a Draft or Live label, the pages, Preview, Publish and your account. Publish first checks for questions without text, rules that point to a deleted question and a missing privacy link. Once the form is live, Share has its link, Open form and Unpublish. On a phone the pages sit in a tab bar at the bottom. (#265)
--   The form editor shows your whole form as one column. Each question shows its number, answer type, text, and if it is required, has rules or is hidden. The question you work on opens right there, also on a phone, where you couldn't edit questions before. Hiding a question, random order and custom answers are now under the question's Settings. An outline next to the form jumps to any question, and on a phone a question's Settings open from the bottom of the screen. (#268, #272)
+-   The form editor shows your whole form as one column. Each question shows its number, answer type, text, and if it is required, has rules or is hidden. The question you work on opens right there, also on a phone, where you couldn't edit questions before. Hiding a question, random order and custom answers are now under the question's Settings. An outline next to the form jumps to any question, and on a phone a question's Settings open from the bottom of the screen. Move a question with Alt+Up/Down, with Move up and Move down in its menu, or by dragging. (#268, #272, #275)
 
 ### Fixed