Router: Router prevents some layouts from scrolling on spacebar press

Created on 19 Sep 2018 · 3Comments · Source: reach/router

Hello!

I think I've found a bug related to scrolling on a page layout that uses flexbox to create a sticky header.

Reproduction steps:

Visit: https://codesandbox.io/s/23ryykp4pn
Notice that pressing spacebar does not scroll the Lorem Ipsum text. (You may want to "Open in a new window.")
Open up Chrome inspector and remove tabindex="0" from root router element.
Notice that pressing spacebar now scrolls the text.

Confirmed in latest Chrome, Firefox, and Safari for OS X.

Hope the reproduction was helpful and thanks for the hard work on this!

bug

Source

danoc

👍1

All 3 comments

This bug also prevents the use of cursor keys + page up/down for scrolling. I understand from #63 that the tabindex is there to allow focus control for screen readers, but breaking basic keyboard navigation on perfectly reasonable layouts seems like a pretty dire state of affairs for a library specifically focused on accessibility.

CheshireSwift on 6 Mar 2019

confirmed not working in latest version of the router.

mtliendo on 12 Sep 2019

Closing because the next version gives programmers more control over what gets focus and won't have this issue.

For today, go ahead and do <Router primary={false}> and manage focus yourself if you have large content like this.

Also, who knew that browsers don't scroll with spacebar on an element with tabIndex="-1"? I certainly didn't.

Please note, smug replies like @CheshireSwift's aren't really welcome around here, we're charting new territory in web accessibility here and we're gonna goof some things up. More unhelpful know-it-all comments will earn a block because we don't need to deal with that crap.