[EuiButtonGroup] Usability/accessibility enhancements

[cjcenizal]

I noticed a couple issues while playing with this component. Oddly enough, they only occur with the button group on the left in the screenshot below.

Missing focus state

When tabbing through the UI, it looks like there's no visual indicator for when a button in the button group is focused. I think this is a keyboard accessibility issue. This might be due to the component rendering a <label> element. Can we use a <button> instead? Looks like this was a direction taken in earlier improvements to accessibility for this component (#4056).

Missing hover state

Based on screenshots in #4142, I believe hover states should be supported for this component. If so, then maybe this is a regression? Not sure. Either way, I think we need hover states for the icon buttons in EuiButtonGroup. It would be even nicer if we rendered a tooltip on hover to explain what the button was for, since many people can find icons confusing or unclear.

[cchaos]

Thanks for the feedback. As a quick note, #4056 is the PR where there was an extensive re-work of this component and it's underlying elements for accessibility. The type of group you use multi vs single determines what is rendered. Multi-select button groups are buttons, but in order for the single type to behave properly they had to be a radio group, hence the label.

We're also still working through some of the regressions with tab focus outlines in the Amsterdam theme where I think you're specifically seeing these issues.

As for tooltips, I agree and it would be nice to add these as a baked-in option but for now, you can simply duplicate the label as the title property to use the browser's tooltip. See this CodeSandbox: https://codesandbox.io/s/naughty-darkness-r0xuz

[cjcenizal]

Thanks for the background and tip @cchaos! FWIW I just tested the k7 theme and it looks like hover states work fine, but the focus states are missing in that theme too. That's a great tip about providing the title property -- it'd be great to update the snippet to do that, too.