Skip to main content

Kitchen Sink

This page includes a wide range of interactive elements to demo OpenKeyNav.

note

Turn OpenKeyNav on before trying the examples. Press Shift + O; the same command turns it off.

Drag-and-drop Elements (m)​

Moveable Items

Item One
Item Two
Item Three

Drop Targets

Drop Zone 1
Drop Zone 2

 

info

Map the source and destination elements with the configuration below. See all Drag Mode configuration options.

const openKeyNav = new OpenKeyNav();
openKeyNav.init({
  ...
  modesConfig: {
    move: {
      config: [
        {
          fromElements: '.moveableElement',
          toElements: '.dropZoneTargetType1, .dropZoneTargetType2',
          callback: (from, to) => {
            to.appendChild(from);
          },
        },
      ],
    },
  },
});

Buttons (k)​

info

Semantically coded links are tab-navigable and can be activated with enter.

OpenKeyNav enables users to click on links via Click Mode (k).

1. Internal Link 
<a href="./basic_example">1. Internal Link</a>
2. External Link 
<a href="https://github.com/LDubya/OpenKeyNav" target="_blank" rel="noopener noreferrer">
    2. External Link
</a>
3. Link without an href, tabindex=0 
<a onclick="alert('Link 3 clicked')" tabindex="0">3. Link without an href, tabindex=0</a>

Inputs and Forms (k)​

info

You can use tab, arrow keys, space, and enter to interact with form fields.

OpenKeyNav enables users to click on / focus on form fields via Click Mode (k).




info

Override key (ctrl). Press ctrl+[key] to execute an OpenKeyNav command while focused on a text input, checkbox, etc. For example, press ctrl+k for Click Mode. OpenKeyNav leaves its character commands inactive while an input, textarea, or editable region holds focus.





Headings (h)​

Heading Level 1 (1)

Heading Level 2 (2)

Heading Level 3 (3)

Heading Level 4 (4)

Heading Level 5 (5)
Heading Level 6 (6)

Scrollable Regions (s)​

Scrollable region #1

Line 2

Line 3

Line 4

Line 5

Line 6

Scrollable region #2

Line 2

Line 3

Line 4

Line 5

Line 6

Complete the diagnostic example​

4. Link without an href (not tabbable) 
<a onclick="alert('Link 4 clicked')">4. Link without an href (not tabbable)</a>
warning

This intentionally incomplete anchor demonstrates a diagnostic candidate. Click Mode gives it a direct activation path; complete the control with the semantics, focus behavior, accessible name, and keyboard interaction appropriate to its action.

note

Use a native <button> for an action. Use an <a> element with a meaningful href for navigation. When a custom control is required, implement its complete semantics, focus behavior, and established keyboard commands.