General markup cleanup on buttons and icons

[BatJan]

Prerequisites

• I have added steps to test this contribution in the description below

Description

Curious to see how many places that are still left to convert <a> containing empty href="" attributes to <button> elements I did a search for href="" and noticed that many <button> elements had some leftover empty (and for buttons) invalid href attributes so I just cleaned that up converting them all to type="button" instead.

I also added aria-hidden="true" wherever the buttons wrapped an icon 👼

There was some occurences where an empty href was supplied on links that contained ng-href already so I removed the attribute from there too.

In the "umb-notification" I also removed the aria-hidden="true" attribute from the <i> since the parent element is already hidden for screen readers using that same attribute anyway.

Furthermore I have cleaned up some documentation markup as well so they showcase the use of <button> instead of <a href="">.

All minor stuff really but stuff that is nice to have cleaned up 💯

[bjarnef]

@BatJan actually I think the href need to be there since it is required on <a>. It is not an optional attribute. However angular will add/update the href attribute, but until Angular is loaded and the bindings are ready, the markup would be invalid. Maybe not a bit deal in backoffice, but if this was in frontend, the markup wouldn't be valid.

[BatJan]

@bjarnef I appreciate your concern 👍 Since AngularJS make us use loads of invalid stuff like ng-init, ng-hide, ng-*whatever, not to mention all the custom directives the markup we produce in the app is invalid per se in general. And since the href does not serve a purpose in this context it's ok to remove it since we're in a SPA context anyway 😃

It's also not adviced to use empty href's if you build a website with a frontend powered by AngularJS - From the AngularJS docs here you can also see that ng-href="" is the recommended way to do it (Without and empty href="") :-)

[rasmusjp]

IIRC Safari used to not like it when there's no href, i.e. you could not click the links, not sure if it's still the case

[BatJan]

Doh! It's embarrassing that I could forget this... Without the href on the link will act like a placeholder and therefore loose the baked in accessibility and visuals like cursor pointer (I even mentioned that in my very own Skrift post 😬) - will revert this later. #h5is 🤪

[bjarnef]

Also you could have styling target on a:link or a[href]. If you dynamically populate the link and for some reason an error occurs, I believe the styling won't be reflected on the <a> element.

[BatJan]

@nul800sebastiaan The places where I removed href used on ng-href have been reverted - Can't believe I fell into this trap. I probably even might have added some of them myself at an earlier stage 😅 Oh well! Thanks for pointing it out @bjarnef 🙌

[nul800sebastiaan]

Thanks for the feedback all! This cleanup now looks good to me! 👍