Remove role="tooltip"

[olach]

Just found this nice little gem. Nice work. Seems like an easy way to add nice tooltips.

But I think the use of the role="tooltip" attribute is wrong. For example:

<button aria-label="Hey tooltip!" data-microtip-position="up" role="tooltip">

This implies that the role of the button is not a button anymore, but a tooltip. And that feels wrong, don't you think? The role of the button should still be a button.

[ghosh]

@olach Fair point.

Seems like the aria-label accepts a space-separated list of values. We could add the tooltip role after the button or any other role value. This would make the example:-

<button aria-label="Hey tooltip!" data-microtip-position="up" role="button tooltip">

I think that would be a better solution here.

[Muhnad]

Hey @olach

We add role=tooltip because the button now is just a space for show more information about something so the button is work as tooltip to show more information and add tooltip role doesn't make a button not work it's just for Screen Reader users to add more information about the hint he/she read and the button can work as usual.

and as W3 say about tooltip

A contextual popup that displays a description for an element.

I hope to read W3 about tooltip and you can test the button if you have a tooltip role or doesn't.

[Muhnad]

Hey @ghosh

WAI-ARIA allows multiple roles to be specified as an ordered set of space-separated valid role tokens. The additional roles are fallback roles similar to the concept of specifying multiple fonts in case the first choice font type is not supported.
WAI-ARIA

so in this code, you write and need other users write it now declares the role as a button and it ignores tooltip role so the user, in this case, he understands this button is just a button, not a tooltip.

in the image below the screenshot for accessibility tree and it declares the button as role=button and so that the NVDA screen reader.

[ghosh]

@Muhnad Thanks for the info.

I do not have control over where these tooltips would be used. There is a possibility that, it's used in a place where the user would want to give another role-token preference over a tooltip. At that time I would not want the tooltip to stop working.

I think this is a better solution, as it would work normally for most people and also allow them to overwrite them in certain scenarios.

[radeno]

@Muhnad
you are pointing only to button, but button is speclal case. What if someone want to tooltip for div wrapper. Div is element without any behaviour. So if you define role="tooltip" it becomes as Tooltip what is wrong because this wrapper could contains another content elements. And there are more elements than DIV or SPAN.

As is written here:
https://www.w3.org/TR/wai-aria-1.1/#tooltip

Authors should ensure that elements with the role tooltip are referenced through the use of aria-describedby before or at the time the tooltip is displayed.
Element with role="tooltip" attribute is assigned to element which associated with aria-describedby. Tooltips are hidden until they are requested by user behaviour (hover, focus, ...etc)

Examples here:
http://accessibility.athena-ict.com/aria/examples/tooltip.shtml
http://oaa-accessibility.org/example/40/
http://pauljadam.com/demos/aria-role-tooltip.html

[Muhnad]

Hi @radeno,

your words 100% correct but my words depend on the library behavior.