Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
..
Failed to load latest commit information.
Announcement.js
README.md
index.js

README.md

Announcement

The Announcement plugin listens to all draggable events and allows you to define announcements via options for events that are read back through a screen reader.

API

new Announcement(draggable: Draggable): Announcement
To create an announcement plugin instance.

Options

expire {Number}
How long messages should stay inside the live region (in milliseconds). Default: 7000

'drag:start' {String|Function:String}
Define an announcement on drag:start. Default: Picked up draggable element

'drag:stop' {String|Function:String}
Define an announcement on drag:stop. Default: Dropped draggable element

'sortable:sorted' {String|Function:String}
Define an announcement on sortable:sorted. No default

'swappable:swapped' {String|Function:String}
Define an announcement on swappable:swapped. No default

'droppable:dropped' {String|Function:String}
Define an announcement on droppable:dropped. No default

And any other events you can think of...

Examples

Static messages

import {Sortable} from '@shopify/draggable';

const announcements = {
  'drag:start': 'Draggable element picked up',
  'drag:stop': 'Draggable element dropped',
  'sortable:stopped': 'Draggable elements swapped',
}

const sortable = new Sortable(document.querySelectorAll('ul'), {
  draggable: 'li',
  announcements,
});

Dynamic messages

import {Sortable} from '@shopify/draggable';

const announcements = {
  'drag:start': (dragEvent) => {
    return `Picked up ${dragEvent.source.getAttribute('data-name')}`;
  },

  'drag:stop': (dragEvent) => {
    return `Dropped ${dragEvent.source.getAttribute('data-name')}`
  },

  'sortable:sorted': (sortableEvent) => {
    return `Sorted ${sortableEvent.dragEvent.source.getAttribute('data-name')} with ${sortableEvent.dragEvent.over.getAttribute('data-name')}`;
  },
}

const sortable = new Sortable(document.querySelectorAll('ul'), {
  draggable: 'li',
  announcements,
});