What a drag

[marcellamaki]

Summary

This adds a very tiny useDrag composable (which I, with great restraint, did not fill with pop culture drag references) and uses this + some additional functions to ensure that the keyboard accessibility of the drag sort order works

Fixes the draggable items part of #12148

References

Reviewer guidance

There are two sections that should be fixed by this

Creating quiz questions, and editing section order

1. add quiz questions OR add multiple sections
2. use the keyboard to navigate to the draggable area. should should be able to navigate into the list of items.
3. on focus on each "draggable" element, it switches to ^ or v carets
4. clicking "Enter" should move the item
5. when you reach the top or bottom item, the caret should automatically switch
6. you should not be able to get into an error state where you try to move something "past" the top or bottom and then things break
7. The TAB key should either switch you from ^ to v or advance you to the next item. SHIFT + TAB should move you backwards
8. As of now the arrow keys do not do anything. future improvement

---

Testing checklist

• Contributor has fully tested the PR manually
• If there are any front-end changes, before/after screenshots are included
• Critical user journeys are covered by Gherkin stories
• Critical and brittle code paths are covered by unit tests

PR process

• PR has the correct target branch and milestone
• PR has 'needs review' or 'work-in-progress' label
• If PR is ready for review, a reviewer has been added. (Don't use 'Assignees')
• If this is an important user-facing change, PR or related issue has a 'changelog' label
• If this includes an internal dependency change, a link to the diff is provided

Reviewer checklist

• Automated test coverage is satisfactory
• PR is fully functional
• PR has been tested for accessibility regressions
• External dependency files were updated if necessary (yarn and pip)
• Documentation is updated
• Contributor is in AUTHORS.md

[github-actions]

Build Artifacts

Asset type	Download link
PEX file	kolibri-.pex
Windows Installer (EXE)	kolibri-0.17.0a0.dev0+git.269.g5dd6a3b5-windows-setup-unsigned.exe
Debian Package	kolibri_0.17.0a0.dev0+git.269.g5dd6a3b5-0ubuntu1_all.deb
Mac Installer (DMG)	kolibri-0.17.0a0.dev0+git.269.g5dd6a3b5.dmg
Android Package (APK)	kolibri-0.17.0a0.dev0+git.269.g5dd6a3b5-0.1.3-debug.apk
TAR file	kolibri-0.17.0a0.dev0+git.269.g5dd6a3b5.tar.gz
WHL file	kolibri-0.17.0a0.dev0+git.269.g5dd6a3b5-py2.py3-none-any.whl

[marcellamaki]

@radinamatic - noting that there are some underlying problems here with aria labeling and overall screenreader (vs. sighted keyboard user) functionality. and we have some refactoring to do in general with the drag and drop feature. i'll be filing follow up issues for this.

[rtibbles]

Code changes all make sense, although the composable being added to the core apiSpec seems unnecessary at this point :)

[radinamatic]

Tested in both Firefox and Chrome in Ubuntu 20.04

1. add quiz questions OR add multiple sections ✔️
2. use the keyboard to navigate to the draggable area. should should be able to navigate into the list of items. ✔️
3. on focus on each "draggable" element, it switches to ^ or v carets ✔️
4. clicking "Enter" should move the item ❗

This works correctly when the user added the titles to the sections, but fails when the sections have the default names:

Default section titles

drag-default-section-titlesmp4.mp4

Custom section titles

drag-custom-section-titles.mp4

5. when you reach the top or bottom item, the caret should automatically switch ✔️
6. you should not be able to get into an error state where you try to move something "past" the top or bottom and then things break ✔️
7. The TAB key should either switch you from ^ to v or advance you to the next item. SHIFT + TAB should move you backwards ✔️
8. As of now the arrow keys do not do anything. future improvement 👍🏽

[radinamatic]

Looks like the sections are properly reordered in the sidebar, but once the settings change has been applied, the main view still displays the old titles order (but the content of the sections did indeed change). I would expect that the main view displays the section tabs in this order Section 3, Section 2, Section 1. Or am I missing something? 🤔

Before pressing 'Apply settings'	After pressing 'Apply settings'

[rtibbles]

Seems to be working according to my expectations, although the mouse driven drag and drop appears to have some rough edges to it still.