Keyboard

Keyboard accessibility utilities including skip links, keyboard shortcut badges (kbd), keyboard combos, navigation hints, and focus management helpers for POS and web applications.

Keyboard Badges (kbd)

Esc Tab Enter Space A F1 Ctrl S Shift Delete Alt

<div class="flex flex-wrap items-center gap-4">
  <!-- Standard kbd -->
  <span class="kbd">Esc</span>
  <span class="kbd">Tab</span>
  <span class="kbd">Enter</span>
  <span class="kbd">Space</span>
  <span class="kbd">A</span>
  <span class="kbd">F1</span>

  <!-- Small size -->
  <span class="kbd kbd-sm">Ctrl</span>
  <span class="kbd kbd-sm">S</span>

  <!-- Large size -->
  <span class="kbd kbd-lg">Shift</span>
  <span class="kbd kbd-lg">Delete</span>

  <!-- Glass variant -->
  <span class="kbd glass">Alt</span>
</div>

Requires: ux.min.css

<div class="flex flex-wrap items-center gap-4">
  <span class="inline-flex items-center justify-center whitespace-nowrap min-w-[1.5em] h-[1.5em] px-[0.4em] bg-base-200 border border-base-300 rounded font-mono text-xs font-medium text-base-content/60 shadow-[0_1px_0_var(--color-base-300)]">Esc</span>
  <span class="inline-flex items-center justify-center whitespace-nowrap min-w-[1.5em] h-[1.5em] px-[0.4em] bg-base-200 border border-base-300 rounded font-mono text-xs font-medium text-base-content/60 shadow-[0_1px_0_var(--color-base-300)]">Tab</span>
  <span class="inline-flex items-center justify-center whitespace-nowrap min-w-[1.5em] h-[1.5em] px-[0.4em] bg-base-200 border border-base-300 rounded font-mono text-xs font-medium text-base-content/60 shadow-[0_1px_0_var(--color-base-300)]">Enter</span>
  <!-- Small -->
  <span class="inline-flex items-center justify-center whitespace-nowrap min-w-[1.25em] h-[1.25em] px-[0.3em] bg-base-200 border border-base-300 rounded font-mono text-[0.65em] font-medium text-base-content/60 shadow-[0_1px_0_var(--color-base-300)]">Ctrl</span>
  <!-- Large -->
  <span class="inline-flex items-center justify-center whitespace-nowrap min-w-[2em] h-[2em] px-[0.5em] bg-base-200 border border-base-300 rounded font-mono text-[0.85em] font-medium text-base-content/60 shadow-[0_1px_0_var(--color-base-300)]">Shift</span>
</div>

Requires: tw.min.css

// No JavaScript required for kbd badges - pure CSS styling.
// Use inline <kbd> or <span class="kbd"> elements in your markup.

Keyboard Combos & Hints

Ctrl + S Ctrl + Shift + P Alt + F4 ⌘ + K

Save order Ctrl S Search ERPlora / Close Esc New order N

<div class="flex flex-col gap-4">
  <!-- Keyboard combos -->
  <div class="flex flex-wrap items-center gap-6">
    <span class="kbd-combo">
      <span class="kbd">Ctrl</span>
      <span class="kbd-combo-separator">+</span>
      <span class="kbd">S</span>
    </span>

    <span class="kbd-combo">
      <span class="kbd">Ctrl</span>
      <span class="kbd-combo-separator">+</span>
      <span class="kbd">Shift</span>
      <span class="kbd-combo-separator">+</span>
      <span class="kbd">P</span>
    </span>

    <span class="kbd-combo">
      <span class="kbd">Alt</span>
      <span class="kbd-combo-separator">+</span>
      <span class="kbd">F4</span>
    </span>

    <span class="kbd-combo">
      <span class="kbd">⌘</span>
      <span class="kbd-combo-separator">+</span>
      <span class="kbd">K</span>
    </span>
  </div>

  <!-- Keyboard hints -->
  <div class="flex flex-wrap items-center gap-4">
    <span class="keyboard-hint">
      <span class="keyboard-hint-text">Save order</span>
      <span class="kbd kbd-sm">Ctrl</span>
      <span class="kbd kbd-sm">S</span>
    </span>

    <span class="keyboard-hint">
      <span class="keyboard-hint-text">Search ERPlora</span>
      <span class="kbd kbd-sm">/</span>
    </span>

    <span class="keyboard-hint">
      <span class="keyboard-hint-text">Close</span>
      <span class="kbd kbd-sm">Esc</span>
    </span>

    <span class="keyboard-hint">
      <span class="keyboard-hint-text">New order</span>
      <span class="kbd kbd-sm">N</span>
    </span>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col gap-4">
  <!-- Combo: inline-flex with gap and separator -->
  <div class="flex flex-wrap items-center gap-6">
    <span class="inline-flex items-center gap-1">
      <span class="inline-flex items-center justify-center whitespace-nowrap min-w-[1.5em] h-[1.5em] px-[0.4em] bg-base-200 border border-base-300 rounded font-mono text-xs font-medium text-base-content/60 shadow-[0_1px_0_var(--color-base-300)]">Ctrl</span>
      <span class="text-xs text-base-content/40">+</span>
      <span class="inline-flex items-center justify-center whitespace-nowrap min-w-[1.5em] h-[1.5em] px-[0.4em] bg-base-200 border border-base-300 rounded font-mono text-xs font-medium text-base-content/60 shadow-[0_1px_0_var(--color-base-300)]">S</span>
    </span>
  </div>
  <!-- Hint: action label + kbd badges in a subtle container -->
  <div class="flex flex-wrap items-center gap-4">
    <span class="inline-flex items-center gap-1 px-2 py-1 bg-base-200 rounded text-xs text-base-content/60">
      <span class="opacity-80">Save order</span>
      <span class="inline-flex items-center justify-center min-w-[1.25em] h-[1.25em] px-[0.3em] bg-base-200 border border-base-300 rounded font-mono text-[0.65em] font-medium shadow-[0_1px_0_var(--color-base-300)]">Ctrl</span>
      <span class="inline-flex items-center justify-center min-w-[1.25em] h-[1.25em] px-[0.3em] bg-base-200 border border-base-300 rounded font-mono text-[0.65em] font-medium shadow-[0_1px_0_var(--color-base-300)]">S</span>
    </span>
  </div>
