canonical / canonical/vanilla-framework

[Component amendment]: Link with attached icon

Open
#5,582 2 comments 0 reactions 0 assignees View on GitHub
Priority: Medium Tier: Global WG: Validated
Dominant language
HTML
Stars
983
Forks
216
Avg merge
3d 13h
Merged PRs (30d)
3

Description

## Links should have the option to include icon after the label text

There are multiple use cases where links could benefit from additional information.
In order of importance there is:
1. Link with External link icon / new tab icon
2. Link with chevron (bottom and right)
3. Anchor link with icon

Having this built into the component would increase consistency in spacing and alignment.
In addition, it would help with the use case of links wrapping in a second line

## Visual

1. External link

Image
Note: This example uses a different font size as a link.

2. Chevron

Image

and

Image

3. Anchor link

Image

## Context

1. We had investigated the issue of external link icon before. It is important to note that we considered the [study from 2016 ](https://designnotes.blog.gov.uk/2016/11/28/removing-the-external-link-icon-from-gov-uk/) pointing out the confusion between external link icon and opens in new tab icon.
I would like to propose that we keep these 2 concepts unified: all external links should open in a new tab.

There is also [another resource from NN group](https://www.nngroup.com/articles/new-browser-windows-and-tabs/) that has been consulted, regarding new browser windows. Stating that new windows add clutter, are less accessible and less inclusive, and are not suited for less technical users. In our use cases the context overwrites these arguments, however accessibility might remain a concern.
In my use case with ticket deflection it is important to notify the user that the form information that they have worked on wont be lost and they can navigate back to their ongoing process easily.

2. I have proposed the chevron already in issue #5559 where the pattern was accepted so that documentation would be updated.

3. This is already in use in the support portal, assessing behavior would be recommended. How does icon behave on hover?

## Open questions
How to deal with wrapping links where icons are added?
Should there be links of multiple sizes?

Contributor guide

Open the contributing guide

Research direction

Review the existing link component and the support portal behavior referenced in the issue, then compare the accepted chevron pattern in issue #5559. Done means the external, chevron, and anchor variants have agreed wrapping and hover behavior, with the open questions about link sizes and new-tab accessibility resolved.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, html, sass
Domain
accessibility, design, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
28/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.