Add up/down buttons to Bookstack's sort interface

[neosonic2]

Describe the feature you'd like

Bookstack's existing sorting interface is not accessible to blind users because it relies entirely on dragging and dropping items around to change the order of books, chapters, and pages.

Visually impaired users have historically had difficulty with drag and drop paradigms because the various screen readers available today provide different ways of handling these situations, and some don't provide any at all. I am using VoiceOver on macOS, and it does have native keyboard commands to mark an item for dragging and to drop it somewhere else, but this does not work in Bookstack. I can mark pages for dragging in the sorting interface, for example, but whenever I try to drop them in another location, no matter where it is on the page, VoiceOver either reports that (1) the marked item is no longer in view, or (2) the drop operation failed after a slight delay.

Therefore, I'd like to propose that up/down buttons be added next to each item in the sorting interface so that screen reader users can manually move things up and down to construct books, chapters, and pages in any order they desire. To avoid cluttering up the UI, these could even be marked with the aria-hidden HTML attribute so that they are visible only to screen readers and do not appear visually on the page. It would be a solid alternative to drag and drop especially in cases where it's not possible to perform such a maneuver.

Describe the benefits this would bring to existing BookStack users

The specific implementation of this feature detailed above would allow existing visually impaired Bookstack users to sort books, chapters, and pages in any order they desire, even if they are not using a screen reader that provides drag and drop facilities. If the up/down buttons are visually displayed in the sorting interface, then this would also allow any user to manually sort items as well. However, I don't think this is the only way that accessibility could be achieved here and perhaps something even better could be implemented instead.

Can the goal of this request already be achieved via other means?

As far as I am aware, the goal of this feature request cannot currently be achieved (in an accessible manner) by other means. This is because it appears dragging and dropping books/chapters/pages around is the only way to sort them in Bookstack.

Have you searched for an existing open/closed issue?

• I have searched for existing issues and none cover my fundemental request

How long have you been using BookStack?

0 to 6 months

Additional context

No response

[neosonic2]

To add additional context, I tried using Bookstack's sort interface with the NVDA screen reader on Microsoft Windows 11, and had better results than I did with VoiceOver on macOS, though they were still not ideal.

With NVDA, I was able to use its keyboard commands to drag and drop pages in chapters (as I needed to re-sort a chapter's page layout), with several caveats. First, I could only move items a few lines up or down in the same chapter; or rather, if I mark an item for dragging and then move too far away from it, NVDA will not drop it on its intended target. With that said, however, even dropping an item very close to its original spot sometimes just doesn't work at all, while other times it succeeds.

In all cases though, NVDA and the browser, Microsoft Edge, freeze for up to 10 seconds when dropping or attempting to drop an item on to its target. I'm not sure if this is a Bookstack problem (i.e. with JavaScript that may be in play), an Edge problem, or an NVDA problem and don't have any other websites that support drag and drop upon which I can test.

Given all of these new findings, I still believe it would be advantageous to develop an alternative to the native drag and drop interface for screen reader users to be able to sort items in Bookstack. I was able to achieve better results with NVDA but it was still quite the frustrating experience, and less technically savvy screen reader users may have even more difficulty or just give up entirely especially once they notice the browser/screen reader freezing when dropping items. But at least Bookstack's current implementation is not a complete failure :)

[ssddanbrown]

Thanks for reporting and the detailed information. I have marked this up as an accessibility bug to be fixed. Having buttons will also be beneficial for mobile devices where drag and drop controls can conflict with scrolling.

[ssddanbrown]

I dedicated my day to this today (in addition to other sort improvements), via PR #3999.
As part of that work, the sortable items will now show up/down buttons on each item, in addition to a "More" menu that will conditionally provide the following actions:

• Move to Previous Book
• Move to Next Book
• Move Into Previous Chapter
• Move Into Next Chapter
• Move to Start of Book
• Move to End of Book
• Move to Before Chapter
• Move to After Chapter

There's a bunch of other improvements made including the ability to collapse books in this view, easier "Show Other Book" selection, and the addition of some intro text to the sections to lightly indicate their use.

I've tested this myself, primarily via sticking to the keyboard while using the Orca screen reader. Everything sounded and controlled sensibly, and I could identify and perform all actions in various scenarios. Hopefully it should now prove to be a relatively pleasant experience, but if there are any issues with the implementation don't hesitate to raise them and we can iterate on the work done today.

This will be part of the next feature release, which should be out pretty soon (Targeting end of month).