Add the inline choice interaction editor

[AlexVelezLl]

Summary

• Adds Inline choice to the question type selector, with its own editor.
• Adds an options panel for the open dropdown, where authors add, edit, remove and reorder options and mark the correct one.
• Makes the options panel a modal dialog that traps focus, returns it to the dropdown on Escape or close, and closes when the passage is clicked.
• Adds a Shuffle setting, as the choice question has, and hides reordering while it's on.
• Shows validation errors on the option, the dropdown and the passage they belong to.
• Shows each correct answer in view mode when Show answers is on, and "Choose…" in its place when it's off.
• Moves the caret past a dropdown instead of selecting it, and removes a dropdown with Backspace or Delete beside it.
• Returns the caret to the text beside a focused dropdown on Left or Right.
• Announces to screen readers a dropdown the caret crosses and dropdowns that are removed.
• Describes the passage editor with its helper text, and names a dropdown that needs attention as such in a preview that hides the answers.
• Shows an unavailable Insert like the toolbar's other disabled tools, and shrinks it to its icon in a small window.
• Documents that an expanded popup keeps the rich text editor open.
• Adds one helper for reading an editor's stored HTML, used by the editor and the passage.

References

Fixes #6182.

Beyond #6182's scope

#6182 leaves the dropdown chip and Insert to #6181, but this PR also changes the chip. Each change came up while building and testing the editor:

• Makes a dropdown unselectable, so the caret moves past it, and removes it with Backspace or Delete beside it (InlineChoiceNode.js). The arrow keys stopped on each dropdown to select it before moving past, and Backspace selected it rather than removing it.
• Returns the caret to the text from a focused dropdown on Left or Right (leaveForText). A dropdown is a focusable button in the text, and the arrow keys did nothing on it.
• Announces dropdowns the caret crosses and dropdowns that are removed, through KDS's useKLiveRegion, with two new strings. A screen reader said nothing in either case, since a dropdown has no text to read out.
• Restyles a dropdown covered by a text selection, following the design, since it no longer takes ProseMirror's node selection.

These can move to their own PR if preferred. Not done yet: undoing a removal brings the dropdown back without an announcement, while redo announces the removal.

Reviewer guidance

• Seven commits, each a reviewable unit; the editor is the sixth.
• Go do the exercise editor, add a new question, set the inline choice question type, and have fun with the new editor!
• Try possible edge cases: copy/paste, do/redo, make sure IDs are not repeated, make sure keyboard navigation works smoothly, check that resulting XML is compatible with what Kolibri expects.

Demo

Grabacion.de.pantalla.2026-10-07.a.las.4.02.52.p.m.mov

AI usage

Claude Code implemented this from the issue and design screenshots, with tests, then self-reviewed it. I reviewed the changes and steered the design and accessibility decisions.

🤖 Generated with Claude Code

[rtibblesbot]

🟡 Waiting for changes

Last updated: 2026-10-08 21:31 UTC

[rtibblesbot]

PR #6303: the inline choice editor works end to end in manual QA. The type selector, insert flows, options panel, Shuffle, copy/paste ids, save/reopen and view mode all behave as #6182 specifies. CI is passing.

QA ran in the qti-demo shell because the QA server returned Redis 500s. axe found no new violations.

Suggestions, all inline:

• Options panel focus: clicking non-focusable parts drops focus, and aria-modal while the passage stays editable.
• Validation goes stale after removing a chip as text.
• Accessible name for the passage editor.
• isSupportedBody accepts bodies TipTap can't hold.
• Chip and announcer changes outside #6182's scope.
• Toolbar CSS and narrow-width overflow of Insert.
• Tests that match text anywhere on the page, and focus-trap tests that don't check where focus lands.

---

Written by rtibblesbot, an LLM-based coding agent.

[rtibblesbot]

nitpick: This message blames the options, but it also shows for NO_CORRECT_ANSWER, a dropdown-level error. Reword it to cover both, e.g. "One or more inline choices need attention".

