Change nicks from links to buttons everywhere

[astorije]

As discussed in #325 (comment), clickable nicks should be buttons and not links as they don't take the user anywhere, per se.

There are several implications to this: @YaManicKill noticed highlighting does not work on buttons on Firefox for example.
Also, @cptvitamin, could you advise on accessibility consequences for this, please?

@xPaw mentioned in the PR that we could use <span role="button"> as well.

[cptvitamin]

@xPaw @astorije adding a role just changes how the control gets announced to a screen reader. It doesn't add any of the magical behaviors that you get with a link or a button (its focusable and can be interacted with a keyboard, has various states, etc.) If you want to go with <span role=button> you will have to add all those default states and properties yourself. See "What using aria does not do": https://www.w3.org/TR/aria-in-html/#what-does-adding-a-role-do-to-the-native-semantics

Since copy/paste conversations is likely to be a feature users may want, it sounds like a span with a role of button is your best bet. You will want to add a tabindex="0" so that it can receive focus and then you will want to add keyboard event handlers for space/return.

[xPaw]

Just a side note, when we (if) will change the user element, perhaps we should make a separate template for it.

[astorije]

Thanks for your input, @cptvitamin!

@xPaw, yes! Although I'm thinking the template would not be a perfect fit everywhere, like the user list, but for everything else, definitely (it looks more and more like we are defining React components when creating a template :p).