Drag-and-drop reordering in the QTI choice and ordering editors - #6109
Open
rtibblesbot wants to merge 4 commits into
Open
Drag-and-drop reordering in the QTI choice and ordering editors#6109rtibblesbot wants to merge 4 commits into
rtibblesbot wants to merge 4 commits into
Conversation
From learningequality/kolibri packages/kolibri-common/components/draggable at e5eb4ddbcc85e61ec03075e1a7b7d477455c182c. Filenames and layout kept so the copy stays diffable against the source. Deviations, all module swaps: - dragSortStrings.js: createTranslator from shared/i18n - renderSlotRoot.js: shared/logging, which exposes only error() - DragSortWidget/index.vue: shared/strings/commonStrings, shared/i18n The four direction labels are copied verbatim from Kolibri's commonCoreStrings so both stay translatable in step. shared/views/draggable/ is Studio's older, unrelated system and shares three filenames with this package — hence the separate directory. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
DraggableRegion emits the whole reordered array; the editors reduce it to an id order so no readonly state proxy travels back into the composable and the reorder stays expressible as a permutation of what already exists. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
rtibblesbot
force-pushed
the
issue-6106-95187d
branch
2 times, most recently
from
August 26, 2026 21:45
9417a85 to
2665786
Compare
rtibblesbot
marked this pull request as ready for review
August 26, 2026 21:55
rtibblesbot
force-pushed
the
issue-6106-95187d
branch
2 times, most recently
from
August 26, 2026 22:30
d120098 to
c1ce11d
Compare
The move-up/move-down chevrons go; DragSortWidget's own move buttons, revealed when the handle takes focus, keep reordering keyboard-operable. Delete becomes a standalone icon button, so the row no longer needs CollapsibleToolbar. DraggableRegion is keyed on the select mode: single-select renders the list as a KRadioButtonGroup and multi-select as a plain div, and SortableJS binds to that element once, on mount. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Same shape as the choice editor: drag handle at the start of the row, DragSortWidget's move buttons for the keyboard, delete as a standalone icon button in place of CollapsibleToolbar. windowIsSmall was read only by the toolbar's collapse rule, so useKResponsiveWindow goes with it. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
rtibblesbot
force-pushed
the
issue-6106-95187d
branch
from
August 26, 2026 22:43
c1ce11d to
8c320a4
Compare
Member
|
@rtibblesbot, from the screenshots you added, I can see the drag handler icon is not properly vertically aligned with the radio button and the remove button |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Reordering a choice or ordering row took one chevron click per position, from a toolbar at the row's end. Both editors now reorder by dragging a handle at the row's start, backed by a copy of Kolibri's
draggablepackage asshared/views/dragSort/. Delete stays as its own icon button at the end, so neither editor usesCollapsibleToolbar.The copy keeps Kolibri's filenames and layout so it stays diffable; the only edits swap in Studio's i18n, strings and logging.
References
Fixes #6106. Source:
learningequality/kolibripackages/kolibri-common/components/draggable/ate5eb4ddbcc85e61ec03075e1a7b7d477455c182c.Reviewer guidance
Open a channel for editing, go to
/channels/<channel_id>/#/qti-demo. Questions 1-2 use the choice editor, question 6 the ordering editor.Worth questioning:
DragSortWidget's two move buttons, as in Kolibri. Labelling both announces the affordance twice.shared/views/dragSort/__tests__/uses@vue/test-utils, deprecated per AGENTS.md. Copied with the package, and the only cover over the SortableJS reconciliation.setChoiceOrder/setItemOrderare asserted to emitbodyXmlbyte-identical to the equivalent chevron move.Screenshots
axe-core AA reports one violation with both editors open: contrast on the untouched
AddListItemButton.AI usage
Used Claude Code to port the package, wire both editors, and write the tests. Verified with the Jest suite,
pre-commit run --all-files, a file-for-file diff against Kolibri, and browser QA of drag, keyboard move, announcement and RTL.@rtibblesbot's comments are generated by an LLM, and should be evaluated accordingly
How was this generated?
🟡 Waiting for feedback
Last updated: 2026-08-26 22:43 UTC