Focusable plugin

Author: tsov

README.md

@@ -80,8 +80,8 @@ You can find the documentation for each module within their respective directori
   - [DraggableEvent](src/Draggable/DraggableEvent)
   - [MirrorEvent](src/Draggable/MirrorEvent)
   - [Plugins](src/Draggable/Plugins)
-    - [Accessibility](src/Draggable/Plugins/Accessibility)
     - [Announcement](src/Draggable/Plugins/Announcement)
+    - [Focusable](src/Draggable/Plugins/Focusable)
     - [Mirror](src/Draggable/Plugins/Mirror)
     - [Scrollable](src/Draggable/Plugins/Scrollable)
   - [Sensors](src/Draggable/Sensors)

scripts/test/environment.js

@@ -1,7 +1,7 @@
-const requestAnimationFrameTimeout = 15;
+import {REQUEST_ANIMATION_FRAME_TIMEOUT} from './helpers/environment';
 
 window.requestAnimationFrame = (callback) => {
-  return setTimeout(callback, requestAnimationFrameTimeout);
+  return setTimeout(callback, REQUEST_ANIMATION_FRAME_TIMEOUT);
 };
 
 window.cancelAnimationFrame = (id) => {

scripts/test/helpers/environment.js

@@ -12,3 +12,11 @@ export function withElementFromPoint(elementFromPoint, callback) {
   callback();
   document.elementFromPoint = originalElementFromPoint;
 }
+
+export const REQUEST_ANIMATION_FRAME_TIMEOUT = 15;
+
+export function waitForRequestAnimationFrame(
+  requestAnimationFrameTimeout = REQUEST_ANIMATION_FRAME_TIMEOUT,
+) {
+  jest.runTimersToTime(requestAnimationFrameTimeout + 1);
+}

src/Draggable/Draggable.js

@@ -1,5 +1,7 @@
 import {closest} from 'shared/utils';
-import {Accessibility, Mirror, Scrollable, Announcement} from './Plugins';
+
+import {Announcement, Focusable, Mirror, Scrollable} from './Plugins';
+
 import Emitter from './Emitter';
 import {MouseSensor, TouchSensor} from './Sensors';
 import {DraggableInitializedEvent, DraggableDestroyEvent} from './DraggableEvent';
@@ -70,13 +72,13 @@ export default class Draggable {
    * Default plugins draggable uses
    * @static
    * @property {Object} Plugins
+   * @property {Announcement} Plugins.Announcement
+   * @property {Focusable} Plugins.Focusable
    * @property {Mirror} Plugins.Mirror
-   * @property {Accessibility} Plugins.Accessibility
    * @property {Scrollable} Plugins.Scrollable
-   * @property {Announcement} Plugins.Announcement
    * @type {Object}
    */
-  static Plugins = {Mirror, Accessibility, Scrollable, Announcement};
+  static Plugins = {Announcement, Focusable, Mirror, Scrollable};
 
   /**
    * Draggable constructor.
@@ -149,8 +151,11 @@ export default class Draggable {
     document.addEventListener('drag:stop', this[onDragStop], true);
     document.addEventListener('drag:pressure', this[onDragPressure], true);
 
-    this.addPlugin(...[Mirror, Accessibility, Scrollable, Announcement, ...this.options.plugins]);
-    this.addSensor(...[MouseSensor, TouchSensor, ...this.options.sensors]);
+    const defaultPlugins = Object.values(Draggable.Plugins).map((Plugin) => Plugin);
+    const defaultSensors = [MouseSensor, TouchSensor];
+
+    this.addPlugin(...[...defaultPlugins, ...this.options.plugins]);
+    this.addSensor(...[...defaultSensors, ...this.options.sensors]);
 
     const draggableInitializedEvent = new DraggableInitializedEvent({
       draggable: this,
@@ -317,6 +322,16 @@ export default class Draggable {
     return Boolean(this.dragging);
   }
 
+  /**
+   * Returns all draggable elements
+   * @return {HTMLElement[]}
+   */
+  getDraggableElements() {
+    return this.containers.reduce((current, container) => {
+      return [...current, ...this.getDraggableElementsForContainer(container)];
+    }, []);
+  }
+
   /**
    * Returns draggable elements for a given container, excluding the mirror and
    * original source element if present

src/Draggable/Plugins/Accessibility/Accessibility.js

@@ -0,0 +1,129 @@
+import AbstractPlugin from 'shared/AbstractPlugin';
+
+const onInitialize = Symbol('onInitialize');
+const onDestroy = Symbol('onDestroy');
+
+/**
+ * Focusable default options
+ * @property {Object} defaultOptions
+ * @type {Object}
+ */
+const defaultOptions = {};
+
+/**
+ * Focusable plugin
+ * @class Focusable
+ * @module Focusable
+ * @extends AbstractPlugin
+ */
+export default class Focusable extends AbstractPlugin {
+  /**
+   * Focusable constructor.
+   * @constructs Focusable
+   * @param {Draggable} draggable - Draggable instance
+   */
+  constructor(draggable) {
+    super(draggable);
+
+    /**
+     * Focusable options
+     * @property {Object} options
+     * @type {Object}
+     */
+    this.options = {
+      ...defaultOptions,
+      ...this.getOptions(),
+    };
+
+    this[onInitialize] = this[onInitialize].bind(this);
+    this[onDestroy] = this[onDestroy].bind(this);
+  }
+
+  /**
+   * Attaches listeners to draggable
+   */
+  attach() {
+    this.draggable.on('draggable:initialize', this[onInitialize]).on('draggable:destroy', this[onDestroy]);
+  }
+
+  /**
+   * Detaches listeners from draggable
+   */
+  detach() {
+    this.draggable.off('draggable:initialize', this[onInitialize]).off('draggable:destroy', this[onDestroy]);
+  }
+
+  /**
+   * Returns options passed through draggable
+   * @return {Object}
+   */
+  getOptions() {
+    return this.draggable.options.focusable || {};
+  }
+
+  /**
+   * Returns draggable containers and elements
+   * @return {HTMLElement[]}
+   */
+  getElements() {
+    return [...this.draggable.containers, ...this.draggable.getDraggableElements()];
+  }
+
+  /**
+   * Intialize handler
+   * @private
+   */
+  [onInitialize]() {
+    // Can wait until the next best frame is available
+    requestAnimationFrame(() => {
+      this.getElements().forEach((element) => decorateElement(element));
+    });
+  }
+
+  /**
+   * Destroy handler
+   * @private
+   */
+  [onDestroy]() {
+    // Can wait until the next best frame is available
+    requestAnimationFrame(() => {
+      this.getElements().forEach((element) => stripElement(element));
+    });
+  }
+}
+
+/**
+ * Keeps track of all the elements that are missing tabindex attributes
+ * so they can be reset when draggable gets destroyed
+ * @const {HTMLElement[]} elementsWithMissingTabIndex
+ */
+const elementsWithMissingTabIndex = [];
+
+/**
+ * Decorates element with tabindex attributes
+ * @param {HTMLElement} element
+ * @return {Object}
+ * @private
+ */
+function decorateElement(element) {
+  const hasMissingTabIndex = Boolean(!element.getAttribute('tabindex') && element.tabIndex === -1);
+
+  if (hasMissingTabIndex) {
+    elementsWithMissingTabIndex.push(element);
+    element.tabIndex = 0;
+  }
+}
+
+/**
+ * Removes elements tabindex attributes
+ * @param {HTMLElement} element
+ * @private
+ */
+function stripElement(element) {
+  const tabIndexElementPosition = elementsWithMissingTabIndex.indexOf(element);
+
+  if (tabIndexElementPosition !== -1) {
+    element.tabIndex = -1;
+    elementsWithMissingTabIndex.splice(tabIndexElementPosition, 1);
+  }
+}

src/Draggable/Plugins/Accessibility/README.md

@@ -0,0 +1,18 @@
+## Focusable
+
+The Focusable plugin finds all draggable containers and elements on initialization
+and decorates them with `tabindex` attributes.
+The plugin will not override existing `tabindex` attributes on elements. This will
+make draggable elements and containers focusable.
+
+### API
+
+**`new Focusable(draggable: Draggable): Focusable`**  
+To create an focusable plugin instance.
+
+**`focusable.getElements(): HTMLElement[]`**  
+Returns container and draggable elements.
+
+### Options
+
+_No options_

src/Draggable/Plugins/Accessibility/index.js

@@ -0,0 +1,3 @@
+import Focusable from './Focusable';
+
+export default Focusable;