User stories

• As a form user, I want to change the relative position of items to express their ordering.
• As a form user, I don't want any risk of accidentally changing the relative position of items as I'm navigating through my form

User interested in using it: https://forum.getodk.org/t/select-multiple-choices-then-rank-the-selected-choices/16444/15?u=ln

Design

Use a drag and drop interface as in Collect and Enketo: https://docs.getodk.org/form-question-types/#rank-widget. The goal here is to leverage the same design pattern with both Web Forms and Collect to create consistency in the user experience.

We believe users won't accidentally move the items if we use the "hold and drag" interaction and exploring the arrows for keyboard users. In Collect, we display the rank options in a modal, but that involves more steps for the user, so we want to change it to be inline.

The closest component in the design system is the reorder function. If possible, we want to remove the header, add the drag icon to the row, and add a highlighted state when the user is moving the item. Something to play around with once we have a working prototype, is making the entire row moveable vs moving from the drag icon specifically. From the drag icon might be tricky for people to use with different access needs or large fingers. Ideally the "hold and drag" can happen anywhere on the option and that's is enough friction to prevent any mistakes.

Figma designs - work in progress 🚧

• Web Forms
• Collect

Out of scope

• clear state (we will work on this later)

Notes

Component options:

• PrimeVue OrderList, not the desired experience
• PrimeVue reorderable table, close to the desired experience but with table-like styling
• vue-draggable-plus
• Port from Enketo

Todo

• @lognaturel: refresh memory on why we introduced odk:rank as a type instead of using string. Maybe because any consumer needs to know that the string has semantics beyond a regular string? But the same could be said for select one|multiple. Make sure it's documented at https://getodk.github.io/xforms-spec/#data-types
• @alyblenkin: attach mockup specific to Web Forms
  • How do we want to reduce the chance of accidental reordering when on a touch device? Enketo has an attempt with a "Click to start" but it doesn't address what happens after first data entry has been made and the user is still navigating the form. Mantine has a version where the handle must be used.