-
Notifications
You must be signed in to change notification settings - Fork 5
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Feature Request - Accessible tabbing #22
Comments
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 🙂 |
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! 🙂 |
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 :)
The text was updated successfully, but these errors were encountered: