Link API breaks a11y intuition

[danny-andrews-snap]

Feature request

I want a more intuitive Link API which respects expectations we have around native a tags.

Is your feature request related to a problem? Please describe.

The current link API looks like the following:

<Link href="/about">
  <a>here</a>
</Link>

This is problematic for a few reasons:

1. It breaks intuition around a11y. When I see an a tag without an href, alarm bells go off, because that is a UX anti-pattern. In fact, this API makes it impossible to appease the anchor-is-valid eslint-plugin-jsx-a11y rule (see https://github.com/evcohen/eslint-plugin-jsx-a11y/issues/402).
2. It requires a call to cloneElement which should be avoided as its behavior is confusing. (How would I know my a tag will be given an href? Nothing about this API suggests that.)

Describe the solution you'd like

I would like a solution which doesn't require you to type an a tag without an href and also doesn't require you to duplicate the href information.

Describe alternatives you've considered

There are a few good alternatives:

1. Default to a tag if no children are given:

<Link href="/about" />

This is the approach react-router uses and it works quite well.

---

2. Use a render prop:

<Link href="/about">
  {href => <a href={href}>here</a>}
</Link>

This method appeases the anchor-is-valid rule and doesn't require the user to duplicate href information since the build href is passed down to the component they are rendering.

---

3. Component injection:

<Link href="/about" component={a} />

---

A combination of 1 and 2 would be powerful enough to cover all reasonable use cases.

Additional context

6431f5f

[alexandernanberg]

@timneutkens Would you accept a PR that would uses a similar approach like this? It would be a pretty big breaking change but imo it's worth it. I think the current next/link API i one of next's weak points atm.

[StefKors]

Any progress on this? running into the same issue trying to setup tests for a11y things.

[gromchen]

We had to use the following solution https://github.com/evcohen/eslint-plugin-jsx-a11y/issues/402#issuecomment-368305051, but it would be nice to have other options.

[WestonThayer]

Worth pointing out that the above solution (https://github.com/evcohen/eslint-plugin-jsx-a11y/issues/402#issuecomment-368305051) disables the rule's check for an href attribute altogether. That's 90% of the linting rule's value for me.

[eunicekokor]

Yes, I would agree with/echo @WestonThayer's point! The point of having the accessibility plugin is to audit for cases where we aren't supporting important rules. If the fundamental Linking structure of Next doesn't allow for us to check if we're being compliant, we'll have to continue manually do this checking in our process or handle it later on in our build process (adding more unnecessary dev time).

[hasparus]

Isn't this a limitation of styled-jsx? Anchor rendered by Links wouldn't have styles applied.

[renet]

Any news on this issue, or a good workaround that doesn't disable the href-rule?