Adaptive color not working

I’ve forked the hosted example and changed the scrollable area to have a black background. I’ve also changed the --focus-primary var to black. https://codesandbox.io/s/bold-sun-lx1im?file=/public/index.html

The focus ring should be adapting and showing a visible focus ring in this case right? At the moment it’s still just creating a black focus ring.

[faultyserver]

@Thisisjuke I think the behavior you’re seeing there, where the ring “detaches” from the element that it’s supposed to be tracking, is likely because you’re missing a FocusRingScope on the inside of the scrolling component. Without that, the ring renderer doesn’t think that anything is moving when you scroll, so you get this static-looking ring while everything else moves.

Something like:

<ScrollingContainer ref={scrollingRef}>
  <FocusRingScope containerRef={scrollingRef}>
    {...yourScrollableChildren}
  </FocusRingScope>
</ScrollingContainer>

should make the rings track the elements properly.

To your original question, if you want to just disable the ring while the scrolling happens, you can also pass the disabled prop to the FocusRing around the element itself, which will prevent it from rendering at all when set.

We will probably add some flexibility for being able to inject a “best color selector” function or the like in the future, but hopefully one or both of those solutions is sufficient for your use case.

[Thisisjuke]

@faultyserver @dougmacknz Hello, there is a PR open since Dec 2, 2021. Can we have a status on this PR please ?