Badge allow these two events iconOnClick and onClick to trigger

[XavierM]

Summary

First of all, thanks to @cchaos for helping me and move this forward.

On Firefox and IE11 browser, when these two properties onClick and iconOnClick are provided on the Badge component, you will only get the event onClick working. This PR is fixing that for SIEM and Discover

Checklist

• This was checked in mobile
• This was checked in IE11
• This was checked in dark mode
• Any props added have proper autodocs
• Documentation examples were added
• A changelog entry exists and is marked appropriately
• This was checked for breaking changes and labeled appropriately
• Jest tests were updated or added to match the most common scenarios
• This was checked against keyboard-only and screenreader scenarios
• This required updates to Framer X components

[cchaos]

There were two problems happening in EuiBadge if provided both onClick and iconOnClick.

1. FF and IE don't bubble up an onClick inside of an onClick
2. The iconOnClick was adding an onClick directly to EuiIcon and therefore an <svg>

Since we can't just wrap the icon with a <button> tag and call it a day since that would mean a button inside of a button, we needed an edge case to be provided where if both onClick and iconOnClick were passed, that the buttons would be side by side therefore it made sense to turn the <span> that wraps the children that sit next to the icon into a <button> for this particular case.

[XavierM]

Would it be possible to backport this in 7.2?

[cchaos]

It looks like there's some style work to do since wrapping the children in a <button> tag resets all styles:

[cchaos]

@XavierM I have pushed a commit directly to your branch to fix the styles. It now looks correct:

[cchaos]

@XavierM I've pushed one more commit that just adding this callout in the documentation

You'll also need to create a changelog entry.

[chandlerprall]

code changes so far look fine, but keyboard navigation experience has been degraded:

Previously, tabbing to the icon highlights it

Now it does a weird box/outline that is barely visible (middle icon is focused)

When both onClick and onIconClick are present the badge does not receive an outline when focused, and the badge text's tab order comes after the icon - first tab selects icon & triggers onIconClick, second tab selects the badge context & triggers onClick

[cchaos]

Ahh I see the icon focus state styles now. Pushed a fix for that. I'm wasn't really sure how to deal with the button inside the badge focus state so I'm using :focus-within so any time any button (including the icon) is focused it will get the focus ring:

@snide / @ryankeairns Any thoughts on that?

[cchaos]

Ugh, it looks like :focus-within is not only not supported by IE, but it completely wipes the normal :focus state.

[thompsongl]

the badge text's tab order comes after the icon - first tab selects icon & triggers onIconClick, second tab selects the badge context & triggers onClick

This is still true with the latest changes. Seems like it should be reversed

[cchaos]

The latest in the great :focus epic:

Pretty hideous... Not sure what else to do...

[cchaos]

Alright final round with hover and focus states:

I left one :focus-within in for those that support it. In IE, it'll still show the focus ring on the normal Badge is a Button style, but it just won't show it in the other types. Which is really ok, since there are other states to indicate focus.

[chandlerprall]

Changes LGTM; pulled & tested locally