Link

This role is fairly straightforward You should think of it as the equivalent of an html link "a" tag Since it's meant to emulate the behaviour of a regular html link. It should be used in combination with something that will trigger navigation on click.

<A11y
  role="link"
  href="/page"
  actionCall={() => {
    router.push(`/page`)
  }}
>
  <Some3DComponent />
</A11y>

Using it like this makes it focusable to all kind of users. It will also show a pointer on mouse over.

You should also use the useA11y() hook within the encapsulated components to adjust the rendering on hover and focus. Doing so greatly improve the accessibility of your page. Take a look at this code sample to see how to use it. You can also play with it in this demo

function Some3DComponent() {
  const a11y = useA11y()
  return (
    <mesh>
      <boxBufferGeometry />
      <meshStandardMaterial
        metalness={1}
        roughness={0.8}
        color={a11y.focus || a11y.hover ? '#cc66dd' : '#ffffff'}
        emissive={a11y.focus ? '#cc4444' : a11y.hover ? '#339922' : '#003399'}
      />
    </mesh>
  )
}