Enhance tooltip accessibility

[ghosh]

Hey @Muhnad Thanks for submitting this PR. While I am all for adding accessibility changes, I have a few concerns. Would it be possible to add the aria-label along with the data-microtip attribute?

Point being that the aria-label attribute could be used in places where the tooltip is not required. For example:-

<button aria-label="Close">Close</button>

In this case above, this itself would trigger a tooltip, even though I did not explicitly want a tooltip.

[Muhnad]

Hey @ghosh, in the code you can notice I added role=tooltip if the user add role=tooltip with aria-label the tooltip will show else the tooltip will not show, so the user to show the tooltip he/she need to add role=tooltip to make sure the button will show tooltip.

you can see this example on codepan to ensure the behavior.

[ghosh]

Ok, I see your point. However a couple of points:-

1. I would not want to replace the current data-microtip with araia-label. Ideally, we would want a solution where both of them work. Mabe something like this:-

   [data-microtip],
   [aria-label][role="tooltip"] {
   position: relative;
   }

2. In your codepen demo, though the tooltip is showing up, the styling is quite obviously broken. I cannot merge it in this state. I made a pen here - http://codepen.io/Ghosh/pen/LyVgEy Maybe you could try it out there to see if it's working properly.

Meanwhile I am trying to get it resolved from my end too.

[Muhnad]

Thanks for your comment, I fixed the broken style and your Demo work now correctly.

the second thing why you need to add data-microtip the aria-label do the same thing and better than data-* because the aria-label make it accessible for screen readers.

anyway, I just want to make your library more accessible for everybody.

[ghosh]

@Muhnad Thank you for these improvements. Merged 👍