WP components audit: ExternalLink & Link

[davewhitley]

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

This issue is part of a review on the naming, structure, and composition of the UI components as brought up in #16367

Link vs Button

Please see this comment on how the link vs button discussion relates to this component library audit: #7534 (comment)

ExternalLink

Audit

Opportunities I came across while reviewing this component.

• Based on the name, I expected there to be also a Link component.

Grouping

• I expect this component to live in a Buttons category or as a top level item.

Suggestions

• I suggest we create a Link component with 'external' as a prop.

Link (new)

This component doesn't exist but I believe there is a strong need for one, and it is relevant to the naming and structure of existing Button and ExternalLink elements.

Links are standard in several component libraries. Here is a summary of what they can be used for:

Links are used primarily as a navigational element. Links may also change what or how data is displayed (i.e., view more, show all). If the action taken by the user will change or manipulate data, use a button. (Carbon)

Links are used to embed actions or pathways to more information in a sentence. (Polaris)

The Link component creates a hyperlink to external pages, files, anchors on the same page, or another URL. (Mineral UI)

Feedback

The feedback I'm looking for is related to naming, structure, and composition. I'm not looking for visual feedback of the components.Prop audit can be seen in the comment below.

• The most helpful feedback would be on how the component library should handle Link and Button components. Discussion is here: Components: Separate Button / Link components, eliminate ExternalLink, IconButton #7534 (comment)

[davewhitley]

Props audit

As an addendum, here is a deeper evaluation of the props for these components. This is an effort to expand the components to be more useful and to answer the question, "Are properties well thought out and consistently applied?" This only covers visual props. Event handler props will be evaluated at a later date.

Link

✨ New

• external: provides external icon and tooltip that informs the user about leaving the page.
• danger: red colored link.
• monochrome: uses inherit color, if you'd like the link to be the same color as surrounding text.

---

Event handler props will be evaluated at a later date.

[enriquesanchez]

external: provides external icon and tooltip that informs the user about leaving the page.

👍 👍

Also, any chance we can add to the docs a summary of the WCAG's recommendations on external links?

In summary, it's recommended to avoid external links because some users can get confused with the new windows or tabs, so they should be used with caution.

[afercia]

I suggest we create a Link component with 'external' as a prop.

Worth noting 'external' doesn't necessarily mean a link must open in a new browser's tab (by using target="_blank". Links to external sites can open in the same tab. Conversely, links to the same site may open in a new tab. Both usages are present in core, although the visual look of the links is inconsistent.

I think the two cases should be distinguished by the means of two separate props:

• external: for links that point to non-core-admin pages
• opensNewTab (better wording welcome): for links that open in a new browser's tab

Links may also change what or how data is displayed (i.e., view more, show all). If the action taken by the user will change or manipulate data, use a button. (Carbon)

That's really wrong. All those use cases must use <button> elements. Links must exclusively be used to render <a> elements (with valid href attribute) that trigger navigation to a new page. For no reason, ever, links should be used for actions or to "do something" in a page.

This is also part of an ongoing effort in WordPress core in the last few years, meant to eliminate links that are "not links". See https://core.trac.wordpress.org/query?keywords=~semantic-buttons. In short, the following usages, often tied to some kind of JavaScript interaction, are very bad practices and must be avoided:

• <a href="#" ...
• <a href="" ...
• <a ...

Links are used to embed actions or pathways to more information in a sentence. (Polaris)

I'm not sure I understand what that means.

Current Core best practices that need to be implemented:

• links that use target="_blank" need to inform users the link will open in a new tab: core uses the visually hidden text (opens in a new tab)
• ideally, links that use target="_blank" should also convey an equivalent information visually; in some places in core these links use an icon (see for example the Events Dashboard widget or some links in Gutenberg) but this is a relatively new pattern and many similar links miss the icon

[mapk]

I'm closing out the Component Audit issues for now.