Keyboard Navigation

Avenue Luxe includes a comprehensive keyboard navigation system providing enterprise-level accessibility.

Keyboard Shortcuts

Shortcut	Action
/	Focus search field
?	Show/hide shortcuts panel
ESC	Close active modal or overlay
Tab	Navigate to next element
Shift + Tab	Navigate to previous element
Arrow Keys	Navigate menus and grids
Home	Jump to first item
End	Jump to last item
Enter	Activate link or button
Space	Activate button or checkbox

Visual Feedback

• Gold focus rings (#C9A961, 3px width, 4px offset)
• Smart detection — Only visible for keyboard users (hidden for mouse)
• Smooth animations — 200ms transitions with pulse effect
• High contrast support — Adapts to accessibility settings
• Dark mode — Automatic color adjustments

Customizing Focus Color

:root {
  --focus-color: #C9A961;  /* Your brand color */
  --focus-width: 3px;
  --focus-offset: 4px;
}

Skip Links

Skip links let keyboard users jump past navigation to main content:

• Skip to content
• Skip to navigation
• Skip to footer
• Skip to search

These appear when focused (via Tab) and are visually hidden otherwise.

Focus Trap

Modals and drawers automatically trap focus:

• Tab cycles through focusable elements within the modal
• Focus cannot escape to background content
• ESC key closes the modal and restores focus to the trigger element

Using Focus Trap in Custom Modals

<div role="dialog" aria-modal="true" aria-labelledby="modal-title">
  <h2 id="modal-title">Modal Title</h2>
  <button data-close>Close</button>
  <!-- Modal content -->
</div>

Focus is automatically trapped when the modal is visible.

Roving Tabindex

Menus use roving tabindex for efficient navigation:

<nav data-roving-tabindex aria-orientation="horizontal">
  <a href="/" role="menuitem">Home</a>
  <a href="/shop" role="menuitem">Shop</a>
</nav>

Arrow keys move between items, Tab moves to the next section.

Grid Navigation

Product grids support arrow key navigation:

<div role="grid" data-columns="4">
  <div role="gridcell">
    <a href="/product">Product 1</a>
  </div>
</div>

WCAG 2.1 Compliance

• 2.1.1 Keyboard (Level A)
• 2.1.2 No Keyboard Trap (Level A)
• 2.4.1 Bypass Blocks (Level A)
• 2.4.3 Focus Order (Level A)
• 2.4.7 Focus Visible (Level AA)
• 3.2.1 On Focus (Level A)

Browser Support

Browser	Support
Chrome 90+	Full
Firefox 88+	Full
Safari 14+	Full
Edge 90+	Full
Older browsers	Graceful degradation