useA11y() not working as expected

[pi43r]

Hi,

First of all: Really amazing library! 🦸‍♀️

I am using the react-three-next starter and am a bit confused about the setup.
If I see that correctly, the starter never uses <A11yAnnouncer /> so I added it into /components/layout/canvas.jsx

Then I changed the hover function to use the booleans from this library, but it doesn't work.
See components/canvas/Box.jsx in this sandbox

The expected behavior would be that the color changes to hotpink on hover. But there is no change.

[AlaricBaraou]

Hi !

Thanks I'm glad you appreciate this library :)

I was taking a quick look and it started working.

Should I assume you found a solution to your problem ?

[pi43r]

Ahhh, yes.
I think I answered my own question :)
For useA11y to work correct, it has to be encapsulated in it's own component like this <A11y> <Component \> </A11y>.
Originally I was using it like this, which does not work.

<A11y
    role='link'
    href={route}
    actionCall={() => {
      router.push(route)
    }}
  >
    <mesh
      ref={mesh}
      onPointerOver={(event) => setHover(true)}
      onPointerOut={(event) => setHover(false)}
    >
      <boxGeometry args={[1, 1, 1]} />
      <meshBasicMaterial
        // changed hovered to a11y functions
        //color={hovered ? 'hotpink' : color}
        color={a11y.focus || a11y.hover ? 'hotpink' : color}
      />
    </mesh>
</A11y>

[AlaricBaraou]

You're right, the starter doesn't do it this way to keep thing simple and minimal.
Glad you figured it out !