back-link is underlined when no href is provided

[penx]

Consider the following HTML:

      <div>
        <a href="#">Standard anchor with href</a>
      </div>
      <div>
        <a>Standard anchor with no href</a>
      </div>
      <div>
        <a class="govuk-back-link" href="#">
          Back link with href
        </a>
      </div>
      <div>
        <a class="govuk-back-link">Back link with no href</a>
      </div>

https://codesandbox.io/s/4wylrj5w

Browser default behaviour is to underline anchors only when an href is provided. This is to ensure users can identify links on a page (an anchor without an href is not considered a link by default).

This feature also has the side effect of helping developers realise that they may have missed an href attribute - as they can visually see on the page that a link is not underlined.

The way the back-link is coded uses border-bottom instead of an underline, but this is not implemented as per normal anchor styles.

The old way browser default styles did this was as follows:

a[href] {
border-bottom: none
}

In newer browsers, the :any-link pseudo-selector can be used, though it has limited support
https://developer.mozilla.org/en-US/docs/Web/CSS/:any-link

I would recommend adding a[href] or ``:any-link` to the back-link component and wherever else you may be overriding anchor underline styles, so that you mirror browser default behaviour for anchors, help users identify links and help developers identify errors.

[NickColley]

Hey @penx :)

It seems useful to be able to see when you mistakenly did not put a href by being consistent with regular links...

I think we would move the border-bottom styling into a selector like so:

.govuk-back-link[href] {
    // Use border-bottom rather than text-decoration so that the arrow is
    // underlined as well.
    border-bottom: 1px solid govuk-colour("black");
    text-decoration: none;
}