Add screen reader support using aria-label attribute

[chinchang]

Carrying forward @jdan original PR #128 to support screen reader a11y by using aria-label attribute.

Copy from #128:

Copying some notes from my original issue comment:

You'll see that using aria-label instead of data-hint has the same results:

But the tooltip's contents are now accessible to screen-readers:

These changes follow the assumption that the tooltip is labeling the element it is annotating. This means that screen-readers will not read off the actual content of the element itself, but only its tooltip.

Consider the following:

In the above scenario, "Checkout" will be omitted in favor of "You will be charged $5.00" by the screen-reader.

This PR now puts in default support for aria-label attribute to define tooltip content along with the currently supported data-hint attribute. So any of the attributes will work.

Opening this PR against dev where I can finally work on the related docs and examples for this to get ready for master.

Note: Ignore the CSS files in the diff :)

[chinchang]

Hey @tfoxy, I have used a similar technique you had suggested in #81, to support both attributes. Would be great if you could review this.

[tfoxy]

I tested it and I think this PR is great.

I would suggest mentioning aria-label in the readme, saying that this is preferred instead of data-hint, as the former has support for screen readers.

[chinchang]

@tfoxy Yeah. Will update the docs.

[rossholdway]

@chinchang Do you know if this will make it into the next release / when that will be!? This really would be a great feature to have!

[chinchang]

@rossholdway I am working on the final changes for this to get merged into master. This will be live in the coming release this weekend.

[chinchang]

Merging into dev.