[Link] cannot have `block` Link due to usage of `box-shadow` for interactive states

What package(s) are you using?

    "@carbon/colors": "^10.1.0",
    "@carbon/grid": "^10.3.0",
    "@carbon/icons-react": "^10.3.0",
    "@carbon/import-once": "^10.1.0",
    "@carbon/layout": "^10.1.0",
    "@carbon/themes": "^10.3.0",
    "@carbon/type": "^10.2.0",
    "carbon-components": "^10.3.1",
    "carbon-components-react": "^7.3.1",

Detailed description

If you ever apply display: block to the Link component (vanilla, React, or otherwise), the box-shadow being used to create the underline on :hover/:active/:focus states will extend to the entire length of the block, way past the text of the link in some cases.

For example, go to the Carbon website (https://www.carbondesignsystem.com/components/link/code), add display: block to an example Link, and you will see the following:

Even though this is expected with the box model, this “visual defect” is very noticeable. And I don’t think we should expect Link to always remain inline in various applications / products. On the contrary, a block-style Link seems like a reasonable customization / deviation to expect, right? 🤔

🚨 UPDATE: Other concerns with AVT 🚨

Please see this comment for additional a11y concerns with using box-shadow for interactive link styling: https://github.com/carbon-design-system/carbon/issues/3059#issuecomment-501997246

Proposed solution

So text-decoration: underline would work great here & passes our AVT cases!

If you used text-decoration: underline instead of the box-shadow for the :hover/:active/:focus states, then it wouldn’t matter if the Link was inline or block – that text decoration would only extend as far as the link’s text:

[alisonjoseph]

Just jumping in to comment on the cool stuff that’s coming soon in css!! So in the future, we can get the thickness/offset back in all browsers. 😉

Here is a codepen Jen Simmons made showing what works today. https://codepen.io/jensimmons/pen/wLrjGG?editors=1100

https://drafts.csswg.org/css-text-decor-3/ https://drafts.csswg.org/css-text-decor-4/

[SimonFinney]

Thanks @jendowns for raising this! I appreciate the discussion.

I understand the reasoning behind the choices here, and maybe where this issue was raised on our side is a 1-in-a-1000 edge case and this may not come up again, but it seems counter-intuitive to me that if someone wanted to make a link block-level it would need to be wrapped in a div, especially for any existing consumers.

Another thing to note here about using box-shadow as a visual indicator, and we get called out on this quite a lot, is that for AVT cases where color is removed from the browser, the box-shadow for focus states is no longer displayed -