[rtibblesbot]

PR #6303: 6 prior findings are still open; please fix or reply on each thread. 3 new suggestions below. 7 of 14 prior findings are resolved and 1 acknowledged.

CI passes. Manual QA ran 12 scenarios on the qti-demo shell, since Redis MISCONF blocked Django login. Scenarios: insert, options panel, keyboard/screen reader, undo/paste, shuffle, save/reopen, validation, RTL/touch. No regressions.

Still open:

• aria-modal while the passage stays clickable
• isSupportedBody accepts bodies TipTap can't hold
• chip behaviour that #6182 lists as out of scope
• undo restoring a chip isn't announced
• chip with options but no correct mark reads "Add answers"
• Insert overflows the passage toolbar below ~480px without touch. QA: 413px wide in a 301px toolbar at 375px.
• options use a bare <input>, not the #5927 plain-text row
• options-problem message shown for NO_CORRECT_ANSWER (nitpick)

Prior-finding status

RESOLVED — InlineChoiceOptions/index.vue:9 — clicking heading/padding drops focus; Escape stops closing
UNADDRESSED — InlineChoiceOptions/index.vue:13 — aria-modal while passage stays interactive
RESOLVED — inlineChoice/Editor.vue:95 — validation stale after chip removed/restored
ACKNOWLEDGED — inlineChoice/Editor.vue:84 — passage editor indistinguishable from question field (separate issue under #6103)
UNADDRESSED — inlineChoice/Descriptor.js:43 — isSupportedBody accepts bodies TipTap can't hold
UNADDRESSED — InlineChoiceChip/index.vue:24 — chip behaviour out of scope per #6182
UNADDRESSED — InlineChoiceChip/index.vue:32 — chip with no correct mark reads as "Add answers"
UNADDRESSED — EditorToolbar.vue — Insert pushed off narrow toolbar (styling now via appearanceOverrides)
RESOLVED — inlineChoice/tests/Editor.spec.js — focus-trap tests pass with handlers swapped
RESOLVED — inlineChoice/tests/Editor.spec.js — no-id error test passes wherever it renders
RESOLVED — TipTapEditor/tests/imageSrc.spec.js — duplicates toStoredImageSrcs cases via stub
UNADDRESSED — InlineChoiceOptions/index.vue:97 — bare <input>, not the #5927 plain-text row
UNADDRESSED — inlineChoice/Editor.vue:52 — options-problem message for NO_CORRECT_ANSWER (nitpick)
RESOLVED — InlineChoiceChip/index.vue:14 — green fill on chip with no correct answer
RESOLVED — useInlineChoicePassage.js:75 — praise: live sync keeps editor history

---

Written by rtibblesbot, an LLM-based coding agent.

[rtibblesbot]

PR #6303: manual QA found two blocking bugs:

• Clicking another chip can miss when the page is scrolled to its end.
• Ctrl+Z in an option field types back what it undid.

16 of 17 prior findings are resolved or acknowledged. Please address the open Editor.vue:56 nitpick: its message blames the options for a missing correct answer.

The other comments are smaller. CI pending. QA covered insert, options editing, keyboard, click-outside, chip navigation, undo/copy/paste, shuffle, save/reopen, validation, view mode and RTL. axe found nothing new.

Prior-finding status

RESOLVED — InlineChoiceOptions/index.vue:9 — clicking heading/padding drops focus to <body>
RESOLVED — InlineChoiceOptions/index.vue:13 — aria-modal while the passage stays usable
RESOLVED — inlineChoice/Editor.vue:100 — validation stale after chip removed/restored
ACKNOWLEDGED — inlineChoice/Editor.vue:89 — passage editor indistinguishable from question field
ACKNOWLEDGED — inlineChoice/Descriptor.js:43 — isSupportedBody accepts bodies TipTap can't hold
RESOLVED — InlineChoiceChip/index.vue:24 — chip behaviour changes out of scope
ACKNOWLEDGED — InlineChoiceChip/index.vue:42 — chip without correct mark reads like an option
RESOLVED — EditorToolbar.vue — Insert pushed off the toolbar in narrow windows
RESOLVED — inlineChoice/tests/Editor.spec.js — focus-trap tests pass with handlers swapped
RESOLVED — inlineChoice/tests/Editor.spec.js — no-id error test passes wherever it renders
RESOLVED — TipTapEditor/tests/imageSrc.spec.js — repeats toStoredImageSrcs cases through a stub
ACKNOWLEDGED — InlineChoiceOptions/index.vue:97 — bare <input> instead of plain-text toolbar row
UNADDRESSED — inlineChoice/Editor.vue:56 — message blames options for NO_CORRECT_ANSWER
RESOLVED — InlineChoiceChip/index.vue:14 — green fill on chip with no correct answer
RESOLVED — passageChips.js:45 — invalid chip marked by colour alone
RESOLVED — inlineChoice/Editor.vue:69 — helper text not referenced by the passage
RESOLVED — QTIItemEditor.spec.js:599 — findByText for the heading

---

Written by rtibblesbot, an LLM-based coding agent.

[rtibblesbot]

blocking: Clicking another chip doesn't open it when the page is scrolled to its end.

Closing on pointerdown unmounts the panel before the click completes. The page gets shorter, so the browser clamps the scroll position. The chips then move down by the panel's height (~215px). Mouseup lands off the chip, so no click fires on it.

Steps: new Inline choice question (always added last) with three dropdowns, page scrolled to the bottom. Open dropdown 3, then click dropdown 1's chip.

• Expected: panel switches to dropdown 1.
• Actual: no panel opens. Once, the passage editor closed and focus fell to <body>.
• Reproduced 3 times. With 1500px of bottom padding the same steps work, so the scroll clamp is the cause.

Close on click instead, or keep the panel's height reserved until the pointer is released.

[rtibblesbot]

blocking: Repeated Ctrl+Z in an option field types the undone text back.

Steps: insert a dropdown, type blue in Option 1, press Ctrl+Z six times.

• Expected: blu, bl, b, empty, then earlier passage edits.
• Actual: blu → bl → b → empty → b → bl. The chip follows each value.

Each native undo in the input fires @input. That records a new passage-history step. Once the input's own stack is empty, the browser hands Ctrl+Z to the passage editor. The passage editor then undoes those recorded undo steps.

Handle beforeinput here for historyUndo and historyRedo. Prevent the default, then run the passage editor's undo or redo, so only one history applies.

[rtibblesbot]

suggestion: The error icon replaces the option count, so a new chip never shows its count while the author edits options.

A newly inserted chip has errors from the start. The issue says option edits update "the open chip's count and label immediately". My earlier passageChips.js:45 ask (don't mark an invalid chip by colour alone) still stands.

Render the KIcon before the badge instead of using v-if/v-else.

[rtibblesbot]

suggestion: The More menu (line 103) may now be clipped to the toolbar box.

overflow-x: auto also sets overflow-y to auto. That makes the toolbar the scroll parent for its popovers. KDS popovers stay inside their scroll parent by default.

Pass :constrainToScrollParent="false" to More, as FormatDropdown.vue:16 does. Then check More in a narrow window.

[rtibblesbot]

suggestion: The hasErrors branch of chipMessage has no test.

This test never passes errorResponseIdentifiers. Dropping { hasErrors } there passes every test.

Pass errorResponseIdentifiers: ['r2'] through renderAt and expect answerDropdownNoCorrectNeedsAttention$.

[rtibblesbot]

nitpick: The selected chip doesn't take the selection's colour, though the comment here says it does.

QA saw a yellow chip inside blue selected text. The chip uses $themeBrand.secondary.v_100. The selected text uses the global ::selection (shared/styles/vuetify.scss:2482). So the chip looks like a separate highlight.

Match ::selection, or correct the comment.