Svelte now has an accessible drag and drop library

svelte-dnd-action has gone a long way since its inception. It has a rich set of features and is stable and robust. Accessibly was the last big missing puzzle piece and I couldn't consider the library "feature complete" or recommend using it in production as long as it wasn't accessible.

I am super happy to announce that starting in version 0.6.1, svelte-dnd-action is also fully accessible out of the box (with zero configuration).
Since it is a brand new feature and not yet battle tested, accessibility is currently in alpha. I expect it to only improve from here, and reach maturity quickly as feedback starts coming in.

A Few words about accessibility

Accessibility in general is comprised of three aspects:

1. Visual: sufficient contrast, font size etc.
2. Keyboard support: it should be possible to interact with the user-interface without using a mouse (or other pointing devices).
3. Semantic markup and assistive instructions so that visually impaired users, that use screen readers, can find their way around the user interface, and understand the interactions that are taking place.

Accessible drag and drop

Version 0.6.1 of svelte-dnd-action mainly focuses on items #2 and #3 in the list.
Users can now manipulate items within drag-and-drop zones (including nested zones) using only their keyboard. Assistive instructions and proper tab indexes are added and managed automatically by the library.

Here are some screenshots with examples of assistive instructions and alerts being shown to the user when using a screen reader and their keyboard (not an exhaustive set. The goal is just to give you a sense of what it does):

When the user tabs into a dnd zone:



When the user starts dragging:



When the user moves the item within its list:



When the user moves the item to another list:

As I said before. This is still in alpha and it will keep improving over time, but I am excited that it made it in and is here to stay.

Closing words

That's it for now. I won't take too much of your time. If you're using Svelte and need drag-and-drop capabilities for your application, you don't need to sacrifice accessibility anymore. svelte-dnd-action has got you covered.
I hope it will also inspire you to pay attention to accessibility in other parts of your application!
Feedback and contributions to the library are always welcome. Cheers and stay safe.

P.S
If you would like to learn some of the basics of the library and don't enjoy reading README.md files on github, check out this short post.

Comments

[Johannes Lichtenberger]

Excellent, we have an open Hacktoberfest issue where we envision to be able to drag and drop different views, which represent database views as you like to get more insights into the data.

Layout customization #249

mosheduminer posted on Sep 30, 2020

• Enable resizing the various "sections" in each route,
• as well as allow drag-and-drop to rearrange the layout. (a section would be, for example, (in the resource route) the bar showing database/resource names, the history timeline, the resource view. (in the query route) the query box, the query result display, the saved/old queries bar).

I imagine this would require

• using something like svelte-dnd-action to allow rearranging the layout,
• and using the resize CSS property to allow native element resize.
• I imagine the resize property would exist on containers that would each containe a single "region" that is draggable.
• There should be listeners to resize the container region when a large section is moved to a small region (and swap the small section to the other region).
• There should be listeners to accommodate the resize of a region by resizing other regions.

This would require refactoring the layouts to be compatible with drag and drop.

View on GitHub