Improvements on examples of vf-link

[nikiforosk]

• [ ] Colour of visited link in html examples is #734595 but the Link Visited Colour in the design tokens is #563D82. Change the colour of visited link to #563D82
• [ ] The underline on mouseover of the examples makes it harder to identify the state: could it be applied to the mouseover state only?

[Adedoyinebi]

Current state

For the current examples of vf-link, the other states are shown without any need for interactions such as clicking or hover, however for the example of the link on hover:

• Requires an hover interaction before the sample is displayed
• Shows the hover colour #193F90 (--vf-color__link--hover) before and after hovering.

Desired behaviour and proposed solution

• The example for the hover should show the the hover link colour #193F90 and the link underlined so that it is consistent with the pattern of other examples

Figma design

• Link to figma design showing the link example on hover.

@stefangutnick Please review this

[Adedoyinebi]

I am leaving this issue open to subsequently address the other identified issues in the link examples discussed in todays standup, this issues will be picked up in the next sprint:

Next steps

The current the disabled link in the vf-link examples shows in blue #3b6fb6 which is the same colour as the normal link.

• Investigate the colour disabled link example in HTML and Figma and provide best practice recommendations
• Check effect if implementing the update to ensure no existing service sites using links would break

The Visited link example shows a different colour (#734595) from the defined token (#563D82) for visited links

• Investigate the colour of visited link examples in HTML and Figma and provide best practice recommendations
• Check effect if implementing the update to ensure no existing service sites using links would break

[Adedoyinebi]

Based on our discussion during the Sprint review meeting and best UX practice, we agreed to remove the disabled link from the vf-link examples] as disabled links present usability and accessibility issues some of which are summarised below:

• Users find it difficult to troubleshoot (Why is the link disabled?)
• They are not accessible when using tab to navigate through a webpage
• The current example shows a disabled link in the same colour as a regular link which can be confusing to users

Useful reads

• Usability pitfalls of Disabled Buttons, and how to avoid them - Smashing magazine]

In addition

1. To ensure consistency with the defined $vf-color__link—visited token, the colour used for the Visited link example should be updated from #734595 to #563D82 as defined in the tokens].
2. The examples shown should be improved by using consistent interaction patterns all through (Show all example without requiring interaction e.g clicking - for visited link or hovering - link on hover). The language should also be clear, addressing the current state of the link examples. See mockup in figma] showing the updated examples for vf-link.

Useful links

• VF-link example mockup in figma]

@stefangutnick Kindly review this task

@bhushan-ebi A development task has been created for this: Implementation of improved vf-link examples #2030

[stefangutnick]

@Adedoyinebi Looks good to me. A very good change overall.