Advanced Configuration

Advanced configuration maps OpenKeyNav's movement routes, labels, commands, feedback, and diagnostics to the host application.

Configuring Drag-and-Drop

Define source containers, destination targets, and optional callbacks to connect Move Mode to the application's drag-and-drop workflow.

const moveConfig = [
  {
    fromContainer: ".containerOfMoveables",
    toElements: ".dropZoneTargetType1, .dropZoneTargetType2",
    callback: (elMoveable, elDropZoneTarget) => {
      // Your callback logic
    }
  },
  {
    fromContainer: ".classFrom2",
    toElements: ".classToB"
  },
  {
    fromContainer: ".classFrom3",
    toElements: ".classToC"
  }
];

// Initialize with drag-and-drop configuration
openKeyNav.init({
    modesConfig: {
        move: {
            config: moveConfig
        }
    }
});

Combining Multiple Advanced Configurations

Combine the options in one configuration object to align OpenKeyNav with the complete interaction design.

const fullConfig = {
    spot: {
        fontColor: 'yellow',
        backgroundColor: '#000',
        insetColor: '#ff0000',
        fontSize: '14px',
        arrowSize_px: 6
    },
    focus: {
          outlineColor: '#0088cc',
          outlineStyle: 'solid'
    },
    keys: {
        escape: 'q',
        click: 'c',
        scroll: 'w',
        move: 'd',
        heading: 'n'
    },
    modesConfig: {
        move: {
            config: moveConfig
        }
    },
    notifications: {
        enabled: true,
        displayToolName: true,
        duration: 10000
    },
    debug: {
        keyboardAccessible: true // default
    }
};

openKeyNav.init(fullConfig);

These settings align OpenKeyNav's labels, commands, movement routes, feedback, and development review with the host application.

info

Turn OpenKeyNav on

After the page loads, press Shift + O to turn OpenKeyNav on or off. OpenKeyNav keeps its character commands inactive until a user enables them. This persistent on/off mechanism supports the turn-off option in WCAG 2.1 Success Criterion 2.1.4: Character Key Shortcuts.