<Link /> component does not allow onClick if href is missing

Title line template: Link component disabled onClick when href property is not used

–>

What package(s) are you using?

carbon-components carbon-components-react

Detailed description

Describe in detail the issue you’re having.

The <Link /> component is often used to trigger modals etc. These require an onClick but no href. The lastest major release of carbon-components disables all mouse / cursor interaction when the href is not present.

Is this issue related to a specific component?

<Link />

What did you expect to happen? What happened instead? What would you like to see changed?

I expected that the <Link /> would function as it did in previous major releases. I’d like to request the scss to disable mouse / cursor events be removed.

have found the source in carbon-components : _link.scss

&:not([href]) {
      color: $disabled-02;
      cursor: not-allowed;
      pointer-events: none;
      touch-action: none;
...
}

I’m not sure why the team decided to disable links as it is still valid without an href. Of course role='button' tabindex='0' would be helpful for accessibility. But I can’t see disabling it.

What browser are you working in?

Chrome

What version of the Carbon Design System are you using?

latest

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

User Self Care

Steps to reproduce the issue

<Link 
        className='list-link' 
        onClick={(): IArrowFunction => { props.grabAuthenticatorClients(); }}
    >
    {securityKeys.ibmVerifyAdd}
    </Link>

Please create a reduced test case in CodeSandbox https://codesandbox.io/s/codesandbox-3k43r

Additional information

• Screenshots or code
• Notes

[jendowns]

@Acts7 Again I think this is a case where a Button is better than a Link.

Here’s a great resource that came to my attention recently, from an accessibility advocate: https://marcysutton.com/links-vs-buttons-in-modern-web-applications

She specifically calls out that buttons are ideal for opening modals, and adds:

The starkest difference between a link and a button to me is that a link navigates the user to a new resource, taking them away from the current context (internal links are the only wrinkle here). A button toggles something in the interface, like a video player; or triggers new content in that same context, like a popup menu using aria-haspopup.

In this case, all you’d have to do is switch from the Link you are using to something like <Button type="ghost" onClick= ... /> and you’d be good! 🎉 It would also ensure that your markup is accessible. (And remove the need for style overrides, which are only going around this problem and not addressing the root cause – that a Link isn’t ideal for this situation)

(EDIT: Looks like TJ beat me to it! https://github.com/carbon-design-system/carbon/issues/3711#issuecomment-525473988 Yes follow that link he shared. Ghost buttons look just like links but are used for this purpose 🎉 )

[shixiedesign]

Thanks again @jendowns. I’d love to capture some of these into our guidance for button/modal usage. Do you think @connor-leech this can be a bookmark when we review our component documentations? Not sure what would be the best format. We can start a new issue if you like.