Add underline on links by default

Thanks for filing this. I'm adding some demo code for the resolution.

Basically it means reversing the current CSS policy. Right now we are removing the underlines globally, then having to anticipate all the places where the underlines must be restored. But we'll never anticipate them all. Instead, it's safer to keep the link underlines globally, then remove them from places where we are confident that an alternative signifier has been provided (e.g. primary local tasks block).

The essential change here is removing the a, .link { text-decoration: none; } rule. I think it's a good idea to commit that change ASAP, then follow-up fixing the other instances where we do want to remove the underline. Are we OK with having multiple commits on the same issue?

Underlining links by default, for their resting state, means we can't use underlines as a focus style. So a:focus, .link:focus { text-decoration: underline; } needs to go too. That's why we were pushing for a focus style which surrounds the element on all 4 sides.

Hover styles are a nice bonus, but less essential because the pointer itself is the main signifier (mouse cursor, or actual fingertip). The proposal here for underlines to disappear on hover will work nicely when paired with the focus outline. So on hover the outline disappears, and the cursor changes to a hand icon. On focus, the underline is replaced by a 4-sides outline.

Related issue for the Seven theme. This has more information and examples. #2958282: Links inside surrounding text fail WCAG Use-of-Color in Seven theme.

WCAG 1.4.1 Use of Color is a level A success criterion, so bumping this to major. Specifically, it's about avoiding F73: Failure of Success Criterion 1.4.1 due to creating links that are not visually evident without color vision

@Cristina Chumillas (ckrina). I have uploaded a patch file for the issue. Kindly review.
I doubt it would work.

Kindly review.

Setting to NR because of patch.

... and undo assignment and adjust priority, sorry.

Keep this at major please. The accessibility maintainers generally treat WCAG level-A issues as major.

@Swapnil_Kotwal - thanks for working on this.

I tried the patch from #7. Unfortunately it's a bit of a mess, so let's look at the problems:

1. css/src/base/elements.css this is the biggest problem. The patch in #7 replaces the entire elements.css file with a patch file. So it's no longer a CSS file, instead it has lots of git information. This causes the Yarn CSS build commands to fail.

   There isn't a quick fix for this. I think the easiest thing to do would be to start again with this file, by resetting the changes and checking out a fresh copy.

2. There are lots of indentation changes, which are unnecessary. For example:
   

    .messages a {
   -  color: var(--messages__link-color);
   -  text-decoration: underline;
   +    color: var(--messages__link-color);
    }
    
    .messages a:hover {
   -  color: var(--messages__link--hover-color);
   +    color: var(--messages__link--hover-color);
    }
    
    .messages pre {
   -  margin: 0;
   +    margin: 0;
    }
   

   We're only interested in the line which removes text-decoration: underline;. Drupal 8 ships with an .editorconfig file, to help us avoid indentation changes like this. Check to see it is working:

   • Lots of text editors and IDEs have support for .editorconfig, but some of them need a plugin for it. See https://editorconfig.org/
   • Check to see whether the .editorconfig file is missing from your development environment. It's a hidden file (name starts with a dot) so it sometimes gets missed when copying files.

Once these are dealt with, the patch file should be a lot simpler (and shorter).

Patch update remove the underline to links and focus

#13.3:

Why is this removing the underline from messages? We should keep it.

Because links will be underlined by default, aftee elements.css has been fixed. We don't need to add the underline in messages.css

base on the comment #4 remove the a, .link rule the other section have underline everywhere so I added base on the component the text-decoration: none to remove underline on some elements. I fix the spacing and empty rules.

+++ b/css/src/components/tables.css
@@ -146,6 +147,9 @@ td {
+td a {
+  text-decoration: none;
+}

Is there a particular reason we want to remove the underline from links in tables?

Where the update of the patch base on comment #16

Correcting custom commands fail: formatting issue.
@charlieweb82 Before creating the patch, please run `yarn lint:css` (in terms of css changes) to check for errors. Thanks for your help! :)

We should remove the underline from links in pager:

Update patch base on comment #19 from @lauriii

update patch fail test

update patch with fix.

Out of the meeting yesterday:

So we will use underline for all links for now. We will open a follow-up to improve the design of tables to make it less busy. – @lauriii

Patch applies and works for me. Underline in pager was removed.

Also making sure buttons don't use the underline as well. We should also use a darker blue color for :hover & :active. The colors are specified:

also you can have a look here: https://www.figma.com/file/OqWgzAluHtsOd5uwm1lubFeH/Drupal-Design-system...

@saschaeggi Changing the (underline) colors sounds like a follow-up (EDIT: I created one.) and should be also applied globally.

@fhaeberle should be the default for all links. Thanks. I linked it.

For more consistency, we should extend this to button.link elements as well:

#23
I applied this patch works for me underline in pager was removed.

#28 - yes, good catch.

This looks great! 🚀 Thanks everyone for your help!