Fix empty tooltip and missing required tooltip

[jgreben]

Fixes #757 and #392

[ndushay]

LGTM, modulo Justin's question (which I don't have strong feelings about)

[jcoyne]

This doesn't seem easy to read. I don't think we want both a title and a popover menu. Maybe @astridu can help?

[jgreben]

This doesn't seem easy to read. I don't think we want both a title and a popover menu. Maybe @astridu can help?

I made this change pending @astridu's feedback:

[astridu]

Yes, the second example looks much better (just the 1 tooltip). Thank you!

[jcoyne]

I'm seeing this now. Since we have the tooltip, should we get rid of the <abbr/>?

[jcoyne]

@michelleif @jermnelson what sort of commitments to we have to accessibility? I'm pretty sure the <abbr> with a title are useful for screen readers. I'm not sure the popover is useful for anyone not using a mouse.

[ndushay]

would it be stupid to add a css styling that doesn't do the popover (because we display it another way?)

[jermnelson]

@michelleif @jermnelson what sort of commitments to we have to accessibility? I'm pretty sure the <abbr> with a title are useful for screen readers. I'm not sure the popover is useful for anyone not using a mouse.

I would like us to be more accessible. We're running this elint plugin: https://www.npmjs.com/package/eslint-plugin-jsx-a11y with some rule exceptions.

[jcoyne]

So do we know if a screenreader can focus on a <sup> element that has a single child marked aria-hidden="true"?

[jgreben]

I added a tabIndex to the sup to make it keyboard accessible, and role-tooltip for ARIA. Do you think this will address the accessibility issues?

[jcoyne]

Yes, that probably ought to do it.