Feature Request - Accessible tabbing

[Sam Goddard]

Hey! Just started using this and I can't praise it enough. How hard would including accessible tabbing be? At the moment if I tab through internal links throughout the page the scroll doesn't move with me. I know this is common with smooth scroll libraries so i'm guessing it'd be quite hard to implement?

Thanks again for the awesome work on this so far :)

[Brad Adams]

Hey Sam, thanks! I'm currently on vacation but as soon as I get back I'll check it out.

Initially I wouldn't imagine there'd be a problem - since we're technically bound to the window scroll - however if you're saying it's not working correctly I might be missing something.

I'll let you know next week 🙂

[Brad Adams]

Hey @samuelgoddard, apologies for the delay. I've been able to take a look at this and believe I've got a solution:

useEffect(() => {
  const onTab = (e) => {
    if (e.key === 'Tab' || e.keyCode === 9) {
      const el = document.activeElement;
      const rect = el.getBoundingClientRect();

      const windowWidth =
        window.innerWidth || document.documentElement.clientWidth;
      const windowHeight =
        window.innerHeight || document.documentElement.clientHeight;

      const isInViewport =
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= windowHeight &&
        rect.right <= windowWidth;

      if (!isInViewport) {
        window.scrollTo(0, el.offsetTop);
      }
    }
  };

  document.addEventListener('keyup', onTab);

  return () => document.removeEventListener('keyup', onTab);
}, []);

You'll find a working example here: https://stackblitz.com/edit/scroller-motion-tab-scroll?file=src%2FuseTabScroll.js

Do let me know if any issues! 🙂