</div>

Requires: tw.min.css

// Register keyboard shortcuts for ERPlora POS
document.addEventListener('keydown', (e) => {
  // Ctrl+S → Save order
  if (e.ctrlKey && e.key === 's') {
    e.preventDefault();
    saveCurrentOrder();
  }
  // / → Focus search
  if (e.key === '/' && !isInputFocused()) {
    e.preventDefault();
    document.querySelector('.search-input')?.focus();
  }
  // Esc → Close modal/overlay
  if (e.key === 'Escape') {
    closeActiveOverlay();
  }
  // N → New order (when not in input)
  if (e.key === 'n' && !isInputFocused()) {
    createNewOrder();
  }
});

function isInputFocused() {
  const tag = document.activeElement?.tagName;
  return tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT';
}

Skip Link & Keyboard Navigation

Preview

Tab through the buttons below to see focus-visible outlines (keyboard-nav mode):

<div class="relative" style="min-height: 120px;">
  <!-- Skip link (visible on focus only) -->
  <a href="#main-content" class="skip-link">Skip to main content</a>

  <!-- Keyboard navigation mode indicator -->
  <div class="keyboard-nav">
    <p class="text-sm text-base-content/60 mb-3">Tab through the buttons below to see focus-visible outlines (keyboard-nav mode):</p>
    <div class="flex gap-2 flex-wrap">
      <button class="btn btn-sm btn-primary">ERPlora Home</button>
      <button class="btn btn-sm btn-outline">Orders</button>
      <button class="btn btn-sm btn-outline">Products</button>
      <button class="btn btn-sm btn-outline">Reports</button>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="relative" style="min-height: 120px;">
  <!-- Skip link: off-screen until focused -->
  <a href="#main-content" class="fixed -top-24 left-4 z-[900] px-6 py-2 bg-primary text-white rounded text-sm font-medium no-underline shadow-lg transition-[top] duration-200 focus:top-4 focus:outline-none">
    Skip to main content
  </a>
  <!-- Keyboard nav: enhanced focus-visible on all children -->
  <div class="[&_*:focus-visible]:outline-2 [&_*:focus-visible]:outline-primary [&_*:focus-visible]:outline-offset-2">
    <p class="text-sm text-base-content/60 mb-3">Tab through the buttons below:</p>
    <div class="flex gap-2 flex-wrap">
      <button class="btn btn-sm btn-primary">ERPlora Home</button>
      <button class="btn btn-sm btn-outline">Orders</button>
      <button class="btn btn-sm btn-outline">Products</button>
    </div>
  </div>
</div>

Requires: tw.min.css

// Detect keyboard vs mouse navigation
let usingKeyboard = false;

document.addEventListener('keydown', (e) => {
  if (e.key === 'Tab') {
    usingKeyboard = true;
    document.body.classList.add('keyboard-nav');
    document.body.classList.remove('keyboard-nav-mouse');
  }
});

document.addEventListener('mousedown', () => {
  usingKeyboard = false;
  document.body.classList.remove('keyboard-nav');
  document.body.classList.add('keyboard-nav-mouse');
});

