BaseKeyboardNavigation

Base component to handle keyboard navigation for elements inside it. It has a required slot to include the navigable elements.

Props

Name	Description	Type	Default
navigationHijacker	An array of TakeNavigationControl objects defining when to take control of the keyboard navigation.	Array	() => [ { xEvent: 'UserPressedArrowKey', moduleName: 'searchBox', direction: 'ArrowDown' } ]
eventsForDirectionLimit	An EventsForDirectionLimit to emit when the user is already at the furthest element in a direction and tries to keep going on the same direction.	Partial	() => ({ ArrowUp: 'UserReachedEmpathizeTop' })

Slots

Name	Description	Bindings (name - type - description)
default	(Required) Container content	None

Events

An event that the component will emit:

• UserReachedEmpathizeTop (opens new window): the event emitted by default when the container reaches its top navigation, but more events can be emitted for each direction using the eventsForDirectionLimit prop.

Examples

This component has a slot to inject other components inside it. The component expects a required prop, navigationHijacker, which is an array of objects containing: the xEvent to listen to, the moduleName in charge of emitting the event and to which direction it should react to; to take control of the navigation. It has another prop, optional in this case, to emit an xEvent when reaching the navigation limit in any direction.

Basic Usage

<KeyboardNavigation>
  <QuerySuggestions/>
</KeyboardNavigation>

Defining multiple conditions to take navigation's control

<KeyboardNavigation
  :navigationHijacker="[
    {
      xEvent: 'UserPressedArrowKey',
      moduleName: 'searchBox',
      direction: 'ArrowDown'
    },
    {
      xEvent: 'UserPressedArrowKey',
      moduleName: 'facets',
      direction: 'ArrowRight'
    }
  ]"
>
  <QuerySuggestions/>
</KeyboardNavigation>

Defining events to emit when reaching a navigation limit

<KeyboardNavigation
  :navigationHijacker="[
    {
      xEvent: 'UserPressedArrowKey',
      moduleName: 'searchBox',
      direction: 'ArrowDown'
    }
  ]"
  :eventsForDirectionLimit="{
    ArrowUp: 'UserReachedEmpathizeTop'
  }"
>
  <QuerySuggestions/>
</KeyboardNavigation>