Button label not shown on hover

[mbohal]

When the <Button> component is rendered with labelVisbility set to none or to value smaller the current viewport the label value is not accessible.

I think it should appear on mouse hover.

[adamkudrna]

The invisible label does remain accessible:

FF dev tools:

What you probably mean is the button does not provide any textual alternative to sighted users. In such case this is what you would do:

1. add the title attribute (which may be annoying for AT users as both texts are announced: "My action, Title description, button", or something like that), or
2. combine the button with custom Tooltip; unfortunately, RUI currently does not have such component (Popover is close, but you need to click to make it show up).

To sum it up, current behavior is correct. But I'll be happy to implement a Tooltip component which could be paired with Buttons to improve the UX while not putting accessibility at stake.

[mbohal]

What you probably mean is the button does not provide any textual alternative to sighted users.

Yes, that is what I had in mind.

Lets go with option 1). When we will have the component <Tooltip> we can use it here. We do not have the capacity to implement <Tooltip> at this point.

[adamkudrna]

Then I suggest putting something like this into the docs:

For icon-only buttons, consider using the title attribute to provide a textual alternative.

OK?

[mbohal]

@adamkudrna

I think there are two ways to solve this:

1. Update the docs as you suggest and make user pass in both label and title props
2. Use user specified title if provided or use the text passed in via the label prop if not provided

I think I prefer 2) developers (e.g. myself) will keep forgetting to pass in the title . Are there any arguments why 1) would be a better idea?

[mbohal]

The docs will be updated in the General guidelines section.

When mentioning the option to add title it should be mentioned that it will lead to aria reader a duplicit description.

[adamkudrna]

Adobe Spectrum:

… but apparently, they don't implement it:

The reason probably is that in Spectrum they pass the button label as children so it's not easy/possible to find out if a label is rendered or not.