Proposed Design Update for Focus State - Links

[smeragoel]

TL;DR:

This issue proposes a new design for the focus state of links, aiming to meet WCAG 2.1 guidelines. We have three options:

Design Options

Feedback from the team is needed to finalize the focus state design.

Background on WCAG requirements (courtesy of @trallard)

• Focus visible criteria - buttons, links, and navigation components meet at least WCAG 2.1 (designs account for changes in WCAG 2.2
  - WCAG 2.1 SC 2.4.7
• WCAG SC 1.4.11 - non-text contrast AA need a minimum 3:1 contrast ratio with adjacent colours
• WCAG SC 1.4.1 - use of colour
  • Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element

Proposed Design Options

Design Options

1. Box style with monochromatic teal color
2. Underline style with monochromatic teal color
3. Box style with teal + purple colors

Here is a demo of these options in light and dark mode:

Light Mode

Dark Mode

My opinion:

For style, I prefer box over underline. Because links have an underline in general, I think adding just a thicker underline in focus states could be missed, and adding a full box would be a more visible change. So (1,3) > (2)
For colours, I think that the monochromatic colour scheme is better. I see some visual vibrations with the purple in dark mode, and I added that option to show how that would look, and I feel the monochrome version is more visually stable. So (1,2) > (3)

Overall, I would rank the options like this: 1 > 2 > 3

[12rambau]

I don't have any specific competence in accessibility design so this is just me thinking out loud.
I fully agree that underlying is not differentiating enough wit the normal links. It's so much different that I first thought you wanted to change the hover state (yes it's 7:00 here and my coffee is still in its mug). So for me 2 is a strong no.
I agree with your color analysis, monochromatic blends better in the template. It will also be easier to maintain as it will always work in both theme.

[trallard]

I am in favour of 1 too: Box style with monochromatic teal color

it is the right balance between being noticeable and not too on your face or distracting

[drammock]

I also endorse option 1. Sounds like we're unanimous: full speed ahead!

[trallard]

Nice one team.
@gabalafou will be taking on the implementation of this one.

[trallard]

Completed via #1564