[UX] Make all links default underlined and remove underline on hover on node page with comments

[stpaultim]

Description of the bug

Followup to #4203

In that issue, we added (are adding) an underline to some specific links on the comments box. In reviewing that issue, I found that other links on the same page behave very inconsistently.

I'm not sure how all of them should behave. Part of this issue might be to write up a little style guide about how links should work.

At a minimum, let's get all the links on this page working properly. The user "admin" has two links on this page, one starts with underline that disappears on hover, the other starts without underline and it appears on hover. That can't be right.

I did not look to see if this issue is a core theme issue or if these issues are specific to Basis (our default theme in core).

Steps To Reproduce

1. Spin up a demo site at https://backdropcms.org/
2. Login and create a new post: node/add/post
3. Save post and then view post.
4. Add a comment and save comment.
5. View post again and notice inconsistent behavior of links on the page.

Actual behavior

Inconsistent behavior of links on the page.

Expected behavior

For regular text that is linked:

• Links are a different color from normal text, and ARE underlined. On hover, the underline is removed.

For headings that are linked:

• Links are ARE NOT underlined. On hover, the underline is added.

Additional information

On the node edit page, links seem to act more as I would expect them to.

Possible Followup issue

Move around the Backdrop CMS interface and look for other examples of misbehaving links - either open new issues or fix them with this one. Also, check to see if this problem exists in Bartik theme.

(Triaged as possible accessibility issue on 08/17/2921. Accessibility issues are raised in discussion, but I'm not sure if this is inherently an accessibility issue, seems like it could be. No A11Y tag today. Please, add tag if you disagree.)

[ghost]

Wow, this is really messed up! 😄

[jenlampton]

Do we have styeguilde for Backdrop CMS core that might provide some guidance on this issue?

I think we had one at one point, but I don't know where this resource lives. @wesruv do you remember what we used as a styleguide for Basis? Was it a PDF? A living html/css document?

The code below is from skin.css in Basis.

a:focus,
a:hover {
  text-decoration: none;
}

This would lead me to believe that links are not supposed to be underlined on hover. I expect that there is other CSS being added from various parts of core that is overriding the intent of basis, in different ways.

I personally feel that websites are more usable when there is some indication that the text you are hovering over is a link. If it were up to me. I would modify Basis so that all links consistently had underlines, and the underlines disappeared when on :hover and :active.

Would this be too much of a change? (adding needs feedback label)

[stpaultim]

Again, anyone should feel free to follow the steps to reproduce (in original post) and add their opinion to this discussion. How do you expect these various links to behave?

Also - is there any risk to existing sites if we try to change these behaviors?

[wesruv]

I'm a big fan of obvious hover and obvious focus is a requirement for accessibility. I'd guess that either:

• The underline is supposed to be there by default and removed for hover?
• I was using border or box shadow instead if text decoration?

But that's a wild guess, could be past me goofed or something changed between now and then.

[jenlampton]

The underline is supposed to be there by default and removed for hover?

I think this is a straightforward solution.

I see the following in base.css:

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  text-decoration: none;
}

I think we should make the inverse true for headings, no underline by default, but add the underline for hover/focus. So we'd need to add...

h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover {
  text-decoration: underline;
}

[stpaultim]

@jenlampton and I just chatted about this and are recommending that someone create a Pull Request with the above changes. We really want to see how this will effect other things and we may need make additional modifications later.

Still a great issue for a OSD participant.

[ghost]

I personally feel that links should stand out from regular text somehow, and that they should visually change when hovered/focused on.

Generally this means either:

1. Links are not underlined but are a different colour to regular text (stand out) and then the underline is added on hover/focus (visual change).
2. Links are the same colour as regular text but are underlined (stand out) and then the underline is removed on hover/focus (visual change).

Either of those solutions are fine by me, as long as they're used consistently (what we're currently lacking).

[oadaeh]

2. Links are the same colour as regular text but are underlined (stand out) and then the underline is removed on hover/focus (visual change).

I'm not so sure that is a good idea. I have had times when I accidentally/inadvertently left/moved the pointer over a link without realizing it, and then when I tried visually looking for it, I didn't notice it until I moved the mouse again. I wonder also if that would create an accessibility problem.

[Sahana-Pandurangi]

I would like to work on this issue @stpaultim

[jenlampton]

I still think we should go with @wesruv's recommendation from above (A below), which would be a combination of both options 1 & 2 mentioned in @BWPanda's list.

A. @wesruv Links are a different colour from normal text, and ARE underlined. On hover, the underline is removed.
B. @bwpanda Links a different colour from regular text, and are NOT underlined. On hover, the underline is added.
C. @bwpanda Links are the same colour as regular text but ARE underlined. On hover, the underline is removed.

[tanishagupta0811]

Hey I am an OpenForce 2022 Contributor . I would like to work on this issue. I would be making a PR as soon as I am done with resolving the issue. Thank you"

[stpaultim]

@tanisha-tech360 - Welcome to the Backdrop CMS issue queue. Please, feel free to post questions here. We would like to help you solve this problem.

[stpaultim]

@tanisha-tech360 - Are you still interested in working on this issue? Do you have any questions?

[tanishagupta0811]

Yes, I am still working on this issue. Actually I am a beginner can you tell give me some resources.

[tanishagupta0811]

Please check pull request #4000

[stpaultim]

@tanisha-tech360 - Thank you very much for this PR. We discovered this problem during a previous code sprint/hack-a-thon and still have not resolved it.

I don't think your PR is doing the job yet, I believe it will need a little more work.

You can test your PR, by going to the PR page and logging into the sandbox.

Once in the Sandbox, follow the steps to recreate the issue listed above (in the initial post). I think you will notice that many of the same inconsistencies are still present. The goal here is to make sure that links are behaving in a consistent manner.

I think this is a good place to start: Links are a different colour from normal text, and ARE underlined. On hover, the underline is removed.

NOTE: Once we get a PR working with somewhat consistent behavior, we will likely need to make a few changes based upon feedback. But, we need a working PR before we can give good feedback.

If you update your existing branch, the PR should update automatically. Let us know if you still have questions.

HERE ARE THE STEPS TO REPRODUCE:

Steps To Reproduce

• Go to PR sandbox
• Login and create a new post: node/add/post
• Save post and then view post.
• Add a comment and save comment.
• View post again and notice inconsistent behavior of links on the page.

[stpaultim]

I changed the title, because @jenlampton suggested in her last comment that we go with:

A. @wesruv Links are a different colour from normal text, and ARE underlined. On hover, the underline is removed.

But, the title said the opposite.