Use photon focusring in in-content pages

NEW
Unassigned

Status

()

4 years ago
7 months ago

People

(Reporter: ntim, Unassigned)

Tracking

({good-first-bug})

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(2 attachments)

Stephen, what styling do you think we should use for the link focusring in the in-content prefs ?
Flags: needinfo?(shorlander)
Seems like we might want to use the design system focusring here.

Amin, can you confirm ?
Flags: needinfo?(shorlander) → needinfo?(aalhazwani)
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?
Flags: needinfo?(aalhazwani) → needinfo?(ntim.bugs)
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.
Flags: needinfo?(ntim.bugs)
Keywords: good-first-bug
Summary: Link focusring in in-content prefs doesn't make much sense on OSX → Use photon focusring in in-content pages
Created attachment 8954909 [details]
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.
Flags: needinfo?(ntim.bugs)
Created attachment 8956071 [details]
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.
Flags: needinfo?(ntim.bugs)
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?
You need to log in before you can comment on or make changes to this bug.