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:

• pass $event and call preventDefault() on it; this is what we do in the accordion, for example: https://github.com/ng-bootstrap/core/blob/1d912de06578aca1eaea9ad69942978090da43ff/src/accordion/accordion.ts#L42
• remove href altogether and add cursor styling through CSS (this would be quite easy with ng2 since we’ve got styles encapsulation)
• try to convince bootstrap folks to “fix it” <- not even sure it makes sense

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?

[pkozlowski-opensource]

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 https://github.com/angular/angular/issues/2042#issuecomment-105689213

[mendeza]

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.