modesConfig

The modesConfig option connects configurable OpenKeyNav modes to application workflows. Use its move configuration to define sources, valid destinations, and completion callbacks for keyboard movement and drag-and-drop.

Configuration Option

modesConfig

• Type: Object
• Description: An object to configure different modes in OpenKeyNav.

Properties

• move (optional): Configuration for drag-and-drop mode.

move Configuration

The move configuration maps source containers or elements to valid destination elements and completion callbacks.

Properties

• config (optional): An array of objects defining drag-and-drop configurations.

config Array Objects

Each object in the config array can include the following properties:

• fromContainer (string, optional): Selector for the container that holds the draggable elements.
• fromElements (string, optional): Selector for the specific draggable elements within the fromContainer.
• resolveFromElements (function, optional): Callback function to dynamically resolve the draggable elements.
• fromExclude (string, optional): Selector for elements within fromContainer to exclude from being draggable.
• toElements (string, required): Selector for the drop zone targets.
• resolveToElements v.next (function, optional): Callback function to dynamically resolve the drop zone targets.
• callback (function, optional): Callback function that is called when a draggable element is moved to a drop zone.

Example

Configure a Move Mode workflow with source selectors, destination selectors, and callbacks:

const openKeyNav = new OpenKeyNav();

const moveConfig = [
  {
    fromContainer: ".classContainerFrom1",
    fromElements: ".classElementFrom1",
    resolveFromElements: function() { // Optional callback to resolve fromElements
        return document.querySelectorAll('.classElementFrom1'); 
    },
    fromExclude: ".excludeThisElement",
    toElements: ".classToA, .classToD, .classToE", 
    callback: (el, target) => {
      console.log('Moved', el, 'to', target);
    }
  },
  {
    fromContainer: ".classContainerFrom2",
    toElements: ".classToB"
  },
  {
    resolveFromElements: function() { 
        return document.querySelectorAll('.classElementFrom3'); 
    },
    toElements: ".classToC"
  }
];

const config = {
    modesConfig: {
        move: {
            config: moveConfig
        }
    }
};

openKeyNav.init(config);

In this example, the modesConfig object is used to configure the drag-and-drop functionality with various settings for containers, elements, and callbacks.

Summary

• modesConfig object: Configure application-connected OpenKeyNav modes.
• move property: Map source containers or elements to destinations and callbacks.
• Application fit: Align movement routes with the website's interaction and state model.

This configuration gives keyboard users direct routes through the application's movement workflows.