Dealing with styling of “a” tags (with or without hrefs?)

A very common markup in Angular version of bootstrap directives goes like this: <a (click)="prev()">Previous</a>

Pure bootstrap version would have an “empty” href (<a (click)="prev()" href="#">Previous</a>) to provide appropriate styling (cursor) but this is not needed in ng-version and can interfere with routing.

The question: how do we deal with this situation? Few ideas:

Now, I must admit that I don’t know what is the impact of removing href on accessibility and keyboard navigation, so the encapsulated CSS path might be a non-option in the end…

Thoughts?

2 thoughts on “Dealing with styling of “a” tags (with or without hrefs?)

  1. This is what we do at Thomson Reuters:
    <a (click)="prev()" href>Previous</a>
    The href, even when truly empty like this, keeps the anchor focusable and in tabindex. This is essential for A11y.

  2. OK, another idea. How about this:

    • we add empty href (this gives us proper cursor and accessibility)
    • we call prevent default / stop propagation in a click handler.

    To avoid pain of writing too much for prevent default we could use this trick: <a href (click)="!!doSth()">. Taken from angular/angular#2042 (comment)