Colored background of link focus in a sentence is a bit weak

Hi @mikegifford,

Just checking in with you on this one. From my testing, we have outline styles left in place when people focus on a link. See here:

When a use hovers on a link, we change from text-decoration: underline to text-decoration: none.

Is this enough to consider this issue fixed, or is there more you think we can achieve here?

It looks like we do have outline left in place, but it might be a nicer addition if we added outline-offset: 1px; to links, so they are less crowded when focussed.

Anyone feel like writing 1 line of css?

In core/profiles/demo_umami/themes/umami/css/base.css, change this:

a {
  color: #00836d;
  text-decoration: underline;
}
a:hover,
a:focus {
  background-color: #e6eee0;
  color: #444;
  text-decoration: none;
}

to this:

a {
  color: #00836d;
  text-decoration: underline;
}
a:hover,
a:focus {
  background-color: #e6eee0;
  color: #444;
  text-decoration: none;
  outline-offset: 1px;
}

Hi Dean,

Thanks for very much for that, and welcome to Drupal contributing.

The code you have looks correct, but the patch you uploaded does not seem to be a patch file. It looks like it's a copy/paste of a git commit saved as a file with .patch at the end of it.

Here's a link to how to create a patch file - https://www.drupal.org/patch. I know it might seem like overkill for such a simple issue, but we try really hard to make sure we do things correctly - even on these novice issues - to make sure that you'll be able to do the same on more complex issues later.

Also, since we don't have regression testing built in for the frontend, it's helpful if you can provide a before and after screenshot. In this case, a screenshot of a link in a recipe/article body field, when it is normal, hovered, and focussed would be great.

If you can get that done, I'll review it again for you.

Thanks again.

Thanks @swati.nuna,

This looks good to me. Marking as Reviewed and tested by the community (RTBC).

Committers - can you please make sure @deanc96 gets a credit for this issue as a first time contributor. Thanks.

Screenshots:
umami link current focus state

umami link focus state after patch

umami link current default state

umami link current hovered state

Can this be committed?

The failing tests are false positives from the code being inside a media query.