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.
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.