Support Keyboard Navigation

Morning!

We are having a little trouble making our scrollTo links work from the keyboard. We could be doing something wrong, but as far as I can tell all scroll related events happen based off of onClick. It would be nice for keyboard users to also support keyDown/keyUp of the enter key and possibly the space key.

Is this something that you do or are looking to support?

Thanks, Laurie

[kylemh]

Yikes. I’ll come back to this this weekend. Sorry for the 2.5 year delay 😂

[kylemh]

I spent a bunch of time looking into a11y practices around a “scroll-to-top” sort of button, and couldn’t find anything.

role=“scrollbar” doesn’t seem to properly catch the semantics of the Link element.

Since this library doesn’t have context of the whole app there’s not much we can solve from the library’s perspective besides advising in documentation.

I hesitated to make any changes to the codebase because Link currently has no defaults set.

I think @nielsboecker’s example is probably best, I might also add role="button". I’d also recommend using @reach/visually-hidden to supply a hidden, but rendered text representation of any scroll button that may only rely on iconography or an image.

Lastly, and the most difficult, you’d need to manage the change of applied focus depending on where somebody would scroll to. For example, imagine tabbing to the Link and hitting enter. You’re taken 1000px up. When the user hits tab again, I would think they’d expect to focus onto the next focusable element in there view.

@fisshy lemme know if I can add all of this to the README.