Skip to main content

focus

The focus configuration option allows you to customize the appearance of the outline used to highlight focused elements in OpenKeyNav. This includes options for outline color and style, enabling you to match the focus outline's appearance to your website's design.

Configuration Option​

focus​

  • Type: Object
  • Description: An object to configure the appearance of the focus outline.

Properties​

  • outlineColor (string, optional): The color of the focus outline.
  • outlineStyle (string, optional): The style of the focus outline (e.g., solid, dashed).

Example​

Here's an example of how to customize the appearance of the focus outline in OpenKeyNav:

import OpenKeyNav from 'openkeynav';

const config = {
    focus: {
        outlineColor: '#0088cc',  // Customize the outline color
        outlineStyle: 'dashed'    // Customize the outline style
    }
};

const openKeyNav = new OpenKeyNav();
openKeyNav.init(config);

In this example, the focus configuration object customizes the appearance of the focus outline with a specific color and style.

Summary​

  • Customizable Properties:
    • outlineColor: Color of the focus outline.
    • outlineStyle: Style of the focus outline (e.g., solid, dashed).

By using the focus configuration option, you can tailor the appearance of OpenKeyNav's focus outline to better fit your website's design and improve visual integration.