Securedrop: Global change <a> underlines from HTML to CSS

Created on 3 Feb 2017 · 6Comments · Source: freedomofpress/securedrop

Hey Gang:

This is such a fussy detail, I was hesitant to even flag it—but, well hell, I'm gonna!

It would be muio-beneficial to the UI for all three core user-groups (Source, Admin, Journalist) if we could change how hyperlinks are rendered. HTML underlines are a standard we're all used to, but lately CSS underlines have emerged as a new/awesome thing: they can be styled differently than the font, and because of that, the visual of an underline can be present to boost accessibility compliance, without the size or prominence of the underline compromising legibility or UI elegance.

Some of my favorite examples:
https://methods.18f.gov
http://humanutility.org (the left two columns on the footer)
http://www.washingtonpost.com

There are a multitude of ways of doing this, and I don't know which is better—so, if some awesome dev out there feels like taking this one, the UX squeaky-wheel here would love that!

My recommendation would either be to:
a) if it's done as a

bottom-border, to do it as a 1px dotted line that's the same hex/alpha as the text #004080, that then changes to a solid 1px line on hover
—or—
b) do it as a solid 1px line, but when active have it be #B1C6D9 then on hover go to #004080

help wanted

Source

ninavizz

All 6 comments

This might help resolve #2130.

redshiftzero on 19 Aug 2017

I can take this.

BerniceChua on 20 Aug 2017

👍1

I think this issue is solved, isn't it?

screen shot 2017-10-08 at 3 02 54 pm

nicolasiensen on 8 Oct 2017

👍1

@nicolasiensen I think the issue is ambiguous with what's happening. Currently SD uses the default text-decoration: underline for a links. What @ninavizz was suggesting (I'm fairly sure) was to use CSS border-bottom to accomplish this. You can can make the underline appear lower as well as having letters like "y" and "j" cause gaps in the underline as they drop below it.

heartsucker on 8 Oct 2017

👍1

IMHO, @nicolasiensen is right, this issue is solved. The image I've seen is good enough and if @ninavizz or anyone else thinks there's more work to be done they are welcome to open a more accurate issue.

daonb on 30 Oct 2017

As of SecureDrop 1.0.0, we are in fact using border-bottom in the SUI and JUI (there may still be some SASS cleanup to do, but the main issue is resolved).