Accessibility

[Myrmod]

I would love to have a way to be able to navigate scenes using the keyboard eg. via the tab key.

I am thinking about something like this:

<script lang="ts">
  type Box = {
    self: BABYLON.Mesh | BABYLON.AbstractMesh
  }
  let box1: Box
  let box2: Box
  let box3: Box
   
  $: tabableItems = [box1, box2, box3]  
</script>

<Canvas>
  <TabHandler items={tabableItems} cameraSpeed={1} outlineColor="#ffffff" outlineThickness={0.1} />
  <HemisphericLight />
  <ArcRotateCamera />
  <Box bind:object={box1} />
  <Box bind:object={box2} />
  <Box bind:object={box3} />
</Canvas>

The TabHandler component is then responsible for the following things:

• checking if the received items are tabable
• handling the keyboard events of the tab key in both directions
• moving the camera smoothly to the focused object in a timely manner
• highlighting the object with an outline

It might be required to be able to define a position the camera should move to on each object.