// Skip link usage
// <a href="#main-content" class="skip-link">Skip to main content</a>
// The link is hidden off-screen and slides into view when focused via Tab.

Arrow Navigation & Roving Tabindex

Preview

ERPlora Quick Actions (use arrow keys to navigate):

ERPlora Menu (arrow keys):

<div class="flex flex-col gap-6">
  <!-- Arrow nav container -->
  <div class="arrow-nav p-4 rounded-box bg-base-100 border border-base-300" data-roving>
    <p class="text-sm font-medium mb-3">ERPlora Quick Actions (use arrow keys to navigate):</p>
    <div class="flex gap-2 flex-wrap" role="toolbar" aria-label="Quick actions">
      <button class="btn btn-sm btn-outline" tabindex="0">New Order</button>
      <button class="btn btn-sm btn-outline" tabindex="-1">Checkout</button>
      <button class="btn btn-sm btn-outline" tabindex="-1">Refund</button>
      <button class="btn btn-sm btn-outline" tabindex="-1">Reports</button>
      <button class="btn btn-sm btn-outline" tabindex="-1">Settings</button>
    </div>
  </div>

  <!-- Roving tabindex list -->
  <div class="arrow-nav rounded-box bg-base-100 border border-base-300 overflow-hidden" data-roving>
    <p class="text-sm font-medium px-4 pt-3">ERPlora Menu (arrow keys):</p>
    <ul class="list-none m-0 p-2" role="listbox" aria-label="Menu items">
      <li class="px-3 py-2 rounded cursor-pointer text-sm hover:bg-base-200" role="option" tabindex="0">Dashboard</li>
      <li class="px-3 py-2 rounded cursor-pointer text-sm hover:bg-base-200" role="option" tabindex="-1">Inventory</li>
      <li class="px-3 py-2 rounded cursor-pointer text-sm hover:bg-base-200" role="option" tabindex="-1">Customers</li>
      <li class="px-3 py-2 rounded cursor-pointer text-sm hover:bg-base-200" role="option" tabindex="-1">Analytics</li>
    </ul>
  </div>
</div>

Requires: ux.min.css

<!-- .arrow-nav adds a subtle focus-within border highlight.
  [data-roving] [tabindex="0"]:focus gets a bg-base-200 highlight.
  Recreate in Tailwind with focus-within and group utilities:
-->
<div class="relative p-4 rounded-box bg-base-100 border border-base-300 focus-within:border-primary/30" data-roving>
  <p class="text-sm font-medium mb-3">Quick Actions (arrow keys):</p>
  <div class="flex gap-2 flex-wrap" role="toolbar">
    <button class="btn btn-sm btn-outline focus:bg-base-200" tabindex="0">New Order</button>
    <button class="btn btn-sm btn-outline focus:bg-base-200" tabindex="-1">Checkout</button>
    <button class="btn btn-sm btn-outline focus:bg-base-200" tabindex="-1">Refund</button>
  </div>
</div>

Requires: tw.min.css

// Roving tabindex: arrow key navigation within a container
function initRovingTabindex(container) {
  const items = Array.from(
    container.querySelectorAll('[tabindex]')
  );

  container.addEventListener('keydown', (e) => {
    const current = items.findIndex(el => el === document.activeElement);
    if (current === -1) return;

    let next = -1;
    if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
      next = (current + 1) % items.length;
    } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
      next = (current - 1 + items.length) % items.length;
    } else if (e.key === 'Home') {
      next = 0;
    } else if (e.key === 'End') {
      next = items.length - 1;
    }

    if (next !== -1) {
      e.preventDefault();
      items[current].setAttribute('tabindex', '-1');
      items[next].setAttribute('tabindex', '0');
      items[next].focus();
    }
  });
}

// Initialize all roving containers
document.querySelectorAll('[data-roving]').forEach(initRovingTabindex);

Classes Reference

Class	Description
`skip-link`	Accessible skip navigation link, hidden until focused
`kbd`	Keyboard badge with monospace font, border, and shadow
`kbd-sm`	Small kbd badge (0.65em font, 1.25em height)
`kbd-lg`	Large kbd badge (0.85em font, 2em height)
`kbd glass`	Glass morphism variant with backdrop blur
`kbd-combo`	Inline container for multi-key combinations
`kbd-combo-separator`	Separator element ("+" or similar) between keys
`keyboard-nav`	Enables focus-visible outlines on all children (keyboard mode)
`keyboard-nav-mouse`	Hides focus rings on non-focus-visible elements (mouse mode)
`keyboard-hint`	Hint container with action text and kbd badges
`keyboard-hint-text`	Text label inside a keyboard hint
`arrow-nav`	Container with focus-within border highlight for arrow navigation
`[data-roving]`	Attribute for roving tabindex focus highlight on [tabindex="0"]