Accessibility

[mgifford]

Can you define this https://github.com/Shopify/draggable/tree/master/src/Draggable/Plugins/Accessibility

The Drupal community is looking for a best practice:
https://www.drupal.org/node/2920006

I brought this up on the W3C list too:
http://lists.w3.org/Archives/Public/w3c-wai-ig/2017OctDec/0081.html

Not sure if you're in Ottawa or not, but would be great to talk about this if you're interested.

[tsov]

@mgifford sorry for the very overdue reply, we are currently working on making draggable accessible for screen readers.

We have divided the work up into 3 parts:

• Focusable draggable containers and elements (be963a0)
• An announcement api that allows users to specify messages on events (a703bc1)
• A keyboard sensor that listens for keyboard events to initialize drag operations (5360c32)

Focusable Plugin

• Commit
• Documentation

We built a plugin that makes draggable containers and elements focusable, if they aren't already. It also decorates the draggable elements with aria attributes if there are none present already. This commit hasn't made it into master yet, but is ready to be merged soon. Commit is here: be963a0

Announcements API

• Commit
• Documentation

We built another plugin that hooks into draggables event emitter to allow users to define their own announcements per event, e.g.

new Sortable(containers, {
  announcements: {
    'drag:start': 'Draggable has been picked up',
    'drag:stop': 'Draggable has been dropped',
    'sortable:sorted': 'Draggable has been sorted',
    // or dynamic messages based on event
    'drag:start': ({source}) => `${source.getAttribute('data-title')} has been picked up`,
    'drag:stop': ({source}) => `${source.getAttribute('data-title')} has been dropped`,
    'sortable:sorted': ({source, over}) => `${source.getAttribute('data-title')} has been swapped with ${over.getAttribute('data-title')}`,
  },
});

This should provide enough flexibility for defining your own announcements. PR can be found here:
#102

Keyboard Sensor

• Pending Commit

Similar to the other sensors (MouseSensor, TouchSensor, etc), the keyboard interactions will be handled with a KeyboardSensor. The sensors responsibility will be to dictate the drag behaviour, e.g.

1.) Start dragging on focused draggable element on space or ctrl+m
2.) Reorder draggable element on left/right arrow keys
3.) Stop dragging on space or ctrl+m

This part is still a work in progress, but should make it in by the end of the year!

---

Not sure if you're in Ottawa or not, but would be great to talk about this if you're interested.
@mgifford yes I am in Ottawa and free to chat if you are still interested

[mgifford]

This is great to see. Thanks @tsov - I'm definitely still interested in meeting. I'm in touch with a few folks at Shopify, but always interested in hearing more about your team's work on accessibility.

I'm watching this space because it seems like we really are missing a pattern. Happy to see @svinkle looking at this too #48

Would be great if you'd be interested in presenting on this at our local accessibility meetup group in 2018. :)