canonical / canonical/vanilla-framework
[Component amendment]: Link with attached icon
- 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
Note: This example uses a different font size as a link.
2. Chevron
and
3. Anchor link
## 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
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