Tab and return key doesn't work

[rohanleach4]

This functionality seems to have been disabled. It really should be put back in. tested on Chrome

[fisshy]

Hey

try this one

<Link 
     ignoreCancelEvents={true}
>
  Your name
</Link>

[rohanleach4]

Sorry this doesn't work. I am having a fiddle with it at the moment and I understand why the return key has been disabled. Disabling the functionality and breaking accessibility is really not a good idea. It might be worth rethinking how this package is implemented so it can work for everyone.

[fisshy]

Feel free to make a PR :)

[rohanleach4]

I would love to help - at the moment mu solution is a bit hacky, so not something the world needs to see. I will keep beavering away at it though. Cheers for your time here.

[balazsorban44]

Hi! I have a menu, containing both some Links from react-scroll and react-router. The ones from this package do not get focus when using tab. Is this a related issue? Would this be time to readdress the problem for better a11y?

[chawes13]

@balazsorban44 I'm getting around that issue by adding tabIndex="0" to restore the anchors to the tab order. @fisshy should this be included by default?

Looks like ignoreCancelEvents={true} doesn't work in terms of enabling enter to activate the link, so the tabIndex solution is half-baked at best 😐.

Current workaround to the issues described above. It looks like React won't natively include enter as a valid "click" unless an href attribute is present. The benefit of this is that the anchor tag is also then included in the natural tab order. TBD on whether there are issues with a blank href

import { Link } from 'react-scroll'
function ScrollLink ({ children, ...rest }) {
  return (
    <Link href="" {...rest}>
      {children}
    </Link>
  )
}

[balazsorban44]

Thanks @chawes13! After testing, it looks adding a href="" prop indeed works. I am not an expert on a11y (if it is at all a problem with that), but an empty href works for now.

UPDATE:

Here is my unorthodox take:

Component is either a Link from react-router, or from react-scroll

Quick and dirty, but looks like it works. If Link is from react-router, looks like it just plain ignores the href prop, and uses to for that.