Review the design system for focus state - links

[trallard]

Acceptance Criteria

• 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
  • focus styles - links
  • focus styles - navbar items
• 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

[smeragoel]

So I have been wrangling my brain, trying to come up with a nice design for focus state for links.

I don't have anything concrete now, but I just wanted to put an update here that this is in progress. Everything I'm coming up with seems to be a "bad" solution, but what I think I'll do is just get out all the bad designs and hopefully something will click and I'll have a concrete direction to move in. I might also just post some of those bad designs to get reviews on them if I'm hardstuck.

I'll be back here (super) soon 😅

[smeragoel]

Here are my proposals for focus state for links:

There are 4 options, which are permutations of 2 distinct styles (box and underline) and 2 colour optons (monochromatic teal vs teal + purple)

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

Here's my opinion on these options:

1. For styles, 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,4)
2. For colours, I think that the monochromatic colour scheme is better. I feel some visual vibrations with the purple in dark mode, and I only made these options to show how that would look, and I feel the monochrome version is more visually stable. So 1 > 3 and 2 > 4.

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

I think we can shortlist these to 2 or 3 options and then present them on the main repo

[trallard]

I think we can go ahead and propose 1,2,3

[trallard]

Now that I have more time to sit down and write things, @smeragoel, I think you can open the proposal on the PyData Sphinx repo.

Your last comment with the screenshots + rationale should be good for this - unless you want to add a TLD;R at the top.

[trallard]

Seems everyone is in the agreement of using the monochrome version so will mark this as resolved 🎉