Skip to main content

Initialize OpenKeyNav

The OpenKeyNav constructor creates an instance. Pass configuration to init() to align its commands, labels, movement routes, feedback, and diagnostics with the application.

Constructor​

Syntax​

const openKeyNav = new OpenKeyNav();

Parameters​

  • The constructor takes no parameters.
  • init(config) accepts an optional configuration object. Calling init() without one uses the defaults.

Configuration Options​

The config object can include the following properties:

  • keys: Custom key bindings for different modes.
  • spot: Customization options for the appearance of labels.
  • focus: Customization options for the appearance of the focus outline.
  • modesConfig: Configuration for different modes like drag-and-drop.
  • notifications: Configuration for visible and announced mode feedback.
  • debug: Development options for focused review of semantics, focus, activation, and task completion.
  • telemetry: Controls the version support event sent during initialization.

Example​

Here's an example of how to initialize OpenKeyNav with a custom configuration:

const openKeyNav = new OpenKeyNav();

const config = {
    keys: {
        click: 'c',  // Custom key for click mode
        scroll: 'w', // Custom key for scroll mode
    },
    spot: {
        fontColor: 'white',
        backgroundColor: '#000',
        insetColor: '#ff0000',
        fontSize: '14px',
        arrowSize_px: 6
    },
    focus: {
        outlineColor: '#0088cc',  // Customize the outline color
        outlineStyle: 'dashed'    // Customize the outline style
    },
    modesConfig: {
        move: {
            config: [
                {
                    fromContainer: ".containerOfMoveables",
                    toElements: ".dropZoneTargetType1, .dropZoneTargetType2",
                    callback: (elMoveable, elDropZoneTarget) => {
                        // Your callback logic
                    }
                }
            ]
        }
    },
    debug: {
        keyboardAccessible: false // Disable debug mode
    }
};

openKeyNav.init(config);

In this example, OpenKeyNav is initialized with a custom configuration that changes the key bindings for click and scroll modes, customizes the appearance of labels, configures drag-and-drop behavior, and disables the default debug mode.

This initialization pattern gives the application one place to configure OpenKeyNav and verify the resulting keyboard workflows.