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.	TakeNavigationControl[]	() => [ { 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

<template>
  <BaseKeyboardNavigation>
    <QuerySuggestions />
  </BaseKeyboardNavigation>
</template>
<script setup>
import { BaseKeyboardNavigation } from '@empathyco/x-components'
import QuerySuggestions from './QuerySuggestions.vue'
</script>

Defining multiple conditions to take navigation's control

<template>
  <BaseKeyboardNavigation
    :navigationHijacker="[
      {
        xEvent: 'UserPressedArrowKey',
        moduleName: 'searchBox',
        direction: 'ArrowDown',
      },
      {
        xEvent: 'UserPressedArrowKey',
        moduleName: 'facets',
        direction: 'ArrowRight',
      },
    ]"
  >
    <QuerySuggestions />
  </BaseKeyboardNavigation>
</template>
<script setup>
import { BaseKeyboardNavigation } from '@empathyco/x-components'
import QuerySuggestions from './QuerySuggestions.vue'
</script>

Defining events to emit when reaching a navigation limit

<template>
  <BaseKeyboardNavigation
    :navigationHijacker="[
      {
        xEvent: 'UserPressedArrowKey',
        moduleName: 'searchBox',
        direction: 'ArrowDown',
      },
    ]"
    :eventsForDirectionLimit="{
      ArrowUp: 'UserReachedEmpathizeTop',
    }"
  >
    <QuerySuggestions />
  </BaseKeyboardNavigation>
</template>
<script setup>
import { BaseKeyboardNavigation } from '@empathyco/x-components'
import QuerySuggestions from './QuerySuggestions.vue'
</script>