1153600 - Use photon focusring in in-content pages

Status: NEW

(Firefox :: Theme, defect)

Description

[Tim Nguyen :ntim]

See https://bugzilla.mozilla.org/show_bug.cgi?id=1013714#c21

Comment 1

[Tim Nguyen :ntim]

Stephen, what styling do you think we should use for the link focusring in the in-content prefs ?

Comment 2

[Tim Nguyen :ntim]

Seems like we might want to use the design system focusring here.

Amin, can you confirm ?

Comment 3

[Amin Al Hazwani [:amin] (Firefox UX)]

That is correct! You can find the specs here https://design.firefox.com/photon/components/links.html#behaviors and summarized here:

a { 
  color: var(--blue-60); 
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:hover:active {
  color: var(--blue-70);
  text-decoration: underline;
}

a:focus {
  box-shadow: 0 0 0 2px var(--blue-50), 0 0 0 6px var(--blue-50-a30);
  border-radius: 2px;
}

Variables here: https://github.com/FirefoxUX/design-tokens/blob/master/photon-colors/photon-colors.css

Question: would be possible to add some inner space to links so that when they are focused the outline doesn't touch the text? Of course using padding is not an option because it changes the layouts and alignments. Maybe if the background color is defined (in the example below is Grey 10) something like this might work:

a:focus {
  box-shadow: 0 0 0 2px var(--grey-10), 0 0 0 4px var(--blue-50), 0 0 0 8px var(--blue-50-a30);
  border-radius: 1px;
}

What to you think Tim?

Comment 4

[Tim Nguyen :ntim]

Thanks for the quick reply!

I tried adding the CSS you showed me on about:debugging, the outline didn't seem to touch the text for me.

Comment 5

[Amin Al Hazwani [:amin] (Firefox UX)]

Attachment: photon-link-focus.jpg

Cool! Could you share a screenshot? Because I was playing with the exploration demo from Stephen https://firefoxux.github.io/people/shorlander/photon/UI-Controls/preferences.html and the link at the bottom of the page, if focused, has the outline right next to the text while what I think it would be nice to have is some inner space that keeps the text still legible.

Comment 6

[Tim Nguyen :ntim]

Attachment: Screen Shot 2018-03-05 at 2.52.32 PM.png

There seems to be a 1px padding on the sides and 3px padding on top and bottom by default.

Comment 7

[Amin Al Hazwani [:amin] (Firefox UX)]

Yeah, so you see what I see. That's why I was thinking if it's possible with the background color given to add more inner breath to the link focus state.

Given that the background color is Grey 10, this could be an option that doesn't add padding or others:

a:focus {
  box-shadow: 0 0 0 2px var(--grey-10), 0 0 0 4px var(--blue-50), 0 0 0 8px var(--blue-50-a30);
  border-radius: 1px;
}

What do you think?

Comment 8

[19.riju]

Hi!
I'm interested in taking this up. Can I work on this?

Comment 9

[Tim Nguyen :ntim]

(In reply to 19.riju from comment #8)

Hi!
I'm interested in taking this up. Can I work on this?

Sure, feel free to submit a patch.

Here's the CSS for links: https://searchfox.org/mozilla-central/rev/dc0adc07db3df9431a0876156f50c65d580010cb/toolkit/themes/shared/in-content/common.inc.css#446-468

I won't have time to mentor this however, so I'll remove the good-first-bug tag.