Closed Muhnad closed 7 years ago
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.
Ok, I see your point. However a couple of points:-
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;
}
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.
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.
@Muhnad Thank you for these improvements. Merged 👍
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 thedata-microtip
attribute?Point being that the
aria-label
attribute could be used in places where the tooltip is not required. For example:-In this case above, this itself would trigger a tooltip, even though I did not explicitly want a tooltip.